Merge remote-tracking branch 'origin/master'

# Conflicts:
#	gassafetyprogress-web/src/views/regulation/device/index.vue
#	gassafetyprogress-web/src/views/regulation/gasuser/index.vue

gassafetyprogress-admin/src/main/java/com/zehong/web/controller/operationMonitor/THiddenTroubleInfoController.java

@@ -27,7 +27,7 @@ import com.zehong.common.core.page.TableDataInfo;
  * @date 2022-03-24
  */
 @RestController
-@RequestMapping("/system/info")
+@RequestMapping("/system/hidden")
 public class THiddenTroubleInfoController extends BaseController
 {
     @Autowired
@@ -36,7 +36,7 @@ public class THiddenTroubleInfoController extends BaseController
     /**
      * 查询燃气隐患列表
      */
-    @PreAuthorize("@ss.hasPermi('system:info:list')")
+    @PreAuthorize("@ss.hasPermi('system:hidden:list')")
     @GetMapping("/list")
     public TableDataInfo list(THiddenTroubleInfo tHiddenTroubleInfo)
     {
@@ -53,7 +53,7 @@ public class THiddenTroubleInfoController extends BaseController
     /**
      * 导出燃气隐患列表
      */
-    @PreAuthorize("@ss.hasPermi('system:info:export')")
+    @PreAuthorize("@ss.hasPermi('system:hidden:export')")
     @Log(title = "燃气隐患", businessType = BusinessType.EXPORT)
     @GetMapping("/export")
     public AjaxResult export(THiddenTroubleInfo tHiddenTroubleInfo)
@@ -66,7 +66,7 @@ public class THiddenTroubleInfoController extends BaseController
     /**
      * 获取燃气隐患详细信息
      */
-    @PreAuthorize("@ss.hasPermi('system:info:query')")
+    @PreAuthorize("@ss.hasPermi('system:hidden:query')")
     @GetMapping(value = "/{hiddenTroubleId}")
     public AjaxResult getInfo(@PathVariable("hiddenTroubleId") Long hiddenTroubleId)
     {
@@ -76,7 +76,7 @@ public class THiddenTroubleInfoController extends BaseController
     /**
      * 新增燃气隐患
      */
-    @PreAuthorize("@ss.hasPermi('system:info:add')")
+    @PreAuthorize("@ss.hasPermi('system:hidden:add')")
     @Log(title = "燃气隐患", businessType = BusinessType.INSERT)
     @PostMapping
     public AjaxResult add(@RequestBody THiddenTroubleInfo tHiddenTroubleInfo)
@@ -87,7 +87,7 @@ public class THiddenTroubleInfoController extends BaseController
     /**
      * 修改燃气隐患
      */
-    @PreAuthorize("@ss.hasPermi('system:info:edit')")
+    @PreAuthorize("@ss.hasPermi('system:hidden:edit')")
     @Log(title = "燃气隐患", businessType = BusinessType.UPDATE)
     @PutMapping
     public AjaxResult edit(@RequestBody THiddenTroubleInfo tHiddenTroubleInfo)
@@ -98,7 +98,7 @@ public class THiddenTroubleInfoController extends BaseController
     /**
      * 删除燃气隐患
      */
-    @PreAuthorize("@ss.hasPermi('system:info:remove')")
+    @PreAuthorize("@ss.hasPermi('system:hidden:remove')")
     @Log(title = "燃气隐患", businessType = BusinessType.DELETE)
 	@DeleteMapping("/{hiddenTroubleIds}")
     public AjaxResult remove(@PathVariable Long[] hiddenTroubleIds)

gassafetyprogress-system/src/main/java/com/zehong/system/domain/TComplainDeal.java

@@ -37,7 +37,7 @@ public class TComplainDeal extends BaseEntity
     @Excel(name = "转办记录")
     private String transferRecord;
 
-    @Excel(name = "反馈事件")
+    @Excel(name = "反馈时间")
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     private Date dealTime;
     /** 办理情况 */

gassafetyprogress-system/src/main/java/com/zehong/system/domain/THiddenTroubleInfo.java

@@ -83,7 +83,18 @@ public class THiddenTroubleInfo extends BaseEntity
     @Excel(name = "备注")
     private String remarks;
 
-    public void setHiddenTroubleId(Long hiddenTroubleId) 
+    /**上报人名称*/
+    private String reportPersonName;
+
+    public String getReportPersonName() {
+        return reportPersonName;
+    }
+
+    public void setReportPersonName(String reportPersonName) {
+        this.reportPersonName = reportPersonName;
+    }
+
+    public void setHiddenTroubleId(Long hiddenTroubleId)
     {
         this.hiddenTroubleId = hiddenTroubleId;
     }

gassafetyprogress-system/src/main/resources/mapper/system/THiddenTroubleInfoMapper.xml

@@ -21,10 +21,11 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="hiddenTroubleDealFinishTime"    column="hidden_trouble_deal_finish_time"    />
         <result property="isDel"    column="is_del"    />
         <result property="remarks"    column="remarks"    />
+        <result property="reportPersonName"    column="report_person_name"    />
     </resultMap>
 
     <sql id="selectTHiddenTroubleInfoVo">
-        select hidden_trouble_id, work_id, hidden_trouble_name, hidden_trouble_level, hidden_trouble_type, longitude, latitude, picture_url, hidden_trouble_describe, report_time, (select u.user_name from sys_user u where u.user_id = report_person) AS report_person, hidden_trouble_deal_status, hidden_trouble_deal_condition, hidden_trouble_deal_finish_time, is_del, remarks from t_hidden_trouble_info
+        select hidden_trouble_id, work_id, hidden_trouble_name, hidden_trouble_level, hidden_trouble_type, longitude, latitude, picture_url, hidden_trouble_describe, report_time, (select u.user_name from sys_user u where u.user_id = report_person) AS report_person_name, report_person, hidden_trouble_deal_status, hidden_trouble_deal_condition, hidden_trouble_deal_finish_time, is_del, remarks from t_hidden_trouble_info
     </sql>
 
     <select id="selectTHiddenTroubleInfoList" parameterType="THiddenTroubleInfo" resultMap="THiddenTroubleInfoResult">

gassafetyprogress-web/src/api/operationMonitor/hiddenTrouble.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询燃气隐患列表
 export function listInfo(query) {
   return request({
-    url: '/system/info/list',
+    url: '/system/hidden/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listInfo(query) {
 // 查询燃气隐患
 export function hiddenTroubleList(query) {
   return request({
-    url: '/system/info/hiddenTroubleList',
+    url: '/system/hidden/hiddenTroubleList',
     method: 'get',
     params: query
   })
@@ -21,41 +21,41 @@ export function hiddenTroubleList(query) {
 // 查询燃气隐患详细
 export function getInfo(hiddenTroubleId) {
   return request({
-    url: '/system/info/' + hiddenTroubleId,
+    url: '/system/hidden/' + hiddenTroubleId,
     method: 'get'
   })
 }
 
 // 新增燃气隐患
-export function addInfo(data) {
+export function addHiddenInfo(data) {
   return request({
-    url: '/system/info',
+    url: '/system/hidden',
     method: 'post',
     data: data
   })
 }
 
 // 修改燃气隐患
-export function updateInfo(data) {
+export function updateHiddenInfo(data) {
   return request({
-    url: '/system/info',
+    url: '/system/hidden',
     method: 'put',
     data: data
   })
 }
 
 // 删除燃气隐患
-export function delInfo(hiddenTroubleId) {
+export function delHiddenInfo(hiddenTroubleId) {
   return request({
-    url: '/system/info/' + hiddenTroubleId,
+    url: '/system/hidden/' + hiddenTroubleId,
     method: 'delete'
   })
 }
 
 // 导出燃气隐患
-export function exportInfo(query) {
+export function exportHiddenInfo(query) {
   return request({
-    url: '/system/info/export',
+    url: '/system/hidden/export',
     method: 'get',
     params: query
   })

gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 3276749 */
-  src: url('iconfont.woff2?t=1648286292510') format('woff2'),
-       url('iconfont.woff?t=1648286292510') format('woff'),
-       url('iconfont.ttf?t=1648286292510') format('truetype');
+  src: url('iconfont.woff2?t=1648524577887') format('woff2'),
+       url('iconfont.woff?t=1648524577887') format('woff'),
+       url('iconfont.ttf?t=1648524577887') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bingo:before {
+  content: "\e625";
+}
+
+.icon-x:before {
+  content: "\e600";
+}
+
 .icon-jt:before {
   content: "\e8f1";
 }

gassafetyprogress-web/src/assets/styles/all.scss

@@ -56,8 +56,8 @@
 .el-dialog:not(.is-fullscreen) {
   margin-top: 6vh !important;
 }
-.el-dialog__header{
-  border-bottom:1px solid #cccccc;
+.el-dialog__header {
+  border-bottom: 1px solid #cccccc;
 }
 .bigwindow {
   // 全局表格样式
@@ -613,19 +613,17 @@
 
     // overflow-y: none !important;
   }
-
-
 }
 // map里的label
 .amap-info {
   position: fixed !important;
   z-index: 999 !important;
 }
-.amap-marker-label{
-    background-color: rgba(9, 18, 32, 0.6) !important;
-    color: #fff !important;
-    border:none !important;
-    padding:10px;
+.amap-marker-label {
+  background-color: rgba(9, 18, 32, 0.6) !important;
+  color: #fff !important;
+  border: none !important;
+  padding: 10px;
 }
 .left {
   .el-table__body-wrapper {
@@ -668,16 +666,20 @@
   padding: 0 2px !important;
 }
 //去除高德logo
-.amap-logo{
+.amap-logo {
   display: none;
-  opacity:0 !important;
+  opacity: 0 !important;
 }
 .amap-copyright {
-  opacity:0;
+  opacity: 0;
+}
+
+.paddingnone {
+  padding: 0 !important;
 }
 
 .zzz {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}
\ No newline at end of file

gassafetyprogress-web/src/components/emergency/Timeline.vue

 <template>
   <ul class="timeline-wrapper">
+    <li class="timeline-item" >
+      <div class="timeline-box">
+        <div class="out-circle">
+          <div class="in-circle"></div>
+        </div>
+        <div class="long-line"></div>
+      </div>
+      <div class="timeline-content">
+        <div class="timeline-date el-form-div">
+          <div style="width: 180px">{{nowItem.createTime}}</div>
+          <div >事件发布</div>
+        </div>
+        <div class="timeline-title">{{ nowItem.eventName}}</div>
+        <div class="timeline-title">地址：{{ nowItem.address}}</div>
+      </div>
+    </li>
     <li class="timeline-item" v-for="t in timelineList" :key="t.id">
       <div class="timeline-box">
         <div class="out-circle">
@@ -8,7 +24,11 @@
         <div class="long-line"></div>
       </div>
       <div class="timeline-content">
-        <div class="timeline-date">{{t.createTime}}</div>
+        <div class="timeline-date el-form-div">
+          <div style="width: 180px">{{t.createTime}}</div>
+          <div  v-if="t.eventType==2">预案指引</div>
+          <div v-if="t.eventType==1">信息处置</div>
+        </div>
         <div class="timeline-title">{{ t.management}}</div>
         <div class="timeline-desc">
             <span
@@ -36,8 +56,8 @@
         default: () => {
           return []
         }
-      }
-
+      },
+      nowItem:{}
     },
     methods: {
       checkFile(url) {
@@ -53,7 +73,12 @@
     margin: 0;
     padding: 0;
   }
-
+  .el-form-div{
+    display:flex;
+    flex-direction:row;
+    justify-content:flex-start;
+    width: 100%;
+  }
   /* 时间线 */
   .timeline-item {
     position: relative;

gassafetyprogress-web/src/layout/components/Navbar.vue

@@ -11,11 +11,30 @@
           <!--<img src="@/assets/xiaoxi.png" :hidden="xiaohidden" style="height: 40px;width: 40px;margin-top: 5px;cursor: pointer;">-->
         <!--</div>-->
         <!-- <search id="header-search" class="right-menu-item" /> -->
-          <el-badge :value="total" :max="99" class="item" >
-            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" @click="$router.push('/emergency/emergency')"></i>
-          </el-badge>
-
+<!--          <el-badge :value="total" :max="99" class="item" >-->
+<!--            <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>-->
+<!--          </el-badge>-->
 
+        <el-dropdown class="avatar-container right-menu-item hover-effect" style="margin-right: 0px" trigger="click">
+          <div class="avatar-wrapper" >
+              <el-badge :value="total" :max="99" class="item" >
+               <i class="el-icon-chat-dot-round" style="width: 10px;height: 10px;" ></i>
+               </el-badge>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-if="total==0">
+              <span>暂无消息</span>
+            </el-dropdown-item>
+            <div v-for="(item,index) in receivedList" >
+              <el-dropdown-item v-if="index==0" @click.native="openMassage(item.id,item.eventName)">
+                  <span>您有新消息：{{item.eventName}}</span>
+              </el-dropdown-item>
+              <el-dropdown-item v-if="index>0"  divided @click.native="openMassage(item.id,item.eventName)">
+                <span>您有新消息：{{item.eventName}}</span>
+              </el-dropdown-item>
+            </div>
+          </el-dropdown-menu>
+        </el-dropdown>
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
@@ -46,7 +65,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters,mapMutations  } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
@@ -69,13 +88,15 @@ export default {
       userType:-2,
       total:null,
       xiaohidden:false,
+      receivedList:[],
+      routerPath:"",
     }
   },
   computed: {
     ...mapGetters([
       'sidebar',
       'avatar',
-      'device'
+      'device',
     ]),
     setting: {
       get() {
@@ -95,34 +116,23 @@ export default {
     }
   },
 mounted(){
-      getUserProfile().then(response => {
-        this.userType = response.data.deptId;
-      });
-    //定时检测新消息
-    setInterval(() => {
-            var params = {
-                  pageNum: 1,
-                    pageSize: 100,
-                    status:5,
-                    enterpriseId:this.userType
-                };
-          if(this.userType==-2){
-            params.governmentRead=0;
-            params.enterpriseId=null;
-          }else {
-            params.companyRead=0
-          }
-          listReceive(params).then(response => {
-              if(response.total!=0){
-                  this.total= response.total;
-              }else{
-                  this.total= "";
-              }
-
-          });
-      }, 5000);
+
+  getUserProfile().then(response => {
+    this.userType = response.data.deptId;
+    if(this.userType!=-2){
+      this.queryParams.enterpriseId = response.data.deptId;
+    }
+    this.getList();
+  });
+    this.socket();
   },
   methods: {
+  ...mapMutations({
+        SET_EMERGENCY:"bigWindowCompany/SET_EMERGENCY"
+    }
+
+    ),
+
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -136,6 +146,61 @@ mounted(){
           location.href = '/index';
         })
       }).catch(() => {});
+    },
+    openMassage(id,title){
+      //this.$router.push('/emergency/emergency?eventid='+id);
+      this.routerPath="/emergency/emergency";
+      if(window.location.pathname==this.routerPath){
+        // this.$parent.showDetail(id,title);
+        this.SET_EMERGENCY({
+          eventId:id,
+          eventName:title,
+        })
+      }else {
+        this.$router.push({path: this.routerPath,query:{eventId:id,eventName:title}});
+      }
+
+    },
+    socket() {
+      console.log("socket执行");
+      this.ws = new WebSocket(
+        "ws://192.168.2.17:8903/gassafety/websocketServer"
+      );
+      this.ws.onopen = (evt) => {
+        console.log("WebSockets开启");
+      };
+      this.ws.onmessage = (evt) => {
+        console.log("推送", evt);
+        const obj = JSON.parse(evt.data);
+        console.log("接受socketobj", obj);
+        this.getList();
+      };
+      this.ws.onclose = () => {
+        console.log("ws协议关闭");
+      };
+    },
+    getList(){
+      console.log(this.userType)
+      var params = {
+        pageNum: 1,
+        pageSize: 100,
+        status:5,
+        enterpriseId:this.userType
+      };
+      if(this.userType==-2){
+        params.governmentRead=0;
+        params.enterpriseId=null;
+      }else {
+        params.companyRead=0
+      }
+      listReceive(params).then(response => {
+          this.receivedList = response.rows;
+          if(response.total!=0){
+            this.total= response.total;
+          }else{
+            this.total= "";
+          }
+      });
     }
   }
 }

gassafetyprogress-web/src/utils/mapClass/yjmap.js

@@ -734,6 +734,9 @@ export class EditorMap {
       });
     }
   }
+  setZoomAndCenter(longitude,latitude){
+    this.map.setZoomAndCenter(14, [longitude,latitude]);
+  }
   // 普通调用方法
   // 设备报警
   deviceAlarm(obj) {

gassafetyprogress-web/src/views/complainDeal/index.vue

@@ -159,7 +159,7 @@
               <el-input v-model="form.complainName" placeholder="请输入投诉人姓名" :disabled="readonly"/>
             </el-form-item>
             <el-form-item label="指派单位" prop="complainAssignEnterproseId" >
-              <el-select style="width: 100%" v-model="form.complainAssignEnterproseName" placeholder="请选择预案等级"  @change="qiyechang" :disabled="readonly">
+              <el-select style="width: 100%" v-model="form.complainAssignEnterproseName" placeholder="请选择指派单位"  @change="qiyechang" :disabled="readonly">
                 <el-option
                   v-for = "dict in enterpriseList"
                   :key = "dict.enterpriseId"
@@ -176,7 +176,7 @@
               <el-input v-model="form.complainPhone" placeholder="请输入投诉人电话" :disabled="readonly"/>
             </el-form-item>
             <el-form-item label="指派人" prop="complainAssignManId">
-              <el-select v-model="form.complainAssignMan" placeholder="请选择预案等级" clearable style = "width: 100%" @change="manChang" :disabled="readonly">
+              <el-select v-model="form.complainAssignMan" placeholder="请选择指派人" clearable style = "width: 100%" @change="manChang" :disabled="readonly">
                 <el-option
                   v-for = "dict in peopleList"
                   :key = "dict.id"
@@ -191,6 +191,16 @@
         <el-form-item label="投诉事项" prop="complainMatter">
           <el-input v-model="form.complainMatter" type = "textarea" placeholder="请输入投诉事项" :disabled="readonly"/>
         </el-form-item>
+        <el-form-item label="反馈时间" prop="dealTime" :style="display">
+          <el-date-picker clearable size="small"
+                          v-model="form.dealTime"
+                          type="datetime"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="请选择反馈时间"
+                          :disabled="readonly"
+                          style="width: 280px">
+          </el-date-picker>
+        </el-form-item>
         <el-form-item label="反馈内容" prop="dealCondition" :style="display">
           <el-input v-model="form.dealCondition" type = "textarea" placeholder="请输入办理情况" :disabled="readonly"/>
         </el-form-item>
@@ -479,7 +489,7 @@ export default {
       getComplainDeal(complainDealId).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改投诉处置";
+        this.title = "投诉处置详情";
         var statusName = this.selectDictLabel(this.taskStateOptions, row.complainStatus);
         this.form.complainStatus=statusName;
     });

gassafetyprogress-web/src/views/emergency/index.vue

@@ -114,9 +114,9 @@
       >
         <img
           :src="item.imgurl"
-          style="margin-top: 6px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
+          style="margin-top: 8px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
         />
-        {{ item.name }}
+        {{ item.name }} ({{ item.num }})
       </div>
     </div>
 
@@ -365,36 +365,42 @@ export default {
       arr2: [
         {
           val: 10,
+          num:0,
           ischeck: false,
           imgurl: require("@/assets/image/yj-jydw.png"),
           name: "救援队伍",
         },
         {
           val: 11,
+          num:0,
           ischeck: false,
           imgurl: require("@/assets/image/yj-wz.png"),
           name: "救援物资",
         },
         {
           val: 12,
+          num:0,
           ischeck: false,
           imgurl: require("@/assets/image/yj-cl.png"),
           name: "救援车辆",
         },
         {
           val: 13,
+          num:0,
           ischeck: false,
           imgurl: require("@/assets/image/yj-yy.png"),
           name: "医 院",
         },
         {
           val: 15,
+          num:0,
           ischeck: false,
           imgurl: require("@/assets/image/yj-xf.png"),
           name: "消防队伍",
         },
         {
           val: 16,
+          num:0,
           ischeck: false,
           imgurl: require("@/assets/image/yj-xj.png"),
           name: "巡检人员",
@@ -478,8 +484,9 @@ export default {
     this.map = new EditorMap(
       "map",
       {
-        center: path,
+        //center: path,
         //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
+        center: [114.208007, 38.260288],
         zoom: 14.5,
       },
       this
@@ -536,6 +543,12 @@ export default {
         listDevice(params).then(response => {
           response.rows.forEach((item) => {
               item.iconType = item.deviceType+9;
+              if(item.deviceType<5){
+                this.arr2[item.deviceType-1].num++;
+              }else {
+                this.arr2[item.deviceType-2].num++;
+              }
+
           });
           this.deviceList = response.rows;
           //console.log(this.deviceList)
@@ -598,8 +611,8 @@ export default {
       this.dialogTableVisible = false;
     },
     getPath(res){
-      console.log("res", res);
-      console.log(this.form.longitude, this.form.latitude);
+      //console.log("res", res);
+      //console.log(this.form.longitude, this.form.latitude);
       //确认选择经纬度
       this.form.longitude = res[0];
       this.form.latitude = res[1];
@@ -745,12 +758,30 @@ export default {
         this.selarr1.splice(ind, 1);
       } else {
         this.selarr1.push(item.val);
+        //找中心点
+        console.log(item.val);
+        if(item.val>=10){
+          for(var i=0;i<this.deviceList.length;i++){
+            if(this.deviceList[i].iconType==item.val){
+              console.log(this.deviceList[i])
+              this.map.setZoomAndCenter(this.deviceList[i].longitude,this.deviceList[i].latitude);
+              break;
+            }
+          }
+          // this.deviceList.forEach((item2) => (
+          //   if(item2.iconType==item.val){
+          //
+          //   }
+          //
+          // ));
+        }
       }
       this.map.allfilter(this.selarr, this.selarr1);
+      //this.map.setZoomAndCenter(14, [116.326655,39.899438]);
     },
     //用户的设备center
     getDetectorInfoList(httpFunc, queryParams, title) {
-      console.log(queryParams);
+      //console.log(queryParams);
       return httpFunc(queryParams).then((res) => {
         // console.log("queryParams", res);
         if (res.code == 200) {
@@ -1009,7 +1040,7 @@ export default {
 .typelist-div {
   width: 450px;
   height: 50px;
-  z-index: 9999;
+  z-index: 999;
   position: fixed;
   top: 0;
   margin-top: 80px;
@@ -1017,16 +1048,17 @@ export default {
 }
 .typelist-div2{
   width: 150px;
-  height: 50px;
-  z-index: 9999;
+  height: 230px;
+  z-index: 999;
   position: fixed;
   margin-top: 80px;
   margin-left: 10px;
+  background: white;
+  margin-left: 15px;
 }
 .list {
   z-index: 9999;
   float: left;
-  margin-left: 15px;
   color: #000000;
   line-height: auto;
   background: #ffffff;

gassafetyprogress-web/src/views/inspectionWork/workOrder/components/HiddenTrouble.vue

@@ -53,7 +53,7 @@
             size="mini"
             type="text"
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row,scope.$index)"
+            @click="viewDetail(scope.row,scope.$index)"
             v-if="isView"
           >详情</el-button>
           <el-button
@@ -236,6 +236,19 @@ export default {
       this.title = "新增隐患信息"
       this.hiddenOpen = true;
     },
+    /** 详情按钮操作 */
+    viewDetail(row,index) {
+      this.reset();
+      this.index = index;
+      this.hiddenForm = {...row};
+      this.title = "查看隐患信息"
+      this.hiddenOpen = true;
+      if (this.hiddenForm.pictureUrl) {
+        this.fileList.push({
+          url: this.hiddenForm.pictureUrl,
+        });
+      }
+    },
     /** 修改按钮操作 */
     handleUpdate(row,index) {
       this.reset();

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-26 17:12:04
+ * @LastEditTime: 2022-03-29 10:09:52
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
@@ -9,21 +9,24 @@
 
 <template>
   <div class="czcard">
-    <my-collapse title="场站" ref="myCollapse">
+    <my-collapse
+      title="场站"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
       <template v-slot:chackbox>
-        <div class="filter" v-for="item in filterList" :key="item.value">
-          <span
-            class="text"
-            :class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
-            @click="fliterTypeChange(item)"
-            >{{ item.value }}</span
-          >
-          <span class="number">({{ item.count }})</span>
-        </div>
+        <FilterVue
+          :filterList="filterList"
+          @fliterTypeChange="fliterTypeChange"
+        />
       </template>
       <template #container>
         <div class="container" :class="{ start: getShowNum }">
-          <div v-for="item in czList" :key="item.deviceName" v-show="item.show">
+          <div
+            v-for="(item, index) in czList"
+            :key="item.deviceName + index"
+            v-show="item.show"
+          >
             <CzItem ref="czItem" :list="item" v-if="item.show" />
           </div>
         </div>
@@ -35,29 +38,31 @@
 <script>
 import MyCollapse from "./MyCollapse";
 import CzItem from "./CzItem";
+import FilterVue from "./FilterVue";
 
 export default {
+  // 场站
   components: {
     MyCollapse,
     CzItem,
+    FilterVue,
   },
   data() {
     return {
       carHide: true,
       addStartNum: 3,
       filterList: [
+        { value: "全部", count: 100, type: "all" },
         { value: "加气站", count: 100, type: 1 },
-        { value: "加气站1", count: 100, type: 2 },
-        { value: "加气站2", count: 100, type: 3 },
-        { value: "加气站3", count: 100, type: 4 },
-        { value: "加气站4", count: 100, type: 5 },
-        { value: "加气站5", count: 100, type: 6 },
-        { value: "加气站7", count: 100, type: 7 },
+        { value: "门站", count: 100, type: 2 },
+        { value: "调压站", count: 100, type: 3 },
+        { value: "储备站", count: 100, type: 4 },
+        { value: "气化站", count: 100, type: 5 },
       ],
-      deviceTypeArr: [1, 2, 3, 4, 5, 6, 7],
+      deviceTypeArr: [1, 2, 3, 4, 5],
       czList: [
         {
-          deviceName: "加气站a",
+          deviceName: "加气站",
           state: 1,
           a: 25,
           b: 56,
@@ -69,8 +74,8 @@ export default {
           type: 1,
         },
         {
-          deviceName: "加气站b",
-          state: 1,
+          deviceName: "门站",
+          state: 2,
           a: 25,
           b: 56,
           c: 54,
@@ -81,7 +86,7 @@ export default {
           type: 2,
         },
         {
-          deviceName: "加气站c",
+          deviceName: "调压站",
           state: 1,
           a: 25,
           b: 56,
@@ -93,7 +98,7 @@ export default {
           type: 3,
         },
         {
-          deviceName: "加气站d",
+          deviceName: "储备站",
           state: 1,
           a: 25,
           b: 56,
@@ -105,7 +110,7 @@ export default {
           type: 4,
         },
         {
-          deviceName: "加气站e",
+          deviceName: "气化站",
           state: 1,
           a: 25,
           b: 56,
@@ -114,10 +119,10 @@ export default {
           e: 56,
           image: "",
           show: true,
-          type: 4,
+          type: 5,
         },
         {
-          deviceName: "加气站f",
+          deviceName: "气化站",
           state: 1,
           a: 25,
           b: 56,
@@ -126,10 +131,10 @@ export default {
           e: 56,
           image: "",
           show: true,
-          type: 4,
+          type: 5,
         },
         {
-          deviceName: "加气站g",
+          deviceName: "储备站",
           state: 1,
           a: 25,
           b: 56,
@@ -140,7 +145,6 @@ export default {
           show: true,
           type: 4,
         },
-       
       ],
     };
   },
@@ -156,6 +160,7 @@ export default {
   methods: {
     hide() {
       this.carHide = !this.carHide;
+      // this.myCollapse();
     },
     // 根据父子元素自动计算是否需要添加值start
     changeAddStartNum() {
@@ -177,18 +182,16 @@ export default {
     },
     //过滤选择
     fliterTypeChange(data) {
-      const { type } = data;
-      const index = this.deviceTypeArr.indexOf(type);
-      if (index >= 0) {
-        this.deviceTypeArr.splice(index, 1);
-      } else {
-        this.deviceTypeArr.push(type);
-      }
-      this.filter(this.deviceTypeArr);
-      // 改变大小
-      this.$nextTick(() => {
-        this.$refs.myCollapse.getHeight();
-      });
+      this.filter([...data]);
+      // 改变大小,因为动画原因加个延迟
+      // this.$nextTick(() => {
+      //   setTimeout(()=>{
+      //     this.myCollapse()
+      //   }, 300);
+      // });
+    },
+    myCollapse() {
+      // this.$refs.myCollapse.getHeight();
     },
     // 过滤对象
     filter(arr) {
@@ -206,24 +209,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter {
-  margin-right: 12px;
-  margin-top: 5px;
-  font-size: 14px;
-  .text {
-    cursor: pointer;
-    &:hover {
-      color: #06d7b189 !important;
-    }
-    &.active {
-      color: #06d7b1;
-    }
-  }
-  .number {
-    font-weight: 500;
-    color: #1890ff;
-  }
-}
+
 .container {
   width: 100%;
   flex-wrap: wrap;
@@ -236,9 +222,13 @@ export default {
   }
   & > div {
     margin-bottom: 20px;
-    margin-left:1%;
+    margin-left: 1%;
     width: 24%;
     min-width: 295px;
+    border: 1px solid #e6ebf5;
+    border-radius: 4px;
+
+    box-sizing: border-box;
   }
 }
 .flex {

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-26 10:27:00
- * @LastEditTime: 2022-03-26 16:38:29
+ * @LastEditTime: 2022-03-28 18:03:04
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
 -->
+
 <template>
-  <div class="czitem flex">
+  <div class="czitem flex" :class="{nopadding:changeStyle}">
     <div class="left">
       <div class="img">
-        <div class="state">
-          {{ list.state == "0" ? "正常" : "报警" }}
+        <div class="state" :class="{active1:list.state=='1',active2:list.state=='2',active3:list.state=='3'}">
+          {{ stateType[list.state]  }}
         </div>
         <img v-if="list.src" src="" alt="" />
         暂无图片
       </div>
-      <div v-unValue class="device-name zzz">{{ list.deviceName }}</div>
+      <div v-if="!changeStyle" v-unValue class="device-name zzz">{{ list.deviceName }}</div>
     </div>
 
     <div class="right">
-      <div>温度：<span :class="{active:list.a>50}">{{list.a}}°C</span></div>
-      <div>水温：<span :class="{active:list.b>50}">{{list.b}}°C</span></div>
-      <div>压力：<span :class="{active:list.c>50}">{{list.c}}Pa</span></div>
-      <div>湿度：<span :class="{active:list.d>50}">{{list.d}}°C</span></div>
-      <div>水温：<span :class="{active:list.e>50}">{{list.e}}°C</span></div>
+      <div>
+        温度：<span :class="{ active: list.a > 50 }">{{ list.a }}°C</span>
+      </div>
+      <div>
+        水温：<span :class="{ active: list.b > 50 }">{{ list.b }}°C</span>
+      </div>
+      <div>
+        压力：<span :class="{ active: list.c > 50 }">{{ list.c }}Pa</span>
+      </div>
+      <div>
+        湿度：<span :class="{ active: list.d > 50 }">{{ list.d }}°C</span>
+      </div>
+      <div>
+        水温：<span :class="{ active: list.e > 50 }">{{ list.e }}°C</span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  // 场站子组件
   props: {
     list: {
       type: Object,
     },
+    // 从外部传一个值，来改变一些样式
+    changeStyle:{
+      type:Boolean,
+      default:false,
+    },
+    stateType:{
+      type:Object,
+      default:()=>({"1":"正常",2:"报警"})
+    }
+
   },
 };
 </script>
@@ -46,8 +68,6 @@ export default {
   min-height: 191px;
   padding: 14px 12px 18px 25px;
   box-sizing: border-box;
-  border-radius: 4px;
-  border: 1px solid #e6ebf5;
   // display: flex;
   .left {
     // margin-right: 48px;
@@ -73,6 +93,15 @@ export default {
         line-height: 28px;
         color: #06d7b1;
         font-size: 14px;
+        &.active1 {
+          color: #06d7b1;
+        }
+        &.active2 {
+          color: #FF6C68;
+        }
+        &.active3 {
+          color: #bbbbbb;
+        }
       }
       img {
         width: 100%;
@@ -90,7 +119,7 @@ export default {
     min-width: 80px;
     & > div {
       margin-bottom: 10px;
-      span.active{
+      span.active {
         color: red;
       }
     }
@@ -100,4 +129,8 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.nopadding{
+  padding-bottom:0 !important;
+  min-height:170px;
+}
 </style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-29 09:41:23
+ * @LastEditTime: 2022-03-29 11:08:25
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Filter.vue
+-->
+<template>
+  <div class="fliter-vue">
+    <div class="filter" v-for="(item, index) in filterList" :key="item.value">
+      <!-- 全部 -->
+      <template v-if="index == 0">
+        <span
+          class="text"
+          :class="{
+            active: deviceTypeArr.length == filterList.length - 1
+          }"
+          @click="fliterTypeChange(item)"
+          >{{ item.value }}
+          <i class="iconfont icon-bingo"></i>
+        </span>
+        <span class="number">({{ item.count }})</span>
+      </template>
+      <template v-else>
+        <span
+          class="text"
+          :class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
+          @click="fliterTypeChange(item)"
+          >{{ item.value }}
+          <i class="iconfont icon-bingo"></i>
+        </span>
+        <span class="number">({{ item.count }})</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      deviceTypeArr: [],
+      allArray: [],
+    };
+  },
+  props: {
+    // 传进来的参数
+    filterList: Array,
+  },
+  created() {
+    this.deviceTypeArr = this.filterList
+      .filter((item) => item.type > 0)
+      .map((item) => item.type);
+    // 全选时的数组内容
+    this.allArray = [...this.deviceTypeArr];
+  },
+  methods: {
+    fliterTypeChange(data) {
+      const { type } = data;
+      // 如果点的是全选
+      if (type == "all") {
+        if (this.deviceTypeArr.length == this.filterList.length - 1) {
+          this.deviceTypeArr = [];
+        } else {
+          this.deviceTypeArr = [...this.allArray];
+        }
+      } else {
+        const index = this.deviceTypeArr.indexOf(type);
+        if (index >= 0) {
+          this.deviceTypeArr.splice(index, 1);
+        } else {
+          this.deviceTypeArr.push(type);
+        }
+      }
+      this.$emit("fliterTypeChange", [...this.deviceTypeArr]);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.fliter-vue {
+  display: flex;
+}
+.filter {
+  margin-right: 30px;
+  margin-top: 5px;
+  font-size: 14px;
+  .text {
+    cursor: pointer;
+    position: relative;
+    .iconfont {
+      font-size: 10px;
+      position: absolute;
+      left: -12px;
+      top: 0px;
+      color: rgba(0, 0, 0, 0);
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border: 1px solid #000000;
+      left: -12px;
+      top: 50%;
+      margin-top: -5px;
+    }
+    &:hover {
+      .iconfont {
+        font-size: 10px;
+        position: absolute;
+        left: -12px;
+        color: rgba(0, 0, 0, .5);
+      }
+    }
+    &.active {
+       .iconfont {
+        font-size: 10px;
+        position: absolute;
+        left: -12px;
+        color: rgba(0, 0, 0, 1);
+      }
+    }
+  }
+  .number {
+    font-weight: 500;
+    color: #1890ff;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue2.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-29 09:41:23
+ * @LastEditTime: 2022-03-29 11:14:11
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Filter.vue
+-->
+<template>
+  <div class="fliter-vue">
+    <div
+      class="filter"
+      v-for="(item, index) in filterList"
+      :key="item.value"
+      :class="`one-${item.state}`"
+    >
+      <!-- 全部 -->
+      <template v-if="index == 0">
+        <span
+          class="text"
+          @click="fliterTypeChange(item)"
+          :class="{ active: deviceTypeArr.length == filterList.length - 1}"
+          >{{ item.value }}
+          <i class="iconfont icon-bingo"></i>
+        </span>
+        <span class="number">({{ item.count }})</span>
+      </template>
+      <template v-else>
+        <span
+          class="text"
+          :class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
+          @click="fliterTypeChange(item)"
+          >{{ item.value }}
+          <i class="iconfont icon-bingo"></i>
+        </span>
+        <span class="number">({{ item.count }})</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      deviceTypeArr: [],
+      allArray: [],
+    };
+  },
+  props: {
+    // 传进来的参数
+    filterList: Array,
+  },
+  created() {
+    this.deviceTypeArr = this.filterList
+      .filter((item) => item.state > 0)
+      .map((item) => item.state);
+    // 全选时的数组内容
+    this.allArray = [...this.deviceTypeArr];
+  },
+  methods: {
+    fliterTypeChange(data) {
+      const { state } = data;
+      // 如果点的是全选
+      if (state == "all") {
+        if (this.deviceTypeArr.length == this.filterList.length - 1) {
+          this.deviceTypeArr = [];
+        } else {
+          this.deviceTypeArr = [...this.allArray];
+        }
+      } else {
+        const index = this.deviceTypeArr.indexOf(state);
+        if (index >= 0) {
+          this.deviceTypeArr.splice(index, 1);
+        } else {
+          this.deviceTypeArr.push(state);
+        }
+      }
+      this.$emit("fliterTypeChange", [...this.deviceTypeArr]);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$one: #06d7b1 !important;
+$two: #ff6c68 !important;
+$three: #bbbbbb !important;
+$all: #000000;
+.fliter-vue {
+  display: flex;
+}
+.filter {
+  margin-right: 30px;
+  margin-top: 5px;
+  font-size: 14px;
+
+  .text {
+    cursor: pointer;
+    position: relative;
+    .iconfont {
+      font-size: 10px;
+      position: absolute;
+      left: -12px;
+      top: 0px;
+      color: rgba(0, 0, 0, 0);
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border: 1px solid #000000;
+      left: -12px;
+      top: 50%;
+      margin-top: -5px;
+    }
+    &:hover {
+      .iconfont {
+        font-size: 10px;
+        position: absolute;
+        left: -12px;
+        color: rgba(0, 0, 0, .5);
+      }
+    }
+    &.active {
+       .iconfont {
+        font-size: 10px;
+        position: absolute;
+        left: -12px;
+        color: rgba(0, 0, 0, 1);
+      }
+    }
+  }
+  .number {
+    font-weight: 500;
+    color: #1890ff !important;
+  }
+
+  &.one-all {
+    .number,
+    .text {
+      color: $all;
+    }
+  }
+  &.one-1 {
+    .number,
+    .text {
+      color: $one;
+    }
+  }
+  &.one-2 {
+    .number,
+    .text {
+      color: $two;
+    }
+  }
+  &.one-3 {
+    .number,
+    .text {
+      color: $three;
+    }
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-26 15:33:25
+ * @LastEditTime: 2022-03-29 10:12:49
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
@@ -16,7 +16,7 @@
     >
       <div class="title flex">
         <div class="left">
-          <div class="device">{{title}}</div>
+          <div class="device">{{ title }}</div>
           <slot name="chackbox" />
         </div>
         <div class="right">
@@ -28,7 +28,11 @@
         </div>
       </div>
       <div ref="container">
-        <slot name="container" />
+        <transition name="fade" mode="out-in">
+          <div :key="listNum">
+            <slot name="container" />
+          </div>
+        </transition>
       </div>
     </div>
   </div>
@@ -38,16 +42,22 @@
 import { mapGetters } from "vuex";
 
 export default {
-  props:{
-    title:String,
+  props: {
+    title: String,
+    // 动画需求
+    listNum: {
+      type: Number,
+      default: "1",
+    },
   },
+
   data() {
     return {
       carHide: true,
       transitionHeight: "60px",
     };
   },
- 
+
   computed: {
     ...mapGetters(["sidebar"]),
   },
@@ -56,25 +66,32 @@ export default {
       setTimeout(this.getHeight, 200);
       // this.getHeight();
     },
+    listNum(val) {
+      console.log(val);
+      setTimeout(() => {
+        this.getHeight();
+      }, 300);
+    },
   },
   mounted() {
     this.getHeight();
   },
-
   methods: {
     hide() {
       this.carHide = !this.carHide;
+      this.getHeight();
     },
     getHeight() {
       const { height } = this.$refs?.container?.getBoundingClientRect();
-      if(!height){
-        return;
-      }
+      // if (!height) {
+
+      //   return;
+      // }
       // 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
       if (height > 0) {
         this.transitionHeight = height + 60 + 18 + "px";
-      }else{
-        this.transitionHeight="60px";
+      } else {
+        this.transitionHeight = "60px";
       }
     },
   },
@@ -82,6 +99,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.25s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
 .card {
   transition: all 0.5s;
   // height: 212px;
@@ -92,12 +116,12 @@ export default {
   box-sizing: border-box;
   padding: 15px 22px 18px 22px;
   overflow: hidden;
-  margin-bottom:20px;
+  margin-bottom: 20px;
   &.hide {
     height: 60px !important;
   }
   .title {
-    margin-bottom: 12px;
+    margin-bottom: 16px;
     margin-left: 40px;
     .left {
       display: flex;

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 13:46:23
- * @LastEditTime: 2022-03-26 17:15:43
+ * @LastEditTime: 2022-03-28 15:05:04
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
@@ -46,6 +46,8 @@ export default {
 
 <style lang="scss" scoped>
 .chars-data {
-  padding: 26px 108px 0 88px;
+  // padding: 26px 108px 0 88px;
+  padding: 20px;
+  padding-right: 50px;
 }
 </style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-08 17:28:57
- * @LastEditTime: 2022-03-25 15:27:44
+ * @LastEditTime: 2022-03-28 17:20:55
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
@@ -16,7 +16,11 @@
         @click="isComChange(index)"
       ></div>
     </div>
-    <component :is="currentTabComponent"></component>
+    <transition name="fade-transform" mode="out-in">
+      <keep-alive>
+        <component :is="currentTabComponent"></component>
+      </keep-alive>
+    </transition>
   </div>
 </template>
 
@@ -50,7 +54,7 @@ export default {
   display: flex;
   justify-content: right;
   margin-right: 37px;
-  padding-top: 38px;
+  padding-top: 15px;
   div {
     cursor: pointer;
     padding: 4px;

gassafetyprogress-web/src/views/regulation/device/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="设备名称" prop="deviceName">
         <el-input
           v-model="queryParams.deviceName"
@@ -19,18 +25,17 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-<!--      <el-form-item label="所在地址" prop="deviceAddr">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.deviceAddr"-->
-<!--          placeholder="请输入所在地址"-->
-<!--          clearable-->
-<!--          size="small"-->
-<!--          @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-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>
 
@@ -365,7 +370,7 @@
         <el-row>
           <el-col :span="11">
         <el-form-item label="设备类型" prop="deviceType">
-          <el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 100%">
+          <el-select v-model="form.deviceType" placeholder="请选择设备类型">
             <el-option label="阀井" value="1" />
             <el-option label="调压箱" value="2" />
           </el-select>
@@ -374,7 +379,7 @@
 
           <el-col :span="11">
         <el-form-item label="权属单位" prop="beyondEnterpriseId">
-          <el-select v-model="form.beyondEnterpriseId" style="width: 100%"  placeholder="请在下拉框中选择权属单位" maxlength="255" :disabled="false" clearable>
+          <el-select v-model="form.beyondEnterpriseId"  placeholder="请在下拉框中选择权属单位" maxlength="255" :disabled="false" clearable>
             <el-option v-for="item in test" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId">
             </el-option>
           </el-select>