更新

src/api/qdtl/data.js

@@ -15,3 +15,23 @@ export function getLineData() {
       param:query
     })
   }
+
+  export function getgovern(query) {
+    console.log(query);
+    return request({
+      url: 'qdtl/common/govern?date=2022-03-12',
+      method: 'get',
+      param:query
+    })
+  }
+
+  export function getSchedule(query) {
+    return request({
+      url: '/qdtl/plan/getSchedule',
+      method: 'get',
+      param:query
+    })
+  }
+
+
+

src/components/HeaderDiv/index.vue

@@ -5,6 +5,7 @@
         </div>
         <div class="mum">
             <div :class='currentindex==1?"active":""' @click="goTarget(1)">首页</div>
+            <div :class='currentindex==7?"active":""' @click="goTarget(7)">交通局简介</div>
             <div :class='currentindex==2?"active":""' @click="goTarget(2)">设施监测</div>
             <div :class='currentindex==3?"active":""' @click="goTarget(3)">治理态势</div>
             <div :class='currentindex==4?"active":""' @click="goTarget(4)">安全态势</div>
@@ -42,8 +43,16 @@ export default {
     goTarget(index) {
       if(index == 1){
            this.$router.push('/big')
+      }else if(index == 3){
+           this.$router.push('/governance')
+      }else if(index == 4){
+           this.$router.push('/safe')
+      }else if(index == 5){
+           this.$router.push('/public')
       }else if(index == 6){
            this.$router.push('/index')
+      }else if(index == 7){
+           this.$router.push('/introduction')
       }
     },
   },

src/main.js

@@ -37,6 +37,8 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+//echarts组件
+import echarts from 'echarts'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -48,6 +50,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.$echarts = echarts
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)

src/router/index.js

@@ -87,6 +87,24 @@ export const constantRoutes = [{
         hidden: true,
     },
     {
+        path: "/governance",
+        component: () =>
+            import ("@/views/governance"),
+        hidden: true,
+    },
+    {
+        path: "/safe",
+        component: () =>
+            import ("@/views/safe"),
+        hidden: true,
+    },
+    {
+        path: "/public",
+        component: () =>
+            import ("@/views/public"),
+        hidden: true,
+    },
+    {
         path: "/user",
         component: Layout,
         hidden: true,

src/views/bigscreen/index.vue

@@ -1,18 +1,18 @@
 <template>
 <div style="width:100%;height:100%;position:relative">
   <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
-      <mapdiv ref="mapdiv" style="display:none"></mapdiv>
+      <mapdiv ref="mapdiv" style=""></mapdiv>
       <!-- <zhgl></zhgl> -->
-      <introduction></introduction>
+      <!-- <introduction></introduction> -->
     </div>
    <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
 
-    <!-- <div class="bottombg">
+    <div class="bottombg">
       <div class="item item2" @click="changeMapTab(1)"><div class="num">1123</div><div>静态资源</div></div>
       <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">113</div><div>动态资源</div></div>
       <div class="item item1 item2" @click="changeMapTab(3)"><div class="num">531</div><div>重点区域</div></div>
       <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div>
-    </div> -->
+    </div>
 
     <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
 

src/views/governance/index.vue

@@ -0,0 +1,472 @@
+<template>
+<div style="width:100%;height:100%;position:relative">
+  <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
+  <div style="display:fix;">
+  <div style="width:25%;height:100%;display: inline-flex;">
+       <div style="width:100%">
+       <div class="divtitle" style="margin-top:0.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">今日巡检</div>
+        </div>
+        <!-- <br/> -->
+        <div class='tdgove'>
+                <div style="padding-top:2.5rem;padding-left:2.9rem">
+                       <img src="../../assets/images/goverce/里程.png" style="width:3.9rem;height:3.9rem"/>
+                </div>
+                <div style="margin-top:1.5rem;margin-left:2.4rem;">
+                        <div class="fontClass">今日巡检里程</div>
+                        <div class='EngClass'>Inspection mileage today</div>
+                </div>
+                <div>
+                       <div class="countClass">{{tdxjCount}}</div>
+                </div>
+                <div class="countClass2" style="margin-left:0.5rem">km</div>
+        </div>
+        <div class='tdgove2' style="margin-top:1rem">
+                 <div style="margin-left:3rem">
+                       <div class="countClass">{{tdcsCount}}</div>
+                </div>
+                <div class="countClass2" style="margin-left:0.5rem">次</div>
+                <div style="margin-top:2rem;margin-left:9.5rem;">
+                        <div class="fontClass">今日巡检打卡</div>
+                        <div class='EngClass'>Check in today</div>
+                </div>
+                <div style="padding-top:3.3rem;padding-left:4.5rem">
+                       <img src="../../assets/images/goverce/里程碑.png" style="width:3.9rem;height:3.9rem"/>
+                </div>
+        </div>
+
+         <div class="divtitle" style="margin-top:0.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">视频资源统计</div>
+        </div>
+
+        <div id='videoeChart' style="width:45rem;height:25rem">
+        </div>
+
+        <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">当日巡检完成率</div>
+        </div>
+
+        <div>
+             <div></div>
+        </div>
+
+       </div>
+
+
+  </div>
+  <div style="width:50%;height:95%;position:absolute;display: inline-flex;">
+      <mapdiv ref="mapdiv" style=""></mapdiv>
+  </div>
+  <div style="width:25%;height:100%;margin-left:96rem;display: inline-flex;">
+        <div style="width:100%;padding-left:1rem">
+        <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">工作面貌展示</div>
+        </div>
+
+        <div>
+              <img src="../../assets/images/goverce/bg.png" style="width:40rem;height:20rem;margin-top:2rem;margin-left:4rem"/>
+        </div>
+
+        <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">里程数统计</div>
+        </div>
+
+         <div id='lcChart' style="width:45rem;height:25rem"></div>
+
+        <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">巡检考核</div>
+        </div>
+
+         <div style="height:25rem;width:100%">
+              <el-table :data="userList" stripe
+                class="my_table"
+                max-height=300
+                :row-class-name="tableRowClassName"
+                :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                        <el-table-column type="index" label="序号" width="55" align="center" />
+                        <el-table-column label="巡检员" align="center" prop="nickName" />
+                        <el-table-column label="巡检次数" align="center" prop="checkCount" />
+                        <el-table-column label="综合分数" align="center" prop="score" />          
+              </el-table>
+          </div>
+        </div>
+  </div>
+ </div>
+
+    <div class="bottombg">
+      <div class="item item2" @click="changeMapTab(1)"><div class="num">1123</div><div>静态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">113</div><div>动态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(3)"><div class="num">531</div><div>重点区域</div></div>
+      <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div>
+    </div>
+
+    <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
+
+
+</div>
+
+
+</template>
+
+<script>
+import moment from "moment";
+import mapdiv from "../../components/map/index.vue"
+import headerdiv from '@/components/HeaderDiv/index.vue'
+import { httpRequest } from "@/api/data/http";
+import { getLineData,getResource,getgovern } from "@/api/qdtl/data";
+
+import videodiv from "../../components/Videoplayer/index.vue"
+
+export default {
+    name: "big",
+    data() {
+        return {
+              userList:[],
+              tdxjCount:111,
+              tdcsCount:152,
+              currentindexNew:3,
+              ccode:"32068166001320000235",
+              videoParams:{
+                url:'http://2.90.220.252:9017/artemis-web/debug',
+                params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+              },
+              lcChartData:{},
+              videoChartDate:{}
+        };
+    },
+    components:{
+      mapdiv,
+      headerdiv,
+      videodiv,
+    },
+    mounted() {
+        console.log(111)
+        this.getResource();
+        this.getvideoList();
+        this.getGovern();
+        this.initlcchart();
+    },
+    methods:{
+        tableRowClassName({ row, rowIndex }) {
+                if ((rowIndex + 1) % 2 === 0) {
+                    return "warning-row"; 
+                } else {
+                    return "success-row";
+                }
+        },
+        changeMapTab(index){
+            this.$refs.mapdiv.iconSelect = index
+        },
+        getGovern(){
+                getgovern().then(data =>{
+                       console.log(data);
+                       this.userList  = data.data.checkStatic;
+                       console.log(this.userList);
+                       this.tdxjCount = data.data.xunTotalDistance;
+                       this.tdcsCount = data.data.checkPointLogNum;
+                       this.lcChartData.typeData = []
+                       this.videoChartDate.name = [];
+                       this.videoChartDate.count = [];
+                       for(var index in data.data.cameraslist){
+                               this.videoChartDate.name.push(data.data.cameraslist[index].name);
+                               this.videoChartDate.count.push(data.data.cameraslist[index].num);
+                       }
+                        this.initchart();
+                })  
+        },
+        initchart(){
+                var myChart = this.$echarts.init(document.getElementById('videoeChart'));
+                var option = {
+                                tooltip: {
+                                        trigger: 'axis',
+                                        axisPointer: {
+                                        type: 'shadow'
+                                        }
+                                },
+                                grid: {
+                                        left: '3%',
+                                        right: '4%',
+                                        top: '3%',
+                                        bottom:'3%',
+                                        containLabel: true
+                                },
+                                xAxis: {
+                                        type: 'value',
+                                        boundaryGap: [0, 0.01],
+                                        axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                        },
+                                        splitLine: {
+                                                        show: false,
+                                                        lineStyle: {
+                                                                color: "#006691"
+                                                                }
+                                        },
+                                },
+                                yAxis: {
+                                        type: 'category',
+                                        data: this.videoChartDate.name,
+                                        axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                        },
+                                         splitLine: {
+                                                        show: false,
+                                                        lineStyle: {
+                                                                color: "#006691"
+                                                                }
+                                        },
+                                        
+                                },
+                                series: [
+                                        {
+                                        name: '探头',
+                                        type: 'bar',
+                                        barWidth:10,
+                                        itemStyle: {
+                                                normal: {
+                                                        color:'#3BFFE8'
+                                                }
+                                       },
+                                        data: this.videoChartDate.count
+                                        },
+                                ]
+                                };
+                    myChart.setOption(option);
+        },
+        initlcchart(){
+                console.log(111);
+                console.log(this.$echarts);
+                var myChart = this.$echarts.init(document.getElementById('lcChart'));
+                var option = {
+                                tooltip: {
+                                trigger: 'axis',
+                                axisPointer: {
+                                type: 'cross',
+                                crossStyle: {
+                                        color: '#999'
+                                }
+                                }
+                                },
+
+                                legend: {
+                                data: ['Evaporation', 'Precipitation', 'Temperature']
+                                },
+                                xAxis: [
+                                {
+                                type: 'category',
+                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                                axisPointer: {
+                                        type: 'shadow'
+                                },
+                                  axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                        },
+                                }
+                                ],
+                                yAxis: [
+                                {
+                                type: 'value',
+                                name: 'Precipitation',
+                                min: 0,
+                                max: 250,
+                                interval: 50,
+                               axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                        },
+                                },
+                                {
+                                type: 'value',
+                                name: 'Temperature',
+                                min: 0,
+                                max: 25,
+                                interval: 5,
+                                axisLabel: {
+                                        formatter: '{value} °C'
+                                }
+                                }
+                                ],
+                                series: [
+                                {
+                                name: 'Evaporation',
+                                type: 'bar',
+                                tooltip: {
+                                        valueFormatter: function (value) {
+                                        return value + ' ml';
+                                        }
+                                },
+                                data: [
+                                        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+                                ],
+                                itemStyle: {
+                                                normal: {         
+                                                //由上到下的渐变           
+                                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                                        offset: 0,
+                                                        color: '#0068DC'
+                                                }, {
+                                                        offset: 1,
+                                                        color: '#00E3C0'
+                                                }]),
+                                                shadowColor: 'rgba(0, 0, 0, 0.4)',//阴影
+                                                shadowBlur: 20//阴影宽度
+                                                }
+                                        },
+                                },
+                                {
+                                name: 'Temperature',
+                                type: 'line',
+                                yAxisIndex: 1,
+                                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+                                }
+                                ]
+                                };
+                    myChart.setOption(option);
+        },
+          getResource(){
+               getResource({date:'2022-03-12'}).then(response =>{
+                     var trainArry = [];
+                     var bridgeArry = [];
+                     var railArry = [];
+                     var stationLocation = [];
+                     var areaList = [];
+                     for(var index in response.data.staticLocation){
+                          var obj = response.data.staticLocation[index]
+                          obj.fence = obj.lnglat
+                          obj.name = obj.locationName
+                          stationLocation.push(obj)
+                     }
+                     for(var index in response.data.area){
+                         var obj = response.data.area[index]
+                         if(obj.areaType == '1'){
+                              areaList.push(obj);
+                         }else if(obj.areaType == '2'){
+                             obj.name = obj.areaName
+                             trainArry.push(obj);
+                         }else if(obj.areaType == '3'){
+                             obj.name = obj.areaName
+                             bridgeArry.push(obj);
+                         }else if(obj.areaType == '4'){
+                             obj.name = obj.areaName
+                             railArry.push(obj);   
+                         }
+                     }
+                     for(var index in areaList){
+                             var json = JSON.parse(areaList[index].fence)
+                             this.$refs.mapdiv.addPolygon(json);
+                     }
+                     for(var key in response.data.deviceTrail){
+                              var jsonStr = '['
+                             for(var index in response.data.deviceTrail[key]){
+                               var obj = response.data.deviceTrail[key][index]
+                               if(index == response.data.deviceTrail[key].length - 1){
+                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+']'
+                               }else{
+                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+'],'
+                               }
+                               jsonStr += location
+                              //  deviceArry.push(obj.fence.split(','));
+                             }
+                              jsonStr += ']'
+                              var json = JSON.parse(jsonStr);
+                             this.$refs.mapdiv.addPoints(response.data.deviceTrail[key],'device.png',0.6,'device');
+                             this.$refs.mapdiv.addline(json,'device');
+                     }
+                       this.$refs.mapdiv.addPoints(trainArry,'train.png',0.6,'train');
+                       this.$refs.mapdiv.addPoints(bridgeArry,'bridge.png',0.6,'bridge');
+                       this.$refs.mapdiv.addPoints(railArry,'rail.png',0.6,'rail');
+                       this.$refs.mapdiv.addPoints(stationLocation,'location.png',0.6,'location');
+               })
+         },
+         getvideoList(){
+                  httpRequest(this.videoParams).then(data =>{
+                        var json = JSON.parse(data.data);
+                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
+                  });
+              
+         }
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+ .divtitle{
+          background: url("~@/assets/images/title@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:95%;
+          height:3.9rem;
+          padding-left:1.5rem;
+          padding-top:0.7rem;
+          display: inline-flex;
+       }
+.tdgove{
+          background: url("~@/assets/images/goverce/态势1@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:32rem;
+          height:9.6rem;
+          margin-left:3.5rem;
+          margin-top:1rem;
+          display: inline-flex;
+          // display: inline-flex;
+}
+
+.tdgove2{
+          background: url("~@/assets/images/goverce/态势2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:37.2rem;
+          height:9.9rem;
+          margin-left:3.5rem;
+          display: inline-flex;
+          // display: inline-flex;
+}
+.fontClass{
+        font-size: 1.5rem;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 2.6rem;
+}
+
+.EngClass{
+        font-size: 1.2rem;
+        font-family: AlibabaSans;
+        font-weight: 400;
+        color: #B7D0FA;
+        line-height: 1.1rem;
+        opacity: 0.4;
+}
+
+.countClass{
+        font-size: 2.1rem;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #25FFDE;
+        line-height: 2rem;
+}
+
+.countClass2{
+        font-size: 1.5rem;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 2.6rem;
+}
+
+</style>

src/views/introduction/index.vue

@@ -1,44 +1,187 @@
 <template>
-     <div>
+<div style="width:100%;height:100%;position:relative">
+  <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
+      <!-- <mapdiv ref="mapdiv" style=""></mapdiv> -->
+      <!-- <zhgl></zhgl> -->
+      <introduction></introduction>
+    </div>
+   <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
+
+    <!-- <div class="bottombg">
+      <div class="item item2" @click="changeMapTab(1)"><div class="num">1123</div><div>静态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">113</div><div>动态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(3)"><div class="num">531</div><div>重点区域</div></div>
+      <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div>
+    </div> -->
+
+    <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
+
+
+</div>
+
 
-     </div>
 </template>
 
 <script>
-import { listLocation, getLocation, delLocation, addLocation, updateLocation } from "@/api/qdtl/location";
-import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
-import mapdiv from "@/components/map/index.vue"
+import moment from "moment";
+import mapdiv from "../../components/map/index.vue"
+import introduction from './introduction.vue'
+import zhgl from "../../components/zhgl/index.vue"
+import headerdiv from '@/components/HeaderDiv/index.vue'
+import { httpRequest } from "@/api/data/http";
+import { getLineData,getResource } from "@/api/qdtl/data";
+
+import videodiv from "../../components/Videoplayer/index.vue"
 
 export default {
-  name: "Introduction",
-  data() {
-    return {
-       
-    };
-  },
-   components:{
-      mapdiv
+    name: "big",
+    data() {
+        return {
+            currenttime: moment().format("YYYY-MM-DD HH:mm:ss"),
+            currentindexNew:7,
+            ccode:"32068166001320000235",
+            videoParams:{
+              url:'http://2.90.220.252:9017/artemis-web/debug',
+              params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+            },
+        };
+    },
+    components:{
+      mapdiv,
+      zhgl,
+      headerdiv,
+      videodiv,
+      introduction
     },
-  created() {
+    mounted() {
+        // this.getTrain();
+        this.getResource();
+        this.getvideoList();
+        // this.$$refs.headerDiv.currentindex = 1;
+        setInterval(() => {
+            this.currenttime = moment().format("YYYY-MM-DD HH:mm:ss");
+        }, 1000);
 
-  },
-  methods: {
-   
-  }
+    },
+    methods:{
+        changeMapTab(index){
+            this.$refs.mapdiv.iconSelect = index
+        },
+         getTrain(){
+                  this.$refs.mapdiv.addPoint('video.png');            
+         },
+         getResource(){
+               getResource({date:'2022-03-12'}).then(response =>{
+                     var trainArry = [];
+                     var bridgeArry = [];
+                     var railArry = [];
+                     var stationLocation = [];
+                     var areaList = [];
+                     for(var index in response.data.staticLocation){
+                          var obj = response.data.staticLocation[index]
+                          obj.fence = obj.lnglat
+                          obj.name = obj.locationName
+                          stationLocation.push(obj)
+                     }
+                     for(var index in response.data.area){
+                         var obj = response.data.area[index]
+                         if(obj.areaType == '1'){
+                              areaList.push(obj);
+                         }else if(obj.areaType == '2'){
+                             obj.name = obj.areaName
+                             trainArry.push(obj);
+                         }else if(obj.areaType == '3'){
+                             obj.name = obj.areaName
+                             bridgeArry.push(obj);
+                         }else if(obj.areaType == '4'){
+                             obj.name = obj.areaName
+                             railArry.push(obj);   
+                         }
+                     }
+                     for(var index in areaList){
+                             var json = JSON.parse(areaList[index].fence)
+                             this.$refs.mapdiv.addPolygon(json);
+                     }
+                     for(var key in response.data.deviceTrail){
+                              var jsonStr = '['
+                             for(var index in response.data.deviceTrail[key]){
+                               var obj = response.data.deviceTrail[key][index]
+                               if(index == response.data.deviceTrail[key].length - 1){
+                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+']'
+                               }else{
+                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+'],'
+                               }
+                               jsonStr += location
+                              //  deviceArry.push(obj.fence.split(','));
+                             }
+                              jsonStr += ']'
+                              var json = JSON.parse(jsonStr);
+                             this.$refs.mapdiv.addPoints(response.data.deviceTrail[key],'device.png',0.6,'device');
+                             this.$refs.mapdiv.addline(json,'device');
+                     }
+                       this.$refs.mapdiv.addPoints(trainArry,'train.png',0.6,'train');
+                       this.$refs.mapdiv.addPoints(bridgeArry,'bridge.png',0.6,'bridge');
+                       this.$refs.mapdiv.addPoints(railArry,'rail.png',0.6,'rail');
+                       this.$refs.mapdiv.addPoints(stationLocation,'location.png',0.6,'location');
+               })
+         },
+         getvideoList(){
+                  httpRequest(this.videoParams).then(data =>{
+                        var json = JSON.parse(data.data);
+                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
+                  });
+              
+         }
+
+    }
 };
 </script>
 
+<style rel="stylesheet/scss" lang="scss">
+.bottombg{
+  background: url("../../assets/images/底部菜单bg@2x.png");
+  position: absolute;
+  background-size: 100% 100%;
+  z-index: 1;
+  width: 85.1rem;
+  height: 16.3rem;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%,-0%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color:#fff;
+  font-size:1.6rem;
+
 
-<style>
- .divtitle{
-          background: url("~@/assets/images/title2@2x.png") no-repeat;
-          background-size: 100% 100%;
-          width:100%;
-          height:3.9rem;
-          padding-top:0.8rem;
-          padding-left:3rem;
-          float: left;
-       }
+  .item{
+    width: 27%;
+    text-align: center;
+    justify-content: center;
+    position: relative;
+    .num{
+      font-size:3rem;
+      color:#25f8bd;
+    }
+  }
+   .item1{
+    width: 23%;
+  }
+  .item2::after{
+    content: "";
+    background: url("../../assets/images/图层\ 2@2x.png");
+    background-size: 100% 100%;
+    width: 0.2rem;
+    height: 7.3rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+.ol-zoom-in,.ol-zoom-out{
+  display: none !important;
 
+}
 
 </style>

src/views/introduction/introduction.vue

@@ -0,0 +1,223 @@
+<template>
+     <div style="heigh:100%;width:100%">
+             <div class="divtitle"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">启东市交通局简介</div></div>
+                    <div style="font-size: 1.8rem;
+                                font-family: Microsoft YaHei;
+                                color: #D6DEE7;
+                                line-height: 3.6rem;
+                                padding-top:5rem;
+                                padding-left:16rem">
+                                 启东市交通运输局是市政府工作部门,为正科级。<br/>
+                                 启东市交通运输局负责贯彻落实中央关于交通运输工作的方针政策和省委、南通市委、启东市委的决策部署,在履行职责过程中坚持和加强党对交通运输工作的集中统一领导。
+                      </div>
+                      <div style="padding-left:39.3rem;margin-top:5rem;position:relative;">
+                            <div class="divcontent">
+                                  <div style="padding-left:8rem">
+                                     <el-row :gutter="20" style="margin-bottom:1rem">
+                                            <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">铁路管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/train.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                            <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">港口管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/东南沿海港口.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">维修驾培科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/维修on.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                  <div>
+                                                        <div class="dept_font">水运管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/水运交通设施.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                  <div>
+                                                        <div class="dept_font">客货运管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/25客运站.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">安全科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/安全.png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                      </el-row>
+                                  </div>
+                            </div>
+
+                            <div class="divcontent" style="margin-top:7rem">
+                                  <div style="padding-left:8rem">
+                                     <el-row :gutter="20" style="margin-bottom:1rem">
+                                            <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">工程管理科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/工程(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                            <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">规划计划科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/规划(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">法规科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/规范(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                  <div>
+                                                        <div class="dept_font">人事科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/人事管理(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                  <div>
+                                                        <div class="dept_font">财务科</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/43财务(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                             <el-col :span="3.8">
+                                                 <div>
+                                                        <div class="dept_font">办公室</div>
+                                                        <div class="tb_content">
+                                                                <img class="image_class" src="../../assets/images/home_icon/办公室(1).png" />
+                                                        </div>
+                                                 </div>
+                                            </el-col>
+                                      </el-row>
+                                  </div>
+                            </div>
+                      </div>
+             
+                <div style='font-size: 1.8rem;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #3DFFEA;
+                            line-height: 41px;
+                            text-align:center'>启东市交通运输局组织架构</div>
+
+             <div class="divtitle" style="margin-top:2rem"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">铁路管理科简介</div></div>
+            
+             <div style="display: inline-flex;padding-left:16rem;padding-top:3rem">
+             <div style="font-size: 1.8rem;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #D6DEE7;">
+                参与拟订铁路规划；
+                <br/><br/> 配合做好铁路项目的申报、立项、勘测、设计等前期工作；
+                <br/><br/> 配合做好铁路建设资金的筹措工作；
+                <br/><br/> 按国家、省、市有关规定，协调全市境内铁路建设的征地拆迁安置等；
+             </div>
+
+              <div style="font-size: 1.8rem;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #D6DEE7;
+                        margin-left:10rem">
+                负责协调铁路建设过程中的矛盾和问题，协调处理铁路和地方建设关系； 
+                <br/><br/> 指导和协调全市铁路站场周边综合配套和开发建设工作； 
+                <br/><br/> 配合做好铁路运营方面的相关工作。
+             </div>
+             </div>
+     </div>
+</template>
+
+<script>
+import { listLocation, getLocation, delLocation, addLocation, updateLocation } from "@/api/qdtl/location";
+import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
+import mapdiv from "@/components/map/index.vue"
+
+export default {
+  name: "IntroductionIndex",
+  data() {
+    return {
+       
+    };
+  },
+   components:{
+      mapdiv
+    },
+  created() {
+
+  },
+  methods: {
+   
+  }
+};
+</script>
+
+
+<style>
+ .divtitle{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem;
+          padding-top:0.8rem;
+          padding-left:3rem;
+          float: left;
+       }
+.divcontent{
+        background: url("~@/assets/images/home_icon/background.png") no-repeat;
+        background-size: 100% 100%;
+        width:105.5rem;
+        height:15rem;
+        z-index:10;
+}
+
+.tb_content{
+        background: url("~@/assets/images/home_icon/tb2@2x.png") no-repeat;
+        background-size: 100% 100%;
+        width:13rem;
+        height:10rem;
+        z-index:20;
+        padding-top:4rem;
+        text-align: center
+}
+
+.dept_font{
+      font-size: 2.4rem;
+      font-family: Adobe Heiti Std;
+      font-weight: normal;
+      color: #23FFFC;
+      text-align: center
+}
+
+.image_class{
+      width:3.9rem;
+      height:3.9rem
+}
+</style>

src/views/public/index.vue

@@ -0,0 +1,645 @@
+<template>
+<div style="width:100%;height:100%;position:relative">
+  <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
+  <div style="display:fix;">
+  <div style="width:25%;height:100%;display: inline-flex;">
+       <div style="width:100%">
+            <div class="divtitle" style="margin-top:0.5rem">
+                        <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+                        <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">官网访问数量</div>
+                </div>
+                <!-- <br/> -->
+                <div style="margin-top:2rem">
+                        <div class="dayCount" style="margin-left:5.5rem;padding-top:1rem;float:left">6002</div>
+                        <div class="wordCount" style="margin-left:6rem;padding-top:1rem;float:left">30</div>
+                </div>
+                <div style="margin-top:16rem;margin-left:3.8rem">
+                        <div class="dayClass" style="float:left;">日访问量</div>
+                        <div class="wordClass"style="float:left;margin-left:9.5rem">发文数量</div>
+                </div>
+                <div class="divtitle" style="margin-top:2.5rem">
+                        <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+                        <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">公众号统计</div>
+                </div>
+
+                <div id='gzhchart' style="width:45rem;height:25rem"></div>
+
+                <div class="divtitle" style="margin-top:0.5rem">
+                        <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+                        <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">重要通知轮播</div>
+                </div>
+
+                 <div style="height:25rem;width:100%;margin-top:1rem">
+                        <el-table :data="messageList" stripe
+                            class="my_table"
+                            max-height=300
+                            :row-class-name="tableRowClassName"
+                            :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                                    <el-table-column type="index" label="序号" width="55" align="center" />
+                                    <el-table-column label="内容" align="center" prop="content">
+                                            <template slot-scope="scope">
+                                                         <span style="color:#28A0FF">{{scope.row.content}}</span>
+                                            </template>
+                                    </el-table-column>
+                                    <el-table-column label="内容" align="center" prop="label">
+                                            <template slot-scope="scope">
+                                                         <span style="color:#FFC029">{{scope.row.label}}</span>
+                                            </template>
+                                    </el-table-column>
+                        </el-table>
+                </div>
+       </div>
+
+
+  </div>
+  <div style="width:50%;height:95%;position:absolute;display: inline-flex;">
+      <mapdiv ref="mapdiv" style=""></mapdiv>
+  </div>
+  <div style="width:25%;height:100%;margin-left:96rem;display: inline-flex;">
+        <div style="width:100%;padding-left:1rem">
+        <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">服务评价</div>
+        </div>
+        
+         <div id='pieChart' style="width:45rem;height:25rem"></div>
+         <!-- <div id='lcChart' style="width:45rem;height:25rem"></div> -->
+
+        <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">投诉数量</div>
+        </div>
+        
+        <div id='tsChart' style="width:45rem;height:25rem"></div>
+        
+         <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">本月统计趋势数据</div>
+        </div>
+
+         <div id='lastChart' style="width:45rem;height:25rem"></div>
+
+        </div>
+  </div>
+ </div>
+
+    <div class="bottombg">
+      <div class="item item2" @click="changeMapTab(1)"><div class="num">1123</div><div>静态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">113</div><div>动态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(3)"><div class="num">531</div><div>重点区域</div></div>
+      <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div>
+    </div>
+
+    <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
+
+
+</div>
+
+
+</template>
+
+<script>
+import moment from "moment";
+import mapdiv from "../../components/map/index.vue"
+import headerdiv from '@/components/HeaderDiv/index.vue'
+import { httpRequest } from "@/api/data/http";
+import { getLineData,getResource,getgovern } from "@/api/qdtl/data";
+
+import videodiv from "../../components/Videoplayer/index.vue"
+
+export default {
+    name: "big",
+    data() {
+        return {
+              userList:[],
+              tdxjCount:111,
+              tdcsCount:152,
+              currentindexNew:5,
+              ccode:"32068166001320000235",
+              videoParams:{
+                url:'http://2.90.220.252:9017/artemis-web/debug',
+                params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+              },
+              messageList:[
+                  {content:'关于某某站点施工通知',label:'待处理',tag:'家'},
+                  {content:'关于某某站点施工通知',label:'待处理',tag:'家'},
+                  {content:'关于某某站点施工通知',label:'待处理',tag:'公司'},
+                  {content:'关于某某站点施工通知',label:'待处理',tag:'家'},
+              ]
+        };
+    },
+    components:{
+      mapdiv,
+      headerdiv,
+      videodiv,
+    },
+    mounted() {
+        this.initchart();
+        this.getResource();
+        this.getvideoList();
+        this.getServicePieChart();
+        this.getTsChart();
+        this.getLastChart();
+        // this.getGovern();
+        // this.inityjchart();
+    },
+    methods:{
+        getLastChart(){
+               var myChart = this.$echarts.init(document.getElementById('lastChart'));
+               var option = {
+                            grid:{
+                                top:"15%",
+                                left:"10%",
+                                right:"7%",
+                                bottom:"10%"
+                                },
+                            xAxis: {
+                                type: 'category',
+                                boundaryGap: false,
+                                data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019'],
+                                axisLabel: {
+                                show: true,
+                                textStyle: {
+                                    color: 'white', //x轴data 的颜色
+                                    fontSize:12
+                                }
+                                },
+                                axisLine: {
+                                    lineStyle: {
+                                        color: '#435886'
+                                    }
+                                },
+                                splitLine: {
+                                    show: true,
+                                    lineStyle:{
+                                        color: ['#435886'],
+                                        width: 1,
+                                        type: 'solid'
+                                    }
+                                    }
+                            },
+                            yAxis: {
+                                type: 'value',
+                                axisLabel: {
+                                    show: true,
+                                    textStyle: {
+                                        color: 'white' //x轴data 的颜色
+                                    }
+                                },
+                                axisLine: {
+                                    lineStyle: {
+                                        color: '#435886'
+                                    }
+                                },
+                                splitLine: {
+                                    show: true,
+                                    lineStyle:{
+                                        color: ['#435886'],
+                                        width: 1,
+                                        type: 'solid'
+                                    }
+                                    }
+                            },
+                            series: [{
+                                smooth: true,
+                                data: [75, 85, 95, 117, 129, 143, 166,178,195],
+                                type: 'line',
+                                lineStyle:{
+                                color:'#00D98B'
+                                },
+                                label:{
+                                    show:true,
+                                    color:'white'
+                                },
+                                areaStyle: {color:{
+                                    type: 'linear',
+                                    x: 0,
+                                    y: 0,
+                                    x2: 0,
+                                    y2: 1,
+                                    colorStops: [{
+                                        offset: 0, color: '#00D98B' // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: '#122a61' // 100% 处的颜色
+                                    }],
+                                    global: false // 缺省为 false
+                                }},       
+                                itemStyle: {
+                                    borderColor: "white"
+                                    }
+                            }]
+                        };
+                        myChart.setOption(option);
+        },
+        getTsChart(){
+               var myChart = this.$echarts.init(document.getElementById('tsChart'));
+               var option = {
+                        xAxis: {
+                            data: ['类型一', '类型二', '类型三', '类型四', '类型五', '类型六'],
+                            axisTick: {show: false},
+                            axisLine: {show: false},
+                            axisLabel: {
+                                            show: true,
+                                            textStyle: {
+                                            color: '#ACB6B9'   //这里用参数代替了
+                                        }
+                                },
+                        },
+                        yAxis: {
+                             name:"条",
+                             nameTextStyle:{
+                                    color:"white", 
+                                    fontSize:16,  
+                                    //padding: [0, 0, 0, 1050] 
+                                },
+                             axisLabel: {
+                                            show: true,
+                                            textStyle: {
+                                            color: '#ACB6B9'   //这里用参数代替了
+                                        }
+                                        },
+                        },
+                        color: new this.$echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                {offset: 1, color: '#2275E4'},                   //柱图渐变色
+                                {offset: 0, color: '#56CCF2'},                   //柱图渐变色
+                            ]
+                        ),
+                        series: [{
+                            name: 'hill',
+                            type: 'pictorialBar',
+                            barCategoryGap: '40%',
+                            symbol: 'triangle',
+                            itemStyle: {
+                                normal: {
+                                    opacity: 0.5
+                                },
+                                emphasis: {
+                                    opacity: 1
+                                }
+                            },
+                            data: [123, 60, 125, 128, 122, 122],
+                            z: 10
+
+                        }, {
+                            name: 'glyph',
+                            type: 'pictorialBar',
+                            barGap: '-100%',
+                            symbolPosition: 'end',
+                            symbolSize: 50,
+                            symbolOffset: [0, '-120%'],
+                        }]
+                    };
+                     myChart.setOption(option);
+        },
+        getServicePieChart(){
+               var myChart = this.$echarts.init(document.getElementById('pieChart'));
+               var option = {
+                            series: [
+                                {
+                                name: 'Access From',
+                                type: 'pie',
+                                radius: ['60%', '70%'],
+                                avoidLabelOverlap: false,
+                                itemStyle: {
+                                    borderRadius: 10,
+                                    borderColor: '#fff',
+                                    borderWidth: 2
+                                },
+                               label: {
+                                    normal: {
+                                        show: true,
+                                        formatter: '{b} ({d}%)'
+                                    }
+                                },
+                                emphasis: {
+                                    label: {
+                                    show: true,
+                                    fontSize: '20',
+                                    fontWeight: 'bold'
+                                    }
+                                },
+                                data: [
+                                    { value: 1048, name: '不满意',itemStyle: { color: '#FFC012' }, },
+                                    { value: 735, name: '非常满意',itemStyle: { color: '#00FF30' }, },
+                                    { value: 580, name: '满意',itemStyle: { color: '#37DE9E' }, },
+                                    { value: 484, name: '基本满意',itemStyle: { color: '#31C1FA' }, },
+                                ]
+                                }
+                            ]
+                };
+                myChart.setOption(option);
+        },
+        filterTag(value, row) {
+               return row.status === value;
+        },
+        tableRowClassName({ row, rowIndex }) {
+                if ((rowIndex + 1) % 2 === 0) {
+                    return "warning-row"; 
+                } else {
+                    return "success-row";
+                }
+        },
+        changeMapTab(index){
+            this.$refs.mapdiv.iconSelect = index
+        },
+        getGovern(){
+                getgovern().then(data =>{
+                       console.log(data);
+                       this.userList  = data.data.checkStatic;
+                       console.log(this.userList);
+                       this.tdxjCount = data.data.xunTotalDistance;
+                       this.tdcsCount = data.data.checkPointLogNum;
+                })  
+        },
+        initchart(){
+              var myChart = this.$echarts.init(document.getElementById('gzhchart'));
+              var option = {
+                            // color: ['#3BFFE8', '#3DB7FF','#EEA500','#ACB6B9','#ACB6B9','#ACB6B9'],
+                            tooltip: {
+                                trigger: 'axis',
+                                axisPointer: {
+                                type: 'shadow'
+                                }
+                            },
+                            grid: {
+                                left: '3%',
+                                right: '4%',
+                                top: '5%',
+                                bottom:'3%',
+                                containLabel: true
+                            },
+                            xAxis: {
+                                type: 'value',
+                                boundaryGap: [0, 0.01],
+                                axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                            },
+                            },
+                            yAxis: {
+                                type: 'category',
+                                data: ['订阅量', '当日发文', '阅读量', '点赞量', '在看量', '转发量'],
+                                axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                            },
+                            },
+                            series: [
+                                {
+                                        name: '数量',
+                                        type: 'bar',
+                                        barWidth:10,
+                                        data: [10, 9, 8, 7, 5, 6],
+                                        itemStyle: {
+                                                normal: {
+                                                      color: ['#3BFFE8', '#3DB7FF','#EEA500','#ACB6B9','#ACB6B9','#ACB6B9'],
+                                                }
+                                        }
+                                },
+                            ]
+                            };
+                myChart.setOption(option);
+        },
+        inityjchart(){
+            var myChart = this.$echarts.init(document.getElementById('zdyjchart'));
+            var option = {
+                            series: [
+                                {
+                                name: 'Nightingale Chart',
+                                type: 'pie',
+                                radius: [20, 100],
+                                center: ['50%', '50%'],
+                                roseType: 'area',
+                                itemStyle: {
+                                    borderRadius: 8
+                                },
+                                 label: {
+                                    normal: {
+                                        show: true,
+                                        formatter: '{b} ({d}%)'
+                                    }
+                                },
+                                data: [
+                                    { value: 40, name: '汇龙镇',  itemStyle: { color: '#38CAFB' }, },
+                                    { value: 38, name: '海复镇',  itemStyle: { color: '#4CAFF9' },  },
+                                    { value: 32, name: '王鲍镇',  itemStyle: { color: '#4ADDC9' }, },
+                                    { value: 30, name: '北新镇',  itemStyle: { color: '#2AA4EA' }, },
+                                    { value: 28, name: '吕四镇',  itemStyle: { color: '#0965D2' }, },
+                                    { value: 26, name: '其它' ,  itemStyle: { color: '#1C3F83' },},
+                                    { value: 22, name: '南阳镇' ,  itemStyle: { color: '#488CF7' },},
+                                ]
+                                }
+                            ]
+                        }; 
+                        myChart.setOption(option);
+               
+        },
+          getResource(){
+               getResource({date:'2022-03-12'}).then(response =>{
+                     var trainArry = [];
+                     var bridgeArry = [];
+                     var railArry = [];
+                     var stationLocation = [];
+                     var areaList = [];
+                     for(var index in response.data.staticLocation){
+                          var obj = response.data.staticLocation[index]
+                          obj.fence = obj.lnglat
+                          obj.name = obj.locationName
+                          stationLocation.push(obj)
+                     }
+                     for(var index in response.data.area){
+                         var obj = response.data.area[index]
+                         if(obj.areaType == '1'){
+                              areaList.push(obj);
+                         }else if(obj.areaType == '2'){
+                             obj.name = obj.areaName
+                             trainArry.push(obj);
+                         }else if(obj.areaType == '3'){
+                             obj.name = obj.areaName
+                             bridgeArry.push(obj);
+                         }else if(obj.areaType == '4'){
+                             obj.name = obj.areaName
+                             railArry.push(obj);   
+                         }
+                     }
+                     for(var index in areaList){
+                             var json = JSON.parse(areaList[index].fence)
+                             this.$refs.mapdiv.addPolygon(json);
+                     }
+                     for(var key in response.data.deviceTrail){
+                              var jsonStr = '['
+                             for(var index in response.data.deviceTrail[key]){
+                               var obj = response.data.deviceTrail[key][index]
+                               if(index == response.data.deviceTrail[key].length - 1){
+                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+']'
+                               }else{
+                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+'],'
+                               }
+                               jsonStr += location
+                              //  deviceArry.push(obj.fence.split(','));
+                             }
+                              jsonStr += ']'
+                              var json = JSON.parse(jsonStr);
+                             this.$refs.mapdiv.addPoints(response.data.deviceTrail[key],'device.png',0.6,'device');
+                             this.$refs.mapdiv.addline(json,'device');
+                     }
+                       this.$refs.mapdiv.addPoints(trainArry,'train.png',0.6,'train');
+                       this.$refs.mapdiv.addPoints(bridgeArry,'bridge.png',0.6,'bridge');
+                       this.$refs.mapdiv.addPoints(railArry,'rail.png',0.6,'rail');
+                       this.$refs.mapdiv.addPoints(stationLocation,'location.png',0.6,'location');
+               })
+         },
+         getvideoList(){
+                  httpRequest(this.videoParams).then(data =>{
+                        var json = JSON.parse(data.data);
+                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
+                  });
+              
+         }
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+ .divtitle{
+          background: url("~@/assets/images/title@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:95%;
+          height:3.9rem;
+          padding-left:1.5rem;
+          padding-top:0.7rem;
+          display: inline-flex;
+       }
+.dayCount{
+          background: url("~@/assets/images/public/dayCount.png") no-repeat;
+          background-size: 100% 100%;
+          width:14.6rem;
+          height:11.3rem;
+          margin-left:3.5rem;
+          margin-top:1rem;
+        //   display: inline-flex;
+          font-size: 2.8rem;
+          font-family: Myriad Pro;
+          font-weight: bold;
+          color: #1AFF62;
+          text-align: center
+          // display: inline-flex;
+}
+.wordCount{
+          background: url("~@/assets/images/public/wordCount.png") no-repeat;
+          background-size: 100% 100%;
+          width:14.6rem;
+          height:11.3rem;
+          margin-left:1.5rem;
+          margin-top:1rem;
+        //   display: inline-flex;
+          font-size: 2.8rem;
+          font-family: Myriad Pro;
+          font-weight: bold;
+          color: #1AFCFF;
+          text-align: center
+}
+.dayClass{
+          background: url("~@/assets/images/public/dayClass@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:10.8rem;
+          height:3.2rem;
+          margin-left:3.5rem;
+          margin-top:1rem;
+          font-size: 14px;
+          font-family: Adobe Heiti Std;
+          font-weight: normal;
+          color: #DFEEF3;
+          line-height: 3.2rem;
+          text-align: center
+}
+.wordClass{
+          background: url("~@/assets/images/public/wordClass@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:10.8rem;
+          height:3.2rem;
+          margin-left:3.5rem;
+          margin-top:1rem;
+          font-size: 14px;
+          font-family: Adobe Heiti Std;
+          font-weight: normal;
+          color: #DFEEF3;
+          line-height: 3.2rem;
+          text-align: center
+}
+.bgcontent{
+          background: url("~@/assets/images/safe/bg@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:6.9rem;
+          height:6.9rem;
+          margin-left:1.5rem;
+          margin-top:1rem;
+          display: inline-flex;
+}
+
+.pieChart{
+          background: url("~@/assets/images/safe/piechart.png") no-repeat;
+          background-size: 100% 100%;
+          width:38.8rem;
+          height:17.5rem;
+          margin-left:4rem;
+          margin-top:1rem;
+          display: inline-flex;
+}
+
+.countClass{
+    font-size: 2.4rem;
+    font-family: AlibabaSans;
+    font-weight: 500;
+    color: #30FDFF;
+}
+
+.deptClass{
+    font-size: 1.4rem;
+    font-family: Adobe Heiti Std;
+    font-weight: normal;
+    color: #BAC3C4;
+}
+
+.tdgove2{
+          background: url("~@/assets/images/goverce/态势2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:37.2rem;
+          height:9.9rem;
+          margin-left:3.5rem;
+          display: inline-flex;
+          // display: inline-flex;
+}
+.fontClass{
+        font-size: 1.5rem;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 2.6rem;
+}
+
+.EngClass{
+        font-size: 1.2rem;
+        font-family: AlibabaSans;
+        font-weight: 400;
+        color: #B7D0FA;
+        line-height: 1.1rem;
+        opacity: 0.4;
+}
+
+
+.countClass2{
+        font-size: 1.5rem;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 2.6rem;
+}
+
+</style>

src/views/qdtl/paiban/index.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="app-container">
+     <div class="divtitle">
+       <img src="~@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+       <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:1rem">{{divtitle}}</div>
+      </div>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="6.8rem">
+      <el-form-item label="巡更人员" prop="locationCode">
+         <el-select v-model="selectUser" placeholder="请选择人员" style="width:25rem" @change="lineIdChange">
+                    <el-option
+                      v-for="obj in userList"
+                      :key="obj.userId"
+                      :label="obj.nickName"
+                      :value="obj.userId"
+                    ></el-option>
+          </el-select>
+      </el-form-item>
+      <el-form-item label="名称" prop="locationName">
+        <el-input
+          v-model="queryParams.locationName"
+          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-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          style="width:8rem;height:3.2rem;" 
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          @click="handleAdd"
+          v-hasPermi="['qdtl:location:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+           style="width:8rem;height:3.2rem;" 
+          type="primary"
+          plain
+          icon="el-icon-edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['qdtl:location:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          style="width:8rem;height:3.2rem;" 
+          type="primary"
+          plain
+          icon="el-icon-delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['qdtl:location:remove']"
+        >删除</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="locationList" @selection-change="handleSelectionChange" stripe
+      class="my_table"
+      :row-class-name="tableRowClassName"
+      :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="编号" align="center" prop="locationCode" />
+      <el-table-column label="名称" align="center" prop="locationName" />
+      <el-table-column label="描述" align="center" prop="detail" />
+      <el-table-column label="巡检设备" align="center" prop="deviceIds" />
+      <el-table-column label="所属区域" align="center" prop="areaId" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['qdtl:location:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['qdtl:location:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+  </div>
+</template>
+
+<script>
+import { getSchedule } from "@/api/qdtl/data";
+import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
+import mapdiv from "@/components/map/index.vue"
+
+export default {
+  name: "Location",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+
+      divtitle:'排班管理',
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 巡检点管理表格数据
+      locationList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+
+      isEdit:'true',
+
+      userList:[],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 表单参数
+      form: {},
+
+      pointArry:{
+        locations:'',
+        type:''
+      },
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+   components:{
+      mapdiv
+    },
+  created() {
+    this.getList();
+    this.getUserList();
+    // this.getAreaList();
+  },
+  methods: {
+    getUserList(){
+      listUser().then(response =>{
+        this.userList = response.rows
+         console.log(this.userList);
+        // console.log(response.rows);
+      })
+    },
+    /** 查询巡检点管理列表 */
+    getList() {
+      this.loading = true;
+      // listLocation(this.queryParams).then(response => {
+      //   this.locationList = response.rows;
+      //   this.total = response.total;
+      //   this.loading = false;
+      // });
+      getSchedule().then(response =>{
+               console.log(response);
+
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        locationCode: null,
+        locationName: null,
+        detail: null,
+        deviceIds: null,
+        areaId: null,
+        lnglat: null,
+        remark: null,
+        delFlag: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: 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.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加巡检点管理";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getLocation(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改巡检点管理";
+        this.openMap();
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+              if(this.$refs.mapv.locations.length > 0){
+                  this.form.lnglat = this.$refs.mapv.locations.join(',');
+              }
+            updateLocation(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+              this.form.lnglat = this.$refs.mapv.locations.join(',');
+            addLocation(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除巡检点管理编号为"' + ids + '"的数据项？').then(function() {
+        return delLocation(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('qdtl/location/export', {
+        ...this.queryParams
+      }, `location_${new Date().getTime()}.xlsx`)
+    },
+        tableRowClassName({ row, rowIndex }) {
+        if ((rowIndex + 1) % 2 === 0) {
+             return "warning-row"; 
+        } else {
+             return "success-row";
+        }
+    },
+     deleteLocation(){
+      // this.$refs.mapv.draw.set
+       this.$refs.mapv.vector.getSource().clear()
+    }
+  }
+};
+</script>
+
+
+<style>
+ .divtitle{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem;
+          padding-top:0.8rem;
+          padding-left:3rem;
+          display: inline-flex;
+       }
+
+
+</style>

src/views/qdtl/plan/index.vue

@@ -150,7 +150,15 @@
             </el-col>
             <el-col :span="8">
                  <el-form-item label="计划类型" prop="planType">
-                  <el-input v-model="form.planType" placeholder="请选择计划类型" style="width:25rem"/>
+                        <el-select v-model="form.planType" placeholder="请选择计划类型" clearable size="small">
+                            <el-option
+                              v-for="dict in dict.type.tl_plan_type"
+                              :key="dict.value"
+                              :label="dict.label"
+                              :value="dict.value"
+                            />
+                        </el-select>
+                  <!-- <el-input v-model="form.planType" placeholder="请选择计划类型" style="width:25rem"/> -->
                 </el-form-item>
             </el-col>
               <el-col :span="8">
@@ -162,12 +170,23 @@
         <el-row :gutter="20">
              <el-col :span="8">
               <el-form-item label="开始时间" prop="startDate">
-                  <el-input v-model="form.startDate" placeholder="请输入计划编号" style="width:25rem"/>
+                     <el-date-picker
+                          v-model="form.startDate"
+                          type="date"
+                          placeholder="选择日期"
+                          style="width:25rem">
+                        </el-date-picker>
                 </el-form-item>
             </el-col>
             <el-col :span="8">
                  <el-form-item label="结束时间" prop="endDate">
-                  <el-input v-model="form.endDate" placeholder="请选择计划类型" style="width:25rem"/>
+                       <el-date-picker
+                          v-model="form.endDate"
+                          type="date"
+                          placeholder="选择日期"
+                          style="width:25rem">
+                        </el-date-picker>
+                  <!-- <el-input v-model="form.endDate" placeholder="请选择计划类型" style="width:25rem"/> -->
                 </el-form-item>
             </el-col>
               <el-col :span="8">
@@ -183,13 +202,84 @@
                 </el-form-item>
             </el-col>
         </el-row>
+          <!-- <div>
+              <el-checkbox-group v-model="form.weeks">
+                 <el-checkbox-button  label="星期一" key="2">星期一</el-checkbox-button>
+                <el-checkbox-button v-for="obj in days" :label="obj.name" :key="obj.value">{{obj.name}}</el-checkbox-button>
+              </el-checkbox-group>
+          </div> -->
+          <el-form-item label="巡检次数" prop="form.xunNum">
+                  <el-input v-model="form.xunNum" placeholder="请输入巡检次数" style="width:25rem"/>
+          </el-form-item>
+          <el-form-item label="星期" prop="weeks">
+                <el-checkbox-group v-model="weeks">
+                  <el-checkbox-button v-for="obj in days" :label="obj.value" :key="obj.value">{{obj.name}}</el-checkbox-button>
+                </el-checkbox-group>
+          </el-form-item>
+
+           <el-form-item label="时间段" prop="timeArry">
+                      <el-time-picker
+                            is-range
+                            v-model="timeArry"
+                            range-separator="至"
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间"
+                            placeholder="选择时间范围">
+                          </el-time-picker>
+          </el-form-item>
+
+      <div>
+          <el-row :gutter="20">
+            <el-col :span="18">
+                <div class='titleFont'>时间段</div>
+            </el-col>
+              <el-col :span="2">
+                <el-button
+                        type="primary"
+                        plain
+                        size="mini"
+                        @click="addTime"
+                      >新增时间段</el-button>
+             </el-col>
+          </el-row>
+           <div style="height:25rem;width:100rem">
+              <el-table v-loading="loading" :data="timeTable" @selection-change="handleSelectionChange" stripe
+                class="my_table"
+                max-height=250
+                :row-class-name="tableRowClassName"
+                :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                        <el-table-column type="index" label="序号" width="55" align="center" />
+                        <el-table-column label="开始时间" align="center" prop="startTime" />
+                        <el-table-column label="结束时间" align="center" prop="endTime" />
+                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                          <template slot-scope="scope">
+                            <el-button
+                              size="mini"
+                              type="text"
+                              icon="el-icon-delete"
+                              @click="userDelete(scope.row)"
+                            ></el-button>
+                          </template>
+                        </el-table-column>  
+              </el-table>
+          </div>
+       </div>
+      <!-- <el-table v-loading="loading" :data="locationsList" @selection-change="handleSelectionChange" stripe
+            class="my_table"
+            max-height=300
+            :row-class-name="tableRowClassName"
+            :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                    <el-table-column type="index" label="序号" width="55" align="center" />
+                    <el-table-column label="巡检点编号" align="center" prop="locationCode" />
+                    <el-table-column label="巡检点名称" align="center" prop="locationName" />
+      </el-table> -->
       <!-- </el-form> -->
       </div>
       <div class='titleFont'>巡检点列表</div>
       <div style="height:25rem;width:100rem">
           <el-table v-loading="loading" :data="locationsList" @selection-change="handleSelectionChange" stripe
             class="my_table"
-            max-height=300
+            max-height=250
             :row-class-name="tableRowClassName"
             :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                     <el-table-column type="index" label="序号" width="55" align="center" />
@@ -273,6 +363,18 @@ export default {
   dicts: ['tl_plan_type'],
   data() {
     return {
+      weeks: [1,2,3,4,5,6,7],
+      timeArry:[new Date(2016, 9, 10, 0, 0),new Date(2016, 9, 10, 23, 0)],
+      minTime:'10:00',
+      days:[
+         {value:1,name:'星期日'},
+         {value:2,name:'星期一'},
+         {value:3,name:'星期二'},
+         {value:4,name:'星期三'},
+         {value:5,name:'星期四'},
+         {value:6,name:'星期五'},
+         {value:7,name:'星期六'}
+      ],
       // 遮罩层
       loading: true,
 
@@ -311,6 +413,7 @@ export default {
         planName: null,
         planType: null,
       },
+      timeTable:[],
       // 表单参数
       form: {},
       // 表单校验
@@ -337,6 +440,91 @@ export default {
             this.lineList = response.rows
       });
     },
+    addTime(){
+      //  console.log(this.timeArry);
+      //  this.timeFormat(this.timeArry[0]);
+       var obj = {};
+       obj.startTime = this.timeFormat(this.timeArry[0])
+       obj.startDate = this.timeArry[0];
+       obj.endTime = this.timeFormat(this.timeArry[1])
+       obj.endDate = this.timeArry[1];
+      //  this.timeTable.push(obj);
+      //  for(var index in this.timeTable){
+      //         console.log(this.checkAuditTime(obj.s));
+      //  }
+      var flag = 0;
+       if(this.timeTable.length > 0){
+             flag = this.checkAuditTime(obj);
+            //  if(flag == 1){
+            //       break;
+            //  }
+       }
+       if(flag == 1){
+               this.$message.error('开始时间与其它时间段重合');
+       }else if(flag == 2){
+               this.$message.error('结束时间与其它时间段重合');
+       }else if(flag == 3){
+               this.$message.error('时间段包含了其它时间段');
+       }else{
+              this.timeTable.push(obj);
+       }
+      //  console.log(this.checkAuditTime());
+    },
+    checkAuditTime(obj){
+              for(var index in this.timeTable){
+                      if(obj.startDate.getTime() >= this.timeTable[index].startDate && obj.startDate.getTime() <= this.timeTable[index].endDate){
+                                      return 1;
+                      }
+                       if(obj.endDate.getTime() >= this.timeTable[index].startDate && obj.endDate.getTime() <= this.timeTable[index].endDate){
+                                      return 2;
+                      }
+                      if(obj.startDate.getTime() <= this.timeTable[index].startDate && obj.endDate.getTime() >= this.timeTable[index].endDate){
+                                      return 3;
+                      } 
+              }
+              return 0;
+    },
+    // checkAuditTime(nowDate,beginTime, endTime) {
+    //           // var nowDate = new Date();
+    //           var beginDate = new Date(nowDate);
+    //           var endDate = new Date(nowDate);
+
+    //           var beginIndex = beginTime.lastIndexOf("\:");
+    //           var beginHour = beginTime.substring(0, beginIndex);
+    //           var beginMinue = beginTime.substring(beginIndex + 1, beginTime.length);
+    //           beginDate.setHours(beginHour, beginMinue, 0, 0);
+
+    //           var endIndex = endTime.lastIndexOf("\:");
+    //           var endHour = endTime.substring(0, endIndex);
+    //           var endMinue = endTime.substring(endIndex + 1, endTime.length);
+    //           endDate.setHours(endHour, endMinue, 0, 0);
+    //           return nowDate.getTime() - beginDate.getTime() >= 0 && nowDate.getTime() <= endDate.getTime();
+    //           },
+    timeFormat(date){
+        var time = "";
+        var hours  = date.getHours();
+        var minute = date.getMinutes();
+        var seconds = date.getSeconds();
+        if(hours < 10){
+             time = "0"+hours+":"
+        }else{
+             time = hours+":"
+        }
+
+        if(minute < 10){
+             time += "0"+minute+":"
+        }else{
+             time += minute+":"
+        }
+
+        if(seconds < 10){
+             time += "0"+seconds
+        }else{
+             time += seconds
+        }
+        // console.log(time);
+        return time;
+    },
     getList() {
       this.loading = true;
       listPlan(this.queryParams).then(response => {
@@ -447,6 +635,19 @@ export default {
                  var obj = this.selectUserList[index];
                  this.form.planUsers.push(obj);
         }
+        this.form.weeks =this.weeks.join(',');
+        var timeUnit='';
+        for(index in this.timeTable){
+              timeUnit += this.timeTable[index].startTime+'~'+ this.timeTable[index].endTime
+              if(index < this.timeTable.length-1){
+                   timeUnit += ';'
+              }
+        }
+        this.form.timeUnit = timeUnit;
+        this.form.startDate = this.getMyDate(this.form.startDate.getTime(),'Y-m-d');
+        this.form.endDate = this.getMyDate(this.form.endDate.getTime(),'Y-m-d');
+        // console.log(this.getMyDate(this.form.startDate.getTime(),'Y-m-d'));
+        console.log(this.form);
         if (valid) {
           if (this.form.id != null) {
             updatePlan(this.form).then(response => {
@@ -464,6 +665,39 @@ export default {
         }
       });
     },
+      getMyDate (timestamp, formats) {
+            // formats格式包括
+            // 1. Y-m-d
+            // 2. Y-m-d H:i:s
+            // 3. Y年m月d日
+            // 4. Y年m月d日 H时i分
+            formats = formats || 'Y-m-d';
+            var zero = function (value) {
+              if (value < 10) {
+                return '0' + value;
+              }
+              return value;
+            };
+
+            var myDate = timestamp ? new Date(timestamp) : new Date();
+            var year = myDate.getFullYear();
+            var month = zero(myDate.getMonth() + 1);
+            var day = zero(myDate.getDate());
+            var hour = zero(myDate.getHours());
+            var minite = zero(myDate.getMinutes());
+            var second = zero(myDate.getSeconds());
+
+            return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
+              return ({
+                Y: year,
+                m: month,
+                d: day,
+                H: hour,
+                i: minite,
+                s: second
+              })[matches];
+            });
+          },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;

src/views/safe/index.vue

@@ -0,0 +1,498 @@
+<template>
+<div style="width:100%;height:100%;position:relative">
+  <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
+  <div style="display:fix;">
+  <div style="width:25%;height:100%;display: inline-flex;">
+       <div style="width:100%">
+       <div class="divtitle" style="margin-top:0.5rem">
+                <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+                <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">预警分析</div>
+        </div>
+        <!-- <br/> -->
+        <div>
+           <div class="yjcontent1" style="padding-left:2rem;padding-top:1.5rem">
+               <div>
+                  <div style="font-size: 1.4rem;
+                              font-family: Adobe Heiti Std;
+                              font-weight: normal;
+                              color: #FFFFFF;
+                              ">预警总数</div>
+                  <div style='font-size: 2rem;
+                            font-family: Myriad Pro;
+                            font-weight: 400;
+                            color: #21F5F2;'>394</div>
+               </div>
+           </div>
+           <div class="yjcontent2" style="padding-left:2rem;padding-top:1.5rem">
+               <div>
+                  <div style="font-size: 1.4rem;
+                              font-family: Adobe Heiti Std;
+                              font-weight: normal;
+                              color: #FFFFFF;">未处理预警</div>
+                  <div  style='font-size: 2rem;
+                            font-family: Myriad Pro;
+                            font-weight: 400;
+                            color: #23B9FF;'>226</div>
+           </div>
+            </div>
+        </div>
+
+         <div id='yjchart' style="width:45rem;height:30rem"></div>
+         <div class="divtitle" style="margin-top:0.5rem">
+                <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+                <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">站点预警量</div>
+         </div>
+
+         <div class="zdyjcontrnt"></div>
+         <div id='zdyjchart' style="width:45rem;height:27rem"></div>
+       </div>
+
+
+  </div>
+  <div style="width:50%;height:95%;position:absolute;display: inline-flex;">
+      <mapdiv ref="mapdiv" style=""></mapdiv>
+  </div>
+  <div style="width:25%;height:100%;margin-left:96rem;display: inline-flex;">
+        <div style="width:100%;padding-left:1rem">
+        <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">各部门处理工单量</div>
+        </div>
+
+        <div style="display: inline-flex;margin-top:3rem">
+              <div style="display: inline-flex;margin-left:5rem">
+                    <div class='bgcontent' style="padding-top:2.1rem;padding-left:2.1rem">
+                        <img src='../../assets/images/safe/icon.png' style="width:2.6rem;height:2.6rem;"/>
+                    </div>
+                    <div style="margin-top:1.5rem;margin-left:1rem">
+                        <div class='countClass'>32531</div>
+                        <div class='deptClass'>部门一</div>
+                    </div>
+              </div>
+             <div style="display: inline-flex;margin-left:3rem">
+                    <div class='bgcontent' style="padding-top:2.1rem;padding-left:2.1rem">
+                        <img src='../../assets/images/safe/icon.png' style="width:2.6rem;height:2.6rem;"/>
+                    </div>
+                    <div style="margin-top:1.5rem;margin-left:1rem">
+                        <div class='countClass'>13325</div>
+                        <div class='deptClass'>部门三</div>
+                    </div>
+              </div>
+        </div>
+
+          <div style="display: inline-flex;">
+              <div style="display: inline-flex;margin-left:5rem">
+                    <div class='bgcontent' style="padding-top:2.1rem;padding-left:2.1rem">
+                        <img src='../../assets/images/safe/icon.png' style="width:2.6rem;height:2.6rem;"/>
+                    </div>
+                    <div style="margin-top:1.5rem;margin-left:1rem">
+                        <div class='countClass'>62255</div>
+                        <div class='deptClass'>部门二</div>
+                    </div>
+              </div>
+             <div style="display: inline-flex;margin-left:3rem">
+                    <div class='bgcontent' style="padding-top:2.1rem;padding-left:2.1rem">
+                        <img src='../../assets/images/safe/icon.png' style="width:2.6rem;height:2.6rem;"/>
+                    </div>
+                    <div style="margin-top:1.5rem;margin-left:1rem">
+                        <div class='countClass'>72123</div>
+                        <div class='deptClass'>其它合作单位</div>
+                    </div>
+              </div>
+        </div>
+        
+        <div class='pieChart' style='margin-top:5rem'></div>
+         <!-- <div id='lcChart' style="width:45rem;height:25rem"></div> -->
+
+        <div class="divtitle" style="margin-top:1.5rem">
+           <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
+           <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">巡检考核</div>
+        </div>
+
+         <!-- <div class='gdChart' style='margin-top:5rem'></div> -->
+          <div id='gdChart' style="width:45rem;height:37rem"></div>
+
+        </div>
+  </div>
+ </div>
+
+    <div class="bottombg">
+      <div class="item item2" @click="changeMapTab(1)"><div class="num">1123</div><div>静态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">113</div><div>动态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(3)"><div class="num">531</div><div>重点区域</div></div>
+      <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div>
+    </div>
+
+    <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
+
+
+</div>
+
+
+</template>
+
+<script>
+import moment from "moment";
+import mapdiv from "../../components/map/index.vue"
+import headerdiv from '@/components/HeaderDiv/index.vue'
+import { httpRequest } from "@/api/data/http";
+import { getLineData,getResource,getgovern } from "@/api/qdtl/data";
+
+import videodiv from "../../components/Videoplayer/index.vue"
+
+export default {
+    name: "big",
+    data() {
+        return {
+              userList:[],
+              tdxjCount:111,
+              tdcsCount:152,
+              currentindexNew:4,
+              ccode:"32068166001320000235",
+              videoParams:{
+                url:'http://2.90.220.252:9017/artemis-web/debug',
+                params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+              },
+        };
+    },
+    components:{
+      mapdiv,
+      headerdiv,
+      videodiv,
+    },
+    mounted() {
+        console.log(111)
+        this.initchart();
+        this.getResource();
+        this.getvideoList();
+        // this.getGovern();
+        this.inityjchart();
+        this.getGdChart();
+    },
+    methods:{
+        getGdChart(){
+             var myChart = this.$echarts.init(document.getElementById('gdChart'));
+             var option = {
+                            xAxis: {
+                                type: 'category',
+                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                                 axisLabel: {
+                                            show: true,
+                                            textStyle: {
+                                            color: '#ACB6B9'   //这里用参数代替了
+                                        }
+                                },
+                            },
+                            yAxis: {
+                                 axisLabel: {
+                                            show: true,
+                                            textStyle: {
+                                            color: '#ACB6B9'   //这里用参数代替了
+                                        }
+                                },
+                                type: 'value'
+                            },
+                            color: new this.$echarts.graphic.LinearGradient(
+                                    0, 0, 0, 1,
+                                    [
+                                        {offset: 1, color: '#2275E4'},                   //柱图渐变色
+                                        {offset: 0, color: '#56CCF2'},                   //柱图渐变色
+                                    ]
+                           ),
+                            series: [
+                                {
+                                        barWidth:15,
+                                        data: [120, 200, 150, 80, 70, 110, 130],
+                                        type: 'bar'
+                                }
+                            ]
+                };
+             myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+                if ((rowIndex + 1) % 2 === 0) {
+                    return "warning-row"; 
+                } else {
+                    return "success-row";
+                }
+        },
+        changeMapTab(index){
+            this.$refs.mapdiv.iconSelect = index
+        },
+        getGovern(){
+                getgovern().then(data =>{
+                       console.log(data);
+                       this.userList  = data.data.checkStatic;
+                       console.log(this.userList);
+                       this.tdxjCount = data.data.xunTotalDistance;
+                       this.tdcsCount = data.data.checkPointLogNum;
+                })  
+        },
+        initchart(){
+              var myChart = this.$echarts.init(document.getElementById('yjchart'));
+              var option = {
+                            color: ['#3DFCCD', '#23B9FF'],
+                            tooltip: {
+                                trigger: 'axis',
+                                axisPointer: {
+                                type: 'shadow'
+                                }
+                            },
+                            legend: {
+                                   x:'left',
+                                   textStyle:{
+                                            fontSize: 12,//字体大小
+                                            color: '"#fft'//字体颜色
+                                    },
+                            },
+                            grid: {
+                                left: '3%',
+                                right: '4%',
+                                bottom: '3%',
+                                containLabel: true
+                            },
+                            xAxis: {
+                                type: 'value',
+                                boundaryGap: [0, 0.01],
+                                axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                            },
+                            },
+                            yAxis: {
+                                type: 'category',
+                                data: ['汇龙镇', '南阳镇', '海复镇', '王鲍镇', '北新镇', '吕四镇','东宇镇','近海镇'],
+                                axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                            },
+                            },
+                            series: [
+                                {
+                                name: '已处理预警',
+                                type: 'bar',
+                                data: [573, 289, 357, 405, 501, 286,471,421]
+                                },
+                                {
+                                name: '预警总数',
+                                type: 'bar',
+                                data: [582, 366, 391, 498, 577, 337, 483, 492]
+                                }
+                            ]
+                            };
+                myChart.setOption(option);
+        },
+        inityjchart(){
+            var myChart = this.$echarts.init(document.getElementById('zdyjchart'));
+            var option = {
+                            series: [
+                                {
+                                name: 'Nightingale Chart',
+                                type: 'pie',
+                                radius: [20, 100],
+                                center: ['50%', '50%'],
+                                roseType: 'area',
+                                itemStyle: {
+                                    borderRadius: 8
+                                },
+                                 label: {
+                                    normal: {
+                                        show: true,
+                                        formatter: '{b} ({d}%)'
+                                    }
+                                },
+                                data: [
+                                    { value: 40, name: '汇龙镇',  itemStyle: { color: '#38CAFB' }, },
+                                    { value: 38, name: '海复镇',  itemStyle: { color: '#4CAFF9' },  },
+                                    { value: 32, name: '王鲍镇',  itemStyle: { color: '#4ADDC9' }, },
+                                    { value: 30, name: '北新镇',  itemStyle: { color: '#2AA4EA' }, },
+                                    { value: 28, name: '吕四镇',  itemStyle: { color: '#0965D2' }, },
+                                    { value: 26, name: '其它' ,  itemStyle: { color: '#1C3F83' },},
+                                    { value: 22, name: '南阳镇' ,  itemStyle: { color: '#488CF7' },},
+                                ]
+                                }
+                            ]
+                        }; 
+                        myChart.setOption(option);
+               
+        },
+          getResource(){
+               getResource({date:'2022-03-12'}).then(response =>{
+                     var trainArry = [];
+                     var bridgeArry = [];
+                     var railArry = [];
+                     var stationLocation = [];
+                     var areaList = [];
+                     for(var index in response.data.staticLocation){
+                          var obj = response.data.staticLocation[index]
+                          obj.fence = obj.lnglat
+                          obj.name = obj.locationName
+                          stationLocation.push(obj)
+                     }
+                     for(var index in response.data.area){
+                         var obj = response.data.area[index]
+                         if(obj.areaType == '1'){
+                              areaList.push(obj);
+                         }else if(obj.areaType == '2'){
+                             obj.name = obj.areaName
+                             trainArry.push(obj);
+                         }else if(obj.areaType == '3'){
+                             obj.name = obj.areaName
+                             bridgeArry.push(obj);
+                         }else if(obj.areaType == '4'){
+                             obj.name = obj.areaName
+                             railArry.push(obj);   
+                         }
+                     }
+                     for(var index in areaList){
+                             var json = JSON.parse(areaList[index].fence)
+                             this.$refs.mapdiv.addPolygon(json);
+                     }
+                     for(var key in response.data.deviceTrail){
+                              var jsonStr = '['
+                             for(var index in response.data.deviceTrail[key]){
+                               var obj = response.data.deviceTrail[key][index]
+                               if(index == response.data.deviceTrail[key].length - 1){
+                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+']'
+                               }else{
+                                 var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+'],'
+                               }
+                               jsonStr += location
+                              //  deviceArry.push(obj.fence.split(','));
+                             }
+                              jsonStr += ']'
+                              var json = JSON.parse(jsonStr);
+                             this.$refs.mapdiv.addPoints(response.data.deviceTrail[key],'device.png',0.6,'device');
+                             this.$refs.mapdiv.addline(json,'device');
+                     }
+                       this.$refs.mapdiv.addPoints(trainArry,'train.png',0.6,'train');
+                       this.$refs.mapdiv.addPoints(bridgeArry,'bridge.png',0.6,'bridge');
+                       this.$refs.mapdiv.addPoints(railArry,'rail.png',0.6,'rail');
+                       this.$refs.mapdiv.addPoints(stationLocation,'location.png',0.6,'location');
+               })
+         },
+         getvideoList(){
+                  httpRequest(this.videoParams).then(data =>{
+                        var json = JSON.parse(data.data);
+                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
+                  });
+              
+         }
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+ .divtitle{
+          background: url("~@/assets/images/title@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:95%;
+          height:3.9rem;
+          padding-left:1.5rem;
+          padding-top:0.7rem;
+          display: inline-flex;
+       }
+.yjcontent1{
+          background: url("~@/assets/images/safe/bg2.png") no-repeat;
+          background-size: 100% 100%;
+          width:18.7rem;
+          height:8.3rem;
+          margin-left:3.5rem;
+          margin-top:1rem;
+          display: inline-flex;
+          // display: inline-flex;
+}
+.yjcontent2{
+          background: url("~@/assets/images/safe/bg1.png") no-repeat;
+          background-size: 100% 100%;
+          width:18.7rem;
+          height:8.3rem;
+          margin-left:3.5rem;
+          margin-top:1rem;
+          display: inline-flex;
+          // display: inline-flex;
+}
+.zdyjcontrnt{
+          background: url("~@/assets/images/safe/组 15@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:42.7rem;
+          height:12rem;
+          margin-left:1.5rem;
+          margin-top:1rem;
+          display: inline-flex;
+}
+
+.bgcontent{
+          background: url("~@/assets/images/safe/bg@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:6.9rem;
+          height:6.9rem;
+          margin-left:1.5rem;
+          margin-top:1rem;
+          display: inline-flex;
+}
+
+.pieChart{
+          background: url("~@/assets/images/safe/piechart.png") no-repeat;
+          background-size: 100% 100%;
+          width:38.8rem;
+          height:17.5rem;
+          margin-left:4rem;
+          margin-top:1rem;
+          display: inline-flex;
+}
+
+.countClass{
+    font-size: 2.4rem;
+    font-family: AlibabaSans;
+    font-weight: 500;
+    color: #30FDFF;
+}
+
+.deptClass{
+    font-size: 1.4rem;
+    font-family: Adobe Heiti Std;
+    font-weight: normal;
+    color: #BAC3C4;
+}
+
+.tdgove2{
+          background: url("~@/assets/images/goverce/态势2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:37.2rem;
+          height:9.9rem;
+          margin-left:3.5rem;
+          display: inline-flex;
+          // display: inline-flex;
+}
+.fontClass{
+        font-size: 1.5rem;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 2.6rem;
+}
+
+.EngClass{
+        font-size: 1.2rem;
+        font-family: AlibabaSans;
+        font-weight: 400;
+        color: #B7D0FA;
+        line-height: 1.1rem;
+        opacity: 0.4;
+}
+
+
+.countClass2{
+        font-size: 1.5rem;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 2.6rem;
+}
+
+</style>