luogang 9 місяців тому
батько
коміт
359f6291d4

+ 158 - 194
ems-ui/src/views/alarm/alarm-info/index.vue

@@ -1,149 +1,114 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="所属服务区" prop="areaCode" label-width="100ox">
-        <el-select v-model="queryParams.areaCode"  >
-          <el-option v-for="item in areaOptions" :label="item.label" :value="item.id" :key="item.id" />
-        </el-select>
-      </el-form-item>
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" :expand-on-click-node="false" :filter-node-method="filterNode"
+            node-key="id" highlight-current @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="告警类型" prop="alarmType">
+            <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
+              <el-option v-for="dict in dict.type.alarm_type" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="子系统" prop="systemCode">
+            <el-select v-model="queryParams.systemCode" placeholder="请选择子系统">
+              <el-option v-for="subsystem in subsystemList" :key="subsystem.systemCode" :label="subsystem.systemName"
+                :value="subsystem.systemCode"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="告警状态" prop="alarmState">
+            <el-select v-model="queryParams.alarmState" placeholder="请选择告警状态">
+              <el-option v-for="dict in dict.type.alarm_state" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
 
-      <el-form-item label="告警类型" prop="alarmType">
-        <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
-          <el-option
-              v-for="dict in dict.type.alarm_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="子系统" prop="systemCode">
-        <el-select v-model="queryParams.systemCode" placeholder="请选择子系统">
-          <el-option
-              v-for="subsystem in subsystemList"
-              :key="subsystem.systemCode"
-              :label="subsystem.systemName"
-              :value="subsystem.systemCode"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="告警状态" prop="alarmState">
-        <el-select v-model="queryParams.alarmState" placeholder="请选择告警状态">
-          <el-option
-              v-for="dict in dict.type.alarm_state"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasPermi="['ems:alarm-info:add']">新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+              v-hasPermi="['ems:alarm-info:edit']">修改
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+              v-hasPermi="['ems:alarm-info:remove']">删除
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+              v-hasPermi="['ems:alarm-info:export']">导出
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['ems:alarm-info:add']"
-        >新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['ems:alarm-info:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['ems:alarm-info:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['ems:alarm-info:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+        <el-table v-loading="loading" :data="alarmInfoList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="园区代码" align="left" prop="areaCode" />
+          <el-table-column label="子系统" align="center" prop="subSystemName" />
+          <el-table-column label="对象类型" align="center" prop="objType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.obj_type" :value="scope.row.objType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="对象代码" align="center" prop="objCode" />
+          <el-table-column label="告警时间" align="center" prop="alarmDate" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.alarmDate, '{y}-{m}-{d}') + " " + parseTime(scope.row.alarmTime,
+                '{hh}:{mm}:{s}')}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="告警代码" align="center" prop="alarmCode" />
+          <el-table-column label="告警描述" align="center" prop="alarmMsg" />
+          <el-table-column label="告警类型" align="center" prop="alarmType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.alarm_type" :value="scope.row.alarmType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="告警状态" align="center" prop="alarmState">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['ems:alarm-info:edit']">修改
+              </el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                @click="handleDelete(scope.row)" v-hasPermi="['basecfg:alarm-info:remove']">
+                删除</el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
 
-    <el-table v-loading="loading" :data="alarmInfoList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="园区代码" align="left" prop="areaCode" />
-      <el-table-column label="子系统" align="center" prop="subSystemName" />
-      <el-table-column label="对象类型" align="center" prop="objType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.obj_type" :value="scope.row.objType" />
-        </template>
-      </el-table-column>
-      <el-table-column label="对象代码" align="center" prop="objCode" />
-      <el-table-column label="告警时间" align="center" prop="alarmDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.alarmDate, '{y}-{m}-{d}') +" "+ parseTime(scope.row.alarmTime, '{hh}:{mm}:{s}')}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警代码" align="center" prop="alarmCode" />
-      <el-table-column label="告警描述" align="center" prop="alarmMsg" />
-      <el-table-column label="告警类型" align="center" prop="alarmType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_type" :value="scope.row.alarmType" />
-        </template>
-      </el-table-column>
-      <el-table-column label="告警状态" align="center" prop="alarmState">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState" />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['ems:alarm-info:edit']"
-          >修改
-          </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['basecfg:alarm-info:remove']">
-            删除</el-button>
+      </el-col></el-row>
 
-        </template>
-      </el-table-column>
-    </el-table>
 
-    <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-    />
 
     <!-- 添加或修改能源设施告警对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -153,37 +118,23 @@
         </el-form-item>
         <el-form-item label="对象类型" prop="objType">
           <el-select v-model="form.objType" placeholder="请选择对象类型">
-            <el-option
-                v-for="dict in dict.type.obj_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.obj_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="对象代码" prop="objCode">
           <el-input v-model="form.objCode" placeholder="请输入对象代码" />
         </el-form-item>
         <el-form-item label="告警时间" prop="alarmTime">
-          <el-date-picker
-              v-model="form.alarmTime"
-              type="datetime"
-              format="yyyy-MM-dd HH:mm"
-              value-format="yyyy-MM-dd HH:mm:00"
-              :style="{width: '100%'}"
-              placeholder="请选择告警时间"
-              @change="dateChange" clearable
-          >
+          <el-date-picker v-model="form.alarmTime" type="datetime" format="yyyy-MM-dd HH:mm"
+            value-format="yyyy-MM-dd HH:mm:00" :style="{ width: '100%' }" placeholder="请选择告警时间" @change="dateChange"
+            clearable>
           </el-date-picker>
         </el-form-item>
         <el-form-item label="子系统" prop="systemCode">
           <el-select v-model="form.systemCode" placeholder="请选择子系统">
-            <el-option
-                v-for="subsystem in subsystemList"
-                :key="subsystem.systemCode"
-                :label="subsystem.systemName"
-                :value="subsystem.systemCode"
-            ></el-option>
+            <el-option v-for="subsystem in subsystemList" :key="subsystem.systemCode" :label="subsystem.systemName"
+              :value="subsystem.systemCode"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="告警代码" prop="alarmCode">
@@ -194,22 +145,14 @@
         </el-form-item>
         <el-form-item label="告警类型" prop="alarmType">
           <el-select v-model="form.alarmType" placeholder="请选择告警类型">
-            <el-option
-                v-for="dict in dict.type.alarm_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.alarm_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="告警状态" prop="alarmState">
           <el-select v-model="form.alarmState" placeholder="请选择告警状态">
-            <el-option
-                v-for="dict in dict.type.alarm_state"
-                :key="dict.value"
-                :label="dict.label"
-                :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.alarm_state" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
       </el-form>
@@ -222,15 +165,15 @@
 </template>
 
 <script>
-import { listSubsystem } from '@/api/adapter/subsystem';
-import { addAlarmInfo, delAlarmInfo, getAlarmInfo, listAlarmInfo, updateAlarmInfo } from '@/api/alarm/alarm-info';
+import {listSubsystem} from '@/api/adapter/subsystem';
+import {addAlarmInfo, delAlarmInfo, getAlarmInfo, listAlarmInfo, updateAlarmInfo} from '@/api/alarm/alarm-info';
 import dayjs from 'dayjs';
-import { areaTreeSelect } from '@/api/basecfg/area'
+import {areaTreeSelect} from '@/api/basecfg/area'
 
 export default {
   name: 'Alarm-info',
   dicts: ['obj_type', 'alarm_type', 'alarm_state'],
-  data() {
+  data () {
     return {
       subsystemList: [],
       // 遮罩层
@@ -318,16 +261,24 @@ export default {
           },
         ],
       },
+      areaName: undefined,
+      areaOptions: [],
     };
   },
-  created() {
+  watch: {
+     // 根据名称筛选区域树
+     areaName (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created () {
     this.getAreaTree("Area");
     this.getList();
     this.getSubList();
   },
   methods: {
     /** 查询能源设施告警列表 */
-    getList() {
+    getList () {
       this.loading = true;
       listAlarmInfo(this.queryParams).then(response => {
         this.alarmInfoList = response.rows;
@@ -336,12 +287,12 @@ export default {
       });
     },
     // 取消按钮
-    cancel() {
+    cancel () {
       this.open = false;
       this.reset();
     },
     // 表单重置
-    reset() {
+    reset () {
       this.form = {
         id: null,
         areaCode: null,
@@ -355,42 +306,42 @@ export default {
       };
       this.resetForm('form');
     },
-    async getSubList() {
-      const { rows } = await listSubsystem({
+    async getSubList () {
+      const {rows} = await listSubsystem({
         pageNum: 1,
         pageSize: 999,
       });
       this.subsystemList = rows;
     },
-    dateChange(val) {
+    dateChange (val) {
       this.$refs.form.alarmTime = val;
       this.$refs.form.alarmDate = dayjs(val).format('YYYY-MM-DD');
       this.form.alarmDate = dayjs(val).format('YYYY-MM-DD');
     },
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    resetQuery () {
       this.resetForm('queryForm');
       this.handleQuery();
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange (selection) {
       this.ids = selection.map(item => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd () {
       this.reset();
       this.open = true;
       this.title = '添加能源设施告警';
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate (row) {
       this.reset();
       const id = row.id || this.ids;
       getAlarmInfo(id).then(response => {
@@ -400,7 +351,7 @@ export default {
       });
     },
     /** 提交按钮 */
-    submitForm() {
+    submitForm () {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
@@ -420,26 +371,39 @@ export default {
       });
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
+    handleDelete (row) {
       const ids = row.id || this.ids;
       this.$modal.confirm('是否确认删除能源设施告警编号为"' + ids + '"的数据项?').then(function () {
         return delAlarmInfo(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
-    handleExport() {
+    handleExport () {
       this.download('ems/alarm-info/export', {
         ...this.queryParams,
       }, `alarm-info_${new Date().getTime()}.xlsx`);
     },
-    getAreaTree(tier) {
+    getAreaTree (tier) {
       areaTreeSelect(tier).then(response => {
         this.areaOptions = response.data;
+        this.queryParams.areaCode =response.data[0].id
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(response.data[0].id)
+        })
       });
-    }
+    },
+     // 筛选节点
+     filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.queryParams.areaCode = data.id
+      this.getList()
+    },
   },
 };
 </script>

+ 153 - 173
ems-ui/src/views/alarm/index.vue

@@ -1,141 +1,104 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="策略名称" prop="policyName">
-        <el-input
-          v-model="queryParams.policyName"
-          placeholder="请输入策略名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="对象类型" prop="alarmObjType">
-        <el-select v-model="queryParams.alarmObjType" placeholder="请选择告警对象类型" clearable>
-          <el-option
-            v-for="dict in dict.type.obj_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="告警代码" prop="alarmCode">
-        <el-input
-          v-model="queryParams.alarmCode"
-          placeholder="请输入告警代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="告警类型" prop="alarmType">
-        <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
-          <el-option
-            v-for="dict in dict.type.alarm_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['ems:alarm-strategy:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['ems:alarm-strategy:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['ems:alarm-strategy:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['ems:alarm-strategy:export']"
-        >导出</el-button>
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" :expand-on-click-node="false" :filter-node-method="filterNode"
+            node-key="id" highlight-current @node-click="handleNodeClick" />
+        </div>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="策略名称" prop="policyName">
+            <el-input v-model="queryParams.policyName" placeholder="请输入策略名称" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="对象类型" prop="alarmObjType">
+            <el-select v-model="queryParams.alarmObjType" placeholder="请选择告警对象类型" clearable>
+              <el-option v-for="dict in dict.type.obj_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="告警代码" prop="alarmCode">
+            <el-input v-model="queryParams.alarmCode" placeholder="请输入告警代码" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="告警类型" prop="alarmType">
+            <el-select v-model="queryParams.alarmType" placeholder="请选择告警类型" clearable>
+              <el-option v-for="dict in dict.type.alarm_type" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasPermi="['ems:alarm-strategy:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+              v-hasPermi="['ems:alarm-strategy:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+              v-hasPermi="['ems:alarm-strategy:remove']">删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+              v-hasPermi="['ems:alarm-strategy:export']">导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <el-table v-loading="loading" :data="alarmList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="策略代码" align="left" prop="policyCode" />
-      <el-table-column label="策略名称" align="center" prop="policyName" />
-      <el-table-column label="告警对象类型" align="center" prop="alarmObjType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.obj_type" :value="scope.row.alarmObjType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警对象指标" align="center" prop="alarmObjIndex" />
-      <el-table-column label="告警规则" align="center" prop="alarmRuleType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_thre_type" :value="scope.row.alarmRuleType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="告警阈值" align="center" prop="alarmThresholdValue" />
-      <el-table-column label="告警代码" align="center" prop="alarmCode" />
-      <el-table-column label="告警描述" align="center" prop="alarmMsg" />
-      <el-table-column label="告警类型" align="center" prop="alarmType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.alarm_type" :value="scope.row.alarmType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+        <el-table v-loading="loading" :data="alarmList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="策略代码" align="left" prop="policyCode" />
+          <el-table-column label="策略名称" align="center" prop="policyName" />
+          <el-table-column label="告警对象类型" align="center" prop="alarmObjType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.obj_type" :value="scope.row.alarmObjType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="告警对象指标" align="center" prop="alarmObjIndex" />
+          <el-table-column label="告警规则" align="center" prop="alarmRuleType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.alarm_thre_type" :value="scope.row.alarmRuleType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="告警阈值" align="center" prop="alarmThresholdValue" />
+          <el-table-column label="告警代码" align="center" prop="alarmCode" />
+          <el-table-column label="告警描述" align="center" prop="alarmMsg" />
+          <el-table-column label="告警类型" align="center" prop="alarmType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.alarm_type" :value="scope.row.alarmType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
 
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['ems:alarm-strategy:edit']"
-          >修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:alarm-strategy:remove']">
-            删除</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['ems:alarm-strategy:edit']">修改</el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                @click="handleDelete(scope.row)" v-hasPermi="['ems:alarm-strategy:remove']">
+                删除</el-button>
 
-        </template>
-      </el-table-column>
-    </el-table>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
+      </el-col>
+    </el-row>
 
     <!-- 添加或修改能源设施告警策略对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -148,12 +111,8 @@
         </el-form-item>
         <el-form-item label="告警对象类型" prop="alarmObjType">
           <el-select v-model="form.alarmObjType" placeholder="请选择告警对象类型">
-            <el-option
-              v-for="dict in dict.type.obj_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.obj_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="告警对象指标" prop="alarmObjIndex">
@@ -161,12 +120,8 @@
         </el-form-item>
         <el-form-item label="告警规则" prop="alarmRuleType">
           <el-select v-model="form.alarmRuleType" placeholder="请选择告警规则">
-            <el-option
-              v-for="dict in dict.type.alarm_thre_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.alarm_thre_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="告警阈值" prop="alarmThresholdValue">
@@ -180,12 +135,8 @@
         </el-form-item>
         <el-form-item label="告警类型" prop="alarmType">
           <el-select v-model="form.alarmType" placeholder="请选择告警类型">
-            <el-option
-              v-for="dict in dict.type.alarm_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
+            <el-option v-for="dict in dict.type.alarm_type" :key="dict.value" :label="dict.label"
+              :value="parseInt(dict.value)"></el-option>
           </el-select>
         </el-form-item>
       </el-form>
@@ -198,12 +149,12 @@
 </template>
 
 <script>
-import { listAlarm, getAlarm, delAlarm, addAlarm, updateAlarm } from "@/api/alarm/alarm";
-
+import {listAlarm, getAlarm, delAlarm, addAlarm, updateAlarm} from "@/api/alarm/alarm";
+import {areaTreeSelect} from '@/api/basecfg/area'
 export default {
   name: "Alarm",
   dicts: ['obj_type', 'alarm_thre_type', 'alarm_type'],
-  data() {
+  data () {
     return {
       // 遮罩层
       loading: true,
@@ -230,33 +181,43 @@ export default {
         policyName: null,
         alarmObjType: null,
         alarmCode: null,
-        alarmType: null
+        alarmType: null,
+        areaCode:null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         policyCode: [
-          { required: true, message: "策略代码不能为空", trigger: "blur" }
+          {required: true, message: "策略代码不能为空", trigger: "blur"}
         ],
         policyName: [
-          { required: true, message: "策略名称不能为空", trigger: "blur" }
+          {required: true, message: "策略名称不能为空", trigger: "blur"}
         ],
         alarmObjType: [
-          { required: true, message: "告警对象类型不能为空", trigger: "change" }
+          {required: true, message: "告警对象类型不能为空", trigger: "change"}
         ],
         alarmObjIndex: [
-          { required: true, message: "告警对象指标不能为空", trigger: "blur" }
+          {required: true, message: "告警对象指标不能为空", trigger: "blur"}
         ],
-      }
+      },
+      areaName: undefined,
+      areaOptions: [],
     };
   },
-  created() {
+  watch: {
+     // 根据名称筛选区域树
+     areaName (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+ async created () {
+    await this.getAreaTreeByTag('Area')
     this.getList();
   },
   methods: {
     /** 查询能源设施告警策略列表 */
-    getList() {
+    getList () {
       this.loading = true;
       listAlarm(this.queryParams).then(response => {
         this.alarmList = response.rows;
@@ -264,13 +225,32 @@ export default {
         this.loading = false;
       });
     },
+     /** 查询区域树结构 */
+     async getAreaTreeByTag (tier) {
+      await areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data
+        this.queryParams.areaCode =response.data[0].id
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(response.data[0].id)
+        })
+      })
+    },
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.queryParams.areaCode = data.id
+      this.getList()
+    },
     // 取消按钮
-    cancel() {
+    cancel () {
       this.open = false;
       this.reset();
     },
     // 表单重置
-    reset() {
+    reset () {
       this.form = {
         id: null,
         policyCode: null,
@@ -286,29 +266,29 @@ export default {
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    resetQuery () {
       this.resetForm("queryForm");
       this.handleQuery();
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange (selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd () {
       this.reset();
       this.open = true;
       this.title = "添加能源设施告警策略";
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate (row) {
       this.reset();
       const id = row.id || this.ids
       getAlarm(id).then(response => {
@@ -318,7 +298,7 @@ export default {
       });
     },
     /** 提交按钮 */
-    submitForm() {
+    submitForm () {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
@@ -338,17 +318,17 @@ export default {
       });
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
+    handleDelete (row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除能源设施告警策略编号为"' + ids + '"的数据项?').then(function() {
+      this.$modal.confirm('是否确认删除能源设施告警策略编号为"' + ids + '"的数据项?').then(function () {
         return delAlarm(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
-    handleExport() {
+    handleExport () {
       this.download('ems/alarm/export', {
         ...this.queryParams
       }, `alarm_${new Date().getTime()}.xlsx`)

+ 1 - 1
ems-ui/src/views/analysis/device/index.scss

@@ -1,7 +1,7 @@
 @import "../../../assets/styles";
 
 .power-index-content {
-  background: rgba(245, 247, 249, 1);
+  background: #fff;
 
   .gl-filters {
     height: 50px;

+ 115 - 160
ems-ui/src/views/analysis/device/warn.vue

@@ -1,98 +1,71 @@
 <template>
   <div class="app-container power-index-content">
-    <el-row type="flex" :gutter="20">
-      <el-col :span="24">
-        <div class="gl-filters">
-          <SwitchTag
-              :ds="areaTag"
-              :def-tag="defArea"
-              :tagClick="onSwitchTagClick"
-          />
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" :expand-on-click-node="false"  :filter-node-method="filterNode" node-key="id" highlight-current @node-click="handleNodeClick" />
         </div>
       </el-col>
-    </el-row>
-    <el-row :gutter="20" style="margin-top: 20px">
-      <el-col :span="12">
-        <DeviceWaring />
-      </el-col>
-      <el-col :span="12">
-        <LineChartBlock title="历史告警变化" :opt-cfg="devcWarningHis">
-          <template v-slot:filters>
-            <SwitchTag
-                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
-                :defTag="dateType"
-                :tagClick="onDateTypeSwitch"
-            />
-          </template>
-        </LineChartBlock>
-      </el-col>
-    </el-row>
-    <el-row type="flex" :gutter="20" style="margin-top: 20px">
-      <el-col :span="12">
-        <BlockTable title="实时告警" :table-data="realTimeTableData">
-          <template v-slot:columns>
-            <el-table-column
-                type="index"
-                label="序号"
-                align="center"
-            />
-            <el-table-column
-                prop="subSystemName"
-                label="子系统"
-                align="center"
-            />
-            <el-table-column
-                prop="objName"
-                label="对象名称"
-                align="center"
-            />
-            <el-table-column
-                prop="alarmMsg"
-                label="描述"
-                align="center"
-            />
-            <el-table-column
-                prop="alarmTime"
-                label="时间"
-                align="center"
-            />
-            <el-table-column
-                label="操作"
-                align="center"
-                width="100"
-            >
-              <template slot-scope="scope">
-                <el-dropdown @command="(cmd)=>handleCommand(cmd, scope.row)"
-                             v-if="![ALARM_STATE.dissolved.value, ALARM_STATE.dissolved.value].includes(scope.row.alarmState)">
-          <span class="el-dropdown-link">
-            <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState"></dict-tag>
-            <i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item :command="ALARM_STATE.disposing.code"
-                                      v-if="scope.row.alarmState === ALARM_STATE.new.value">开始处理
-                    </el-dropdown-item>
-                    <el-dropdown-item :command="ALARM_STATE.disposed.code">已处理</el-dropdown-item>
-                    <el-dropdown-item :command="ALARM_STATE.dissolved.code">已消散</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
+      <el-col :span="20" :xs="24">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <DeviceWaring />
+          </el-col>
+          <el-col :span="12">
+            <LineChartBlock title="历史告警变化" :opt-cfg="devcWarningHis">
+              <template v-slot:filters>
+                <SwitchTag :ds="[{ val: 'day', text: '按日' }, { val: 'month', text: '按月' }, { val: 'year', text: '按年' }]"
+                  :defTag="dateType" :tagClick="onDateTypeSwitch" />
               </template>
-            </el-table-column>
-          </template>
-        </BlockTable>
-      </el-col>
-      <el-col :span="12">
-        <BarChartBlock title="告警统计报表" :opt-cfg="subSysIndex">
-          <template v-slot:filters>
-            <SwitchTag
-                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
-                :defTag="dateType"
-                :tagClick="onSubSysDateTypeSwitch"
-            />
-          </template>
-        </BarChartBlock>
+            </LineChartBlock>
+          </el-col>
+        </el-row>
+        <el-row type="flex" :gutter="20" style="margin-top: 20px">
+          <el-col :span="12">
+            <BlockTable title="实时告警" :table-data="realTimeTableData">
+              <template v-slot:columns>
+                <el-table-column type="index" label="序号" align="center" />
+                <el-table-column prop="subSystemName" label="子系统" align="center" />
+                <el-table-column prop="objName" label="对象名称" align="center" />
+                <el-table-column prop="alarmMsg" label="描述" align="center" />
+                <el-table-column prop="alarmTime" label="时间" align="center" />
+                <el-table-column label="操作" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-dropdown @command="(cmd) => handleCommand(cmd, scope.row)"
+                      v-if="![ALARM_STATE.dissolved.value, ALARM_STATE.dissolved.value].includes(scope.row.alarmState)">
+                      <span class="el-dropdown-link">
+                        <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState"></dict-tag>
+                        <i class="el-icon-arrow-down el-icon--right"></i>
+                      </span>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item :command="ALARM_STATE.disposing.code"
+                          v-if="scope.row.alarmState === ALARM_STATE.new.value">开始处理
+                        </el-dropdown-item>
+                        <el-dropdown-item :command="ALARM_STATE.disposed.code">已处理</el-dropdown-item>
+                        <el-dropdown-item :command="ALARM_STATE.dissolved.code">已消散</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </template>
+                </el-table-column>
+              </template>
+            </BlockTable>
+          </el-col>
+          <el-col :span="12">
+            <BarChartBlock title="告警统计报表" :opt-cfg="subSysIndex">
+              <template v-slot:filters>
+                <SwitchTag :ds="[{ val: 'day', text: '按日' }, { val: 'month', text: '按月' }, { val: 'year', text: '按年' }]"
+                  :defTag="dateType" :tagClick="onSubSysDateTypeSwitch" />
+              </template>
+            </BarChartBlock>
+          </el-col>
+        </el-row>
       </el-col>
     </el-row>
+
   </div>
 </template>
 
@@ -102,18 +75,17 @@ import {
   fetchAlarmIndexDay, fetchAlarmIndexMonth, fetchAlarmIndexYear, fetchSubSysIndexDay, fetchSubSysIndexMonth,
   fetchSubSysIndexYear, listAlarmInfo, updateAlarmInfo,
 } from '@/api/alarm/alarm-info';
-import { ApiCode } from '@/api/apiEmums';
+import {ApiCode} from '@/api/apiEmums';
 import Block from '@/components/Block/block.vue';
 import BlockTable from '@/components/Block/BlockTable/index.vue';
 import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue';
 import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue';
-import { ALARM_STATE } from '@/enums/alarm';
-import { DateTool } from '@/utils/DateTool';
+import {ALARM_STATE} from '@/enums/alarm';
+import {DateTool} from '@/utils/DateTool';
 import DeviceWaring from '@/views/analysis/device/DevcWarning/index.vue';
 import Tag from '@/views/basecfg/tag/index.vue';
 import dayjs from 'dayjs';
-import { mapGetters, mapMutations } from 'vuex';
-import * as areaApi from '../../../api/basecfg/area';
+import {areaTreeSelect} from '@/api/basecfg/area'
 import LineChartBlock from '../../../components/Block/charts/LineChartBlock.vue';
 import SwitchTag from '../../../components/SwitchTag/index.vue';
 
@@ -129,12 +101,13 @@ export default {
     LineChartBlock,
     SwitchTag,
   },
-  data() {
+  data () {
     return {
+      areaName: undefined,
+      areaOptions: [],
       ALARM_STATE,
-      areaTag: [],
-      defArea: {},
-      dateType: { val: 'day' },
+      dateType: {val: 'day'},
+      areaCode: '',
       devcWarningHis: {
         unit: '  ',
         xAxis: {
@@ -154,36 +127,42 @@ export default {
       realTimeTableData: [],
     };
   },
-  computed: {
-    // 监听选中的区域,以更新数据
-    selectedServiceArea() {
-      return this.$store.state.userState.selectedServiceArea;
-    },
-    ...mapGetters('userState', ['getSelectedArea']),
-  },
   watch: {
-    selectedServiceArea(val) {
-      this.queryCharts();
-    },
-  },
-  mounted() {
-    this.initData();
+    // 根据名称筛选区域树
+    areaName (val) {
+      debugger
+      this.$refs.tree.filter(val)
+    }
   },
-  created() {
+  async mounted () {
+    await this.getAreaTreeByTag('Area')
+    this.queryCharts()
   },
   methods: {
-    ...mapMutations('userState', ['setSelectedArea']),
-    onSwitchTagClick(item) {
-      this.setSelectedArea(item);
+    /** 查询区域树结构 */
+    async getAreaTreeByTag (tier) {
+      await areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data
+        this.areaCode = response.data[0].id
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(response.data[0].id)
+        })
+      })
     },
-    async onDateTypeSwitch(item) {
-      if (!this.selectedServiceArea) {
-        return;
-      }
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.areaCode = data.id
+      this.queryCharts()
+    },
+    async onDateTypeSwitch (item) {
       if (item.val === 'day') {
         const xaxis = DateTool.getTime(60);
-        const { data } = await fetchAlarmIndexDay({
-          areaCode: this.selectedServiceArea.val,
+        const {data} = await fetchAlarmIndexDay({
+          areaCode: this.areaCode,
         });
         const series = this.toSeries(data, xaxis);
         this.devcWarningHis.xAxis.data = xaxis;
@@ -192,27 +171,24 @@ export default {
       }
       if (item.val === 'month') {
         const xaxis = DateTool.getDayOfRange(
-            dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
-        const { data } = await fetchAlarmIndexMonth({ areaCode: this.selectedServiceArea.val });
+          dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
+        const {data} = await fetchAlarmIndexMonth({areaCode: this.areaCode});
         const series = this.toSeries(data, xaxis);
         this.devcWarningHis.xAxis.data = xaxis;
         this.devcWarningHis.series = series;
         return;
       }
       const xaxis = DateTool.getMonthsOfYearAgo();
-      const { data } = await fetchAlarmIndexYear({ areaCode: this.selectedServiceArea.val });
+      const {data} = await fetchAlarmIndexYear({areaCode: this.areaCode});
       const series = this.toSeries(data, xaxis);
       this.devcWarningHis.xAxis.data = xaxis;
       this.devcWarningHis.series = series;
     },
-    async onSubSysDateTypeSwitch(item) {
-      if (!this.selectedServiceArea) {
-        return;
-      }
+    async onSubSysDateTypeSwitch (item) {
       if (item.val === 'day') {
         const xaxis = DateTool.getTime(60);
-        const { data } = await fetchSubSysIndexDay({
-          areaCode: this.selectedServiceArea.val,
+        const {data} = await fetchSubSysIndexDay({
+          areaCode: this.areaCode,
         });
         const series = this.subSysIndexToSeries(data, xaxis);
         this.subSysIndex.xAxis.data = xaxis;
@@ -221,20 +197,20 @@ export default {
       }
       if (item.val === 'month') {
         const xaxis = DateTool.getDayOfRange(
-            dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
-        const { data } = await fetchSubSysIndexMonth({ areaCode: this.selectedServiceArea.val });
+          dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
+        const {data} = await fetchSubSysIndexMonth({areaCode: this.areaCode});
         const series = this.subSysIndexToSeries(data, xaxis);
         this.subSysIndex.xAxis.data = xaxis;
         this.subSysIndex.series = series;
         return;
       }
       const xaxis = DateTool.getMonthsOfYearAgo();
-      const { data } = await fetchSubSysIndexYear({ areaCode: this.selectedServiceArea.val });
+      const {data} = await fetchSubSysIndexYear({areaCode: this.areaCode});
       const series = this.subSysIndexToSeries(data, xaxis);
       this.subSysIndex.xAxis.data = xaxis;
       this.subSysIndex.series = series;
     },
-    toSeries(data, xaxis) {
+    toSeries (data, xaxis) {
       const dayGroup = _.groupBy(data, 'alarmType');
       const series = [];
       Object.keys(dayGroup).forEach((alarmType) => {
@@ -255,7 +231,7 @@ export default {
       return series;
     },
 
-    subSysIndexToSeries(data, xaxis) {
+    subSysIndexToSeries (data, xaxis) {
       const dayGroup = _.groupBy(data, 'systemCode');
       const series = [];
       Object.keys(dayGroup).forEach((subSysCode) => {
@@ -274,32 +250,12 @@ export default {
       });
       return series;
     },
-    async initData() {
-      const {
-        rows,
-        total,
-      } = await areaApi.listArea({
-        pageNum: 1,
-        pageSize: 10,
-      });
-      if (rows.length > 0) {
-        rows.forEach(item => {
-          this.areaTag.push({
-            val: item.areaCode,
-            text: item.areaName,
-          });
-        });
-        this.defArea = this.areaTag[0];
-        this.setSelectedArea(this.areaTag[0]);
-      }
-      this.queryCharts();
-    },
-    queryCharts() {
+    queryCharts () {
       this.onDateTypeSwitch(this.dateType);
       this.onSubSysDateTypeSwitch(this.dateType);
       this.getRealTimeAlarm();
     },
-    async getRealTimeAlarm() {
+    async getRealTimeAlarm () {
       let result = [];
       const {
         code,
@@ -307,7 +263,7 @@ export default {
       } = await listAlarmInfo({
         pageNum: 1,
         pageSize: 10,
-        areaCode: this.selectedServiceArea.val,
+        areaCode: this.areaCode,
         alarmStateList: [
           ALARM_STATE.new.value, ALARM_STATE.disposing.value,
         ],
@@ -317,8 +273,7 @@ export default {
       }
       this.realTimeTableData = result;
     },
-    async handleCommand(command, data) {
-      debugger
+    async handleCommand (command, data) {
       await updateAlarmInfo({
         id: data.id,
         alarmState: ALARM_STATE[command].value,
@@ -328,4 +283,4 @@ export default {
   },
 };
 </script>
-<style src="./index.scss" lang="scss" />
+<style src="./index.scss" scoped lang="scss" />

+ 180 - 208
ems-ui/src/views/devmgr/el/index.vue

@@ -1,166 +1,125 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="对象类型" prop="objType">
-        <el-select v-model="queryParams.objType" placeholder="请选择对象类型" clearable>
-          <el-option
-            v-for="dict in dict.type.device_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="目标对象" prop="objName">
-        <el-autocomplete
-          v-model="queryParams.objName"
-          placeholder="请输入对象名称"
-          clearable
-          :fetch-suggestions="querySearch"
-          @select="handleSelect"
-        ></el-autocomplete>
-      </el-form-item>
-      <el-form-item label="创建时间" prop="recordTime">
-        <el-date-picker clearable
-                        v-model="queryParams.recordTime"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="请选择日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="维护标题" prop="maintainTitle">
-        <el-input
-          v-model="queryParams.maintainTitle"
-          placeholder="请输入维护标题"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="维护人" prop="maintainPerson">
-        <el-input
-          v-model="queryParams.maintainPerson"
-          placeholder="请输入维护人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['ems:rbook:add']"
-        >新增
-        </el-button>
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" :expand-on-click-node="false" :filter-node-method="filterNode"
+            node-key="id" highlight-current @node-click="handleNodeClick" />
+        </div>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['ems:rbook:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+      <el-col :span="20" :xs="24">
+        <el-tabs v-model="queryParams.objType" @tab-click="resetQuery">
+          <el-tab-pane v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label" :name="dict.value">
+          </el-tab-pane>
+        </el-tabs>
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="目标对象" prop="objName">
+            <el-autocomplete v-model="queryParams.objName" placeholder="请输入对象名称" clearable
+              :fetch-suggestions="querySearch" @select="handleSelect"></el-autocomplete>
+          </el-form-item>
+          <el-form-item label="创建时间" prop="recordTime">
+            <el-date-picker clearable v-model="queryParams.recordTime" type="date" value-format="yyyy-MM-dd"
+              placeholder="请选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="维护标题" prop="maintainTitle">
+            <el-input v-model="queryParams.maintainTitle" placeholder="请输入维护标题" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="维护人" prop="maintainPerson">
+            <el-input v-model="queryParams.maintainPerson" placeholder="请输入维护人" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
 
-    <el-table v-loading="loading" :data="rbookList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="记录编号" align="center" prop="recordCode"/>
-      <el-table-column label="目标对象" align="center" prop="objName">
-        <template slot-scope="scope">
-          <span v-if="scope.row.objType">({{ dict.type.device_type[scope.row.objType].label }}) {{
-              scope.row.objName
-            }}</span>
-          <span v-else>({{ dict.type.device_type[scope.row.objType].label }}){{ scope.row.objName }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="安装位置" align="center" prop="insLocation"/>
-      <el-table-column label="维护标题" align="center" prop="maintainTitle"/>
-      <el-table-column label="创建时间" align="center" prop="recordTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="维护人" align="center" prop="maintainPerson"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-document" @click="handleViewRec(scope.row)">
-            查看
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasPermi="['ems:rbook:add']">新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+              v-hasPermi="['ems:rbook:export']">导出
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+        <el-table v-loading="loading" :data="rbookList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="记录编号" align="center" prop="recordCode" />
+          <el-table-column label="目标对象" align="center" prop="objName">
+            <template slot-scope="scope">
+              <span v-if="scope.row.objType">({{ dict.type.device_type[scope.row.objType].label }}) {{
+                scope.row.objName
+              }}</span>
+              <span v-else>({{ dict.type.device_type[scope.row.objType].label }}){{ scope.row.objName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="安装位置" align="center" prop="insLocation" />
+          <el-table-column label="维护标题" align="center" prop="maintainTitle" />
+          <el-table-column label="创建时间" align="center" prop="recordTime" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="维护人" align="center" prop="maintainPerson" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-document" @click="handleViewRec(scope.row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </el-col>
+    </el-row>
     <!-- 查看设备台账对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="记录编号" prop="recordCode">
-          <el-input v-model="form.recordCode" placeholder="请输入记录编号" :disabled="isViewOnly"/>
+          <el-input v-model="form.recordCode" placeholder="请输入记录编号" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="对象类型">
-          <el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions"
-                     :disabled="isViewOnly">
-<!--            <el-option v-for = "item in objTypeOptions"-->
-<!--                       :label="item.name"-->
-<!--                       :value="item.code"-->
-<!--                       :key="item.code" />-->
-            <el-option
-              v-for="dict in dict.type.device_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
+          <el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions" :disabled="isViewOnly">
+            <!--            <el-option v-for = "item in objTypeOptions"-->
+            <!--                       :label="item.name"-->
+            <!--                       :value="item.code"-->
+            <!--                       :key="item.code" />-->
+            <el-option v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="    " prop="objCode" v-if="showObjCode">
-          <el-cascader
-            v-model="form.objCode"
-            :options="AllCode"
-            placeholder="请选择具体数据"
-            @change="handleSelect"
-            :props="{ value: 'value', label: 'label', children: 'children' }"
-            :disabled="isViewOnly"
-          ></el-cascader>
+          <el-cascader v-model="form.objCode" :options="AllCode" placeholder="请选择具体数据" @change="handleSelect"
+            :props="{ value: 'value', label: 'label', children: 'children' }" :disabled="isViewOnly"></el-cascader>
         </el-form-item>
         <el-form-item label="创建时间" prop="recordTime">
-          <el-date-picker clearable
-                          v-model="form.recordTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择日期 yyyy-MM-dd HH:mm:ss"
-                          :disabled="isViewOnly"
-          >
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择日期 yyyy-MM-dd HH:mm:ss" :disabled="isViewOnly">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="目标对象" prop="objName">
-          <el-input v-model="form.objName" placeholder="请输入对象名称" :disabled="isViewOnly"/>
+          <el-input v-model="form.objName" placeholder="请输入对象名称" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="安装位置" prop="insLocation">
-          <el-input v-model="form.insLocation" placeholder="请输入安装位置" :disabled="isViewOnly"/>
+          <el-input v-model="form.insLocation" placeholder="请输入安装位置" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="维护标题" prop="maintainTitle">
-          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题" :disabled="isViewOnly"/>
+          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="维护内容">
           <!-- 只读模式下显示内容 -->
@@ -169,7 +128,7 @@
           <editor v-else v-model="form.maintainContent" :min-height="192"></editor>
         </el-form-item>
         <el-form-item label="维护人" prop="maintainPerson">
-          <el-input v-model="form.maintainPerson" placeholder="请输入维护人" :disabled="isViewOnly"/>
+          <el-input v-model="form.maintainPerson" placeholder="请输入维护人" :disabled="isViewOnly" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -180,8 +139,7 @@
           编辑
         </el-button>
         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedRow)"
-                   v-hasPermi="['ems:rbook:remove']"
-        >删除
+          v-hasPermi="['ems:rbook:remove']">删除
         </el-button>
         <el-button v-if="isViewOnly" @click="cancel">取 消</el-button>
       </div>
@@ -191,50 +149,37 @@
     <el-dialog :title="title" :visible.sync="addOrUpdateOpen" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="记录编号" prop="recordCode">
-          <el-input v-model="form.recordCode" placeholder="请输入记录编号"/>
+          <el-input v-model="form.recordCode" placeholder="请输入记录编号" />
         </el-form-item>
         <el-form-item label="对象类型">
           <el-select v-model="form.objType" placeholder="请选择对象类型" @change="changeObjOptions">
-            <el-option
-              v-for="dict in dict.type.device_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
+            <el-option v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="   " prop="objCode" v-if="showObjCode">
-          <el-cascader
-            v-model="form.objCode"
-            :options="AllCode"
-            placeholder="请选择具体数据"
-            @change="handleSelect"
-            :props="{ value: 'value', label: 'label', children: 'children' }"
-          ></el-cascader>
+          <el-cascader v-model="form.objCode" :options="AllCode" placeholder="请选择具体数据" @change="handleSelect"
+            :props="{ value: 'value', label: 'label', children: 'children' }"></el-cascader>
         </el-form-item>
         <el-form-item label="创建时间" prop="recordTime">
-          <el-date-picker clearable
-                          v-model="form.recordTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择日期 "
-          >
+          <el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择日期 ">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="目标对象" prop="objName">
-          <el-input v-model="form.objName" placeholder="请输入对象名称"/>
+          <el-input v-model="form.objName" placeholder="请输入对象名称" />
         </el-form-item>
         <el-form-item label="安装位置" prop="insLocation">
-          <el-input v-model="form.insLocation" placeholder="请输入安装位置"/>
+          <el-input v-model="form.insLocation" placeholder="请输入安装位置" />
         </el-form-item>
         <el-form-item label="维护标题" prop="maintainTitle">
-          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题"/>
+          <el-input v-model="form.maintainTitle" placeholder="请输入维护标题" />
         </el-form-item>
         <el-form-item label="维护内容">
-          <editor v-model="form.maintainContent" :min-height="192"/>
+          <editor v-model="form.maintainContent" :min-height="192" />
         </el-form-item>
         <el-form-item label="维护人" prop="maintainPerson">
-          <el-input v-model="form.maintainPerson" placeholder="请输入维护人"/>
+          <el-input v-model="form.maintainPerson" placeholder="请输入维护人" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -246,16 +191,17 @@
 </template>
 
 <script>
-import { listRbook, getRbook, delRbook, addRbook, updateRbook } from '@/api/device/rbook'
-import { listAllFacs } from '@/api/basecfg/emsfacs'
-import { devTreeByFacs, listDevice, listDevRecursionByArea } from '@/api/device/device'
+import {listRbook, getRbook, delRbook, addRbook, updateRbook} from '@/api/device/rbook'
+import {listAllFacs} from '@/api/basecfg/emsfacs'
+import {devTreeByFacs, listDevice, listDevRecursionByArea} from '@/api/device/device'
+import {areaTreeSelect} from '@/api/basecfg/area'
 import Treeselect from '@riophae/vue-treeselect'
 
 export default {
   name: 'Rbook',
-  components: { Treeselect },
+  components: {Treeselect},
   dicts: ['device_type'],
-  data() {
+  data () {
     return {
       isViewOnly: false, // 添加这个标志变量
       // 遮罩层
@@ -297,48 +243,56 @@ export default {
         maintainTitle: null,
         maintainContent: null,
         maintainPerson: null,
-        recordTimeRange: []
+        recordTimeRange: [],
+        areaCode: ''
       },
       queryFacsParams: {
         areaCode: ''
       },
       objTypeOptions: [
-      { code: 1, name: '设施' },
-      { code: 0, name: '设备' },
-    ],
+        {code: 1, name: '设施'},
+        {code: 0, name: '设备'},
+      ],
 
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         recordCode: [
-          { required: true, message: '记录编号不能为空', trigger: 'blur' }
+          {required: true, message: '记录编号不能为空', trigger: 'blur'}
         ],
         objType: [
-          { required: true, message: '对象类型不能为空', trigger: 'change' }
+          {required: true, message: '对象类型不能为空', trigger: 'change'}
         ],
         maintainTitle: [
-          { required: true, message: '维护标题不能为空', trigger: 'blur' }
+          {required: true, message: '维护标题不能为空', trigger: 'blur'}
         ],
         recordTime: [
-          { required: true, message: '日期 yyyy-MM-dd 不能为空', trigger: 'blur' }
+          {required: true, message: '日期 yyyy-MM-dd 不能为空', trigger: 'blur'}
         ]
-      }
+      },
+      areaName: undefined,
+      areaOptions: [],
     }
 
   },
-  created() {
+  async created () {
+    await this.getAreaTreeByTag('Area')
     this.getList()
   },
   // 当对象类型有值时,显示对象代码输入框
   watch: {
-    'form.objType'(newVal) {
+    'form.objType' (newVal) {
       this.showObjCode = !!newVal
+    },
+    // 根据名称筛选区域树
+    areaName (val) {
+      this.$refs.tree.filter(val)
     }
   },
   methods: {
     /** 查询设备台账列表 */
-    getList() {
+    getList () {
       this.loading = true
       listRbook(this.queryParams).then(response => {
         console.log('设备台账搜索参数!!!!!', this.queryParams)
@@ -347,16 +301,34 @@ export default {
         this.loading = false
       })
     },
-
+    /** 查询区域树结构 */
+    async getAreaTreeByTag (tier) {
+      await areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data
+        this.queryParams.areaCode =response.data[0].id
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(response.data[0].id)
+        })
+      })
+    },
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.queryParams.areaCode = data.id
+      this.getList()
+    },
     // 取消按钮
-    cancel() {
+    cancel () {
       // this.isViewOnly = true; // 切换回只读模式
       this.addOrUpdateOpen = false
       this.open = false
       this.reset()
     },
     // 表单重置
-    reset() {
+    reset () {
       this.form = {
         id: null,
         recordCode: null,
@@ -375,34 +347,34 @@ export default {
       this.dateRange = []
     },
     // 搜索建议的方法
-    querySearch(queryString, cb) {
+    querySearch (queryString, cb) {
       const results = this.rbookList.filter(item => {
         return item.objName.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
       })
       // 调用回调函数,返回建议列表
-      cb(results.map(item => ({ value: item.objName })))
+      cb(results.map(item => ({value: item.objName})))
     },
 
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1
       this.getList()
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    resetQuery () {
       this.resetForm('queryForm')
       this.handleQuery()
     },
 
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange (selection) {
       this.ids = selection.map(item => item.id)
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
 
     /**对象类型*/
-    changeObjOptions(objType) {
+    changeObjOptions (objType) {
       if (objType == 1) {
         this.queryFacsParams.areaCode = this.areaCode
         // 设施
@@ -425,7 +397,7 @@ export default {
 
       }
     },
-    buildTree(data) {
+    buildTree (data) {
       return data.map(item => {
         const node = {
           value: item.id,
@@ -437,7 +409,7 @@ export default {
     },
 
     /** 数据自动填补*/
-    handleSelect(value) {
+    handleSelect (value) {
 
       // 检查 value 是否为数组
       if (Array.isArray(value)) {
@@ -466,9 +438,9 @@ export default {
             const data = response.data
             console.log('data', data)
 
-            function findDeviceById(data, path = [], ids) {
+            function findDeviceById (data, path = [], ids) {
               for (const item of data) {
-                const currentPath = [...path, { label: item.label, tier: item.tier }]
+                const currentPath = [...path, {label: item.label, tier: item.tier}]
                 if (ids.includes(item.id)) {
                   // 找到 tier 为 'Device' 的层级,并获取最后一个“-”后面的数据
                   const deviceTierIndex = currentPath.findIndex(p => p.tier === 'Device')
@@ -478,7 +450,7 @@ export default {
                     deviceLabel = currentPath[deviceTierIndex].label
                     lastSegment = deviceLabel.split('-').pop()
                   }
-                  return { labels: currentPath, lastSegment, deviceLabel, found: true }
+                  return {labels: currentPath, lastSegment, deviceLabel, found: true}
                 }
                 if (item.children && item.children.length) {
                   const result = findDeviceById(item.children, currentPath, ids)
@@ -487,10 +459,10 @@ export default {
                   }
                 }
               }
-              return { labels: [], lastSegment: null, deviceLabel: '', found: false }
+              return {labels: [], lastSegment: null, deviceLabel: '', found: false}
             }
 
-            let lastResult = { labels: [], lastSegment: null, deviceLabel: '', found: false }
+            let lastResult = {labels: [], lastSegment: null, deviceLabel: '', found: false}
             value.forEach(id => {
               const result = findDeviceById(data, [], [id])
               if (result.found) {
@@ -524,19 +496,19 @@ export default {
     },
 
     /**编辑按钮操作*/
-    handleEdit() {
+    handleEdit () {
       this.isViewOnly = false // 切换到编辑模式
       this.title = '编辑设备台账'
     },
 
     // /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd () {
       this.reset()
       this.addOrUpdateOpen = true
       this.title = '添加设备台账'
     },
     /**查看按钮*/
-    handleViewRec(row) {
+    handleViewRec (row) {
       this.selectedRow = row
       const id = row.id || this.ids
       getRbook(id).then(response => {
@@ -556,7 +528,7 @@ export default {
       })
     },
     /** 提交按钮 */
-    submitForm() {
+    submitForm () {
       // 确保 objCode 是一个数组
       if (!Array.isArray(this.form.objCode)) {
         this.form.objCode = [this.form.objCode]
@@ -585,9 +557,9 @@ export default {
     },
 
     /** 删除按钮操作 */
-    handleDelete(row) {
+    handleDelete (row) {
       const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除设备台账编号为"' + ids + '"的数据项?').then(function() {
+      this.$modal.confirm('是否确认删除设备台账编号为"' + ids + '"的数据项?').then(function () {
         return delRbook(ids)
       }).then(() => {
         this.getList()
@@ -598,7 +570,7 @@ export default {
     },
 
     /** 导出按钮操作 */
-    handleExport() {
+    handleExport () {
       this.download('ems/rbook/export', {
         ...this.queryParams
       }, `rbook_${new Date().getTime()}.xlsx`)

+ 16 - 8
ems-ui/src/views/task/ManualInspection.vue

@@ -95,20 +95,19 @@
 
     <el-table v-loading="loading" :data="inspectionTaskList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="任务代码" align="left" prop="taskCode" width="160px"/>
-      <el-table-column label="任务名称" align="left" prop="taskName" />
-      <el-table-column label="巡检对象" align="center" prop="objName" >
+      <el-table-column label="任务代码" align="left" prop="taskCode" show-overflow-tooltip width="130"/>
+      <el-table-column label="任务名称" align="left" prop="taskName" show-overflow-tooltip width="150"/>
+      <el-table-column label="巡检对象" align="center" prop="objName" show-overflow-tooltip width="200" >
         <template slot-scope="scope">
-          <span><dict-tag :options="dict.type.obj_type" :value="scope.row.objType" />{{ "-" + scope.row.objName}}</span>
+          <div >{{ formatDict(scope.row.objType,dict.type.obj_type)+"-" + scope.row.objName}}</div>
         </template>
       </el-table-column>
-
-      <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+      <el-table-column label="开始时间" align="center" prop="startTime" width="100">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
+      <el-table-column label="结束时间" align="center" prop="endTime" width="100">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
         </template>
@@ -119,7 +118,7 @@
           <dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-info" @click="handleInspection(scope.row)" v-hasPermi="['ems:inspection-task:edit']">
             巡检</el-button>
@@ -349,6 +348,15 @@ export default {
     this.getList();
   },
   methods: {
+    formatDict (val,options) {
+      let name = ''
+      options.forEach(item => {
+        if (item.value==val) {
+          name= item.label
+        }
+      })
+      return name
+    },
     objHandle() {
       return {
         [OBJ_TYPE.fac.value]: async (param = {}) => {

+ 54 - 12
ems-ui/src/views/task/index.vue

@@ -1,35 +1,77 @@
 <template>
   <div class="task-container">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="手动巡检" name="ManualInspection">
-        <manual-inspection></manual-inspection>
-      </el-tab-pane>
-      <el-tab-pane label="自动巡检" name="second">
-        <AutoInspection></AutoInspection>
-      </el-tab-pane>
-    </el-tabs>
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" :expand-on-click-node="false" :filter-node-method="filterNode"
+            node-key="id" highlight-current @node-click="handleNodeClick" />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <el-tabs v-model="activeName" >
+          <el-tab-pane label="手动巡检" name="ManualInspection">
+            <manual-inspection></manual-inspection>
+          </el-tab-pane>
+          <el-tab-pane label="自动巡检" name="second">
+            <AutoInspection></AutoInspection>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col></el-row>
+
   </div>
 </template>
 
 <script>
 import AutoInspection from '@/views/task/AutoInspection.vue';
 import ManualInspection from '@/views/task/ManualInspection.vue';
-
+import {areaTreeSelect} from '@/api/basecfg/area'
 export default {
   components: {
     ManualInspection,
     AutoInspection,
   },
   name: 'task',
-  data() {
+  data () {
     return {
       activeName: 'ManualInspection',
+      areaName: undefined,
+      areaOptions: [],
+      areaCode:null
     };
   },
-  created() {
+  watch: {
+     // 根据名称筛选区域树
+     areaName (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  async created () {
+    await this.getAreaTreeByTag('Area')
   },
   methods: {
-    handleClick() {},
+    /** 查询区域树结构 */
+    async getAreaTreeByTag (tier) {
+      await areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data
+        this.areaCode = response.data[0].id
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(response.data[0].id)
+        })
+      })
+    },
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.areaCode = data.id
+      // this.getList()
+    },
   },
 };
 </script>

+ 142 - 154
ems-ui/src/views/task/report/index.vue

@@ -1,132 +1,101 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="任务代码" prop="taskCode">
-        <el-input
-            v-model="queryParams.taskCode"
-            placeholder="请输入任务代码"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="结果状态" prop="resultStatus">
-        <el-select v-model="queryParams.resultStatus" placeholder="请选择结果状态" clearable>
-          <el-option
-              v-for="dict in dict.type.inspection_result"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="提交人" prop="submitter">
-        <el-input
-            v-model="queryParams.submitter"
-            placeholder="请输入提交人"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['ems:inspection-report:add']"
-        >新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['ems:inspection-report:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['ems:inspection-report:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['ems:inspection-report:export']"
-        >导出
-        </el-button>
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
+            style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree ref="tree" :data="areaOptions" :expand-on-click-node="false" :filter-node-method="filterNode"
+            node-key="id" highlight-current @node-click="handleNodeClick" />
+        </div>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+          label-width="68px">
+          <el-form-item label="任务代码" prop="taskCode">
+            <el-input v-model="queryParams.taskCode" placeholder="请输入任务代码" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item label="结果状态" prop="resultStatus">
+            <el-select v-model="queryParams.resultStatus" placeholder="请选择结果状态" clearable>
+              <el-option v-for="dict in dict.type.inspection_result" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="提交人" prop="submitter">
+            <el-input v-model="queryParams.submitter" placeholder="请输入提交人" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+              v-hasPermi="['ems:inspection-report:add']">新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+              v-hasPermi="['ems:inspection-report:edit']">修改
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+              v-hasPermi="['ems:inspection-report:remove']">删除
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+              v-hasPermi="['ems:inspection-report:export']">导出
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="inspectionReportList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="任务代码" align="left" prop="taskCode" />
+          <el-table-column label="结果状态" align="center" prop="resultStatus">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.inspection_result" :value="scope.row.resultStatus" />
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="结果描述" align="center" prop="resultMsg" /> -->
+          <el-table-column label="完成时间" align="center" prop="finishTime" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="提交时间" align="center" prop="subTime" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.subTime, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="提交人" align="center" prop="submitter" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['ems:inspection-report:edit']">修改
+              </el-button>
 
-    <el-table v-loading="loading" :data="inspectionReportList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="任务代码" align="left" prop="taskCode" />
-      <el-table-column label="结果状态" align="center" prop="resultStatus">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.inspection_result" :value="scope.row.resultStatus" />
-        </template>
-      </el-table-column>
-      <!-- <el-table-column label="结果描述" align="center" prop="resultMsg" /> -->
-      <el-table-column label="完成时间" align="center" prop="finishTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="提交时间" align="center" prop="subTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.subTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="提交人" align="center" prop="submitter" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['ems:inspection-report:edit']"
-          >修改
-          </el-button>
+              <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn"
+                @click="handleDelete(scope.row)" v-hasPermi="['ems:inspection-report:remove']">
+                删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
 
-          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:inspection-report:remove']">
-            删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+          @pagination="getList" />
 
-    <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-    />
+      </el-col>
+    </el-row>
 
     <!-- 添加或修改巡检报告对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -136,11 +105,8 @@
         </el-form-item>
         <el-form-item label="结果状态" prop="resultStatus">
           <el-radio-group v-model="form.resultStatus">
-            <el-radio
-                v-for="dict in dict.type.inspection_result"
-                :key="dict.value"
-                :label="parseInt(dict.value)"
-            >{{ dict.label }}
+            <el-radio v-for="dict in dict.type.inspection_result" :key="dict.value" :label="parseInt(dict.value)">{{
+              dict.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
@@ -148,19 +114,12 @@
           <editor v-model="form.resultMsg" :min-height="192" />
         </el-form-item>
         <el-form-item label="完成时间" prop="finishTime">
-          <el-date-picker clearable
-                          v-model="form.finishTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择完成时间">
+          <el-date-picker clearable v-model="form.finishTime" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择完成时间">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="提交时间" prop="subTime">
-          <el-date-picker clearable
-                          v-model="form.subTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择提交时间">
+          <el-date-picker clearable v-model="form.subTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择提交时间">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="提交人" prop="submitter">
@@ -179,12 +138,12 @@
 import {
   addInspectionReport, delInspectionReport, getInspectionReport, listInspectionReport, updateInspectionReport,
 } from '@/api/task/inspectionReport';
-import { Base64 } from 'js-base64';
-
+import {Base64} from 'js-base64';
+import {areaTreeSelect} from '@/api/basecfg/area'
 export default {
   name: 'InspectionReport',
   dicts: ['inspection_result'],
-  data() {
+  data () {
     return {
       // 遮罩层
       loading: true,
@@ -211,6 +170,7 @@ export default {
         taskCode: null,
         resultStatus: null,
         submitter: null,
+        areaCode:null,
       },
       // 表单参数
       form: {},
@@ -231,14 +191,23 @@ export default {
           },
         ],
       },
+      areaName: undefined,
+      areaOptions: [],
     };
   },
-  created() {
+  watch: {
+     // 根据名称筛选区域树
+     areaName (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+ async created () {
+    await this.getAreaTreeByTag('Area')
     this.getList();
   },
   methods: {
     /** 查询巡检报告列表 */
-    getList() {
+    getList () {
       this.loading = true;
       listInspectionReport(this.queryParams).then(response => {
         this.inspectionReportList = response.rows;
@@ -246,13 +215,32 @@ export default {
         this.loading = false;
       });
     },
+    /** 查询区域树结构 */
+    async getAreaTreeByTag (tier) {
+      await areaTreeSelect(tier).then(response => {
+        this.areaOptions = response.data
+        this.queryParams.areaCode =response.data[0].id
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(response.data[0].id)
+        })
+      })
+    },
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    handleNodeClick (data, node) {
+      this.queryParams.areaCode = data.id
+      this.getList()
+    },
     // 取消按钮
-    cancel() {
+    cancel () {
       this.open = false;
       this.reset();
     },
     // 表单重置
-    reset() {
+    reset () {
       this.form = {
         id: null,
         taskCode: null,
@@ -265,29 +253,29 @@ export default {
       this.resetForm('form');
     },
     /** 搜索按钮操作 */
-    handleQuery() {
+    handleQuery () {
       this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    resetQuery () {
       this.resetForm('queryForm');
       this.handleQuery();
     },
     // 多选框选中数据
-    handleSelectionChange(selection) {
+    handleSelectionChange (selection) {
       this.ids = selection.map(item => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    handleAdd () {
       this.reset();
       this.open = true;
       this.title = '添加巡检报告';
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate (row) {
       this.reset();
       const id = row.id || this.ids;
       getInspectionReport(id).then(response => {
@@ -297,7 +285,7 @@ export default {
       });
     },
     /** 提交按钮 */
-    submitForm() {
+    submitForm () {
       this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.resultMsg) {
@@ -320,17 +308,17 @@ export default {
       });
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
+    handleDelete (row) {
       const ids = row.id || this.ids;
       this.$modal.confirm('是否确认删除巡检报告编号为"' + ids + '"的数据项?').then(function () {
         return delInspectionReport(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess('删除成功');
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
-    handleExport() {
+    handleExport () {
       this.download('ems/inspectionReport/export', {
         ...this.queryParams,
       }, `inspectionReport_${new Date().getTime()}.xlsx`);