诊断阈值解绑和绑定

src/api/iot/diagnoseThreshold.js

@@ -17,3 +17,23 @@ export function thresholdTypeList() {
     method: 'get',
   })
 }
+
+
+//绑定阈值
+export function bindThreshold(query) {
+  return request({
+    url: '/iot/diagnoseThreshold/bindThreshold',
+    method: 'post',
+    data: query
+  })
+}
+
+
+//解绑阈值
+export function unbindThreshold(query) {
+  return request({
+    url: '/iot/diagnoseThreshold/unbindThreshold',
+    method: 'post',
+    data: query
+  })
+}

src/views/iot/diagnoseMission/dialog.detail.vue

@@ -1,112 +0,0 @@
-<template>
-  <DialogCom
-    title="上报历史"
-    :visible.sync="isShow"
-    class="g-dialog-select-safe-check"
-    :close-on-click-modal="false"
-    width="55%"
-    top="10vh"
-    append-to-body
-  >
-    <div class="el-dialog-div" style="margin-bottom:20px">
-      <g-search-table
-        ref="st"
-        url="/iot/sensor/data/log"
-        method="post"
-        :search-data="search"
-        :pageable="true"
-        :select="true"
-        :select-default="selectList"
-        :drag="false"
-        @select="onSelect"
-      >
-        <!-- 搜索 -->
-        <template slot="searchs">
-          <el-form-item class="searchTitle" label="上报时间">
-            <DataRangePicker
-              v-model="search.dateRange"
-              key="daterange"
-              type="daterange"
-              :clearable="timeClearable"
-            />
-          </el-form-item>
-        </template>
-
-        <!-- 表格 -->
-        <template slot="columns">
-          <el-table-column label="设备名称" align="center" prop="deviceName" width="300"/>
-          <el-table-column label="上报时间" prop="createTime" width="300"/>
-          <el-table-column label="上报内容" prop="info" width="300"/>
-        </template>
-      </g-search-table>
-    </div>
-
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="onHide">关 闭</el-button>
-    </div>
-  </DialogCom>
-</template>
-<script>
-import GSearchTable from "@/components/table/gx.search.table.vue";
-import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
-
-export default {
-  components: {GSearchTable, DataRangePicker},
-  data() {
-    return {
-      isShow: false,
-      selectList: [],
-      search: null,
-      timeClearable: true,
-    };
-  },
-  computed: {},
-  watch: {
-    orgId(newval) {
-      this.search.orgId = newval;
-    },
-    dateRange(newval) {
-      this.search.dateRange = newval;
-    },
-  },
-  props: {
-    defaultSelect: {
-      type: Array
-    },
-    orgId: {},
-    dateRange: [],
-  },
-  methods: {
-    show(row) {
-      this.search = this.initSearchData(row);
-      this.isShow = true;
-      this.selectList = this.defaultSelect;
-    },
-    onHide() {
-      this.isShow = false;
-    },
-    onSelect(item) {
-      this.selectList = item;
-    },
-    initSearchData(row) {
-      let data = {"deviceStatusId": row.deviceStatusId, "orgId": row.orgId, "dateRange": []};
-      return data;
-    },
-    emptySearch() {
-      return {
-        deviceCode: null,
-        orgId: this.$store.getters.orgId,
-      };
-    },
-
-  },
-  mounted() {
-
-  },
-};
-</script>
-<style lang="scss" scoped>
-.el-dialog-div {
-  overflow: auto;
-}
-</style>

src/views/iot/diagnoseMission/index.vue

@@ -145,19 +145,18 @@
         </div>
       </el-col>
     </el-row>
-    <dialog-deal-alarm ref="dealAlarmDialog" @success="getList()"></dialog-deal-alarm>
+    <dialog-bind-mission ref="bindMissionDialog" @success="getList()"></dialog-bind-mission>
   </div>
 </template>
 
 <script>
 import { list,missionTypeList,unbindMission} from "@/api/iot/diagnoseMission";
-import DetailDialog  from "./dialog.detail.vue";
-import DialogDealAlarm from "./dialog.dealAlarm.vue";
+import DialogBindMission from "./dialog.bindMission.vue";
 import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
 import { mapGetters } from "vuex";
 import dayjs from "dayjs";
 export default {
-  components: { OrgTree,DialogDealAlarm },
+  components: { OrgTree,DialogBindMission },
   name: "Task",
   dicts: ["sys_org_type",'sensor_alarm_status','sensor_device_type'],
   data() {
@@ -303,7 +302,7 @@ export default {
     },
     /** 绑定任务 */
     bindMission() {
-      this.$refs["dealAlarmDialog"].show(this.queryParams, this.deviceTypes);
+      this.$refs["bindMissionDialog"].show(this.queryParams, this.deviceTypes);
     },
     /** 解绑任务 */
     unbindMission() {
@@ -313,10 +312,6 @@ export default {
            this.getList();
       });
     },
-    /** 修改按钮操作 */
-    lookView(row) {
-      this.$refs["detailDialog"].show(row);
-    },
 
     /** 导出按钮操作 */
     handleExport() {

src/views/iot/diagnoseThreshold/dialog.bindThreshold.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="rule-type">
+    <DialogCom
+      title="绑定阈值关联摄像机"
+      :visible.sync="isShow"
+      @close="onHide"
+      width="800px"
+    >
+      <div class="page-body">
+        <el-form
+          :model="formData"
+          :rules="formDataRules"
+          size="small"
+          ref="form"
+          label-position="right"
+          label-width="150px"
+          label-prefix=":"
+        >
+          <el-form-item label="阈值名称" prop="bindThresholdCodes">
+            <el-select
+              label="阈值名称"
+              v-model="formData.bindThresholdCodes"
+              placeholder="请选择阈值名称"
+              clearable
+              multiple
+              style="width: 80%;"
+            >
+            <el-option
+                    v-for="dict in deviceTypes"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+        <el-button @click="isShow = false">取消</el-button>
+      </div>
+    </DialogCom>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, mapGetters } from "vuex";
+import {thresholdTypeList,bindThreshold} from "@/api/iot/diagnoseThreshold";
+import { listIdName } from "@/api/system/device";
+export default {
+  dicts: ["alarm_deal_type"],
+  data() {
+    return {
+      id: null,
+      isShow: false,
+      formData: this.reset(),
+      formDataRules: {
+        bindThresholdCodes: [{ required: true, message: "请选择阈值名称" }]
+      },
+      // 查询参数
+      queryParams: {
+        checkSub: true,
+        missionCode: null,
+        state: null,
+        bindThresholdCodes: [],
+      },
+      deviceTypes: [],
+      labelStyle: {
+        color: "#000",
+        "text-align": "center",
+        height: "40px",
+        "min-width": "150px",
+        "word-break": "keep-all",
+      },
+    };
+  },
+  props: {},
+  computed: {
+    ...mapGetters(["orgId"]),
+  },
+  methods: {
+    ...mapMutations([]),
+    initDeviceTypeList(){
+          thresholdTypeList()
+            .then((r) => {
+              // 使用 map 而不是 filter 进行数据转换
+              const transformedList = r.map((item) => ({
+                value: item.value,
+                label: item.label,
+                type: item.type,
+              }));
+
+              // 将转换后的数据推送到 this.deviceTypeList
+              this.deviceTypes.push(...transformedList);
+            })
+            .catch((error) => {
+              // 处理错误
+              console.error('Error fetching device type list:', error);
+            });
+    },
+    reset() {
+      return {
+        bindThresholdCodes:null,
+      };
+    },
+    async show(queryParams, deviceTypes) {
+      this.queryParams = queryParams;
+      this.deviceTypes.push(deviceTypes);
+      this.isShow = true;
+    },
+    // 事件
+    onHide() {
+      this.$refs.form.resetFields();
+      this.formData = this.reset();
+    },
+    onSubmit() {
+      this.$refs.form.validate(async (isValidate) => {
+        if (!isValidate) return;
+        this.queryParams.bindThresholdCodes = this.formData.bindThresholdCodes;
+        await bindThreshold(this.queryParams);
+        this.$emit("success");
+        this.isShow = false;
+      });
+    },
+  },
+  created() {
+      this.initDeviceTypeList();
+  },
+  mounted() {},
+  components: { },
+};
+</script>
+
+<style lang="scss" scoped>
+.brand_info {
+  .el-form {
+    width: 600px;
+    padding-top: 40px;
+  }
+}
+</style>

src/views/iot/diagnoseThreshold/dialog.detail.vue

@@ -1,112 +0,0 @@
-<template>
-  <DialogCom
-    title="上报历史"
-    :visible.sync="isShow"
-    class="g-dialog-select-safe-check"
-    :close-on-click-modal="false"
-    width="55%"
-    top="10vh"
-    append-to-body
-  >
-    <div class="el-dialog-div" style="margin-bottom:20px">
-      <g-search-table
-        ref="st"
-        url="/iot/sensor/data/log"
-        method="post"
-        :search-data="search"
-        :pageable="true"
-        :select="true"
-        :select-default="selectList"
-        :drag="false"
-        @select="onSelect"
-      >
-        <!-- 搜索 -->
-        <template slot="searchs">
-          <el-form-item class="searchTitle" label="上报时间">
-            <DataRangePicker
-              v-model="search.dateRange"
-              key="daterange"
-              type="daterange"
-              :clearable="timeClearable"
-            />
-          </el-form-item>
-        </template>
-
-        <!-- 表格 -->
-        <template slot="columns">
-          <el-table-column label="设备名称" align="center" prop="deviceName" width="300"/>
-          <el-table-column label="上报时间" prop="createTime" width="300"/>
-          <el-table-column label="上报内容" prop="info" width="300"/>
-        </template>
-      </g-search-table>
-    </div>
-
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="onHide">关 闭</el-button>
-    </div>
-  </DialogCom>
-</template>
-<script>
-import GSearchTable from "@/components/table/gx.search.table.vue";
-import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
-
-export default {
-  components: {GSearchTable, DataRangePicker},
-  data() {
-    return {
-      isShow: false,
-      selectList: [],
-      search: null,
-      timeClearable: true,
-    };
-  },
-  computed: {},
-  watch: {
-    orgId(newval) {
-      this.search.orgId = newval;
-    },
-    dateRange(newval) {
-      this.search.dateRange = newval;
-    },
-  },
-  props: {
-    defaultSelect: {
-      type: Array
-    },
-    orgId: {},
-    dateRange: [],
-  },
-  methods: {
-    show(row) {
-      this.search = this.initSearchData(row);
-      this.isShow = true;
-      this.selectList = this.defaultSelect;
-    },
-    onHide() {
-      this.isShow = false;
-    },
-    onSelect(item) {
-      this.selectList = item;
-    },
-    initSearchData(row) {
-      let data = {"deviceStatusId": row.deviceStatusId, "orgId": row.orgId, "dateRange": []};
-      return data;
-    },
-    emptySearch() {
-      return {
-        deviceCode: null,
-        orgId: this.$store.getters.orgId,
-      };
-    },
-
-  },
-  mounted() {
-
-  },
-};
-</script>
-<style lang="scss" scoped>
-.el-dialog-div {
-  overflow: auto;
-}
-</style>

src/views/iot/diagnoseThreshold/dialog.unbindThreshold.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="rule-type">
+    <DialogCom
+      title="解绑阈值关联摄像机"
+      :visible.sync="isShow"
+      @close="onHide"
+      width="800px"
+    >
+      <div class="page-body">
+        <el-form
+          :model="formData"
+          :rules="formDataRules"
+          size="small"
+          ref="form"
+          label-position="right"
+          label-width="150px"
+          label-prefix=":"
+        >
+          <el-form-item label="阈值名称" prop="bindThresholdCodes">
+            <el-select
+              label="阈值名称"
+              v-model="formData.bindThresholdCodes"
+              placeholder="请选择阈值名称"
+              clearable
+              multiple
+              style="width: 80%;"
+            >
+            <el-option
+                    v-for="dict in deviceTypes"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+        <el-button @click="isShow = false">取消</el-button>
+      </div>
+    </DialogCom>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, mapGetters } from "vuex";
+import {thresholdTypeList,unbindThreshold} from "@/api/iot/diagnoseThreshold";
+import { listIdName } from "@/api/system/device";
+export default {
+  dicts: ["alarm_deal_type"],
+  data() {
+    return {
+      id: null,
+      isShow: false,
+      formData: this.reset(),
+      formDataRules: {
+        bindThresholdCodes: [{ required: true, message: "请选择阈值名称" }]
+      },
+      // 查询参数
+      queryParams: {
+        checkSub: true,
+        missionCode: null,
+        state: null,
+        bindThresholdCodes: [],
+      },
+      deviceTypes: [],
+      labelStyle: {
+        color: "#000",
+        "text-align": "center",
+        height: "40px",
+        "min-width": "150px",
+        "word-break": "keep-all",
+      },
+    };
+  },
+  props: {},
+  computed: {
+    ...mapGetters(["orgId"]),
+  },
+  methods: {
+    ...mapMutations([]),
+    initDeviceTypeList(){
+          thresholdTypeList()
+            .then((r) => {
+              // 使用 map 而不是 filter 进行数据转换
+              const transformedList = r.map((item) => ({
+                value: item.value,
+                label: item.label,
+                type: item.type,
+              }));
+
+              // 将转换后的数据推送到 this.deviceTypeList
+              this.deviceTypes.push(...transformedList);
+            })
+            .catch((error) => {
+              // 处理错误
+              console.error('Error fetching device type list:', error);
+            });
+    },
+    reset() {
+      return {
+        bindThresholdCodes:null,
+      };
+    },
+    async show(queryParams, deviceTypes) {
+      this.queryParams = queryParams;
+      this.deviceTypes.push(deviceTypes);
+      this.isShow = true;
+    },
+    // 事件
+    onHide() {
+      this.$refs.form.resetFields();
+      this.formData = this.reset();
+    },
+    onSubmit() {
+      this.$refs.form.validate(async (isValidate) => {
+        if (!isValidate) return;
+        this.queryParams.bindThresholdCodes = this.formData.bindThresholdCodes;
+        await unbindThreshold(this.queryParams);
+        this.$emit("success");
+        this.isShow = false;
+      });
+    },
+  },
+  created() {
+      this.initDeviceTypeList();
+  },
+  mounted() {},
+  components: { },
+};
+</script>
+
+<style lang="scss" scoped>
+.brand_info {
+  .el-form {
+    width: 600px;
+    padding-top: 40px;
+  }
+}
+</style>

src/views/iot/diagnoseThreshold/index.vue

@@ -76,7 +76,24 @@
                   >重置
                 </el-button>
               </el-col>
-
+              <el-col :span="1.5">
+                <el-button
+                  type="primary"
+                  icon="el-icon-refresh"
+                  size="mini"
+                  @click="unbindThreshold()"
+                  >解绑阈值
+                </el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button
+                  type="primary"
+                  icon="el-icon-refresh"
+                  size="mini"
+                  @click="bindThreshold()"
+                  >绑定阈值
+                </el-button>
+              </el-col>
 
               <el-col :span="1.5">
                 <el-button
@@ -118,7 +135,6 @@
             <el-table-column label="所属主机" align="center" prop="hostName" width="280"/>
             <el-table-column label="阈值" align="center" prop="thresholdName" width="380"/>
           </el-table>
-          <DetailDialog ref="detailDialog" @success="refresh(true)"></DetailDialog>
           <pagination
             v-show="total > 0"
             :total="total"
@@ -129,18 +145,20 @@
         </div>
       </el-col>
     </el-row>
+    <dialog-bind-threshold ref="bindThresholdDialog" @success="getList()"></dialog-bind-threshold>
+    <dialog-unbind-threshold ref="unbindThresholdDialog" @success="getList()"></dialog-unbind-threshold>
   </div>
 </template>
 
 <script>
 import { list,thresholdTypeList} from "@/api/iot/diagnoseThreshold";
-import  DetailDialog  from "./dialog.detail.vue";
+import DialogBindThreshold from "./dialog.bindThreshold.vue";
+import DialogUnbindThreshold  from "./dialog.unbindThreshold.vue";
 import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
-import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
 import { mapGetters } from "vuex";
 import dayjs from "dayjs";
 export default {
-  components: { OrgTree, DataRangePicker,DetailDialog },
+  components: { OrgTree,DialogBindThreshold,DialogUnbindThreshold},
   name: "Task",
   dicts: ["sys_org_type",'sensor_alarm_status','sensor_device_type'],
   data() {
@@ -284,9 +302,13 @@ export default {
       this.handleQuery();
     },
 
-    /** 修改按钮操作 */
-    lookView(row) {
-      this.$refs["detailDialog"].show(row);
+    /** 绑定阈值 */
+    bindThreshold() {
+      this.$refs["bindThresholdDialog"].show(this.queryParams, this.deviceTypes);
+    },
+    /** 解绑阈值 */
+    unbindThreshold() {
+      this.$refs["unbindThresholdDialog"].show(this.queryParams, this.deviceTypes);
     },
 
     /** 导出按钮操作 */