|
|
@@ -0,0 +1,509 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, computed } from "vue"
|
|
|
+import { useRoute } from "vue-router"
|
|
|
+import { ElDatePicker, ElInput, ElSelect } from "element-plus"
|
|
|
+import Rs from "@/core/services/RequestService"
|
|
|
+import { dialog } from "@/core/utils/message"
|
|
|
+import moment from "moment"
|
|
|
+import DySelect from "@/components/select/DySelect.vue"
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const companyName = ref(route.query.name)
|
|
|
+const companyId = ref(route.query.id)
|
|
|
+const queryParams = ref({
|
|
|
+ company_id: companyId,
|
|
|
+})
|
|
|
+
|
|
|
+const table = ref()
|
|
|
+const cols = ref([
|
|
|
+ {
|
|
|
+ name: "名称",
|
|
|
+ field: "name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "监测点类型",
|
|
|
+ field: "type_name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "额定电流",
|
|
|
+ field: "rated_current",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "CT",
|
|
|
+ field: "ct",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "PT",
|
|
|
+ field: "pt",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "生产厂家",
|
|
|
+ field: "manufacturer",
|
|
|
+ },
|
|
|
+ { name: "操作", field: "action", width: 220 },
|
|
|
+])
|
|
|
+const emptyData = {
|
|
|
+ company_id: companyId.value,
|
|
|
+ id: "",
|
|
|
+ type: "",
|
|
|
+ name: "",
|
|
|
+ control: "0",
|
|
|
+ rated_current: "",
|
|
|
+ electric_id: "",
|
|
|
+ lampblack_id: "",
|
|
|
+ current_threshold: "",
|
|
|
+ air_volume: "",
|
|
|
+ ct: "",
|
|
|
+ pt: "",
|
|
|
+ manufacturer: "",
|
|
|
+ parent_id: "",
|
|
|
+ last_clean_time: new Date(),
|
|
|
+ sim: "",
|
|
|
+ sn: "",
|
|
|
+ device_manufacturer: "",
|
|
|
+}
|
|
|
+const modalDetail = ref()
|
|
|
+const modal = ref()
|
|
|
+const modalTitle = ref("")
|
|
|
+const labelWidth = 120
|
|
|
+const detailItems = computed(() => {
|
|
|
+ const items = [
|
|
|
+ {
|
|
|
+ field: "name",
|
|
|
+ label: "名称:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "type_name",
|
|
|
+ label: "设备类型:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ if (formData.value.type == 0) {
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "mn",
|
|
|
+ label: "MN:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "purifier_current_ia",
|
|
|
+ label: "净化器电流因子:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "fan_current_ia",
|
|
|
+ label: "风机电流因子:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "lampblack_smoke_density",
|
|
|
+ label: "油烟浓度因子:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "lampblack_pm25",
|
|
|
+ label: "颗粒物因子:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "lampblack_voc_density",
|
|
|
+ label: "非甲烷总烃因子:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ if (formData.value.type == 1 || formData.value.type == 3) {
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "lampblack_id",
|
|
|
+ label: "浓度编号:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "last_clean_time",
|
|
|
+ label: "上次清洗时间:",
|
|
|
+ labelWidth,
|
|
|
+ component: "slot",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ } else if (formData.value.type == 2) {
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "electric_id",
|
|
|
+ label: "电力编号:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "air_volume",
|
|
|
+ label: "风量:",
|
|
|
+ labelWidth,
|
|
|
+ component: "slot",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "rated_current",
|
|
|
+ label: "额定电流(A):",
|
|
|
+ labelWidth,
|
|
|
+ component: "slot",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "current_threshold",
|
|
|
+ label: "电流启停阈值:",
|
|
|
+ labelWidth,
|
|
|
+ component: "slot",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "ct",
|
|
|
+ label: "CT:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "pt",
|
|
|
+ label: "PT:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "manufacturer",
|
|
|
+ label: "生产厂家:",
|
|
|
+ labelWidth,
|
|
|
+ component: "innerText",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return items
|
|
|
+})
|
|
|
+const isEdit = ref(false)
|
|
|
+
|
|
|
+const formItems = computed(() => {
|
|
|
+ const items: any = [
|
|
|
+ {
|
|
|
+ field: "type",
|
|
|
+ label: "设备类型:",
|
|
|
+ placeholder: "请选择设备类型",
|
|
|
+ required: true,
|
|
|
+ class: "w-100",
|
|
|
+ component: DySelect,
|
|
|
+ props: {
|
|
|
+ url: "/sys/monitor/getMonitorTypeList",
|
|
|
+ configs: {
|
|
|
+ data: {
|
|
|
+ monitoring_type: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ disabled: isEdit.value,
|
|
|
+ },
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "name",
|
|
|
+ label: "名称:",
|
|
|
+ placeholder: "请输入名称",
|
|
|
+ required: true,
|
|
|
+ component: ElInput,
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ if (formData.value.type == "0") {
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "control",
|
|
|
+ label: "是否远控:",
|
|
|
+ placeholder: "请选择是否远控",
|
|
|
+ required: true,
|
|
|
+ component: ElSelect,
|
|
|
+ data: [
|
|
|
+ { label: "是", value: "1" },
|
|
|
+ { label: "否", value: "0" },
|
|
|
+ ],
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "sn",
|
|
|
+ label: "SN:",
|
|
|
+ placeholder: "请输入SN",
|
|
|
+ component: ElInput,
|
|
|
+ required: formData.value.control == "1",
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "sim",
|
|
|
+ label: "SIM:",
|
|
|
+ placeholder: "请输入SIM",
|
|
|
+ component: ElInput,
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ } else if (formData.value.type) {
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "parent_id",
|
|
|
+ label: "上级设施:",
|
|
|
+ placeholder: "请选择上级设施",
|
|
|
+ required: true,
|
|
|
+ class: "w-100",
|
|
|
+ component: DySelect,
|
|
|
+ props: {
|
|
|
+ url: "/sys/monitor/getFacilitiesList",
|
|
|
+ method: "post",
|
|
|
+ configs: {
|
|
|
+ data: {
|
|
|
+ company_id: companyId.value,
|
|
|
+ device_manufacturer: formData.value.device_manufacturer,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ disabled: isEdit.value,
|
|
|
+ },
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ if (formData.value.type == "1" || formData.value.type == "3") {
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "last_clean_time",
|
|
|
+ label: "上次清洗时间:",
|
|
|
+ component: "slot",
|
|
|
+ required: true,
|
|
|
+ span: 12,
|
|
|
+ class: "w-100",
|
|
|
+ props: {
|
|
|
+ // placeholder: "请选择上次清洗时间",
|
|
|
+ // // disabledDate: (current: any) => {
|
|
|
+ // // current > moment().endOf("day")
|
|
|
+ // // },
|
|
|
+ // clearable: true,
|
|
|
+ // type: "date",
|
|
|
+ // disabled: isEdit.value,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ } else if (formData.value.type == "2") {
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "air_volume",
|
|
|
+ label: "风量m³/h:",
|
|
|
+ placeholder: "请输入风量",
|
|
|
+ component: ElInput,
|
|
|
+ required: true,
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ items.push(
|
|
|
+ ...[
|
|
|
+ {
|
|
|
+ field: "ct",
|
|
|
+ label: "CT:",
|
|
|
+ placeholder: "请输入CT",
|
|
|
+ component: ElInput,
|
|
|
+ required: true,
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "pt",
|
|
|
+ label: "PT:",
|
|
|
+ placeholder: "请输入PT",
|
|
|
+ component: ElInput,
|
|
|
+ required: true,
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "rated_current",
|
|
|
+ label: "额定电流(A):",
|
|
|
+ placeholder: "请输入额定电流",
|
|
|
+ component: ElInput,
|
|
|
+ required: true,
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "current_threshold",
|
|
|
+ label: "电流启停阈值(A):",
|
|
|
+ placeholder: "请输入电流启停阈值",
|
|
|
+ labelWidth: 135,
|
|
|
+ component: ElInput,
|
|
|
+ required: true,
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: "manufacturer",
|
|
|
+ label: "生产厂家:",
|
|
|
+ placeholder: "请输入生产厂家",
|
|
|
+ component: ElInput,
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return items
|
|
|
+})
|
|
|
+const formData = ref<any>({})
|
|
|
+
|
|
|
+function detail(row: any) {
|
|
|
+ formData.value = Object.assign({}, row)
|
|
|
+ if (row.factor) {
|
|
|
+ const factor = JSON.parse(row.factor)
|
|
|
+ formData.value.fan_current_ia = factor.fan_current_ia
|
|
|
+ formData.value.lampblack_pm25 = factor.lampblack_pm25
|
|
|
+ formData.value.lampblack_smoke_density = factor.lampblack_smoke_density
|
|
|
+ formData.value.lampblack_voc_density = factor.lampblack_voc_density
|
|
|
+ formData.value.purifier_current_ia = factor.purifier_current_ia
|
|
|
+ }
|
|
|
+ modalDetail.value.show()
|
|
|
+}
|
|
|
+
|
|
|
+function add() {
|
|
|
+ modalTitle.value = "新增设备"
|
|
|
+ isEdit.value = false
|
|
|
+ formData.value = Object.assign({}, emptyData)
|
|
|
+ modal.value.show()
|
|
|
+}
|
|
|
+function edit(row: any) {
|
|
|
+ isEdit.value = true
|
|
|
+ modalTitle.value = "编辑设备"
|
|
|
+ formData.value = Object.assign({}, row)
|
|
|
+ formData.value.type = row.type + ""
|
|
|
+ formData.value.parent_id = row.parent_id + ""
|
|
|
+ formData.value.last_clean_time = moment(row.last_clean_time, "YYYYMMDDHHmmss").format("YYYY-MM-DD")
|
|
|
+ modal.value.show()
|
|
|
+}
|
|
|
+function onSave() {
|
|
|
+ formData.value.last_clean_time = ""
|
|
|
+ if (formData.value.type == 0) {
|
|
|
+ formData.value.parent_id = -1
|
|
|
+ } else {
|
|
|
+ delete formData.value.control
|
|
|
+ if (formData.value.type == 1 || formData.value.type == 3) {
|
|
|
+ formData.value.last_clean_time = moment(formData.value.last_clean_time).format("YYYYMMDD120000")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (formData.value.id) {
|
|
|
+ Rs.post("/sys/monitor/updateMonitor", { data: formData.value }).then(() => {
|
|
|
+ table.value.search()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ formData.value.device_manufacturer = 1
|
|
|
+ Rs.post("/sys/monitor/addMonitor", { data: formData.value }).then(() => {
|
|
|
+ table.value.search()
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+function delRow(row: any) {
|
|
|
+ dialog.confirm(`确定删除设备${row.name}吗?`, "删除设备", (confirme: any) => {
|
|
|
+ if (confirme.isConfirmed) {
|
|
|
+ Rs.post("/sys/monitor/delMonitorByIds", { data: [row.id] }).then(() => {
|
|
|
+ table.value.search()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <VbTreeTable
|
|
|
+ ref="table"
|
|
|
+ :header="cols"
|
|
|
+ url="/sys/monitor/getMonitorTreeForPage"
|
|
|
+ method="post"
|
|
|
+ key-field="id"
|
|
|
+ children-field="children"
|
|
|
+ :expand-depth="1"
|
|
|
+ :interval-left="10"
|
|
|
+ :query-params="queryParams"
|
|
|
+ :has-checkbox="false"
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <template v-slot:table-tool>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <h2>{{ companyName }}</h2>
|
|
|
+ </el-col>
|
|
|
+ <div style="margin-left: auto; margin-right: 20px">
|
|
|
+ <el-button class="ms-3 mt-0 btn btn-sm btn-success" @click="add">
|
|
|
+ <i class="fa-solid fa-plus"></i>
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #action="{ row }">
|
|
|
+ <span class="table-action" @click="detail(row)">详情</span>
|
|
|
+ <span class="table-action" @click="edit(row)">编辑</span>
|
|
|
+ <span class="table-action" @click="delRow(row)">删除</span>
|
|
|
+ </template>
|
|
|
+ </VbTreeTable>
|
|
|
+ <VbModal
|
|
|
+ v-model:modal="modalDetail"
|
|
|
+ v-model:form-data="formData"
|
|
|
+ :form-items="(detailItems as any)"
|
|
|
+ title="设备详情"
|
|
|
+ form-label-width="120"
|
|
|
+ >
|
|
|
+ <template #last_clean_time_form>
|
|
|
+ {{ moment(formData.last_clean_time, "YYYYMMDDHHmmss").format("YYYY-MM-DD") }}
|
|
|
+ </template>
|
|
|
+ <template #rated_current_form>{{ formData.rated_current }} A</template>
|
|
|
+ <template #current_threshold_form>{{ formData.current_threshold }} A</template>
|
|
|
+ <template #air_volume_form>{{ formData.air_volume }} m³/h</template>
|
|
|
+ </VbModal>
|
|
|
+ <VbModal
|
|
|
+ v-model:modal="modal"
|
|
|
+ v-model:form-data="formData"
|
|
|
+ :form-items="(formItems as any)"
|
|
|
+ :title="modalTitle"
|
|
|
+ form-label-width="120"
|
|
|
+ @confirm="onSave"
|
|
|
+ >
|
|
|
+ <template #last_clean_time_form>
|
|
|
+ <el-date-picker :model-value="formData.last_clean_time" class="w-100" :disabled="isEdit"></el-date-picker>
|
|
|
+ </template>
|
|
|
+ </VbModal>
|
|
|
+</template>
|