140 lines
6.6 KiB
Vue
140 lines
6.6 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
|
||
|
|
import {Lightning} from "@element-plus/icons-vue";
|
||
|
|
import type {ILedBaseSearch} from "@/interface/page/led/ILedBaseSearch.ts";
|
||
|
|
import {ref} from "vue";
|
||
|
|
import type {IAppBaseLed} from "@/model/table/IAppBaseLed.ts";
|
||
|
|
import LedBrandFormatter from "@/plugin/formatter/LedBrandFormatter.ts";
|
||
|
|
import TrueFalseTagStyleFormatter from "@/plugin/formatter/TrueFalseTagStyleFormatter.ts";
|
||
|
|
import LedColorTypeFormatter from "@/plugin/formatter/LedColorTypeFormatter.ts";
|
||
|
|
import MessageUtils from "@/utils/MessageUtils.ts";
|
||
|
|
import LedApi from "@/api/led.ts";
|
||
|
|
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
|
||
|
|
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
|
||
|
|
import AddLedComponent from "@/components/page/led/AddLedComponent.vue";
|
||
|
|
import LedDetailComponent from "@/components/page/led/LedDetailComponent.vue";
|
||
|
|
|
||
|
|
const ledSearch = ref<ILedBaseSearch>({ ledBrand: 0}); // 查询参数
|
||
|
|
const tableData = ref<IAppBaseLed[]>([]); // 表格数据
|
||
|
|
const ledBrandFormatter = new LedBrandFormatter();
|
||
|
|
const trueFalseTagStyleFormatter = new TrueFalseTagStyleFormatter();
|
||
|
|
const ledColorTypeFormatter = new LedColorTypeFormatter();
|
||
|
|
const showAdd = ref<boolean>(false); // 添加LED显示
|
||
|
|
const showDetail = ref<boolean>(false); // 详情LED显示
|
||
|
|
const detailData = ref<IAppBaseLed>({});// 详情LED数据
|
||
|
|
|
||
|
|
// 查询
|
||
|
|
const query = () => {
|
||
|
|
const loadingInstance = MessageUtils.loading("正在查询");
|
||
|
|
LedApi.queryLed(ledSearch.value).then((result) => {
|
||
|
|
const responseString = JSON.stringify(result.data);
|
||
|
|
const response = JSON.parse(responseString) as AppServeDataResponse<IAppBaseLed[]>;
|
||
|
|
if (response && response.code == AppServeResponseCodeEnum.SUCCESS && response.data != undefined) {
|
||
|
|
tableData.value = response.data;
|
||
|
|
MessageUtils.successMessage('查询成功');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
MessageUtils.warningMessageBox(response.msg, '警告');
|
||
|
|
}).catch(() => {}).finally(() => {
|
||
|
|
loadingInstance.close();
|
||
|
|
})
|
||
|
|
|
||
|
|
};
|
||
|
|
// 重置查询参数
|
||
|
|
const resetInput = () => {
|
||
|
|
ledSearch.value = { ledBrand: 0};
|
||
|
|
};
|
||
|
|
// 添加LED
|
||
|
|
const addLed = () => {
|
||
|
|
showAdd.value = true;
|
||
|
|
};
|
||
|
|
// 修改LED
|
||
|
|
const handleEdit = (index: number, row: IAppBaseLed) => {
|
||
|
|
detailData.value = {
|
||
|
|
id: row.id,
|
||
|
|
ledIp: row.ledIp,
|
||
|
|
ledBrand: row.ledBrand,
|
||
|
|
height: row.height,
|
||
|
|
width: row.width,
|
||
|
|
colorType: row.colorType,
|
||
|
|
location: row.location,
|
||
|
|
isExternal: row.isExternal,
|
||
|
|
remark: row.remark
|
||
|
|
};
|
||
|
|
showDetail.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div style="margin-left: 10px;margin-top: 10px; width: calc(100vw - 280px);">
|
||
|
|
<h3>LED 屏基础资料管理</h3>
|
||
|
|
<el-row class="searchCard">
|
||
|
|
<el-row style="width: 100%;">
|
||
|
|
<el-form class="searchForm" v-model="ledSearch" label-position="top" label-width="150px" inline>
|
||
|
|
<el-form-item label="LED IP 地址：" style="width: 250px;">
|
||
|
|
<el-input v-model="ledSearch.ledIp" placeholder="请输入 LED IP" clearable></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="LED 位置：" style="width: 250px;">
|
||
|
|
<el-input v-model="ledSearch.location" placeholder="请输入 LED 位置" clearable></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="LED 品牌：" style="width: 250px;">
|
||
|
|
<el-select v-model="ledSearch.ledBrand" placeholder="请选择 LED 品牌" style="width: 250px" clearable>
|
||
|
|
<el-option :key="0" label="灵信" :value="0"/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-row>
|
||
|
|
<el-row>
|
||
|
|
<el-button-group style="width: 100%;margin-left: 10px; margin-bottom: 10px">
|
||
|
|
<el-button type="primary" @click="query">查询/刷新</el-button>
|
||
|
|
<el-button type="warning" @click="resetInput">重置查询参数</el-button>
|
||
|
|
<el-button type="success" @click="addLed"><el-icon><Lightning /></el-icon>添加LED</el-button>
|
||
|
|
<!-- <el-button type="info" @click="">重载LED配置</el-button>-->
|
||
|
|
</el-button-group>
|
||
|
|
</el-row>
|
||
|
|
</el-row>
|
||
|
|
<el-row class="dataTable">
|
||
|
|
<el-table :data="tableData" stripe border style="width: 100%" max-height="calc(100vh - 270px)">
|
||
|
|
<el-table-column type="index" label="序号" width="100" align="center" show-overflow-tooltip />
|
||
|
|
<el-table-column prop="id" label="记录号" width="100" align="center" show-overflow-tooltip />
|
||
|
|
<el-table-column prop="ledIp" label="LED IP" align="center" min-width="150" show-overflow-tooltip/>
|
||
|
|
<el-table-column prop="ledBrand" label="LED 品牌" width="120" align="center" show-overflow-tooltip>
|
||
|
|
<template #default="scope">
|
||
|
|
<el-tag size="small" :type="ledBrandFormatter.ledBrandFormatter(scope.row.ledBrand).type">
|
||
|
|
{{ledBrandFormatter.ledBrandFormatter(scope.row.ledBrand).label}}</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="height" label="高度" align="center" min-width="150" show-overflow-tooltip/>
|
||
|
|
<el-table-column prop="width" label="宽度" align="center" min-width="150" show-overflow-tooltip/>
|
||
|
|
<el-table-column prop="colorType" label="颜色类型" width="120" align="center" show-overflow-tooltip>
|
||
|
|
<template #default="scope">
|
||
|
|
<el-tag effect="dark" size="small" round :type="ledColorTypeFormatter.ledColorTypeFormatter(scope.row.colorType).type">
|
||
|
|
{{ledColorTypeFormatter.ledColorTypeFormatter(scope.row.colorType).label}}</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="location" label="位置" align="center" width="150" show-overflow-tooltip/>
|
||
|
|
<el-table-column prop="isExternal" label="是否外部控制" width="120" align="center" show-overflow-tooltip>
|
||
|
|
<template #default="scope">
|
||
|
|
<el-tag effect="dark" size="small" round :type="trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(scope.row.isExternal).type">
|
||
|
|
{{trueFalseTagStyleFormatter.yesOrNoTagStyleFormatter(scope.row.isExternal).label}}</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="remark" label="备注" align="center" min-width="120" show-overflow-tooltip/>
|
||
|
|
<el-table-column label="操作" width="80" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
<!-- 添加LED显示-->
|
||
|
|
<AddLedComponent v-model="showAdd" @reLoadingTableData="query"/>
|
||
|
|
<!-- 详情数据-->
|
||
|
|
<LedDetailComponent v-model="showDetail" :form-data="detailData" @reLoadingTableData="query"/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|