Merge branch 'master' of ssh://111.61.77.35:15/gengdidi/gassafety

gassafety-web/src/api/dataMonitoring/deviceAlarm.js

@@ -59,6 +59,6 @@ export function selectAlarmDevice() {
   return request({
     url: '/dataMonitoring/deviceAlarm/selectAlarmDevice',
     method: 'get',
-    params: query
+    // params: query
   })
 }

gassafety-web/src/components/PopWindow/flowMeter.vue

@@ -118,8 +118,8 @@
     </el-row>
 
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/components/PopWindow/pipelineView.vue

@@ -10,7 +10,6 @@
         ref="editForm"
         :model="editForm"
         label-width="135px"
-
       >
         <el-col>
           <el-form-item v-show="false" label="管道id" prop="pipeId">
@@ -144,10 +143,10 @@
     </el-row>
 
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button :loading="okLoading" type="primary" @click="ok"
         >确 定</el-button
       >
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>
@@ -224,15 +223,15 @@ export default {
       },
     };
   },
-  computed:{
-    myTitle(){
-      if(this.editForm.pipeId){
-        return `修改管道信息`
-      }else{
-        return `新增管道信息`
-      }
+  computed: {
+    myTitle() {
+      if (this.editForm.pipeId) {
+        return `修改管道信息`;
+      } else {
+        return `新增管道信息`;
       }
     },
+  },
   created() {
     console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
     if (this.lineData?.pipeId) {
@@ -241,7 +240,7 @@ export default {
       // 如果是新建的里面天蝎过东西就存档
       console.log("内部lineDate", this.target.getExtData());
       const { lineData } = this.target.getExtData();
-      console.log(lineData)
+      console.log(lineData);
       if (lineData) {
         this.editForm = { ...lineData };
       }

gassafety-web/src/components/PopWindow/pressureGage.vue

@@ -118,8 +118,8 @@
       </el-form>
     </el-row>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/components/PopWindow/regulatorBox.vue

@@ -111,8 +111,8 @@
       </el-form>
     </el-row>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/components/PopWindow/valveWell.vue

@@ -110,8 +110,8 @@
       </el-form>
     </el-row>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/components/PopWindowGis/lineInfoWindowWarn.vue

@@ -77,8 +77,8 @@
     <!-- 报警状态 -->
     <div class="warn-wrapper" v-if="true">
       <div class="warn-content">
-        <div>报警状态：<span>报警</span></div>
-        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+        <div>报警状态：<span>报警({{alarmType}})</span></div>
+        <div>详细信息：<span>{{alarmValue?alarmValue:"-"}}</span></div>
       </div>
       <div class="btn">
         <el-button class="elbtn" type="primary">设备详情</el-button>
@@ -95,6 +95,11 @@ export default {
   props: {
     obj: { typs: Object },
   },
+  data(){
+    return {
+
+    }
+  },
   created() {
     console.log("created", this.obj);
   },
@@ -103,6 +108,12 @@ export default {
     bigImageArr() {
       return [this.obj.iconUrl];
     },
+    alarmType(){
+      return this.obj.polyline.getExtData().lineData.alarmType;
+    },
+    alarmValue(){
+      return this.obj.polyline.getExtData().lineData.alarmValue;
+    }
   },
   methods: {
     moment,

gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue

@@ -63,13 +63,13 @@
 
     <!-- 报警状态 -->
     <div class="warn-wrapper" v-if="true">
-      <!-- <div class="warn-content">
-        <div>报警状态：<span>报警</span></div>
-        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
-      </div> -->
+      <div class="warn-content">
+        <div>报警状态：<span>报警({{data.alarmType}})</span></div>
+        <div>详细信息：<span>{{data.alarmValue?data.alarmValue :"-"}}</span></div>
+      </div>
       <div class="btn">
         <el-button class="elbtn" type="primary">设备详情</el-button>
-        <el-button class="elbtn" type="primary">生成工单</el-button>
+        <el-button v-if="title=='压力表'|| title=='流量计' " class="elbtn" type="primary">生成工单</el-button>
       </div>
     </div>
   </div>

gassafety-web/src/components/PopWindowGis/workerManInfowindow.vue

 <template>
   <div class="wrapper">
-    <span class="left">{{data.userName}}:</span>
-    <span class="right">{{data.createTime}}</span>
+    <span class="left">姓名: {{ data.userName }}</span>
+    <span class="right">时间: {{ data.createTime }}</span>
   </div>
 </template>
 
 <script>
 export default {
-  props:{
-    data:{
-      type:Object
-    }
+  props: {
+    data: {
+      type: Object,
+    },
+  },
+  created() {
+    console.log("data", this.data);
   },
-  created(){
-    console.log("data",this.data)
-  }
-
 };
 </script>
 
 <style  lang="scss" scoped>
-.wrapper{
-  width: 166px;
+.wrapper {
+  // width: 166px;
   height: 54px;
-  background: #0D4F88;
+  background: #0d4f88;
   font-size: 14px;
-  color:#fff;
+  color: #fff;
   box-sizing: border-box;
-  padding:7px 0px 7px 8px;
-  box-shadow: 0 0 20px -5px #0D4F88;
+  padding: 7px 7px 7px 8px;
+  box-shadow: 0 0 20px -5px #0d4f88;
   border-radius: 4px;
-  span{
+  span {
     word-break: break-all;
-    display: inline-block;
-    vertical-align: top;
-    &.right{
-      width:90px;
-      padding-left:4px;
-    }
+    display: block;
+    // vertical-align: top;
+    // &.right {
+    //   width: 90px;
+    //   padding-left: 4px;
+    // }
   }
 }
 </style>
\ No newline at end of file

gassafety-web/src/components/PopWindowGis/workerManView.vue

@@ -62,10 +62,10 @@
     </el-form>
 
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button :loading="okLoading" type="primary" @click="ok"
         >确 定
       </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/router/index.js

@@ -184,6 +184,58 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/realtimeData',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'realtimedetail',
+        component: (resolve) => require(['@/views/dataMonitoring/realtimeData/realtimedetail'], resolve),
+        name: 'realtimeData-realtimedetail',
+        meta: { title: '详情' }
+      }
+    ],
+  },
+  {
+    path: '/realtimeData',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'index',
+        component: (resolve) => require(['@/views/dataMonitoring/realtimeData/index'], resolve),
+        name: 'index',
+        meta: { title: '返回' }
+      }
+    ]
+  },
+  {
+    path: '/reportData',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'reportdetail',
+        component: (resolve) => require(['@/views/dataMonitoring/reportData/reportdetail'], resolve),
+        name: 'reportData-reportdetail',
+        meta: { title: '详情' }
+      }
+    ],
+  },
+  {
+    path: '/reportData',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'index',
+        component: (resolve) => require(['@/views/dataMonitoring/reportData/index'], resolve),
+        name: 'index',
+        meta: { title: '返回' }
+      }
+    ]
+  },
   {
     path: '/gen',
     component: Layout,

gassafety-web/src/store/modules/app.js

@@ -26,7 +26,6 @@ const mutations = {
   },
   TOGGLE_DEVICE: (state, device) => {
     state.device = device
-    console.log(123)
   },
   SET_SIZE: (state, size) => {
     state.size = size

gassafety-web/src/utils/gaodeMapView.js

@@ -47,7 +47,7 @@ class gaodeMap {
   myMap = null;
   showInfoWindow = null;
   // 工人轨迹用的窗口
-  markerPassedPolylineInfoWindow=null;
+  markerPassedPolylineInfoWindow = null;
 
   //构造函数中设置中央点默认值
   constructor(center) {
@@ -216,6 +216,7 @@ class gaodeMap {
       //   // e.target.content = this.getMarketContent(data);
       // });
       marker.on("mouseover", e => {
+        that.markerType = markerType;
         e.target.content = this.getMarketContent(data);
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
@@ -244,10 +245,11 @@ class gaodeMap {
       DEVICE_TYPE.INSPECTOR != markerType &&
       DEVICE_TYPE.SMALLINSPECTOR != markerType
     ) {
-      marker.content = this.getMarketContent(data);
+      // marker.content = this.getMarketContent(data, markerInfoWindow);
       marker.on("mouseover", infoOpen);
       marker.on("mouseout", infoClose);
       marker.setExtData(data);
+
       that.deviceType = markerType;
       let editWindow = that.createInfowindow("编辑");
       editWindow.fileArr =
@@ -325,7 +327,25 @@ class gaodeMap {
     }
 
     function infoOpen(e) {
-      // 删除克隆出来的线的clonedom
+      if (e.target.getExtData().alarmState == 1) {
+        that.markerType = e.target.getExtData().deviceType;
+        // 警告状态这样就要换infowindow
+        e.target.content = that.getMarketContent(
+          e.target.getExtData(),
+          markerInfoWindowWarn
+        );
+      } else {
+        // 初始化为1的时候是没有的，所以需要判断一下
+        that.markerType =
+          e.target.getExtData().deviceType + "" == 1
+            ? "2"
+            : e.target.getExtData().deviceType + "";
+        console.log(typeof e.target.getExtData().deviceType);
+        e.target.content = that.getMarketContent(
+          e.target.getExtData(),
+          markerInfoWindow
+        );
+      }
 
       let options = map.getStatus();
       options.scrollWheel = false;
@@ -366,8 +386,8 @@ class gaodeMap {
    * @param data
    * @returns {string}
    */
-  getMarketContent(data) {
-    // let markerInfoWindow = markerInfoWindowWarn;
+  getMarketContent(data, markerInfoWindow) {
+    console.log("this.markerType", this.markerType);
     switch (this.markerType) {
       case DEVICE_TYPE.REGEULATORBOX: {
         const dom = createPop(markerInfoWindow, {
@@ -522,7 +542,13 @@ class gaodeMap {
       }
     }
   }
-
+  changeMarkIcon(marker,iconUrl){
+    let icon = new AMap.Icon({
+      opacity: 0.1,
+      image: iconUrl
+    });
+    marker.setIcon(icon);
+  }
   workerManView(options) {
     // const {} =options;
     const notice = createPop(workerManView, {
@@ -579,7 +605,8 @@ class gaodeMap {
 
       marker.passedPolyline.on("mouseover", e => {
         const dom = createPop(removeLineInfoWindow, {
-          map:this,marker
+          map: this,
+          marker
         });
         marker.infoWindow = new AMap.InfoWindow({
           isCustom: true,
@@ -594,7 +621,7 @@ class gaodeMap {
         //   e.stopPropagation();
 
         // })
-        this.markerPassedPolylineInfoWindow = infoWindow;
+        this.markerPassedPolylineInfoWindow = marker.infoWindow;
         console.log(e.lnglat);
       });
 
@@ -670,35 +697,18 @@ class gaodeMap {
 
       this.polyLines.push(polyline);
       // 信息窗体
-      const dom = createPop(lineInfoWindow, {
-        obj: { a: 123, editorPage: true, ...item, polyline }
-      });
-      // console.log("domdomdomdomdom",dom)
-      //console.log("dom", dom.$el);
-      dom.$el.addEventListener("mouseover", () => {
-        let options = this.myMap.getStatus();
-        options.scrollWheel = false;
-        this.myMap.setStatus(options);
-      });
-      dom.$el.addEventListener("mouseout", () => {
-        let options = this.myMap.getStatus();
-        options.scrollWheel = true;
-        this.myMap.setStatus(options);
-      });
-      let infoWindow = new AMap.InfoWindow({
-        isCustom: true,
-        autoMove: false,
-        content: dom.$el,
-        //信息船体偏移量
-        offset: new AMap.Pixel(0, 0),
-        anchor: "left-top"
-      });
-
       this.newLineAddEvent(polyline);
-      polyline.infoWindow = infoWindow;
       //添加事件
       polyline.on("mouseover", e => {
         if (this.lineType == 1) return;
+        // 生成infoWindow
+        let infoWindow;
+        // 警告状态时
+        if (e.target.getExtData().lineData.alarmState == 1) {
+          infoWindow = this.lineMouseOver(polyline, lineInfoWindowWarn, item);
+        } else {
+          infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
+        }
         infoWindow.open(map, e.lnglat);
         // 上方导航的高
         const topBar = 81;
@@ -741,24 +751,19 @@ class gaodeMap {
           //console.log("靠下了");
           Y = -infoWindowHeight - 20;
         }
+        if (polyline.getExtData().lineData.alarmState == 1) {
+          polyline.setOptions({ strokeColor: "#ff0000" });
+        }else{
           polyline.setOptions({ strokeColor: "#FF5A67" });
+        }
+        console.log ( polyline.getOptions() );
         infoWindow.setOffset(new AMap.Pixel(X, Y));
-        // 这个是为了盖住vue里的东西
-        // polyline.cloneDom = infoWindow.dom.cloneNode(true);
-        // polyline.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
-        // polyline.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
-        // // 先删除之前的，后增加现在的
-        // this.removeCloneDom();
-        // document.body.appendChild(polyline.cloneDom);
-        // infoWindow.close();
-        // this.addCloneDome(polyline, infoWindow);
-        // infoWindow.close();
-        // 检测是否与底部bottondata碰撞
         this.boxCollision(infoWindow.dom);
         this.showInfoWindow = infoWindow;
         // const
       });
       polyline.on("mouseout", e => {
+        if (polyline.getExtData().lineData.alarmState == 1) return;
         polyline.setOptions({ strokeColor: "#F7FE38" });
         // infoWindow.close();
       });
@@ -769,6 +774,31 @@ class gaodeMap {
     // 缩放地图到合适的视野级别
     // map.setFitView();
   }
+  lineMouseOver(polyline, lineInfoWindow, item) {
+    let dom = createPop(lineInfoWindow, {
+      obj: { a: 123, editorPage: true, ...item, polyline }
+    });
+    dom.$el.addEventListener("mouseover", () => {
+      let options = this.myMap.getStatus();
+      options.scrollWheel = false;
+      this.myMap.setStatus(options);
+    });
+    dom.$el.addEventListener("mouseout", () => {
+      let options = this.myMap.getStatus();
+      options.scrollWheel = true;
+      this.myMap.setStatus(options);
+    });
+    let infoWindow = new AMap.InfoWindow({
+      isCustom: true,
+      autoMove: false,
+      content: dom.$el,
+      //信息船体偏移量
+      offset: new AMap.Pixel(0, 0),
+      anchor: "left-top"
+    });
+    polyline.infoWindow = infoWindow;
+    return infoWindow;
+  }
   // 碰撞检测
   boxCollision(infowindowDom) {
     // gis地图页面的bottomdata组件
@@ -828,8 +858,8 @@ class gaodeMap {
     this.markerInfoWindow && this.markerInfoWindow.close();
     this.workerManInfoWindow && this.workerManInfoWindow.close();
     // 工人的轨迹线条用的
-    this.markerPassedPolylineInfoWindow && this.markerPassedPolylineInfoWindow.close();
-
+    this.markerPassedPolylineInfoWindow &&
+      this.markerPassedPolylineInfoWindow.close();
   }
   // 关闭转化到vue的dom
   removeCloneDom() {

gassafety-web/src/views/dataMonitoring/realtimeData/index.vue

@@ -178,6 +178,13 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:data:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="showDetail(scope.row)"
+            v-hasPermi="['system:data:export']"
+          >详情</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -386,6 +393,15 @@ export default {
         }
       });
     },
+    //详情按钮
+    showDetail(row) {
+      this.$router.push({
+        path: '/realtimeData/realtimedetail',
+        query:{
+          orderId : row.orderId
+        }
+      }) //带参跳转
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const deviceReportDataIds = row.deviceReportDataId || this.ids;

gassafety-web/src/views/dataMonitoring/realtimeData/realtimedetail.vue

+<template>
+    <div class="app-container detail" style="background-color: rgb(238, 241, 245);">
+      <div style="padding-top: 10px;background: #fff;height: 100%;">
+        <div>
+          <div style="width: 5%;height: 45px;margin-left: 20px;" @click="$router.go(-1)">
+            <el-button
+            size="medium"
+            type="text"
+            style="font-size: 18px; color: rgb(7, 63, 112);float: left;"
+            >返回</el-button>
+            <div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
+          </div>
+        </div>
+
+        <div style="width: 100%;height: 350px;padding: 10px;height: 300px;">
+            <div style="width: 66.6%;float: left;height: 100%;">
+                <el-table
+                :data="tableData"
+                style="width: 100%">
+                <el-table-column
+                    prop="date"
+                    label="日期"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="name"
+                    label="姓名"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="address"
+                    label="地址">
+                </el-table-column>
+                </el-table>
+                <el-table
+                :data="tableData"
+                style="width: 100%;margin-top: 20px;">
+                <el-table-column
+                    prop="date"
+                    label="日期"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="name"
+                    label="姓名"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="address"
+                    label="地址">
+                </el-table-column>
+                </el-table>
+                <el-table
+                :data="tableData"
+                style="width: 100%;margin-top: 20px;">
+                <el-table-column
+                    prop="date"
+                    label="日期"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="name"
+                    label="姓名"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="address"
+                    label="地址">
+                </el-table-column>
+                </el-table>
+            </div>
+          <div id="marbox" style="width: 33%;height: 350px; border: 1px solid rgb(218, 213, 213);float: right;margin-top: -45px;">
+            <div style="width: 100%;height: 100%" id="container"></div>
+          </div>
+        </div>
+
+        <div style="height: 320px;width: 100%;margin-top: 15px;padding: 10px;">
+            <div id="main1" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
+            <div id="main2" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
+        </div>
+
+
+        <div style="height: 320px;width: 100%;padding: 10px;"> 
+            <div id="main3" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
+            <div id="main4" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
+        </div>
+      </div>
+        
+    </div>
+  </template>
+
+  <script>
+
+  import { listBasicsInfo, getBasicsInfo, delBasicsInfo, addBasicsInfo, updateBasicsInfo, exportBasicsInfo } from "@/api/workOrder/basicsInfo";
+  import { deviceTree } from "@/api/device/deviceInfo";
+  import gaodeMap from "utils/gaodeMap.js";
+  import {map, DEVICE_TYPE} from "utils/gaodeMap.js";
+  import { inspectorList } from "@/api/system/user";
+  import echarts from 'echarts';
+//   Vue.prototype.$echarts = echarts;
+
+export default {
+    name: "BasicsInfo",
+    components: {
+    },
+    data() {
+      return {
+        tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          },],
+        inspector: [],
+        isDisplay:false,
+        dialogImageUrl: '',
+        dialogVisible: false,
+        disabled: false,
+        imageUrl: '',
+        // 遮罩层
+        loading: true,
+        // 导出遮罩层
+        exportLoading: false,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 工单基础信息表格数据
+        basicsInfoList: [],
+        // feedbackList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 工单状态字典
+        typeOptions: [],
+        pickerOptions:[],
+        // 工单类型字典
+        ordertypeOptions: [],
+        // 设备树选项
+        deviceOptions: [
+          {
+            label: "设备列表",
+            childList: []
+          }
+        ],
+        defaultProps: {
+          children: "childList",
+          label: "label"
+        },
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          orderType: null,
+          orderName: null,
+          orderStatus: null,
+          appointInspector: null,
+          allotTime: null,
+          actualInspector: null,
+          actualTime: null,
+          remarks: null
+        },
+        // 表单参数
+        form: {},
+        activity: {},
+        // 表单校验
+        rules: {
+        },
+        active : 0,
+        orderId : "",
+        showAndHide : false
+      };
+    },
+    
+    created() {
+      // 如果是跳转来的，则接受初始化参数
+      // this.user_id = this.$route.query.id; //详细信息页接收参数
+      this.orderId = this.$route.query.orderId;
+      this.getList();
+      this.getDicts("t_order_status").then(response => {
+        this.typeOptions = response.data;
+      });
+      this.getDicts("t_order_type").then(response => {
+        this.ordertypeOptions = response.data;
+      });
+      this.getBasicsInfo();
+    },
+    mounted(){
+      let gaoMap =  new gaodeMap("石家庄");
+      this.gaoMap = gaoMap;
+      this.getBasicsInfo();
+      this.initData();
+      this.drawPieChart();
+      this.main3();
+      this.main4();
+    },
+    methods: {
+      getInspectorList(){
+        this.loading = true;
+        inspectorList().then(response => {
+          this.inspector = response.data;
+          this.loading = false;
+        });
+        
+      },
+    //   getMap() {
+    //   var myChart = this.$echarts.init(document.getElementById('map'))
+    //   let option = {
+    //     xAxis: {
+    //       type: 'category',
+    //       // data: this.dataX,
+    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    //       boundaryGap: false, //控制日期是否在中间显示
+    //       axisLabel: {
+    //         show: true, //是否显示日期
+    //         interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+    //         textStyle: {
+    //           color: '#000', //日期的颜色
+    //           fontSize: 12 //字体的大小
+    //         }
+    //       },
+    //       axisLine: {
+    //         lineStyle: {
+    //           color: '#ccc' // x轴的颜色
+    //         }
+    //       }
+    //     },
+    //     yAxis: {
+    //       type: 'value',
+    //       axisLabel: {
+    //         formatter: '{value}',
+    //         textStyle: {
+    //           color: '#000' //数字的颜色
+    //         },
+    //         inside: false //控制数据是否在内侧还是外侧显示
+    //       },
+    //       axisLine: {
+    //         lineStyle: {
+    //           color: '#ccc' // 折线的颜色
+    //         }
+    //       }
+    //     },
+    //     series: [
+    //       {
+    //         // data: this.dataY,
+    //         data: [820, 932, 901, 934, 1290, 1330, 1320],
+    //         type: 'line',
+    //         symbol: 'circle', //是否显示实心的折线圆点
+    //         smooth: true, //让折线有弧度
+    //         symbolSize: 7, //折线圆点的大小
+    //         itemStyle: {
+    //           normal: {
+    //             color: '#efc883', //折线点的颜色
+    //             lineStyle: {
+    //               color: '#efc883' //折线的颜色
+    //             },
+    //             label: { show: true } //是否在折线点上显示数字
+    //           }
+    //         }
+    //       }
+    //     ]
+    //   }
+    //   myChart.setOption(option)
+    // },
+    initData() {
+		// 基于准备好的dom，初始化echarts实例
+		var myChart1 = echarts.init(document.getElementById('main1'));
+		// let that=this;
+		// var getData1 = [];
+		// var getData2 = [];
+		// METHOD.axiosGet(
+		//   this,
+		//   `/enterpriseInfo/getNumberByRegulation`,
+		//   function(res) {
+		//     if (res.code === 0) {
+		// 		//先进行赋值
+		// 		for(let i=0; i<res.data.result.length; i++) {
+		// 			var obj = new Object();
+		// 			var arr = new Object();
+		// 			// obj.name = res.data.result[i].name;
+		// 			// obj.value = res.data.result[i].number;
+		// 			obj.name = res.data.result[i].type;
+		// 			obj.value = res.data.result[i].number;
+		// 			arr = res.data.result[i].type;
+		// 			getData1[i] = obj;
+		// 			getData2[i] = arr;
+		// 		}
+		// 		myChart1.setOption({
+		// 			legend: {
+		// 				data: getData2,
+		// 			},
+		// 			series:[{
+		// 				data: getData1,
+		// 			}]
+		// 		})
+		//     }
+		// });
+		
+	// 绘制图表
+      myChart1.setOption({
+        title: {
+            text: '折线图堆叠'
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['标况累积量', '工况累积量']
+        },
+        xAxis: {
+          type: 'category',
+          // data: this.dataX,
+          data: ['23', '44', '77', '34', '56', '88', '38','68','55','99','44','33'],
+          boundaryGap: false, //控制日期是否在中间显示
+          axisLabel: {
+            show: true, //是否显示日期
+            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+            textStyle: {
+              color: '#000', //日期的颜色
+              fontSize: 12 //字体的大小
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // x轴的颜色
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#000' //数字的颜色
+            },
+            inside: false //控制数据是否在内侧还是外侧显示
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // 折线的颜色
+            }
+          }
+        },
+        series: [
+          {
+            // data: this.dataY,
+            name:'工况累计量',
+            data: [820, 232, 901, 534, 1290, 330, 1320, 345, 654, 189, 980, 234],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#efc883', //折线点的颜色
+                lineStyle: {
+                  color: '#efc883' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          },
+          {
+            // data: this.dataY,
+            name:'工况累计量',
+            data: [500, 600, 700, 300, 1100, 130, 1200, 820, 932, 901, 934, 1290],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#053B6A', //折线点的颜色
+                lineStyle: {
+                  color: '#053B6A' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          }
+        ]
+      });
+	 
+    },
+	drawPieChart(){
+		// 基于准备好的dom，初始化echarts实例
+		var myChart2 = echarts.init(document.getElementById('main2'));
+		// let that=this;
+		// var getData1 = [];
+		// var getData2 = [];
+		// METHOD.axiosGet(
+		//   this,
+		//   `/enterpriseGoods/getNumberByEnterprise`,
+		//   function(res) {
+		//     if (res.code === 0) {
+		// 		//先进行赋值
+		// 		for(let i=0; i<res.data.result.length; i++) {
+		// 			var obj = new Object();
+		// 			var arr = new Object();
+		// 			// obj = res.data.result[i].number;
+		// 			// arr = res.data.result[i].type;
+		// 			obj = res.data.result[i].number;
+		// 			arr = res.data.result[i].name;
+		// 			getData1[i] = obj;
+		// 			getData2[i] = arr;
+		// 		}
+		// 		myChart2.setOption({
+		// 			xAxis: {
+		// 				data: getData2,
+		// 			},
+		// 			series:[{
+		// 				data: getData1,
+		// 			}]
+		// 		})
+		//     }
+		// });
+		// 绘制图表
+		myChart2.setOption({
+				  // color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'],
+                xAxis: {
+                type: 'category',
+                // data: this.dataX,
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                boundaryGap: false, //控制日期是否在中间显示
+                axisLabel: {
+                    show: true, //是否显示日期
+                    interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+                    textStyle: {
+                    color: '#000', //日期的颜色
+                    fontSize: 12 //字体的大小
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                    color: '#ccc' // x轴的颜色
+                    }
+                }
+                },
+                yAxis: {
+                type: 'value',
+                axisLabel: {
+                    formatter: '{value}',
+                    textStyle: {
+                    color: '#000' //数字的颜色
+                    },
+                    inside: false //控制数据是否在内侧还是外侧显示
+                },
+                axisLine: {
+                    lineStyle: {
+                    color: '#ccc' // 折线的颜色
+                    }
+                }
+                },
+                series: [
+                {
+                    // data: this.dataY,
+                    data: [820, 932, 901, 934, 1290, 1330, 1320],
+                    type: 'line',
+                    symbol: 'circle', //是否显示实心的折线圆点
+                    smooth: true, //让折线有弧度
+                    symbolSize: 7, //折线圆点的大小
+                    itemStyle: {
+                    normal: {
+                        color: '#efc883', //折线点的颜色
+                        lineStyle: {
+                        color: '#efc883' //折线的颜色
+                        },
+                        label: { show: true } //是否在折线点上显示数字
+                    }
+                    }
+                },
+                {
+                    // data: this.dataY,
+                    data: [500, 600, 700, 300, 1100, 130, 1200],
+                    type: 'line',
+                    symbol: 'circle', //是否显示实心的折线圆点
+                    smooth: true, //让折线有弧度
+                    symbolSize: 7, //折线圆点的大小
+                    itemStyle: {
+                    normal: {
+                        color: '#053B6A', //折线点的颜色
+                        lineStyle: {
+                        color: '#053B6A' //折线的颜色
+                        },
+                        label: { show: true } //是否在折线点上显示数字
+                    }
+                    }
+                }
+                ]
+		});
+	},
+    main3() {
+		// 基于准备好的dom，初始化echarts实例
+		var myChart3 = echarts.init(document.getElementById('main3'));
+		// let that=this;
+		// var getData1 = [];
+		// var getData2 = [];
+		// METHOD.axiosGet(
+		//   this,
+		//   `/enterpriseInfo/getNumberByRegulation`,
+		//   function(res) {
+		//     if (res.code === 0) {
+		// 		//先进行赋值
+		// 		for(let i=0; i<res.data.result.length; i++) {
+		// 			var obj = new Object();
+		// 			var arr = new Object();
+		// 			// obj.name = res.data.result[i].name;
+		// 			// obj.value = res.data.result[i].number;
+		// 			obj.name = res.data.result[i].type;
+		// 			obj.value = res.data.result[i].number;
+		// 			arr = res.data.result[i].type;
+		// 			getData1[i] = obj;
+		// 			getData2[i] = arr;
+		// 		}
+		// 		myChart1.setOption({
+		// 			legend: {
+		// 				data: getData2,
+		// 			},
+		// 			series:[{
+		// 				data: getData1,
+		// 			}]
+		// 		})
+		//     }
+		// });
+		
+	// 绘制图表
+      myChart3.setOption({
+        xAxis: {
+          type: 'category',
+          // data: this.dataX,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false, //控制日期是否在中间显示
+          axisLabel: {
+            show: true, //是否显示日期
+            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+            textStyle: {
+              color: '#000', //日期的颜色
+              fontSize: 12 //字体的大小
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // x轴的颜色
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#000' //数字的颜色
+            },
+            inside: false //控制数据是否在内侧还是外侧显示
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // 折线的颜色
+            }
+          }
+        },
+        series: [
+          {
+            // data: this.dataY,
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#efc883', //折线点的颜色
+                lineStyle: {
+                  color: '#efc883' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          },
+          {
+            // data: this.dataY,
+            data: [500, 600, 700, 300, 1100, 130, 1200],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#053B6A', //折线点的颜色
+                lineStyle: {
+                  color: '#053B6A' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          }
+        ]
+      });
+	 
+    },
+    main4() {
+		// 基于准备好的dom，初始化echarts实例
+		var myChart4 = echarts.init(document.getElementById('main4'));
+		// let that=this;
+		// var getData1 = [];
+		// var getData2 = [];
+		// METHOD.axiosGet(
+		//   this,
+		//   `/enterpriseInfo/getNumberByRegulation`,
+		//   function(res) {
+		//     if (res.code === 0) {
+		// 		//先进行赋值
+		// 		for(let i=0; i<res.data.result.length; i++) {
+		// 			var obj = new Object();
+		// 			var arr = new Object();
+		// 			// obj.name = res.data.result[i].name;
+		// 			// obj.value = res.data.result[i].number;
+		// 			obj.name = res.data.result[i].type;
+		// 			obj.value = res.data.result[i].number;
+		// 			arr = res.data.result[i].type;
+		// 			getData1[i] = obj;
+		// 			getData2[i] = arr;
+		// 		}
+		// 		myChart1.setOption({
+		// 			legend: {
+		// 				data: getData2,
+		// 			},
+		// 			series:[{
+		// 				data: getData1,
+		// 			}]
+		// 		})
+		//     }
+		// });
+		
+	// 绘制图表
+      myChart4.setOption({
+        xAxis: {
+          type: 'category',
+          // data: this.dataX,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false, //控制日期是否在中间显示
+          axisLabel: {
+            show: true, //是否显示日期
+            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+            textStyle: {
+              color: '#000', //日期的颜色
+              fontSize: 12 //字体的大小
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // x轴的颜色
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#000' //数字的颜色
+            },
+            inside: false //控制数据是否在内侧还是外侧显示
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // 折线的颜色
+            }
+          }
+        },
+        series: [
+          {
+            // data: this.dataY,
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#efc883', //折线点的颜色
+                lineStyle: {
+                  color: '#efc883' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          },
+          {
+            // data: this.dataY,
+            data: [500, 600, 700, 300, 1100, 130, 1200],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#053B6A', //折线点的颜色
+                lineStyle: {
+                  color: '#053B6A' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          }
+        ]
+      });
+	 
+    },  
+    
+    // 点击按钮显示隐藏
+      changeDisplay(e){
+        this.isDisplay = !this.isDisplay
+        let $timeline = this.$refs.timeline;
+        if(!this.showAndHide){
+          for(let i = 0; i< $timeline.$children.length; i++){
+            if(i>1){
+              $timeline.$children[i].$el.style.display = "block";
+            }
+          }
+          this.showAndHide = true;
+        }else{
+          for(let i = 0; i< $timeline.$children.length; i++){
+            if(i>1){
+              $timeline.$children[i].$el.style.display = "none";
+            }
+          }
+          this.showAndHide = false;
+        }
+
+
+        //$timeline.toggleRowExpansion(row,true)
+      },
+
+
+      handleRemove(file) {
+        console.log(file);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleDownload(file) {
+        console.log(file);
+      },
+      /** 查询工单基础信息列表 */
+      getList() {
+        this.loading = true;
+        listBasicsInfo(this.queryParams).then(response => {
+          this.basicsInfoList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      getBasicsInfo (){
+        getBasicsInfo(this.orderId).then(response =>{
+          this.form = response.data;
+          this.active = parseInt(response.data.orderStatus) + 1;
+          if(this.form.deviceInfoList.length>0){
+            this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]);
+          }
+          for(var i = 0; i < this.form.deviceInfoList.length; i++){
+            let obj = this.form.deviceInfoList[i];
+            this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
+          }
+
+          if(this.form.orderType == '1') {
+            // 获取设备列表树
+            let data = {
+              key1:this.form.deviceInfoList,
+              key2:this.form.pipeList
+            };
+            deviceTree(data).then(response => {
+              this.deviceOptions[0].childList = response.data;
+            });
+          }
+        });
+      },
+      // 筛选节点
+      // filterNode(value, data) {
+      //   if (!value) return true;
+      //   return data.label.indexOf(value) !== -1;
+      // },
+      // 节点单击事件
+      handleNodeClick(data) {
+
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        // this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          orderId: null,
+          orderType: null,
+          orderName: null,
+          orderStatus: "0",
+          createTime: null,
+          appointInspector: null,
+          allotTime: null,
+          actualInspector: null,
+          actualTime: null,
+          remarks: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.orderId)
+        this.single = selection.length!==1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.title = "添加工单基础信息";
+      },
+      /** 归档按钮操作 */
+    handleFinish(res) {
+      // this.reset();
+      getBasicsInfo(res).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "工单信息归档";
+      });
+    },
+      /** 修改按钮操作 */
+      handleUpdate(res) {
+      // this.reset();
+      this.getInspectorList();
+      getBasicsInfo(this.orderId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "工单信息修改";
+      });
+    },
+      /** 提交按钮 */
+       /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.orderStatus == '0') {
+            updateBasicsInfo(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else if(this.form.orderStatus == '2'){
+            updateOrderStatus(this.form).then(response => {
+              this.msgSuccess("操作成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const orderIds = row.orderId || this.ids;
+        this.$confirm('是否确认删除工单基础信息编号为"' + orderIds + '"的数据项?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+            return delBasicsInfo(orderIds);
+          }).then(() => {
+            this.getList();
+            this.msgSuccess("删除成功");
+          }).catch(() => {});
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        const queryParams = this.queryParams;
+        this.$confirm('是否确认导出所有工单基础信息数据项?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(() => {
+            this.exportLoading = true;
+            return exportBasicsInfo(queryParams);
+          }).then(response => {
+            this.download(response.msg);
+            this.exportLoading = false;
+          }).catch(() => {});
+      }
+    }
+  }
+  </script>
+  <style>
+    .el-tree-node__content{
+      width: 150px;
+    }
+    .el-divider--horizontal {
+      display: block;
+      height: 1px;
+      width: 100%;
+      margin: 20px 0;
+    }
+    .feedbackTime-div{
+      float: left;margin-left: 150px;margin-top: 10px;
+    }
+    .feedbackTime{
+      height: 120px;
+      width: 120px;
+      float: left;
+      margin-left: 15px;
+      margin-top: 5px;
+      margin-bottom: 15px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .el-card__body {
+      padding: 5px 20px 20px 20px;
+    }
+    .detail .el-form{
+        width: 20%;
+    }
+    .detail .el-form-item{
+        margin-bottom: 0px;
+    }
+    .el-tree{
+      margin-top: 5px;
+    }
+    .avatar-uploader{
+        width: 25%;
+        float: left;
+    }
+    .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  li{
+    font-size: 15px;
+    font-weight: 900;
+  }
+  </style>

gassafety-web/src/views/dataMonitoring/reportData/index.vue

@@ -162,7 +162,7 @@
       </el-table-column>
       <el-table-column label="通讯状态" align="center" prop="communicationStatus" />
       <el-table-column label="设备状态" align="center" prop="deviceStatus" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -178,8 +178,14 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:data:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="showDetail(scope.row)"
+          >详情</el-button>
         </template>
-      </el-table-column>
+      </el-table-column> -->
     </el-table>
 
     <pagination
@@ -366,6 +372,15 @@ export default {
         this.title = "修改设备监控";
       });
     },
+    /** 工单详细信息跳转 */
+    showDetail(row) {
+      this.$router.push({
+        path: '/reportData/reportdetail',
+        query:{
+          orderId : row.orderId
+        }
+      }) //带参跳转
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {

gassafety-web/src/views/dataMonitoring/reportData/reportdetail.vue

+<template>
+    <div class="app-container detail" style="background-color: rgb(238, 241, 245);">
+      <div style="padding-top: 10px;background: #fff;height: 100%;">
+        <div>
+          <div style="width: 5%;height: 45px;margin-left: 20px;" @click="$router.go(-1)">
+            <el-button
+            size="medium"
+            type="text"
+            style="font-size: 18px; color: rgb(7, 63, 112);float: left;"
+            >返回</el-button>
+            <div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
+          </div>
+        </div>
+
+        <div style="width: 100%;height: 350px;padding: 10px;height: 300px;">
+            <div style="width: 66.6%;float: left;height: 100%;">
+                <el-table
+                :data="tableData"
+                style="width: 100%">
+                <el-table-column
+                    prop="date"
+                    label="日期"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="name"
+                    label="姓名"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="address"
+                    label="地址">
+                </el-table-column>
+                </el-table>
+                <el-table
+                :data="tableData"
+                style="width: 100%;margin-top: 20px;">
+                <el-table-column
+                    prop="date"
+                    label="日期"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="name"
+                    label="姓名"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="address"
+                    label="地址">
+                </el-table-column>
+                </el-table>
+                <el-table
+                :data="tableData"
+                style="width: 100%;margin-top: 20px;">
+                <el-table-column
+                    prop="date"
+                    label="日期"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="name"
+                    label="姓名"
+                    width="180">
+                </el-table-column>
+                <el-table-column
+                    prop="address"
+                    label="地址">
+                </el-table-column>
+                </el-table>
+            </div>
+          <div id="marbox" style="width: 33%;height: 350px; border: 1px solid rgb(218, 213, 213);float: right;margin-top: -45px;">
+            <div style="width: 100%;height: 100%" id="container"></div>
+          </div>
+        </div>
+
+        <div style="height: 320px;width: 100%;margin-top: 15px;padding: 10px;">
+            <div id="main1" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
+            <div id="main2" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
+        </div>
+
+
+        <div style="height: 320px;width: 100%;padding: 10px;"> 
+            <div id="main3" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
+            <div id="main4" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
+        </div>
+      </div>
+        
+    </div>
+  </template>
+
+  <script>
+
+  import { listBasicsInfo, getBasicsInfo, delBasicsInfo, addBasicsInfo, updateBasicsInfo, exportBasicsInfo } from "@/api/workOrder/basicsInfo";
+  import { deviceTree } from "@/api/device/deviceInfo";
+  import gaodeMap from "utils/gaodeMap.js";
+  import {map, DEVICE_TYPE} from "utils/gaodeMap.js";
+  import { inspectorList } from "@/api/system/user";
+  import echarts from 'echarts';
+//   Vue.prototype.$echarts = echarts;
+
+export default {
+    name: "BasicsInfo",
+    components: {
+    },
+    data() {
+      return {
+        tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          },],
+        inspector: [],
+        isDisplay:false,
+        dialogImageUrl: '',
+        dialogVisible: false,
+        disabled: false,
+        imageUrl: '',
+        // 遮罩层
+        loading: true,
+        // 导出遮罩层
+        exportLoading: false,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 工单基础信息表格数据
+        basicsInfoList: [],
+        // feedbackList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 工单状态字典
+        typeOptions: [],
+        pickerOptions:[],
+        // 工单类型字典
+        ordertypeOptions: [],
+        // 设备树选项
+        deviceOptions: [
+          {
+            label: "设备列表",
+            childList: []
+          }
+        ],
+        defaultProps: {
+          children: "childList",
+          label: "label"
+        },
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          orderType: null,
+          orderName: null,
+          orderStatus: null,
+          appointInspector: null,
+          allotTime: null,
+          actualInspector: null,
+          actualTime: null,
+          remarks: null
+        },
+        // 表单参数
+        form: {},
+        activity: {},
+        // 表单校验
+        rules: {
+        },
+        active : 0,
+        orderId : "",
+        showAndHide : false
+      };
+    },
+    
+    created() {
+      // 如果是跳转来的，则接受初始化参数
+      // this.user_id = this.$route.query.id; //详细信息页接收参数
+      this.orderId = this.$route.query.orderId;
+      this.getList();
+      this.getDicts("t_order_status").then(response => {
+        this.typeOptions = response.data;
+      });
+      this.getDicts("t_order_type").then(response => {
+        this.ordertypeOptions = response.data;
+      });
+      this.getBasicsInfo();
+    },
+    mounted(){
+      let gaoMap =  new gaodeMap("石家庄");
+      this.gaoMap = gaoMap;
+      this.getBasicsInfo();
+      this.initData();
+      this.drawPieChart();
+      this.main3();
+      this.main4();
+    },
+    methods: {
+      getInspectorList(){
+        this.loading = true;
+        inspectorList().then(response => {
+          this.inspector = response.data;
+          this.loading = false;
+        });
+        
+      },
+    //   getMap() {
+    //   var myChart = this.$echarts.init(document.getElementById('map'))
+    //   let option = {
+    //     xAxis: {
+    //       type: 'category',
+    //       // data: this.dataX,
+    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    //       boundaryGap: false, //控制日期是否在中间显示
+    //       axisLabel: {
+    //         show: true, //是否显示日期
+    //         interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+    //         textStyle: {
+    //           color: '#000', //日期的颜色
+    //           fontSize: 12 //字体的大小
+    //         }
+    //       },
+    //       axisLine: {
+    //         lineStyle: {
+    //           color: '#ccc' // x轴的颜色
+    //         }
+    //       }
+    //     },
+    //     yAxis: {
+    //       type: 'value',
+    //       axisLabel: {
+    //         formatter: '{value}',
+    //         textStyle: {
+    //           color: '#000' //数字的颜色
+    //         },
+    //         inside: false //控制数据是否在内侧还是外侧显示
+    //       },
+    //       axisLine: {
+    //         lineStyle: {
+    //           color: '#ccc' // 折线的颜色
+    //         }
+    //       }
+    //     },
+    //     series: [
+    //       {
+    //         // data: this.dataY,
+    //         data: [820, 932, 901, 934, 1290, 1330, 1320],
+    //         type: 'line',
+    //         symbol: 'circle', //是否显示实心的折线圆点
+    //         smooth: true, //让折线有弧度
+    //         symbolSize: 7, //折线圆点的大小
+    //         itemStyle: {
+    //           normal: {
+    //             color: '#efc883', //折线点的颜色
+    //             lineStyle: {
+    //               color: '#efc883' //折线的颜色
+    //             },
+    //             label: { show: true } //是否在折线点上显示数字
+    //           }
+    //         }
+    //       }
+    //     ]
+    //   }
+    //   myChart.setOption(option)
+    // },
+    initData() {
+		// 基于准备好的dom，初始化echarts实例
+		var myChart1 = echarts.init(document.getElementById('main1'));
+		// let that=this;
+		// var getData1 = [];
+		// var getData2 = [];
+		// METHOD.axiosGet(
+		//   this,
+		//   `/enterpriseInfo/getNumberByRegulation`,
+		//   function(res) {
+		//     if (res.code === 0) {
+		// 		//先进行赋值
+		// 		for(let i=0; i<res.data.result.length; i++) {
+		// 			var obj = new Object();
+		// 			var arr = new Object();
+		// 			// obj.name = res.data.result[i].name;
+		// 			// obj.value = res.data.result[i].number;
+		// 			obj.name = res.data.result[i].type;
+		// 			obj.value = res.data.result[i].number;
+		// 			arr = res.data.result[i].type;
+		// 			getData1[i] = obj;
+		// 			getData2[i] = arr;
+		// 		}
+		// 		myChart1.setOption({
+		// 			legend: {
+		// 				data: getData2,
+		// 			},
+		// 			series:[{
+		// 				data: getData1,
+		// 			}]
+		// 		})
+		//     }
+		// });
+		
+	// 绘制图表
+      myChart1.setOption({
+        title: {
+            text: '折线图堆叠'
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['标况累积量', '工况累积量']
+        },
+        xAxis: {
+          type: 'category',
+          // data: this.dataX,
+          data: ['23', '44', '77', '34', '56', '88', '38','68','55','99','44','33'],
+          boundaryGap: false, //控制日期是否在中间显示
+          axisLabel: {
+            show: true, //是否显示日期
+            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+            textStyle: {
+              color: '#000', //日期的颜色
+              fontSize: 12 //字体的大小
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // x轴的颜色
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#000' //数字的颜色
+            },
+            inside: false //控制数据是否在内侧还是外侧显示
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // 折线的颜色
+            }
+          }
+        },
+        series: [
+          {
+            // data: this.dataY,
+            name:'工况累计量',
+            data: [820, 232, 901, 534, 1290, 330, 1320, 345, 654, 189, 980, 234],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#efc883', //折线点的颜色
+                lineStyle: {
+                  color: '#efc883' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          },
+          {
+            // data: this.dataY,
+            name:'工况累计量',
+            data: [500, 600, 700, 300, 1100, 130, 1200, 820, 932, 901, 934, 1290],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#053B6A', //折线点的颜色
+                lineStyle: {
+                  color: '#053B6A' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          }
+        ]
+      });
+	 
+    },
+	drawPieChart(){
+		// 基于准备好的dom，初始化echarts实例
+		var myChart2 = echarts.init(document.getElementById('main2'));
+		// let that=this;
+		// var getData1 = [];
+		// var getData2 = [];
+		// METHOD.axiosGet(
+		//   this,
+		//   `/enterpriseGoods/getNumberByEnterprise`,
+		//   function(res) {
+		//     if (res.code === 0) {
+		// 		//先进行赋值
+		// 		for(let i=0; i<res.data.result.length; i++) {
+		// 			var obj = new Object();
+		// 			var arr = new Object();
+		// 			// obj = res.data.result[i].number;
+		// 			// arr = res.data.result[i].type;
+		// 			obj = res.data.result[i].number;
+		// 			arr = res.data.result[i].name;
+		// 			getData1[i] = obj;
+		// 			getData2[i] = arr;
+		// 		}
+		// 		myChart2.setOption({
+		// 			xAxis: {
+		// 				data: getData2,
+		// 			},
+		// 			series:[{
+		// 				data: getData1,
+		// 			}]
+		// 		})
+		//     }
+		// });
+		// 绘制图表
+		myChart2.setOption({
+				  // color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'],
+                xAxis: {
+                type: 'category',
+                // data: this.dataX,
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                boundaryGap: false, //控制日期是否在中间显示
+                axisLabel: {
+                    show: true, //是否显示日期
+                    interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+                    textStyle: {
+                    color: '#000', //日期的颜色
+                    fontSize: 12 //字体的大小
+                    }
+                },
+                axisLine: {
+                    lineStyle: {
+                    color: '#ccc' // x轴的颜色
+                    }
+                }
+                },
+                yAxis: {
+                type: 'value',
+                axisLabel: {
+                    formatter: '{value}',
+                    textStyle: {
+                    color: '#000' //数字的颜色
+                    },
+                    inside: false //控制数据是否在内侧还是外侧显示
+                },
+                axisLine: {
+                    lineStyle: {
+                    color: '#ccc' // 折线的颜色
+                    }
+                }
+                },
+                series: [
+                {
+                    // data: this.dataY,
+                    data: [820, 932, 901, 934, 1290, 1330, 1320],
+                    type: 'line',
+                    symbol: 'circle', //是否显示实心的折线圆点
+                    smooth: true, //让折线有弧度
+                    symbolSize: 7, //折线圆点的大小
+                    itemStyle: {
+                    normal: {
+                        color: '#efc883', //折线点的颜色
+                        lineStyle: {
+                        color: '#efc883' //折线的颜色
+                        },
+                        label: { show: true } //是否在折线点上显示数字
+                    }
+                    }
+                },
+                {
+                    // data: this.dataY,
+                    data: [500, 600, 700, 300, 1100, 130, 1200],
+                    type: 'line',
+                    symbol: 'circle', //是否显示实心的折线圆点
+                    smooth: true, //让折线有弧度
+                    symbolSize: 7, //折线圆点的大小
+                    itemStyle: {
+                    normal: {
+                        color: '#053B6A', //折线点的颜色
+                        lineStyle: {
+                        color: '#053B6A' //折线的颜色
+                        },
+                        label: { show: true } //是否在折线点上显示数字
+                    }
+                    }
+                }
+                ]
+		});
+	},
+    main3() {
+		// 基于准备好的dom，初始化echarts实例
+		var myChart3 = echarts.init(document.getElementById('main3'));
+		// let that=this;
+		// var getData1 = [];
+		// var getData2 = [];
+		// METHOD.axiosGet(
+		//   this,
+		//   `/enterpriseInfo/getNumberByRegulation`,
+		//   function(res) {
+		//     if (res.code === 0) {
+		// 		//先进行赋值
+		// 		for(let i=0; i<res.data.result.length; i++) {
+		// 			var obj = new Object();
+		// 			var arr = new Object();
+		// 			// obj.name = res.data.result[i].name;
+		// 			// obj.value = res.data.result[i].number;
+		// 			obj.name = res.data.result[i].type;
+		// 			obj.value = res.data.result[i].number;
+		// 			arr = res.data.result[i].type;
+		// 			getData1[i] = obj;
+		// 			getData2[i] = arr;
+		// 		}
+		// 		myChart1.setOption({
+		// 			legend: {
+		// 				data: getData2,
+		// 			},
+		// 			series:[{
+		// 				data: getData1,
+		// 			}]
+		// 		})
+		//     }
+		// });
+		
+	// 绘制图表
+      myChart3.setOption({
+        xAxis: {
+          type: 'category',
+          // data: this.dataX,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false, //控制日期是否在中间显示
+          axisLabel: {
+            show: true, //是否显示日期
+            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+            textStyle: {
+              color: '#000', //日期的颜色
+              fontSize: 12 //字体的大小
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // x轴的颜色
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#000' //数字的颜色
+            },
+            inside: false //控制数据是否在内侧还是外侧显示
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // 折线的颜色
+            }
+          }
+        },
+        series: [
+          {
+            // data: this.dataY,
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#efc883', //折线点的颜色
+                lineStyle: {
+                  color: '#efc883' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          },
+          {
+            // data: this.dataY,
+            data: [500, 600, 700, 300, 1100, 130, 1200],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#053B6A', //折线点的颜色
+                lineStyle: {
+                  color: '#053B6A' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          }
+        ]
+      });
+	 
+    },
+    main4() {
+		// 基于准备好的dom，初始化echarts实例
+		var myChart4 = echarts.init(document.getElementById('main4'));
+		// let that=this;
+		// var getData1 = [];
+		// var getData2 = [];
+		// METHOD.axiosGet(
+		//   this,
+		//   `/enterpriseInfo/getNumberByRegulation`,
+		//   function(res) {
+		//     if (res.code === 0) {
+		// 		//先进行赋值
+		// 		for(let i=0; i<res.data.result.length; i++) {
+		// 			var obj = new Object();
+		// 			var arr = new Object();
+		// 			// obj.name = res.data.result[i].name;
+		// 			// obj.value = res.data.result[i].number;
+		// 			obj.name = res.data.result[i].type;
+		// 			obj.value = res.data.result[i].number;
+		// 			arr = res.data.result[i].type;
+		// 			getData1[i] = obj;
+		// 			getData2[i] = arr;
+		// 		}
+		// 		myChart1.setOption({
+		// 			legend: {
+		// 				data: getData2,
+		// 			},
+		// 			series:[{
+		// 				data: getData1,
+		// 			}]
+		// 		})
+		//     }
+		// });
+		
+	// 绘制图表
+      myChart4.setOption({
+        xAxis: {
+          type: 'category',
+          // data: this.dataX,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false, //控制日期是否在中间显示
+          axisLabel: {
+            show: true, //是否显示日期
+            interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
+            textStyle: {
+              color: '#000', //日期的颜色
+              fontSize: 12 //字体的大小
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // x轴的颜色
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#000' //数字的颜色
+            },
+            inside: false //控制数据是否在内侧还是外侧显示
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ccc' // 折线的颜色
+            }
+          }
+        },
+        series: [
+          {
+            // data: this.dataY,
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#efc883', //折线点的颜色
+                lineStyle: {
+                  color: '#efc883' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          },
+          {
+            // data: this.dataY,
+            data: [500, 600, 700, 300, 1100, 130, 1200],
+            type: 'line',
+            symbol: 'circle', //是否显示实心的折线圆点
+            smooth: true, //让折线有弧度
+            symbolSize: 7, //折线圆点的大小
+            itemStyle: {
+              normal: {
+                color: '#053B6A', //折线点的颜色
+                lineStyle: {
+                  color: '#053B6A' //折线的颜色
+                },
+                label: { show: true } //是否在折线点上显示数字
+              }
+            }
+          }
+        ]
+      });
+	 
+    },  
+    
+    // 点击按钮显示隐藏
+      changeDisplay(e){
+        this.isDisplay = !this.isDisplay
+        let $timeline = this.$refs.timeline;
+        if(!this.showAndHide){
+          for(let i = 0; i< $timeline.$children.length; i++){
+            if(i>1){
+              $timeline.$children[i].$el.style.display = "block";
+            }
+          }
+          this.showAndHide = true;
+        }else{
+          for(let i = 0; i< $timeline.$children.length; i++){
+            if(i>1){
+              $timeline.$children[i].$el.style.display = "none";
+            }
+          }
+          this.showAndHide = false;
+        }
+
+
+        //$timeline.toggleRowExpansion(row,true)
+      },
+
+
+      handleRemove(file) {
+        console.log(file);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleDownload(file) {
+        console.log(file);
+      },
+      /** 查询工单基础信息列表 */
+      getList() {
+        this.loading = true;
+        listBasicsInfo(this.queryParams).then(response => {
+          this.basicsInfoList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      getBasicsInfo (){
+        getBasicsInfo(this.orderId).then(response =>{
+          this.form = response.data;
+          this.active = parseInt(response.data.orderStatus) + 1;
+          if(this.form.deviceInfoList.length>0){
+            this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]);
+          }
+          for(var i = 0; i < this.form.deviceInfoList.length; i++){
+            let obj = this.form.deviceInfoList[i];
+            this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
+          }
+
+          if(this.form.orderType == '1') {
+            // 获取设备列表树
+            let data = {
+              key1:this.form.deviceInfoList,
+              key2:this.form.pipeList
+            };
+            deviceTree(data).then(response => {
+              this.deviceOptions[0].childList = response.data;
+            });
+          }
+        });
+      },
+      // 筛选节点
+      // filterNode(value, data) {
+      //   if (!value) return true;
+      //   return data.label.indexOf(value) !== -1;
+      // },
+      // 节点单击事件
+      handleNodeClick(data) {
+
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        // this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          orderId: null,
+          orderType: null,
+          orderName: null,
+          orderStatus: "0",
+          createTime: null,
+          appointInspector: null,
+          allotTime: null,
+          actualInspector: null,
+          actualTime: null,
+          remarks: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.orderId)
+        this.single = selection.length!==1
+        this.multiple = !selection.length
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset();
+        this.open = true;
+        this.title = "添加工单基础信息";
+      },
+      /** 归档按钮操作 */
+    handleFinish(res) {
+      // this.reset();
+      getBasicsInfo(res).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "工单信息归档";
+      });
+    },
+      /** 修改按钮操作 */
+      handleUpdate(res) {
+      // this.reset();
+      this.getInspectorList();
+      getBasicsInfo(this.orderId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "工单信息修改";
+      });
+    },
+      /** 提交按钮 */
+       /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.orderStatus == '0') {
+            updateBasicsInfo(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else if(this.form.orderStatus == '2'){
+            updateOrderStatus(this.form).then(response => {
+              this.msgSuccess("操作成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const orderIds = row.orderId || this.ids;
+        this.$confirm('是否确认删除工单基础信息编号为"' + orderIds + '"的数据项?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+            return delBasicsInfo(orderIds);
+          }).then(() => {
+            this.getList();
+            this.msgSuccess("删除成功");
+          }).catch(() => {});
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        const queryParams = this.queryParams;
+        this.$confirm('是否确认导出所有工单基础信息数据项?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(() => {
+            this.exportLoading = true;
+            return exportBasicsInfo(queryParams);
+          }).then(response => {
+            this.download(response.msg);
+            this.exportLoading = false;
+          }).catch(() => {});
+      }
+    }
+  }
+  </script>
+  <style>
+    .el-tree-node__content{
+      width: 150px;
+    }
+    .el-divider--horizontal {
+      display: block;
+      height: 1px;
+      width: 100%;
+      margin: 20px 0;
+    }
+    .feedbackTime-div{
+      float: left;margin-left: 150px;margin-top: 10px;
+    }
+    .feedbackTime{
+      height: 120px;
+      width: 120px;
+      float: left;
+      margin-left: 15px;
+      margin-top: 5px;
+      margin-bottom: 15px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .el-card__body {
+      padding: 5px 20px 20px 20px;
+    }
+    .detail .el-form{
+        width: 20%;
+    }
+    .detail .el-form-item{
+        margin-bottom: 0px;
+    }
+    .el-tree{
+      margin-top: 5px;
+    }
+    .avatar-uploader{
+        width: 25%;
+        float: left;
+    }
+    .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  li{
+    font-size: 15px;
+    font-weight: 900;
+  }
+  </style>

gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue

@@ -4,7 +4,7 @@
       <div class="top">
         <span>设备报警最新记录</span>
         <span @click="repeatClick" class="repeat">刷新</span>
-        <span @click="moreClick" class="more">更多</span>
+        <span @click="moreClick" class="more">更多>></span>
       </div>
 
       <div class="bottom right-bottom-data-left">

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -110,6 +110,7 @@ import gaodeMap, {
   DEVICE_TYPE,
   mapOperateType,
 } from "utils/gaodeMapView.js";
+import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js";
 import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
 import RightBototmData from "./components/RightBototmData.vue";
 import { getInspectorLocations } from "@/api/inspectorLocation/location";
@@ -190,11 +191,29 @@ export default {
       window.addEventListener("mousedown", this.barClose);
       gaoMap.addMouseTool();
       gaoMap.searchTips("tipinput");
-      this.getDeviceInfo();
-      this.getPipeList();
-      // 右下角数据
+      // 获取地图上设备资源
+      this.getResource();
+      // 右下角数据 跟值班人员
       this.rightBottomData();
     },
+    // 获取地图上的资源
+    getResource() {
+      this.getDeviceInfo()
+        .then((res) => {
+          if (res == 200) {
+            console.log(res);
+            return this.getPipeList();
+          }
+        })
+        .then((res) => {
+          if (res == 200) {
+            console.log("管道", res);
+            // 获取报警资源
+            this.getSelectAlarmDevice();
+            // selectAlarmDevice
+          }
+        });
+    },
     // 右下角数据
     async rightBottomData() {
       this.gaoMap.view = this;
@@ -284,6 +303,120 @@ export default {
       this.gaoMap.mapOperateType = "add";
       this.gaoMap.removeMarkerDragg();
     },
+    // 获取报警资源，并且改变图上的状态
+    getSelectAlarmDevice() {
+      selectAlarmDevice().then((res) => {
+        if (res.length > 0) {
+          console.log("报警设备", res);
+          this.statusChange(res);
+        }
+      });
+    },
+    // 遍历设备改变状态 polyLines markers
+    statusChange(list) {
+      // 过滤报警管道
+      const polyLineArr = list.filter((item) => {
+        return item.deviceType == "0";
+      });
+      // 过滤报警的其它设备
+      const deviceArr = list.filter((item) => {
+        return item.deviceType != "0";
+      });
+      // 管道
+      if (polyLineArr.length > 0) {
+        polyLineArr.forEach((item) => {
+          // 获取循报警设备的id
+          const { deviceId, alarmType, alarmValue, endTime } = item;
+          // 获取polyLine
+          const polyline = this.gaoMap.polyLines.filter((item) => {
+            const pipeId = item.getExtData().lineData.pipeId;
+            return deviceId == pipeId;
+          })[0];
+          polyline.setOptions({ strokeColor: "#ff0000" });
+          const options = polyline.getExtData();
+          // 增加一个报警状态
+          // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
+          if (endTime) {
+            options.lineData.alarmState = 0;
+          } else {
+            options.lineData.alarmState = 1;
+          }
+          // 报警类型
+          options.lineData.alarmType = alarmType;
+          // 报警信息
+          options.lineData.alarmValue = alarmValue;
+          polyline.setExtData(options);
+        });
+      }
+
+      // 其他设备
+      if (deviceArr.length > 0) {
+        deviceArr.forEach((item) => {
+          // 获取循报警设备的id
+          const { deviceId, alarmType, alarmValue, endTime } = item;
+          // 获取polyLine
+          const device = this.gaoMap.markers.filter((item) => {
+            const id = item.getExtData().deviceId;
+            return deviceId == id;
+          })[0];
+          const options = device.getExtData();
+          console.log(options);
+
+          // 增加一个报警状态
+          // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
+          if (endTime) {
+            options.lineData.alarmState = 0;
+          } else {
+            options.lineData.alarmState = 1;
+          }
+          // 报警类型
+          options.alarmType = alarmType;
+          // 报警信息
+          options.alarmValue = alarmValue;
+          device.setExtData(options);
+          // const imageName = device.getExtData()
+          // console.log(imageName)
+          console.log(
+            "device.getExtData().deviceType============",
+            device.getExtData().deviceType
+          );
+          // 3是流量计 4是压力表
+          if (device.getExtData().deviceType == 3) {
+            this.gaoMap.changeMarkIcon(
+              device,
+              require(`@/assets/images/lljWran.png`)
+            );
+          } else if (device.getExtData().deviceType == 4) {
+            this.gaoMap.changeMarkIcon(
+              device,
+              require(`@/assets/images/ylbWran.png`)
+            );
+          }
+        });
+      }
+      this.socket();
+    },
+    socket() {
+      this.ws = new WebSocket("ws://36.148.23.59:8901/gassafety/websocketServer");
+      // this.ws = new WebSocket(
+      //   "ws://192.168.2.23:8903/gassafety/websocketServer"
+      // );
+      this.ws.onopen = (evt) => {
+        console.log("WebSockets=======gogogog");
+        this.ws.send("WebSockets!=========================");
+      };
+      this.ws.onmessage = (evt) => {
+        console.log("Received Message: " + evt.data);
+        // ws.close();
+        this.statusChange([evt.data]);
+      };
+      this.ws.onclose = () => {
+        console.log("ws协议关闭");
+      };
+      // this.ws.onclose = function (evt) {
+      //   console.log("Connection closed.");
+      // };
+    },
 
     // 选择新建项目哪个
     createChange(e, item) {
@@ -312,6 +445,7 @@ export default {
       // 清空所有正在编辑状态的线
       this.gaoMap.linePolyEditorAllClose();
     },
+
     // 新建按钮还原
     createReset() {
       this.iconClass = "icon-create";
@@ -374,7 +508,7 @@ export default {
     },
     getDeviceInfo(queryParams) {
       this.loading = true;
-      getAllDeviceInfo(queryParams).then((response) => {
+      return getAllDeviceInfo(queryParams).then((response) => {
         if (response.code == 200) {
           for (var i = 0; i < response.data.length; i++) {
             if ("1" == response.data[i].deviceType) {
@@ -395,14 +529,16 @@ export default {
           }
         }
         this.loading = false;
+        return response.code;
       });
     },
     getPipeList(queryParams) {
-      pipeAllInfoList(queryParams).then((res) => {
+      return pipeAllInfoList(queryParams).then((res) => {
         console.log("管道", res);
         if (res.code == 200) {
           this.gaoMap.addPolyline(res.data);
         }
+        return res.code;
       });
     },
     //值班人员
@@ -488,6 +624,8 @@ export default {
   beforeDestroy() {
     console.log("移除window事件");
     window.removeEventListener("click", this.barClose);
+    // 关闭scoket
+    this.ws.close();
   },
 };
 </script>