页面

src/api/qdtl/data.js

@@ -10,7 +10,7 @@ export function getLineData() {
   export function getResource(query) {
     console.log(query);
     return request({
-      url: 'qdtl/common/resource?date='+query.date,
+      url: 'qdtl/common/resource',
       method: 'get',
       params:query
     })
@@ -19,7 +19,7 @@ export function getLineData() {
   export function getgovern(query) {
     console.log(query);
     return request({
-      url: 'qdtl/common/govern?date=2022-03-12',
+      url: 'qdtl/common/govern',
       method: 'get',
       params:query
     })
@@ -124,5 +124,16 @@ export function getLineData() {
   //   })
   // }
 
+  export function getMonthStatic(query) {
+    console.log(query);
+    return request({
+      url: '/qdtl/common/monthStatic',
+      method: 'get',
+      params:query
+    })
+  }
+
+
+
 
 

src/api/qdtl/electri.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+export function queryAllList(query) {
+    return request({
+      url: '/qdtl/electricDevice/queryAllList',
+      method: 'get',
+      params:query
+    })
+  }
+
+  export function queryCarStaticByArea(query) {
+    return request({
+      url: '/qdtl/electricDevice/queryCarStaticByArea',
+      method: 'get',
+      params:query
+    })
+  }
+
+  export function getAllElectricDetail(query) {
+    return request({
+      url: '/qdtl/electricLocation/getAllElectricDetail',
+      method: 'get',
+      params:query
+    })
+  }
+
+  export function queryLocationRecord(query) {
+    return request({
+      url: 'qdtl/electricLocation/queryLocationRecord',
+      method: 'get',
+      params:query
+    })
+  }
+
+  export function getSingleElectricLocation(query) {
+    return request({
+      url: '/qdtl/electricLocation/getSingleElectricLocation',
+      method: 'get',
+      params:query
+    })
+  }
+
+
+  
+
+
+

src/components/HeaderDiv/index.vue

@@ -27,10 +27,10 @@
              <div  @click="goTarget(11)" v-show="!showMenu">巡逻电车监测</div> -->
 
 
-            <div  @click="goTarget(9)" v-show="showMenu == 1">视频监测</div>
-            <div  @click="goTarget(10)" v-show="showMenu == 1">无人机监测</div>
-            <div  @click="goTarget(11)" v-show="showMenu == 1">巡检监测</div>
-             <div  @click="goTarget(11)" v-show="showMenu == 1">巡逻电车监测</div>
+            <div :class='currentindex==9?"active":""' @click="goTarget(9)" v-show="showMenu == 1">视频监测</div>
+            <div :class='currentindex==10?"active":""' @click="goTarget(10)" v-show="showMenu == 1">无人机监测</div>
+            <div :class='currentindex==11?"active":""' @click="goTarget(11)" v-show="showMenu == 1">巡检监测</div>
+             <div :class='currentindex==12?"active":""' @click="goTarget(12)" v-show="showMenu == 1">巡逻电车监测</div>
             
             <div :class='currentindex==6?"active":""' @click="goTarget(6)" v-show="showMenu == 0">综合管理</div>
             <div :class='currentindex==3?"active":""' @click="goTarget(3)" v-show="showMenu == 0">治理态势</div>
@@ -57,7 +57,7 @@ export default {
       currentindexP:Number,
       menuNameP:{
       type: String, // 约束color值的类型
-      default: "更多监测",  // color变量默认值（外部不给 我color传值，使用默认值） 
+      default: "设施监测",  // color变量默认值（外部不给 我color传值，使用默认值） 
     },
       menuNameP2:{
       type: String, // 约束color值的类型
@@ -102,6 +102,8 @@ export default {
            this.$router.push('/qdlt/area')
       }else if(index == 7){
            this.$router.push('/introduction')
+      }else if(index == 12){
+           this.$router.push('/electri')
       }
     },
     rightMenu(index){

src/components/map/index.vue

@@ -5,7 +5,7 @@
      <!-- <div id="textInfo" style="display:none">我是text文本信息</div> -->
   </div>
 
-  <div class="iconSelect" v-if="iconSelect == 1">
+  <div :class='mapType == "1"?"iconSelectbig":"iconSelect"' v-if="iconSelect == 1">
       <el-checkbox-group  v-model="checkList" @change="handleChange" >
           <el-checkbox v-for="item in dict.type.tl_static_type" :label="item.value"  :key="item.value" style="margin-top:1rem">
                  <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
@@ -15,7 +15,7 @@
       </el-checkbox-group>
   </div>
 
-    <div class="iconSelect" v-if="iconSelect == 2">
+    <div :class='mapType == 1?"iconSelectbig":"iconSelect"' v-if="iconSelect == 2">
       <el-checkbox-group  v-model="checkList" @change="handleChange" >
           <el-checkbox v-for="item in dict.type.tl_dt_type" :label="item.raw.cssClass"  :key="item.value" style="margin-top:1rem">
                  <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
@@ -25,7 +25,7 @@
       </el-checkbox-group>
    </div>
 
-  <div class="iconSelect" v-if="iconSelect == 3">
+  <div :class='mapType == 1?"iconSelectbig":"iconSelect"' v-if="iconSelect == 3">
       <el-checkbox-group  v-model="checkList" @change="handleChange" >
           <el-checkbox v-for="item in dict.type.tl_area_type" :label="item.raw.cssClass"  :key="item.value" style="margin-top:1rem">
                  <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
@@ -44,7 +44,7 @@
                             </el-col>
 
                    <el-col :span="4">
-               <i class="el-icon-close" style="" @click="isShow=false"></i>
+               <i class="el-icon-close" style="color:white" @click="isShow=false"></i>
                 </el-col>
              </el-row>
           </div>
@@ -55,6 +55,68 @@
     </div>
 
 
+      <div class='carDiv' :style="carStyle" v-show='isShowCar'>
+            <div style="height:4rem;width:100%;padding-top:3.5rem;padding-left:4rem">
+                <el-row :gutter="20">
+                                <el-col :span="18">
+                   <span style='font-size: 1.6rem;
+                                font-family: Microsoft YaHei;
+                                font-weight: 400;
+                                color: #FEFFFF;'>巡逻车详情</span>
+                                </el-col>
+
+                      <el-col :span="4">
+                  <i class="el-icon-close" style="color:white" @click="isShowCar=false"></i>
+                    </el-col>
+                </el-row>
+            </div>
+
+            <div style="font-size: 1.4rem;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #CCEFF0;
+                        padding-left:4rem;
+                        margin-top:3rem">
+                         <div style="display:flex;flex-direction: row;"><div style="width: 0.6rem;
+                                          height: 0.6rem;
+                                          background: #27FFE8;
+                                          margin-top:0.7rem;
+                                          box-shadow: 0px 0px 0.6rem 0px #2DBCFF;
+                                          border-radius: 50%;"></div><div style="margin-left:1rem">编号:  {{clickObj.imei}}</div></div>
+                           <div style="display:flex;flex-direction: row;margin-top:0.6rem"><div style="width: 0.6rem;
+                                          height: 0.6rem;
+                                          background: #27FFE8;
+                                          margin-top:0.7rem;
+                                          box-shadow: 0px 0px 0.6rem 0px #2DBCFF;
+                                          border-radius: 50%;"></div><div style="margin-left:1rem">设备名称:  {{clickObj.deviceName}}</div></div>
+                            <div style="display:flex;flex-direction: row;margin-top:0.6rem"><div style="width: 0.6rem;
+                                          height: 0.6rem;
+                                          background: #27FFE8;
+                                          margin-top:0.7rem;
+                                          box-shadow: 0px 0px 0.6rem 0px #2DBCFF;
+                                          border-radius: 50%;"></div><div style="margin-left:1rem">累计(KM):  {{clickObj.mileage/1000}}</div></div>
+                             <div style="display:flex;flex-direction: row;margin-top:0.6rem"><div style="width: 0.6rem;
+                                          height: 0.6rem;
+                                          background: #27FFE8;
+                                          margin-top:0.7rem;
+                                          box-shadow: 0px 0px 0.6rem 0px #2DBCFF;
+                                          border-radius: 50%;"></div><div style="margin-left:1rem">当前里程:{KM}:  {{clickObj.dayMileage/1000}}</div></div>
+                             <div style="display:flex;flex-direction: row;margin-top:0.6rem"><div style="width: 0.6rem;
+                                          height: 0.6rem;
+                                          background: #27FFE8;
+                                          margin-top:0.7rem;
+                                          box-shadow: 0px 0px 0.6rem 0px #2DBCFF;
+                                          border-radius: 50%;"></div><div style="margin-left:1rem">轨迹回放:</div>
+                                          <div style="margin-left:1rem"><img style='width: 2.1rem;height: 1.7rem;' src='../../assets/images/icons/巡逻车.png' /></div>
+                                          <div style="color:#30FDFF" @click="getSingleElectricLocation()"> 巡逻轨迹 </div>
+                                          </div>
+                         <!-- <div style="margin-top:0.6rem">当前位置:  XLC_0225</div>
+                         <div style="margin-top:0.6rem">累计(KM):  XLC_0225</div>
+                         <div style="margin-top:0.6rem">当前里程:{KM}:  XLC_0225</div>
+                         <div style="margin-top:0.6rem">巡逻轨迹:  </div> -->
+            </div>
+      </div>
+
       <el-dialog
           title="视频播放"
           :visible.sync="dialogVisible"
@@ -133,6 +195,7 @@ import {LineString, Point} from "ol/geom";
 import { scale } from 'ol/coordinate';
 import { getLineData,getVideoHttp } from "@/api/qdtl/data";
 import {toStringHDMS} from 'ol/coordinate';
+import { getSingleElectricLocation } from "@/api/qdtl/electri";
 // import {Icon, Stroke, Style} from "ol/style";
 // import {Vector as LayerVec} from "ol/layer";
 
@@ -142,12 +205,15 @@ export default {
       pointObj:{type:Object},
       isEdit:false,
       isLine:false,
+      mapType:{type:String,default:'2'},
       // lineLocations:{type:Array,default:[]},
   },
   dicts: ['tl_static_type','tl_area_type','tl_dt_type'],
   data() {
     return {
+      carLineObj:null,
       locationStyle:'left:85.5rem;top:71.1rem',
+      carStyle:'left:85.5rem;top:30rem',
       clickObj:{},
       iconSelectArea:true,
       isShow:false,
@@ -188,7 +254,8 @@ export default {
             yxjl:require('../../assets/images/icons/yxjl.png'),
       },
       popup:null,
-      element:null
+      element:null,
+      isShowCar:false,
     };
   },
    components:{
@@ -245,6 +312,20 @@ export default {
                                 that.clickObj.imgsrc = process.env.VUE_APP_IMG_URL+tadata.data.pic
                                 that.isShow = true
                          }
+
+                          if(tadata.type == 'car'){
+
+                                var event = window.event;
+                                var x = event.screenX/10+5;
+                                var y = event.screenY/10-20;
+                                that.carStyle='top:'+y+'rem;left:'+x+'rem'
+                                that.clickObj = tadata.data
+                                console.log(that.clickObj)
+                                // console.log(tadata.pic);
+                                // that.clickObj.imgsrc = process.env.VUE_APP_IMG_URL+tadata.data.pic
+                                that.isShowCar = true
+                         }
+
                          if(tadata.type == 'video'){
                                 that.ccode = tadata.data.cameraIndexCode
                                 window.cameraid = that.ccode;
@@ -367,6 +448,29 @@ export default {
     // })
   },
   methods: {
+    getSingleElectricLocation(){
+          var params = {};
+          var endDate = new Date().toLocaleDateString().split('/').map(item=>{if (item<10){return '0'+ item}else {return item}}).join('-')
+          var startTime = new Date(new Date().getTime()-3600*24*1000)
+          var startDate = startTime.toLocaleDateString().split('/').map(item=>{if (item<10){return '0'+ item}else {return item}}).join('-')
+          params.startDate = startDate
+          params.endDate = endDate
+          params.imei = this.clickObj.imei
+          getSingleElectricLocation(params).then(response =>{
+                      console.log(response)
+                      var pointArry = []
+                      for(var index in response.data){
+                            var obj = response.data[index]
+                            var lngat = obj.lng +","+obj.lat
+                            pointArry.push(lngat.split(','));
+                      }
+                      if(this.carLineObj != null){
+                             this.map.removeLayer(this.carLineObj);
+                      }
+                      this.addline(pointArry,'carLine');
+                      this.isShowCar = false
+          })
+    },
      addQdStation(){
             var station = [121.640928,31.85894]
             this.addMarkerQd(station,'station.png',0.6,'marker');
@@ -408,7 +512,7 @@ export default {
         })
     },
      getResource(){
-               getResource({date:'2022-03-12'}).then(response =>{
+               getResource().then(response =>{
                     var selectLocation = [];
                     var stationLocation = [];
                     if(this.lineLocations != null){
@@ -690,7 +794,7 @@ export default {
                     }),
                       text: new Text({
                         text: '启东站',
-                        font: '16px sans-serif',
+                        font: '17px sans-serif',
                         textAlign: "center",
                         textBaseline: "middle",
                         //font: 'verdana',
@@ -764,7 +868,7 @@ export default {
                 new Style({
                       text: new Text({
                         text: text,
-                        font: '16px sans-serif',
+                        font: '10.6rem sans-serif',
                         textAlign: "center",
                         textBaseline: "middle",
                         //font: 'verdana',
@@ -798,7 +902,7 @@ export default {
       },
       addPoints(data,icon,size,type){
 
-
+        // console.log(data)
         var tamarkerArry =[]
         let tamarker = null
         for(var index in data){
@@ -875,10 +979,14 @@ export default {
             if(this.isShowGj){
                   markerta.setVisible(true);
             }
+             if(type == 'car'){
+                  markerta.setVisible(true);
+            }
             // markerta.setVisible(true)
 
       },
       addline: function(lnglats,type) {
+            // console.log(lnglats);
             let line = new Feature({
                 tadata: {
                     sectionId: "line",
@@ -908,6 +1016,9 @@ export default {
             //    this.mapHashMap[type]=linevectorLayer;
             //    linevectorLayer.setVisible(false)
             // }
+            if(type == 'carLine'){
+                  this.carLineObj = linevectorLayer
+            }
             this.map.addLayer(linevectorLayer); //这里是执行，执行之后点就出来了
         },
          addPolygon(item) {
@@ -1065,6 +1176,16 @@ export default {
                           }),
                           zIndex:30
                       })
+          }else if(type == 'carLine'){
+               style =new Style({
+                          stroke: new Stroke({
+                              color:"#30FDFF",
+                              width:6,
+                              lineDash:[15,45],
+                              lineCap:"butt"
+                          }),
+                          zIndex:30
+                      })
           }
              return style;
         }
@@ -1079,6 +1200,16 @@ export default {
 
 .iconSelect{
     position: absolute;
+    top: 30vh;
+    right: 50vh;
+    width: 16rem;
+    min-height: 30rem;
+    background-color: transparent ;
+    padding-left:1rem
+}
+
+.iconSelectbig{
+    position: absolute;
     top: 10rem;
     right: 5rem;
     width: 16rem;
@@ -1117,4 +1248,14 @@ img{
     background-color: transparent ;
     background:white
 }
+
+.carDiv{
+    position: absolute;
+    top: 10rem;
+    right: 50rem;
+    width: 34rem;
+    height: 26rem;
+    background: url("../../assets/images/弹窗bg@2x.png");
+    background-size: 100% 100%;
+}
 </style>

src/layout/components/TagsView/index.vue

@@ -40,7 +40,8 @@ export default {
       top: 0,
       left: 0,
       selectedTag: {},
-      affixTags: []
+      affixTags: [],
+       tableHeight:600,
     }
   },
   computed: {

src/router/index.js

@@ -107,7 +107,7 @@ export const constantRoutes = [{
     {
         path: "/keepWatch",
         component: () =>
-            import ("@/views/keepWatch"),
+            import ("@/views/keepWatch/index.vue"),
         hidden: true,
     },
     {
@@ -123,6 +123,12 @@ export const constantRoutes = [{
         hidden: true,
     },
     {
+        path: "/electri",
+        component: () =>
+            import ("@/views/electri"),
+        hidden: true,
+    },
+    {
         path: "/user",
         component: Layout,
         hidden: true,

src/store/modules/permission.js

@@ -30,7 +30,6 @@ const permission = {
       state.topbarRouters = routes.concat(index);
     },
     SET_SIDEBAR_ROUTERS: (state, routes) => {
-      console.log(routes);
       state.sidebarRouters = routes
     },
   },

src/views/bigscreen/index.vue

@@ -1,7 +1,7 @@
 <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=""></mapdiv>
+      <mapdiv ref="mapdiv" style=""  :mapType="maptypeBig"></mapdiv>
       <!-- <zhgl></zhgl> -->
       <!-- <introduction></introduction> -->
     </div>
@@ -46,7 +46,8 @@ export default {
             },
             staticCount:0,
             dynamicCount:2,
-            areaCount:0
+            areaCount:0,
+            maptypeBig:'1'
         };
     },
     components:{
@@ -74,7 +75,7 @@ export default {
                   this.$refs.mapdiv.addPoint('video.png');
          },
          getResource(){
-               getResource({date:'2022-03-12'}).then(response =>{
+               getResource().then(response =>{
                      console.log(response.data);
 
                      var trainArry = [];

src/views/bigscreen/introduction.vue

@@ -1,135 +1,6 @@
 <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>
 </template>
 

src/views/drone/index.vue

@@ -50,6 +50,7 @@
                </el-scrollbar>
             </div>
       </div>
+      
 
      <div style="position: absolute;right:0;top:0;width:100%;height:90%;padding-left:33rem;margin-top:5rem;z-index:1000;">
          <!-- <videodiv :cameracode="ccode" style="height:100%;width:100%"></videodiv> -->

src/views/electri/index.vue

@@ -0,0 +1,610 @@
+<template>
+<div style="width:100%;height:100%;position:relative">
+  <headerdiv ref="headerDiv" :currentindexP = currentindexNew ></headerdiv>
+  <div style="display: inline-flex;width:100%">
+  <div style="width:25%;height:100%;">
+       <div style="width:100%">
+              <div class='droneleftTree'>
+            <!-- <el-input
+                placeholder="输入关键字进行过滤"
+                v-model="filterText"
+                style="margin-top:1rem">
+            </el-input> -->
+             <div style="height:83vh;margin-top:2rem">
+                  <!-- <el-scrollbar style="height:110%;"> -->
+                        <el-tree
+                            :data="treeData"
+                            lazy
+                            :expand-on-click-node="false"
+                            node-key="id"
+                            :props="defaultProps"
+                            :default-expand-all= isExpand
+                            ref="tree"
+                            @node-click = 'treeChange'
+                            style="background-color:#04283C;color:#C5D0D4"
+                            >
+                        </el-tree>
+               <!-- </el-scrollbar> -->
+            </div>
+          </div>
+
+        </div>
+  </div>
+
+  <div style="width:50%;height:95vh">
+      <mapdiv ref="mapdiv" style=""></mapdiv>
+  </div>
+
+  <div style="width:25%;height:100%;">
+        <div style="width:100%;padding-left:1rem">
+        <div class="publicTitle" 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>
+               <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="4.5rem">
+                  <el-form-item label="时间" prop="time"  style="margin-top:0.1rem">
+              <el-date-picker
+                  v-model="dateRange"
+                  size="small"
+                  style="width: 24rem"
+                  value-format="yyyy-MM-dd"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                ></el-date-picker>
+                  </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-item label="区域" prop="areaName">
+                       <el-select v-model="queryParams.areaName" placeholder="请选择区域" clearable size="small" style="width:16rem">
+                                        <!-- <el-option
+                                          key="0"
+                                          label="全部"
+                                          value="0"
+                                        /> -->
+                                        <el-option
+                                          v-for="dict in dict.type.tl_xun_area"
+                                          :key="dict.value"
+                                          :label="dict.label"
+                                          :value="dict.label"
+                                        />
+                                      </el-select>
+                    </el-form-item>
+
+                         <el-form-item label="巡逻车" prop="imei" label-width="6rem">
+                       <el-select v-model="queryParams.imei" placeholder="请选择巡逻车" clearable size="small" style="width:16rem">
+                                        <!-- <el-option
+                                          key="0"
+                                          label="全部"
+                                          value="0"
+                                        /> -->
+                                        <el-option
+                                          v-for="obj in treeData"
+                                          :key="obj.imei"
+                                          :label="obj.deviceName"
+                                          :value="obj.imei"
+                                        />
+                                      </el-select>
+                    </el-form-item>
+              </el-form>
+
+        </div>
+
+        <div style='height:38rem'>
+               <el-table :data="carRecordList" stripe
+                class="my_table"
+                max-height=350
+                :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="imei" />
+                        <el-table-column label="时间" align="center" prop="gpsTime" />
+                        <el-table-column label="设备名称" align="center" prop="deviceName" />
+                        <el-table-column label="累计里程数（KM）" align="center" prop="mileage" />
+                        <el-table-column label="当天里程数（KM）" align="center" prop="dayMileage" />
+              </el-table>
+        </div>
+
+        <div class="publicTitle" style="margin-top:1rem">
+           <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:0.5rem">
+              <el-table :data="carList" stripe
+                class="my_table"
+                max-height=400
+                :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="areaName" />
+                        <el-table-column label="巡逻车总数" align="center" prop="totalCar" />
+                        <el-table-column label="使用中" align="center" prop="onlineCar" />
+              </el-table>
+          </div>
+        </div>
+  </div>
+ </div>
+
+    <div class="bottombg">
+      <div class="item item2" @click="changeMapTab(1)"><div class="num">{{staticCount}}</div><div>静态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">{{dynamicCount}}</div><div>动态资源</div></div>
+      <div class="item item1 " @click="changeMapTab(3)"><div class="num">{{areaCount}}</div><div>重点区域</div></div>
+      <!-- <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div> -->
+    </div>
+.
+    <div class="topbg">
+          <div style='display: flex;
+                      flex-direction: row;
+                      margin-left:3rem'>
+                    <div style="">
+                        <div><img style='width:2.2rem;height:2.2rem' src='../../assets/images/elertic/巡逻车.png'  /></div>
+                    </div>
+                    <div style='margin-left:1.5rem'>
+                          <div style="font-size: 1.6rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    color: #D6DEE7;">巡逻车总数</div>
+                          <div style="width: 134px;
+                                      height: 38px;
+                                      background: rgba(9,36,45,0.4000);
+                                      border: 1px solid #30FFE7;
+                                      margin-top:1rem">
+                          <div style="padding-top:0.1rem;
+                                      padding-left:0.8rem;
+                                      font-size: 2.4rem;
+                                      font-family: Myriad Pro;
+                                      font-weight: 400;
+                                      color: #44D5FF;">
+                                   {{carStaticCount.totalCar}}
+                          </div>
+                          </div>
+                    </div>
+          </div>
+
+           <div style='display: flex;
+                      flex-direction: row;
+                       margin-left:10rem'>
+                    <div style="">
+                        <div><img style='width:2.2rem;height:2.2rem' src='../../assets/images/elertic/卡口在线率.png'  /></div>
+                    </div>
+                    <div style='margin-left:1.5rem'>
+                          <div style="font-size: 1.6rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    color: #D6DEE7;">巡逻车在线率</div>
+                          <div style="width: 134px;
+                                      height: 38px;
+                                      background: rgba(9,36,45,0.4000);
+                                      border: 1px solid #30FFE7;
+                                      margin-top:1rem">
+                          <div style="padding-top:0.1rem;
+                                      padding-left:0.8rem;
+                                      font-size: 2.4rem;
+                                      font-family: Myriad Pro;
+                                      font-weight: 400;
+                                      color: #38FFC6;">
+                                    {{carStaticCount.onlinePercent}}
+                          </div>
+                          </div>
+                    </div>
+          </div>
+
+           <!-- <div style='display: flex;
+                      flex-direction: row;
+                      margin-left:10rem'>
+                    <div style="">
+                        <div><img style='width:2.2rem;height:2.2rem' src='../../assets/images/elertic/故障状态 (1).png'  /></div>
+                    </div>
+                    <div style='margin-left:1.5rem'>
+                          <div style="font-size: 1.6rem;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    color: #D6DEE7;">巡逻车故障</div>
+                          <div style="width: 134px;
+                                      height: 38px;
+                                      background: rgba(9,36,45,0.4000);
+                                      border: 1px solid #30FFE7;
+                                      margin-top:1rem">
+                          <div style="padding-top:0.1rem;
+                                      padding-left:0.8rem;
+                                      font-size: 2.4rem;
+                                      font-family: Myriad Pro;
+                                      font-weight: 400;
+                                      color: #44D5FF;">
+                                   {{}}
+                          </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 { queryAllList,queryCarStaticByArea,queryLocationRecord,getAllElectricDetail } from "@/api/qdtl/electri";
+
+import videodiv from "../../components/Videoplayer/index.vue"
+
+export default {
+    dicts: ['tl_area_type','tl_device_type','tl_xun_area'],
+    name: "big",
+    data() {
+        return {
+              isExpand:true,
+              userList:[],
+              areaList:[],
+              tdxjCount:111,
+              tdcsCount:152,
+              currentindexNew:12,
+              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:{},
+              staticCount:0,
+              dynamicCount:2,
+              areaCount:0,
+              menuNameNew:'设置监测',
+              lcData:{
+                   weeks:[],
+                   counts:[]   
+              },
+              treeData:[],
+              carStaticCount:{},
+              carList:[],
+              dateRange:'',
+              queryParams:{},
+              carRecordList:[],
+              defaultProps: {
+                children: 'children',
+                label: 'label'
+              },
+              carArryData:[],
+        };
+    },
+    components:{
+      mapdiv,
+      headerdiv,
+      videodiv,
+    },
+    mounted() {
+        console.log(111)
+        this.getResource();
+        this.getvideoList();
+        // this.getGovern();
+        this.queryAllList();
+        this.queryCarStaticByArea();
+        this.getAllElectricDetail();
+        this.getDateRange();
+        // this.queryLocationRecord()();
+    },
+    methods:{
+        getAllElectricDetail(){
+            getAllElectricDetail().then(response =>{
+                     this.carStaticCount.totalCar = response.data.totalCar
+                     this.carStaticCount.onlinePercent = response.data.onlinePercent
+                     var carArry = response.data.detail;
+                     for(var index in carArry){
+                        carArry[index].fence = carArry[index].lng +","+carArry[index].lat
+                     }
+                     this.carArryData = carArry
+                     this.$refs.mapdiv.addPoints(carArry,'police.png',0.6,'car');
+                     })
+             
+        },
+        queryLocationRecord(){
+             queryLocationRecord(this.queryParams).then(response =>{
+                     console.log(response);
+                     this.carRecordList = response.data
+;            })
+        },
+        queryCarStaticByArea(){
+            queryCarStaticByArea().then(response =>{
+                     this.carList = response.data
+;            })
+        },
+        queryAllList(){
+            queryAllList().then(response=>{
+                  console.log(response);
+                  for(var index in response.data){
+                                    var obj = response.data[index]
+                                    // obj.id = obj.indexCode;
+
+                                    obj.label = obj.deviceName;
+                                    obj.data = obj;
+                                    // console.log(obj);
+                                    this.treeData.push(obj);
+                    }
+              })
+               console.log(this.treeData);
+        },
+        tableRowClassName({ row, rowIndex }) {
+                if ((rowIndex + 1) % 2 === 0) {
+                    return "warning-row";
+                } else {
+                    return "success-row";
+                }
+        },
+        changeMapTab(index){
+            this.$refs.mapdiv.iconSelect = index
+        },
+      
+          getResource(){
+               getResource().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');
+                       this.areaCount += response.data.area.length
+                       this.staticCount += response.data.drone.length + stationLocation.length;
+                //        this.dynamicCount +=  response.data.deviceTrail.length
+                       this.dynamicCount +=  Object.getOwnPropertyNames(response.data.deviceTrail).length
+               })
+         },
+         getvideoList(){
+                  httpRequest(this.videoParams).then(data =>{
+                         var json = JSON.parse(data.data);
+                         this.staticCount += json.data.list.length
+                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
+                  });
+
+         },
+         treeChange(data, node){
+             var view = this.$refs.mapdiv.map.getView();
+             console.log(view.getCenter());
+             for(var index in this.carArryData){
+                    if(this.carArryData[index].deviceName == data.deviceName){
+                          console.log(this.carArryData[index].fence);
+                          // var lngArry = [];
+                          // lngArry.push();
+                          // lngArry.push();
+                          view.setCenter(this.carArryData[index].fence.split(','));
+                          this.$refs.mapdiv.clickObj = this.carArryData[index]
+                          this.$refs.mapdiv.isShowCar = true
+                          this.$refs.mapdiv.carStyle = 'left:95rem;top:35rem'
+                    }
+             }
+         },
+         handleQuery(){
+                console.log(this.queryParams);
+                // console.log(this.dateRange);
+                this.queryParams.startDate = this.dateRange[0]
+                this.queryParams.endDate = this.dateRange[1]
+                queryLocationRecord(this.queryParams).then(response =>{
+                     console.log(response);
+                     this.carRecordList = response.data
+                })             
+         },
+         resetQuery(){
+                  this.queryParams = [];
+         },
+         getDateRange(){
+                  var endDate = new Date().toLocaleDateString().split('/').map(item=>{if (item<10){return '0'+ item}else {return item}}).join('-')
+                  var startDaate = new Date(new Date().getTime()-3600*24*1000)
+                  var startDate = startDaate.toLocaleDateString().split('/').map(item=>{if (item<10){return '0'+ item}else {return item}}).join('-')
+                  this.dateRange = [];
+                  this.dateRange.push(startDate);
+                  this.dateRange.push(endDate);
+                  this.handleQuery();
+         },
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ .publicTitle{
+          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;
+       }
+.prcentClass{
+          background: url("~@/assets/images/goverce/prcent.png") no-repeat;
+          background-size: 100% 100%;
+          width:95%;
+          height:28rem;
+          padding-left:25rem
+}
+.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;
+}
+
+.isTop{
+        margin-top:1.5rem
+}
+
+.droneleftTree{
+          /* float:left; */
+          width:100%;
+          background-color:#04283C;
+          padding: 1rem;
+          padding-top:0 ;
+          min-height: 95vh;
+          z-index:1001;
+     }
+
+
+.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;
+
+  .item:hover{
+    cursor: pointer;
+  }
+
+  .item{
+    width: 33%;
+    text-align: center;
+    justify-content: center;
+    position: relative;
+    .num{
+      font-size:3rem;
+      color:#25f8bd;
+    }
+  }
+   .item1{
+    width: 33%;
+  }
+  .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;
+  }
+}
+
+.topbg{
+      position: absolute;
+      background-size: 100% 100%;
+      z-index: 1;
+      width: 50%;
+      height: 16.3rem;
+      top:8rem;
+      left: 25%;
+      background-color: rgba(0, 0, 0, 0.47);
+      // transform: translate(-50%,-0%);
+      display: flex;
+      flex-direction: row;
+      // align-items: center;
+      color:#fff;
+      font-size:1.6rem;
+      padding-top:2rem
+}
+</style>

src/views/governance/index.vue

@@ -104,7 +104,7 @@
            <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;margin-top:10rem"></div>
+         <div id='lcChart' style="width:45rem;height:25rem;margin-top:0.5rem"></div>
 
         <div class="publicTitle" style="margin-top:1.5rem">
            <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
@@ -170,7 +170,11 @@ export default {
               staticCount:0,
               dynamicCount:2,
               areaCount:0,
-              menuNameNew:'更多监测'
+              menuNameNew:'设置监测',
+              lcData:{
+                   weeks:[],
+                   counts:[]   
+              }
         };
     },
     components:{
@@ -183,7 +187,6 @@ export default {
         this.getResource();
         this.getvideoList();
         this.getGovern();
-        this.initlcchart();
     },
     methods:{
         tableRowClassName({ row, rowIndex }) {
@@ -211,10 +214,18 @@ export default {
                                this.videoChartDate.name.push(data.data.cameraslist[index].name);
                                this.videoChartDate.count.push(data.data.cameraslist[index].num);
                        }
+                       for(var index in data.data.locationLogDaysList){
+                               this.lcData.weeks.push(data.data.locationLogDaysList[index].week)
+                               this.lcData.counts.push(data.data.locationLogDaysList[index].distance)
+
+                       }
+                       console.log(this.lcData);
                         this.initchart();
+                         this.initlcchart();
                 })
         },
         initchart(){
+                // console.log(document.getElementById('videoeChart'));
                 var myChart = this.$echarts.init(document.getElementById('videoeChart'));
                 var option = {
                                 tooltip: {
@@ -283,99 +294,62 @@ export default {
                 console.log(111);
                 console.log(this.$echarts);
                 var myChart = this.$echarts.init(document.getElementById('lcChart'));
-                var option = {
-                                tooltip: {
+               var option = {
+                            color: [
+                              new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                                        offset: 0,
+                                                        color: '#00E3C0'
+                                                }, {
+                                                        offset: 1,
+                                                        color: '#0068DC'
+                                                }]), 
+                              ],
+                            tooltip: {
                                 trigger: 'axis',
                                 axisPointer: {
-                                type: 'cross',
-                                crossStyle: {
-                                        color: '#999'
-                                }
+                                type: 'shadow'
                                 }
-                                },
-
-                                legend: {
-                                data: ['Evaporation', 'Precipitation', 'Temperature']
-                                },
-                                xAxis: [
-                                {
-                                type: 'category',
-                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-                                axisPointer: {
-                                        type: 'shadow'
-                                },
-                                  axisLabel: {
+                            },
+                            grid: {
+                                left: '3%',
+                                right: '4%',
+                                bottom: '1%',
+                                top:'15%',
+                                containLabel: true
+                            },
+                            yAxis: {
+                                type: 'value',
+                                boundaryGap: [0, 0.01],
+                                axisLabel: {
                                                         show: true,
                                                         textStyle: {
                                                         color: '#ACB6B9'   //这里用参数代替了
                                                    }
-                                        },
-                                }
-                                ],
-                                yAxis: [
-                                {
-                                type: 'value',
-                                name: 'Precipitation',
-                                min: 0,
-                                max: 250,
-                                interval: 50,
-                               axisLabel: {
+                                            },
+                            },
+                            xAxis: {
+                                type: 'category',
+                                data: this.lcData.weeks,
+                                axisLabel: {
                                                         show: true,
                                                         textStyle: {
                                                         color: '#ACB6B9'   //这里用参数代替了
                                                    }
-                                        },
-                                },
-                                {
-                                type: 'value',
-                                name: 'Temperature',
-                                min: 0,
-                                max: 25,
-                                interval: 5,
-                                axisLabel: {
-                                        formatter: '{value} °C'
-                                }
-                                }
-                                ],
-                                series: [
+                                            },
+                            },
+                            series: [
                                 {
-                                name: 'Evaporation',
+                                name: '已处理预警',
                                 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//阴影宽度
-                                                }
-                                        },
+                                data: this.lcData.counts,
+                                barWidth:10
                                 },
-                                {
-                                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 =>{
+               getResource().then(response =>{
                      var trainArry = [];
                      var bridgeArry = [];
                      var railArry = [];

src/views/introduction/communication.vue

@@ -0,0 +1,39 @@
+<template>
+     <div style="heigh:100%;width:100%">
+            <div class='comClass'></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 scoped>
+.comClass{
+          background: url("~@/assets/images/bg/切图2.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:95vh;
+}
+</style>

src/views/introduction/index.vue

@@ -4,7 +4,9 @@
       <!-- <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> -->
       <!-- <mapdiv ref="mapdiv" style=""></mapdiv> -->
       <!-- <zhgl></zhgl> -->
-      <introduction></introduction>
+      <!-- <introduction></introduction> -->
+      <!-- <zone></zone> -->
+       <communication></communication>
     </div>
    <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
 
@@ -27,6 +29,8 @@
 import moment from "moment";
 import mapdiv from "../../components/map/index.vue"
 import introduction from './introduction.vue'
+import communication from './communication.vue'
+import zone from './zone.vue'
 import zhgl from "../../components/zhgl/index.vue"
 import headerdiv from '@/components/HeaderDiv/index.vue'
 import { httpRequest } from "@/api/data/http";
@@ -54,7 +58,9 @@ export default {
       zhgl,
       headerdiv,
       videodiv,
-      introduction
+      introduction,
+      communication,
+      zone
     },
     mounted() {
         // this.getTrain();

src/views/introduction/introduction.vue

@@ -1,157 +1,12 @@
 <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 class='comClass'>
+                    <div style="font-size: 3rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;
+                                        text-align:center;margin-top:10vh">乡镇现场护路专员</div>
+            </div>
      </div>
 </template>
 
@@ -181,43 +36,10 @@ export default {
 
 
 <style scoped>
- .divtitle{
-          background: url("~@/assets/images/title2@2x.png") no-repeat;
+.comClass{
+          background: url("~@/assets/images/bg/切图2.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
+          height:95vh;
 }
 </style>

src/views/introduction/zone.vue

@@ -0,0 +1,68 @@
+<template>
+     <div style="heigh:100%;width:100%">
+            <div class='comClass'>
+                  <el-row type="flex" justify="space-around">
+                      <el-col :span='3'>
+                           <div style="float:right;padding-top:30vh" @click="changeShow"><img src='~@/assets/images/bg/下一页2.png'></img></div>
+                      </el-col>
+                      <el-col :span='18'>
+                            <div style="font-size: 3rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;
+                                        text-align:center;margin-top:10vh">{{title}}</div>
+                             <div style="padding-left:2rem;padding-top:5vh" v-show='isShow'><img src='~@/assets/images/bg/1.png'></img></div>
+                             <div style="padding-left:5rem;padding-top:5vh" v-show='!isShow'><img src='~@/assets/images/bg/2.png'></img></div>
+                      </el-col>
+                      <el-col :span='3'>
+                           <div style="padding-top:30vh" @click="changeShow"><img src='~@/assets/images/bg/下一页.png'></img></div>
+                      </el-col>
+                  </el-row>
+            </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 {
+        title:'启东护路联防组织架构图',
+        isShow:true
+    };
+  },
+   components:{
+      mapdiv
+    },
+  created() {
+
+  },
+  methods: {
+        changeShow(){
+             if(this.isShow){
+                  this.isShow = false
+                  this.title = '铁路安全隐患处理流程示意图'
+             }else{
+                  this.isShow = true
+                  this.title = '启东护路联防组织架构图'
+             }
+        }
+  }
+};
+</script>
+
+
+<style scoped>
+.comClass{
+          background: url("~@/assets/images/bg/切图3.png") no-repeat;
+          /* display: flex;
+          flex-direction: row; */
+          background-size: 100% 100%;
+          width:100%;
+          height:95vh;         
+}
+</style>

src/views/login.vue

@@ -141,7 +141,7 @@ export default {
             Cookies.remove('rememberMe');
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/big" }).catch(()=>{});
+            this.$router.push("/big").catch(()=>{});
           }).catch(() => {
             this.loading = false;
             if (this.captchaOnOff) {

src/views/public/index.vue

@@ -446,7 +446,7 @@ export default {
 
         },
           getResource(){
-               getResource({date:'2022-03-12'}).then(response =>{
+               getResource().then(response =>{
                      var trainArry = [];
                      var bridgeArry = [];
                      var railArry = [];

src/views/qdtl/statics/index.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="app-container">
+          <div style="display: inline-flex;padding-left:1.7rem">
+                <div :class='currentindex==1?"selectClass":"unSelect"' style="width: 6.3rem;height: 3.2rem;" @click="getDate(1)">
+                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">本月</div>
+                </div>
+
+                <div :class='currentindex==2?"selectClass":"unSelect"'  style="width: 6.3rem;height: 3.2rem;margin-left:2rem"  @click="getDate(2)">
+                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">今天</div>
+                </div>
+
+                <div :class='currentindex==3?"selectClass":"unSelect"' style="width: 8.7rem;height: 3.2rem;margin-left:2rem"  @click="getDate(3)">
+                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">最近7天</div>
+                </div>
+
+                <div :class='currentindex==4?"selectClass":"unSelect"' style="width: 9.7rem;height: 3.2rem;margin-left:2rem"  @click="getDate(4)">
+                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">最近30天</div>
+                </div>
+
+                <div :class='currentindex==5?"selectClass":"unSelect"' style="width: 8.7rem;height: 3.2rem;margin-left:2rem"  @click="getDate(5)">
+                      <div style="line-height:3.2rem; font-size: 1.7rem;text-align:center;">最近1年</div>
+                </div>
+
+                 <div style="margin-left:5rem">
+                 <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="6.8rem">
+                        <el-form-item label="选择区域" prop="deviceCode">
+                              <el-select v-model="queryParams.deviceType" placeholder="请选择区域" clearable size="small" style="width:16rem">
+                                        <el-option
+                                          key="0"
+                                          label="全部"
+                                          value="0"
+                                        />
+                                        <el-option
+                                          v-for="dict in dict.type.tl_xun_area"
+                                          :key="dict.value"
+                                          :label="dict.label"
+                                          :value="dict.value"
+                                        />
+                                      </el-select>
+                        </el-form-item>
+
+                         <el-form-item label="时间" prop="deviceCode">
+                                  <el-date-picker
+                                        v-model="value1"
+                                        type="daterange"
+                                        format="yyyy 年 MM 月 dd 日"
+                                        value-format="yyyy-MM-dd"
+                                        range-separator="至"
+                                        start-placeholder="开始日期"
+                                        end-placeholder="结束日期">
+                                      </el-date-picker>
+                          </el-form-item>
+
+                            <el-form-item>
+                                <el-button style="border-radius: 0.6rem;" type="primary"  size="mini" @click="getMonthStatic">搜索</el-button>
+                                <el-button style="background-color:#7B7B7B;border-radius: 0.6rem;color:white" size="mini" @click="resetQuery">重置</el-button>
+                              </el-form-item>
+                 </el-form>
+                 </div>
+              
+          </div>
+
+          <div style="display:inline-flex">
+                  <div style="width:28.8rem;height:13.3rem;background: rgba(35, 255, 252, 0.2);padding-top:0.5rem;padding-left:2.5rem">
+                            <div style="font-size: 4rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;"> 
+                                                  {{monthStatic.planXunLocationTotal}}
+                                        </div>
+                            
+                            <div style="font-size: 1.8rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;
+                                        margin-top:1rem"> 
+                                                  本月计划巡更点总数
+                                        </div>
+                  </div>
+
+                    <div style="width:28.8rem;height:13.3rem;background:rgba(35, 154, 255, 0.2);padding-top:0.5rem;padding-left:2.5rem;margin-left:2rem">
+                            <div style="font-size: 4rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #239AFF;"> 
+                                                   {{monthStatic.actualXunTotal}}
+                                        </div>
+                            
+                            <div style="font-size: 1.8rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #239AFF;
+                                        margin-top:1rem"> 
+                                                  本月已巡更点总数
+                                        </div>
+                  </div>
+
+                    <div style="width:28.8rem;height:13.3rem;background:rgba(254, 213, 47, 0.2);padding-top:0.5rem;padding-left:2.5rem;margin-left:2rem">
+                            <div style="font-size: 4rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #FED52F;"> 
+                                                   {{monthStatic.unXunTotal}}
+                                        </div>
+                            
+                            <div style="font-size: 1.8rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #FED52F;
+                                        margin-top:1rem"> 
+                                                  本月漏巡更点总数
+                                        </div>
+                  </div>
+
+                    <div style="width:28.8rem;height:13.3rem;background: rgba(35, 255, 252, 0.2);padding-top:0.5rem;padding-left:2.5rem;margin-left:2rem">
+                            <div style="font-size: 4rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;"> 
+                                                   {{monthStatic.weiXun}}
+                                        </div>
+                            
+                            <div style="font-size: 1.8rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;
+                                        margin-top:1rem"> 
+                                                  本月未巡更点总数
+                                        </div>
+                  </div>
+
+                    <div style="width:28.8rem;height:13.3rem;background: rgba(35, 255, 252, 0.2);padding-top:0.5rem;padding-left:2.5rem;margin-left:2rem">
+                            <div style="font-size: 4rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;"> 
+                                                   {{monthStatic.unPercent}}
+                                        </div>
+                            
+                            <div style="font-size: 1.8rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;
+                                        margin-top:1rem"> 
+                                                  本月漏巡率
+                                        </div>
+                  </div>
+                      
+          </div>
+
+          <div class="divtitle" style="margin-top:2rem">
+             <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;width:100%">
+             <div style="width:15%;padding-left:2rem">
+                  <div class='watchStaticContent'style="margin-top:1.5rem;display:inline-flex;">
+                            <div><img src="@/assets/images/static/11.png" style="width:4.7rem;height:5.3rem;margin-top:1.2rem;margin-left:3rem"/></div>
+                            <div style="margin-top:1.2rem;margin-left:2rem">
+                                  <div style="font-size: 2.1rem;
+                                              font-family: SourceHanSansCN;
+                                              font-weight: bold;
+                                              color: #F0F6F5;"> {{monthStatic.unXunTotal}}</div>
+                                  <div style="font-size: 1.4rem;
+                                              font-family: Adobe Heiti Std;
+                                              font-weight: normal;
+                                              color: #B4C1BF;">漏巡</div>
+                            </div>
+                  </div>
+
+                  <div class='watchStaticContent' style="margin-top:1.5rem;display:inline-flex;">
+                        <div><img src="@/assets/images/static/22.png" style="width:4.7rem;height:5.3rem;margin-top:1.2rem;margin-left:3rem"/></div>
+                                <div style="margin-top:1.2rem;margin-left:2rem">
+                                      <div style="font-size: 2.1rem;
+                                                  font-family: SourceHanSansCN;
+                                                  font-weight: bold;
+                                                  color: #F0F6F5;"> {{monthStatic.actualXunTotal}}</div>
+                                      <div style="font-size: 1.4rem;
+                                                  font-family: Adobe Heiti Std;
+                                                  font-weight: normal;
+                                                  color: #B4C1BF;">已巡</div>
+                                </div>
+                  </div>
+
+                  <div class='watchStaticContent'style="margin-top:1.5rem;display:inline-flex;">
+                    <div><img src="@/assets/images/static/33.png" style="width:4.7rem;height:5.3rem;margin-top:1.2rem;margin-left:3rem"/></div>
+                            <div style="margin-top:1.2rem;margin-left:2rem">
+                                  <div style="font-size: 2.1rem;
+                                              font-family: SourceHanSansCN;
+                                              font-weight: bold;
+                                              color: #F0F6F5;"> {{monthStatic.planXunLocationTotal}}</div>
+                                  <div style="font-size: 1.4rem;
+                                              font-family: Adobe Heiti Std;
+                                              font-weight: normal;
+                                              color: #B4C1BF;">全部</div>
+                            </div>
+                  </div>
+             </div>
+
+              <div style="width:85%">
+                       <div id='watchChart' style="width:130rem;height:28rem"></div>
+             </div>
+             
+        </div>
+
+         <div class="divtitle" style="margin-top:2rem">
+             <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="margin-top:1rem">
+                  <el-table  :data="monthStatic.xunList"  stripe
+                                    class="my_table"
+                                    :row-class-name="tableRowClassName"
+                                    :max-height="tableHeight"
+                                    :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+                        <!-- <el-table-column type="selection" width="55" align="center" /> -->
+                                    <el-table-column type="index" width="55" align="center" label='序号'/>
+                                    <el-table-column label="统计日期" align="center" prop="staticDate" />
+                                    <el-table-column label="巡更点数量" align="center" prop="xunTotal" />
+                                    <el-table-column label="计划巡更点总数" align="center" prop="planLocationTotal" />
+                                    <el-table-column label="实际巡更数" align="center" prop="actualXunTotal" />
+                                    <el-table-column label="漏巡率" align="center" prop="unXunPercent" />
+                                    <el-table-column label="漏巡数" align="center" prop="unXunTotal" />
+                        </el-table>
+        </div>
+
+  </div>
+</template>
+
+<script>
+import mapdiv from "@/components/map/index.vue"
+import { getMonthStatic } from "@/api/qdtl/data";
+
+export default {
+  name: "Device",
+  dicts: ['tl_xun_area'],
+  data() {
+    return {
+      // 遮罩层
+       currentindex:1,
+       queryParams:{},
+       value1:'',
+       tableHeight:245,
+       monthStatic:{},
+       echartsData:{}
+    };
+  },
+  created() {
+      // this.getGdChart();
+  },
+   mounted() {
+    this.getGdChart();
+    this.getStatic();
+  },
+  components:{
+      mapdiv
+    },
+  methods: {
+       getStatic(){
+            var date = new Date();
+            var y = new Date().getFullYear(); //获取年份
+            var m = new Date().getMonth() + 1; //获取月份
+            var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+            m = m < 10 ? '0' + m : m; //月份补 0
+            d = d < 10 ? '0' + d : d; //日数补 0
+            // console.log(this.value1);
+            this.queryParams.startDate = [y,m,'01'].join("-")
+            this.queryParams.endDate = [y,m,d].join("-")
+            getMonthStatic(this.queryParams).then(response =>{
+                    console.log(response);
+                    this.monthStatic = response.data;
+                    this.getGdChart(response.data.xunList);
+            })
+      },
+      getMonthStatic(){
+            // console.log(this.value1);
+            this.queryParams.startDate = this.value1[0]
+            this.queryParams.endDate = this.value1[1]
+            getMonthStatic(this.queryParams).then(response =>{
+                    console.log(response);
+                    this.getMonthStatic = response.data;
+                    this.getGdChart(response.data.xunList);
+            })
+      },
+     tableRowClassName({ row, rowIndex }) {
+                if ((rowIndex + 1) % 2 === 0) {
+                    return "warning-row";
+                } else {
+                    return "success-row";
+                }
+        },  
+     getDate(index){
+         this.currentindex = index
+     },
+     handleQuery(){
+
+     },
+     resetQuery(){
+
+     },
+      getGdChart(data){
+              var datesArry = [];
+              var xunArry = [];
+              var unXunArry = [];
+              for(var index in data){
+                    datesArry.push(data[index].staticDate);
+                    xunArry.push(data[index].actualXunTotal);
+                    unXunArry.push(data[index].unXunTotal);
+              }
+              console.log(xunArry);
+               console.log(unXunArry);
+              var myChart = this.$echarts.init(document.getElementById('watchChart'));
+              var option = {
+                            color: [
+                              new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                                        offset: 0,
+                                                        color: '#00E3C0'
+                                                }, {
+                                                        offset: 1,
+                                                        color: '#0068DC'
+                                                }]), 
+                              new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                                        offset: 0,
+                                                        color: '#0068DC'
+                                                }, {
+                                                        offset: 1,
+                                                        color: '#00E3C0'
+                                                }])
+                              ],
+                            tooltip: {
+                                trigger: 'axis',
+                                axisPointer: {
+                                type: 'shadow'
+                                }
+                            },
+                            legend: {
+                                   x:'right',
+                                   textStyle:{
+                                            fontSize: 12,//字体大小
+                                            color: '"#fft'//字体颜色
+                                    },
+                            },
+                            grid: {
+                                left: '3%',
+                                right: '4%',
+                                bottom: '3%',
+                                containLabel: true
+                            },
+                            yAxis: {
+                                type: 'value',
+                                boundaryGap: [0, 0.01],
+                                axisLabel: {
+                                                        show: true,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                            },
+                            },
+                            xAxis: {
+                                type: 'category',
+                                data: datesArry,
+                                axisLabel: {
+                                                        show: true,
+                                                         interval:0,
+                                                         rotate:40,
+                                                        textStyle: {
+                                                        color: '#ACB6B9'   //这里用参数代替了
+                                                   }
+                                            },
+                            },
+                            series: [
+                                {
+                                name: '已巡',
+                                type: 'bar',
+                                data: xunArry,
+                                barWidth:10
+                                },
+                                {
+                                name: '漏巡',
+                                type: 'bar',
+                                data: unXunArry,
+                                barWidth:10
+                                }
+                            ]
+                            };
+                myChart.setOption(option);
+        },
+  }
+};
+</script>
+
+<style scoped>
+ .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
+          /* float: left; */
+       }
+
+  .selectClass{
+      background: #3DFFEA;
+      border-radius: 0.6rem;
+      color:#032738;
+  }
+  
+  .unSelect{
+      color:#C5D0D4;
+  }
+
+  /* .el-date-editor .el-range-separator{
+     color: #C5D0D4
+  } */
+
+ .el-date-editor .el-range-separator{
+        color:white
+    }
+
+  .watchStaticContent{
+    width: 19rem;
+    height: 7.8rem;
+    background:rgba(0, 190, 117, 0.06)
+  }
+
+</style>
+

src/views/qdtl/wrj/index.vue

@@ -221,7 +221,7 @@ export default {
     },
     // 表单重置
      getResource(){
-               getResource({date:'2022-03-12'}).then(response =>{
+               getResource().then(response =>{
                     
                })
          },

src/views/safe/index.vue

@@ -322,7 +322,7 @@ export default {
 
         },
           getResource(){
-               getResource({date:'2022-03-12'}).then(response =>{
+               getResource().then(response =>{
                      var trainArry = [];
                      var bridgeArry = [];
                      var railArry = [];