Browse Source

Merge branch 'develop-cd' of http://39.106.8.246:3003/web/wanda-bm-guide into develop

yx 4 years ago
parent
commit
584155e7cb

+ 7 - 0
src/App.vue

@@ -274,4 +274,11 @@ body {
 .gantt-chart .el-dialog__title{
   font-weight: 500;
 }
+.img-detail-container{
+    .el-dialog__body {
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-right: 0;
+    }
+}
 </style>

+ 21 - 5
src/main.ts

@@ -29,6 +29,7 @@ import Pui from 'meri-design'
 import 'meri-design/dist/index.css'
 import 'leaflet/dist/leaflet.css'
 
+import {login} from './api/login.js';
 Vue.use(Pui)
 
  
@@ -44,8 +45,23 @@ const username = 'lengqiang'
 //     }
 //     next()
 // })
-new Vue({
-    router,
-    store,
-    render: (h) => h(App),
-}).$mount('#app')
+
+login({}).then( (res ) => {  // 获取用户当前权限
+    if (res.result === 'success') {
+        store.commit('STOREACCESSLEVEL', res)
+        new Vue({
+            router,
+            store,
+            render: (h) => h(App),
+            mounted() {
+                // let level = store.state.accessLevel
+                let level = 0
+                if (level === 0) {
+                    router.push({path:'./home/homepage'})
+                } else {
+                    router.push({path:'./group'})
+                }
+            },
+        }).$mount('#app')
+    }
+})

+ 5 - 11
src/router/index.js

@@ -1,11 +1,8 @@
 import Vue from 'vue'
 import store from '@/store'
 import VueRouter from 'vue-router'
-import {
-    query
-} from '@/utils/query'
+import { query } from '@/utils/query'
 
-let level = 0
 Vue.use(VueRouter)
 const routes = [
     // 登陆页面
@@ -27,7 +24,8 @@ const routes = [
         name: 'home',
         component: () => import('../views/index'),
         redirect: '/home/homepage',
-        children: [{
+        children: [
+            {
                 path: 'homepage',
                 component: () => import('../views/homepage'),
             },
@@ -78,13 +76,10 @@ const router = new VueRouter({
 const ignore = ['/404', '/legendLibrary', '/legendRules']
 router.beforeEach(async (to, from, next) => {
     if (!ignore.includes(to.path)) {
+        console.log('vuex', store.state.accessLevel)
         const token = query().token
         const ssoToken = store.getters['ssoToken']
         if (ssoToken) {
-            // if (to.path === '/group' ||  to.path === '/home/homepage') {
-            //     next()
-            //     return
-            // } 
             store.commit('SETSSOTOKEN', ssoToken)
             await store.dispatch('getUserInfo', router)
             await store.dispatch('getFloors')
@@ -113,11 +108,10 @@ router.beforeEach(async (to, from, next) => {
                 signal = new Date().getTime(),
                 version = '1.0.0'
             window.location.href = `${ssoServer}/login?systemcode=${systemcode}&signal=${signal}&version=${version}`
-
         }
     } else {
         next()
         return
     }
 })
-export default router
+export default router

+ 79 - 46
src/utils/ganttChart/GanttChart.js

@@ -12,7 +12,7 @@ export function GanttChart(options) {
   this.viewWidth = options['viewWidth'] || 800;
   // 物理画布宽度 800
   this.cWidth = options['cWidth'] || 2400;
-  this.cHeight = options['cHeight'] || 600;
+  this.cHeight = options['cHeight'] || 1600;
   // 画布偏移位置
   this.startPos = 0;
   // 是否拖动中
@@ -30,7 +30,7 @@ export function GanttChart(options) {
   // 每天的间隔宽度
   this.dayStep = 40;
   // 分组标题高度
-  this.groupTitleHeight = 38;
+  this.groupTitleHeight = 18;
   // 任务矩形高度
   this.taskRowHeight = 16;
   // 每行任务的纵向间距
@@ -38,7 +38,7 @@ export function GanttChart(options) {
   // 总天数
   this.daysCount = options['daysCount'] || 60;
   // 任务图距离顶部高度
-  this.graphTopDis = 40
+  this.graphTopDis = 60
   
   // 每像素代表的小时数
   this.timePerPix = this.cWidth/this.daysCount/24/3600
@@ -53,6 +53,8 @@ export function GanttChart(options) {
   this.lastDragEv = null;
   // 当日刻度线
   this.todayTimeLineEl = null;
+  // 点击回调事件
+  this.callback = options.callback || null;
 }
 
 
@@ -86,6 +88,7 @@ GanttChart.prototype.processData = function() {
     let currentTopTask = this.tasks[i];
     let lastTopTask = null;
     currentTopTask.renderOptions = {};
+    // 设置StartY
     if (i != 0) {
       // 非0个,要补上前面的数据
       lastTopTask = this.tasks[i - 1];
@@ -94,9 +97,12 @@ GanttChart.prototype.processData = function() {
       // 第一个
       currentTopTask.renderOptions.startY = this.graphTopDis;
     }
-    if (currentTopTask.open) {
+    // 设置EndY
+    // 当有数据 且 打开时,
+    //     EndY = StartY + 标题上间距 + 标题 高度 + 任务个数 * (任务高度)
+    if (currentTopTask.dataList.length >0 && currentTopTask.open) {
       currentTopTask.renderOptions.endY =
-        currentTopTask.renderOptions.startY + this.rowSpanDis + this.groupTitleHeight + currentTopTask.dataList.length * this.taskRowHeight;
+        currentTopTask.renderOptions.startY  + this.groupTitleHeight + currentTopTask.dataList.length * 38;
     } else {
       currentTopTask.renderOptions.endY = currentTopTask.renderOptions.startY + this.groupTitleHeight;
     }
@@ -160,7 +166,6 @@ GanttChart.prototype.doDrag = function(sEvent, eEvent) {
   if (sEvent == null) {
     sEvent = this.startEvent;
   }
-  
   let sPos = sEvent.clientX;
   let cPos = eEvent.clientX;
   // 滚动距离
@@ -236,7 +241,7 @@ GanttChart.prototype.initCanvas = function() {
     width: this.cWidth,
     height: this.cHeight,
   });
-  this._canvas = document.getElementsByTagName('canvas')[0];
+  this._canvas = document.querySelector('#ganttContainer>canvas');
 }
 
 /**
@@ -264,6 +269,7 @@ GanttChart.prototype.drawTimeZone = function() {
   })
   // 绘制第二级
   let nowAtStr = moment().format('YYYY-MM-DD')
+  this.timeZoneLineEls = []
   for (let i = 0; i < this.daysCount; i++) {
     let tempAt = startSecond.add(1, 'days')
     let timeText = tempAt.format('DD');
@@ -296,6 +302,18 @@ GanttChart.prototype.drawTimeZone = function() {
           radius: [2, 4],
         },
       })
+
+      this.todayTimeLineEl = this.gCanvas.addShape('rect',{
+        attrs: {
+          x: this.todayTimeLineOffsetPos,
+          y: 40,
+          width: 4,
+          height: this.cHeight,
+          fill: '#CDE9FF',
+          radius: [2, 4],
+        }
+      })
+      // this.todayTimeLineEl.setZIndex(3)      
     }
     timeGroup.addShape('text', {
       attrs: {
@@ -307,17 +325,6 @@ GanttChart.prototype.drawTimeZone = function() {
         fill: '#8D9399',
       },
     });
-
-    timeGroup.addShape('rect', {
-      attrs: {
-        x: this.dayStep * i-10,
-        y: 20,
-        width: 1,
-        height: this.cHeight,
-        fill: '#deebeb',
-        radius: [2, 4],
-      },
-    });
   }
 }
 
@@ -376,6 +383,45 @@ GanttChart.prototype.isInView = function(task) {
 }
 
 /**
+ * 绘制完成之后的回调,用于某些工具缺陷的hack写法
+ */
+GanttChart.prototype.postDrawTasksCallBack = function(){
+  // 画当前线条 TODO,放前面不行
+  if(true){
+    let todayAt = new Date()
+    if(this.startAt < todayAt && this.endAt > todayAt){
+      this.todayTimeLineEl = this.gCanvas.addShape('rect',{
+        attrs: {
+          x: this.todayTimeLineOffsetPos,
+          y: 40,
+          width: 4,
+          height: this.cHeight,
+          fill: '#CDE9FF',
+          radius: [2, 4],
+        }
+      })
+      this.todayTimeLineEl.setZIndex(3)
+    }
+  }
+
+  if(true){
+    for (let i = 0; i < this.daysCount; i++) {
+      let lineEl = this.timeGroupEl.addShape('rect', {
+        attrs: {
+          x: this.dayStep * i-10,
+          y: 20,
+          width: 1,
+          height: this.cHeight,
+          fill: '#deebeb',
+          radius: [2, 4],
+        },
+      });
+      lineEl.setZIndex(200)    
+    }
+  }
+}
+
+/**
  * 分组绘制任务块
  *
  */
@@ -396,16 +442,17 @@ GanttChart.prototype.drawTasks = function() {
       topTask.gGroup = taskGroup;
 
       // 组名背景矩形
-      // let TopGroupRectEl = taskGroup.addShape('rect', {
-      //   attrs: {
-      //     x: 0,
-      //     y: topTask.renderOptions.startY,
-      //     width: this.cWidth,
-      //     height: this.taskRowHeight,
-      //     fill: '#a6ed53',
-      //     radius: [2, 4],
-      //   },
-      // });
+      let TopGroupRectEl = taskGroup.addShape('rect', {
+        attrs: {
+          x: 0,
+          y: topTask.renderOptions.startY,
+          width: this.cWidth,
+          height: this.taskRowHeight,
+          fill: '#F5F6F7',
+          radius: [2, 4],
+        },
+      });
+      TopGroupRectEl.setZIndex(-1)
       // 第二层循环,用于 区分具体多少任务,例如,维保-商管1/商管2...
       topTask.dataList.forEach((taskP, index) => {
         let taskPGroup = taskGroup.addGroup()
@@ -415,7 +462,7 @@ GanttChart.prototype.drawTasks = function() {
           let tempTaskContainerEl = taskPGroup.addShape('rect', {
             attrs: {
               x: 0,
-              y: topTask.renderOptions.startY + ((index+1)* (this.taskRowHeight + this.rowSpanDis))-5,
+              y: topTask.renderOptions.startY + ((index+2)* (this.taskRowHeight + this.rowSpanDis))-5,
               width: this.cWidth,
               height: this.taskRowHeight+10,
               fill: '#fff',
@@ -453,7 +500,7 @@ GanttChart.prototype.drawTasks = function() {
             let rectEl = taskPGroup.addShape('rect', {
               attrs: {
                 x: pos.x,
-                y: topTask.renderOptions.startY + (index* (this.taskRowHeight + this.rowSpanDis)),
+                y: topTask.renderOptions.startY + ((index + 1)* (this.taskRowHeight + this.rowSpanDis)),
                 width: pos.width,
                 height: this.taskRowHeight,
                 fill: this.statusColor(_taskItem),
@@ -461,7 +508,7 @@ GanttChart.prototype.drawTasks = function() {
                 radius: [2, 4],
               },
             });
-            rectEl.setZIndex(5)
+            rectEl.setZIndex(50)
             rectEl._pdata = _taskItem;
             _taskItem._rectEl = rectEl
             rectEl.on('mouseover', (ev) => {
@@ -486,21 +533,7 @@ GanttChart.prototype.drawTasks = function() {
     }
   });
 
-  // 画当前线条 TODO,放前面不行
-  let todayAt = new Date()
-  if(this.startAt < todayAt && this.endAt > todayAt){
-    this.todayTimeLineEl = this.gCanvas.addShape('rect',{
-      attrs: {
-        x: this.todayTimeLineOffsetPos,
-        y: 40,
-        width: 3,
-        height: this.cHeight,
-        fill: '#0091FF',
-        radius: [2, 4],
-      }
-    })
-    this.todayTimeLineEl.setZIndex(50)
-  }
+  this.postDrawTasksCallBack()
 }
 
 /**

+ 51 - 10
src/views/analysis/CoreDeviceReport.vue

@@ -99,15 +99,27 @@
           </el-pagination>
         </div>
       </el-dialog>
-      <el-dialog :title="detailTitle" :visible.sync="showDetail" width="1260px">
-        <div class="detail-container">
-          <div class="pictures-menu">
-            <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item">
-              <img :src="item.url" alt="">
+      <div class="img-detail-container">
+        <el-dialog :title="detailTitle" :visible.sync="showDetail" width="1260px">
+          <div class="detail-container">
+            <div class="pictures-menu">
+              <!-- <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item"> -->
+              <div class="item">
+                <!-- <img :src="item.url" alt=""> -->
+                <img src="../../assets/images/login_back.png" alt="">
+                <div class="name">图层名称1.jpg</div>
+              </div>
+              <div class="item">
+                <img src="../../assets/images/login_back.png" alt="">
+                <div class="name">图层名称1.jpg</div>
+              </div>
+            </div>
+            <div class="cur-img-container">
+              <img src="../../assets/images/login_back.png" alt="">
             </div>
           </div>
-        </div>
-      </el-dialog>
+        </el-dialog>
+      </div>
     </div>
   </div>
 </template>
@@ -371,7 +383,7 @@ export default {
     getDetailData(val) {
       let param = {
         file_type: 0, // val.file_type
-        file_type_id: 1144, // val.file_type_id
+        file_type_id: 2914, // val.file_type_id
         type: this.detailTitle === '图片预览'? 0 : 1
       }
 
@@ -386,7 +398,7 @@ export default {
               url: item.urlname
             })
           })
-          this.pictureList = newData;
+          // this.pictureList = newData;
         }
       })
     }
@@ -500,15 +512,44 @@ export default {
     }
     .detail-container{
       display: flex;
-      min-height: 600px
+      height: 600px
     }
     .pictures-menu{
       margin-right: 21px;
+      padding-top: 16px;
+      padding-bottom: 16px;
       width: 180px;
+      height: 100%;
+      overflow: auto;
       .item{
         >img{
           width: 180px;
+          border: 4px solid rgba(245,246,247,1);
+          border-radius: 4px;
+        }
+        .name{
+          font-size: 12px;
+          color: #1F2429;
+          line-height: 16px;
+          margin-top: 12px;
+          text-align: center;
         }
+        &:not(:last-of-type){
+          margin-bottom: 20px;
+        }
+      }
+    }
+    .cur-img-container{
+      padding: 20px;
+      flex: 1;
+      height: 100%;
+      background: #F5F6F7;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      >img{
+        max-width: 730px;
+        max-height: 530px;
       }
     }
   }

+ 264 - 152
src/views/analysis/GanttChart.vue

@@ -2,14 +2,14 @@
 <template>
   <div class="gantt-chart">
     <div class="condition-legend-bar">
-      <Select 
+      <Select
         class="system-select"
         width="217"
-        :isReadOnly="true" 
-        tipPlace="top" 
+        :isReadOnly="true"
+        tipPlace="top"
         caption="系统名称:"
-        v-model="systemId" 
-        :selectdata="systemList" 
+        v-model="systemId"
+        :selectdata="systemList"
         :placeholder="'请选择'"
         @change="getGanttChartData"
       />
@@ -18,7 +18,7 @@
           <div :style="{'background': item.backgroundColor, 'border-color': item.borderColor}"></div>
           <div>{{item.text}}</div>
         </div>
-        <div >
+        <div>
           <el-radio-group v-model="timeType">
             <el-radio style="line-height: 32px;margin-right: 16px;" label="month">月视图</el-radio>
             <el-radio style="line-height: 32px;" label="day">日视图</el-radio>
@@ -40,7 +40,7 @@
         <div class="dialog-container">
           <div class="row task-status">
             <div>
-              <Task class="icon"/>
+              <Task class="icon" />
               <div class="title">任务状态</div>
             </div>
             <div>进行中</div>
@@ -67,11 +67,11 @@
             <div>
               <div>
                 <div class="num">12张</div>
-                <div class="more">查看更多</div>
+                <div class="more" @click="() => showImgDetail = true">查看更多</div>
               </div>
               <div class="pictrue-container">
                 <div v-for="(item) in pictures" :key="'id_' + item.id">
-                  <img :src="item.imgSrc" alt="" />
+                  <img :src="item.imgSrc" alt />
                   <div class="info">{{item.title}}</div>
                 </div>
               </div>
@@ -88,7 +88,7 @@
               </div>
               <div class="pictrue-container">
                 <div v-for="(item) in reports" :key="'id_' + item.id">
-                  <img :src="item.imgSrc" alt="" />
+                  <img :src="item.imgSrc" alt />
                   <div class="info">{{item.title}}</div>
                 </div>
               </div>
@@ -99,62 +99,121 @@
               <Menu class="icon" />
               <div class="title">检测内容</div>
             </div>
-            <el-table :data="tableData">
-              <el-table-column property="time" label="设备简称"></el-table-column>
-              <el-table-column property="evenType" label="设备编号"></el-table-column>
-              <el-table-column property="objid" label="设备数"></el-table-column>
-              <el-table-column property="content" label="空间位置"></el-table-column>
+            <el-table :data="tableData" max-height="300">
+              <el-table-column property="sbjc" label="设备简称"></el-table-column>
+              <el-table-column property="sbjbm" label="设备编号"></el-table-column>
+              <el-table-column property="cnt" label="设备数"></el-table-column>
+              <el-table-column property="wzjc" width="300" label="空间位置"></el-table-column>
             </el-table>
           </div>
         </div>
       </el-dialog>
+      <div class="img-detail-container">
+        <el-dialog :title="'图片预览'" :visible.sync="showImgDetail" width="1260px">
+          <div class="detail-container">
+            <div class="pictures-menu">
+              <!-- <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item"> -->
+              <div class="item">
+                <!-- <img :src="item.url" alt=""> -->
+                <img src="../../assets/images/login_back.png" alt />
+                <div class="name">图层名称1.jpg</div>
+              </div>
+              <div class="item">
+                <img src="../../assets/images/login_back.png" alt />
+                <div class="name">图层名称1.jpg</div>
+              </div>
+            </div>
+            <div class="cur-img-container">
+              <img src="../../assets/images/login_back.png" alt />
+            </div>
+          </div>
+        </el-dialog>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { queryGanttChart, queryGanttDetail } from '../../api/ganttChart';
-import { querySystemList, queryDetailData } from '../../api/coreDeviceReport';
-import { Tree } from 'meri-design';
-import _ from 'lodash';
-import moment from 'moment';
+import { queryGanttChart, queryGanttDetail } from "../../api/ganttChart";
+import { querySystemList, queryDetailData } from "../../api/coreDeviceReport";
+import { Tree } from "meri-design";
+import _ from "lodash";
+import moment from "moment";
 // import '../../utils/ganttChart/g.js';
-import { GanttChart } from '../../utils/ganttChart/GanttChart.js';
-import { parse } from 'path';
-import Task from '../../assets/svg/task.svg';
-import PlanTime from '../../assets/svg/plan_time.svg';
-import RealTime from '../../assets/svg/real_time.svg';
-import Picture from '../../assets/svg/picture.svg';
-import Report from '../../assets/svg/report.svg';
-import Menu from '../../assets/svg/menu.svg';
+import { GanttChart } from "../../utils/ganttChart/GanttChart.js";
+import { parse } from "path";
+import Task from "../../assets/svg/task.svg";
+import PlanTime from "../../assets/svg/plan_time.svg";
+import RealTime from "../../assets/svg/real_time.svg";
+import Picture from "../../assets/svg/picture.svg";
+import Report from "../../assets/svg/report.svg";
+import Menu from "../../assets/svg/menu.svg";
 export default {
-  data () {
+  data() {
     return {
       systemList: [], // 系统列表
-      systemId: '', // 系统名称
+      systemId: "", // 系统名称
       legends: [
-        {id: 1, text: '按时完成', backgroundColor: '#E7E9EA', borderColor: '#C3C7CB'},
-        {id: 2, text: '未开始/进行中', backgroundColor: 'rgba(91, 143, 249, 0.2)', borderColor: '#5B8FF9'},
-        {id: 3, text: '逾期完成', backgroundColor: '#FBCE99', borderColor: '#F58300'},
-        {id: 4, text: '逾期未完成', backgroundColor: '#FBB8B5', borderColor: '#F54E45'},
+        {
+          id: 1,
+          text: "按时完成",
+          backgroundColor: "#E7E9EA",
+          borderColor: "#C3C7CB"
+        },
+        {
+          id: 2,
+          text: "未开始/进行中",
+          backgroundColor: "rgba(91, 143, 249, 0.2)",
+          borderColor: "#5B8FF9"
+        },
+        {
+          id: 3,
+          text: "逾期完成",
+          backgroundColor: "#FBCE99",
+          borderColor: "#F58300"
+        },
+        {
+          id: 4,
+          text: "逾期未完成",
+          backgroundColor: "#FBB8B5",
+          borderColor: "#F54E45"
+        }
       ], // 图例
-      timeType: 'month', // 甘特图时间类型
+      timeType: "month", // 甘特图时间类型
       treeData: [], // 树结构数据
-      
+
       // 弹窗相关
       showDetail: false, // 弹框显示状态
-      detailTitle: '', // 弹窗标题
+      detailTitle: "", // 弹窗标题
       pictures: [
-        {id: 1, imgSrc: require('../../assets/imgs/analysis/picture.png'), title: '2019年5月高压用具检测报告.jpg'},
-        {id: 2, imgSrc: require('../../assets/imgs/analysis/picture.png'), title: '2019年5月高压用具检测报告.jpg'},
+        {
+          id: 1,
+          imgSrc: require("../../assets/imgs/analysis/picture.png"),
+          title: "2019年5月高压用具检测报告.jpg"
+        },
+        {
+          id: 2,
+          imgSrc: require("../../assets/imgs/analysis/picture.png"),
+          title: "2019年5月高压用具检测报告.jpg"
+        }
       ], // 照片
       reports: [
-        {id: 1, imgSrc: require('../../assets/imgs/analysis/report_pdf.png'), title: '2019年5月高压用具检测报告.pdf'},
-        {id: 2, imgSrc: require('../../assets/imgs/analysis/report_word.png'), title: '2019年5月高压用具检测报告.docx'},
+        {
+          id: 1,
+          imgSrc: require("../../assets/imgs/analysis/report_pdf.png"),
+          title: "2019年5月高压用具检测报告.pdf"
+        },
+        {
+          id: 2,
+          imgSrc: require("../../assets/imgs/analysis/report_word.png"),
+          title: "2019年5月高压用具检测报告.docx"
+        }
       ], // 报告
       ganttDetail: {}, // 甘特图明细
       tableData: [], // 表数据
-    }
+
+      showImgDetail: false // 查看更多图片弹框显示状态
+    };
   },
 
   components: {
@@ -177,16 +236,16 @@ export default {
      * 获取系统列表数据
      */
     getSystemList() {
-      querySystemList().then((res) => {
-        if (res.result === 'success') {
+      querySystemList().then(res => {
+        if (res.result === "success") {
           let data = res.data;
           let newData = [];
-          _.forEach(data, (item) => {
+          _.forEach(data, item => {
             newData.push({
               id: item.code,
               name: item.name
-            })
-          })
+            });
+          });
           this.systemList = newData;
           const { query } = this.$route;
           if (!_.isEmpty(query) && query.smsxt) {
@@ -196,7 +255,7 @@ export default {
           }
           this.getGanttChartData();
         }
-      })
+      });
     },
     /**
      * 处理请求数据的时间
@@ -204,9 +263,9 @@ export default {
     disQueryTime() {
       let startTime, endTime;
       let curTime = new Date(),
-          curYear = curTime.getFullYear(),
-          curMonth = curTime.getMonth() + 1;
-      if (this.timeType === 'month') {
+        curYear = curTime.getFullYear(),
+        curMonth = curTime.getMonth() + 1;
+      if (this.timeType === "month") {
         startTime = `${curYear}0101000000`;
         endTime = `${curYear + 1}0101000000`;
       } else {
@@ -228,82 +287,87 @@ export default {
         smsxt: this.systemId,
         plazaId: 1000423,
         startDate: 20000101000000, // time[0]
-        endDate: 20200708000000, // time[1]
-      }
-      queryGanttChart('/data/base/queryGanttChart', param).then((res) => {
+        endDate: 20200708000000 // time[1]
+      };
+      queryGanttChart("/data/base/queryGanttChart", param).then(res => {
         const { dsfList, wbList, zwList, result } = res;
-          console.log('res', res)
-        if (result === 'success') {
+        console.log("res", res);
+        if (result === "success") {
           let newData = [],
-              data = [wbList, zwList, dsfList],
-              name = ['维保', '专维', '第三方检测'];
+            data = [wbList, zwList, dsfList],
+            name = ["维保", "专维", "第三方检测"];
           _.forEach(data, (item, index) => {
             newData.push({
+              index: index,
               id: index + 1,
               name: name[index],
               open: true,
               // children: name[index] === '专维'?[] : this.disGanttData(dsfList)
               children: this.disGanttData(data[index])
-            })
-          })
-          
+            });
+          });
           this.treeData = newData;
-          
-          let taskData = _.map(_.cloneDeep(newData), (item) => {
+
+          let taskData = _.map(_.cloneDeep(newData), item => {
             return {
               id: item.id,
               type: item.name,
               open: item.open,
-              dataList: _.map(item.children, (_item) => {
+              dataList: _.map(item.children, _item => {
                 return {
                   id: _item.id,
                   title: _item.name,
                   tasks: _item.originData
-                }
+                };
               })
-            }
-          })
-          console.log('taskData', taskData)
+            };
+          });
+          console.log("taskData", taskData);
+          if (window.gc) {
+            gc.gCanvas.destroy();
+          }
           let width = this.$refs.chartContainer.offsetWidth;
           window.gc = new GanttChart({
-            chartParentContainer: 'chartContainer',
-            chartContainer: 'ganttContainer',
+            chartParentContainer: "chartContainer",
+            chartContainer: "ganttContainer",
             viewWidth: width,
-            cWidth: 3*width,
+            cWidth: 3 * width,
             tasks: taskData,
-            daysCount: parseInt(3*width/40),
+            daysCount: parseInt((3 * width) / 40),
             callback: this.showDialog
           });
-          gc.main()
+          gc.main();
         }
-      })
+      });
     },
     /**
      * 处理甘特图数据
      */
     disGanttData(arr) {
       let data = [];
-      _.forEach(arr, (item) => {
+      _.forEach(arr, item => {
         data.push({
           id: item.id,
           name: item.name,
-          checked: 'uncheck',
-          originData: _.map(item.data, (_item) => {
-            _item.startDate = moment.unix((new Date().getTime() - 1000*60*60*24*7)/1000).format('YYYY-MM-DD HH:mm:ss');
-            _item.endDate = moment.unix(new Date().getTime()/1000).format('YYYY-MM-DD HH:mm:ss');
+          checked: "uncheck",
+          originData: _.map(item.data, _item => {
+            // _item.startDate = moment.unix((new Date().getTime() - 1000*60*60*24*7)/1000).format('YYYY-MM-DD HH:mm:ss');
+            _item.startDate = moment.unix(_item.startDate / 1000).format("YYYY-MM-DD HH:mm:ss");
+            // _item.endDate = moment.unix(new Date().getTime()/1000).format('YYYY-MM-DD HH:mm:ss');
+            _item.endDate = moment.unix(_item.endDate / 1000).format("YYYY-MM-DD HH:mm:ss");
             _item.description = _item.parentname;
-            return _item
+            return _item;
           })
-        })
-      })
-      return data
+        });
+      });
+      return data;
     },
     /**
      * 展开收起节点
      */
-    toggleNode(status) {
-      console.log('status', status)
-
+    toggleNode(status, item) {
+      console.log("status", status, item);
+      window.gc.toggle(item.index);
     },
     /**
      * 显示弹窗
@@ -323,28 +387,35 @@ export default {
         plazaId: 1000423,
         type: 2,
         id: 1078467
-      }
-      queryGanttDetail('/data/base/queryGanttChartDetails', param).then((res) => {
+      };
+      queryGanttDetail("/data/base/queryGanttChartDetails", param).then(res => {
         const { result, data } = res;
-        if (result === 'success') {
-          const { status, planStartDate, planEndDate, realStartDate, realEndDate } = data;
+        if (result === "success") {
+          const {
+            status,
+            planStartDate,
+            planEndDate,
+            realStartDate,
+            realEndDate
+          } = data;
           let newData = {
             status,
-            color: '',
+            color: "",
             planTime: this.dealDetailTime(planStartDate, planEndDate),
             realTime: this.dealDetailTime(realStartDate, realEndDate)
-          }
+          };
           this.ganttDetail = newData;
+          this.tableData = data.assetList;
         }
-      })
+      });
     },
     /**
      * 处理时间
      */
     dealDetailTime(startTime, endTime) {
-      let start = moment.unix(startTime / 1000).format('YYYY.MM.DD HH:mm:ss'),
-          end = moment.unix(endTime / 1000).format('YYYY.MM.DD HH:mm:ss');
-      return `${start}-${end}`
+      let start = moment.unix(startTime / 1000).format("YYYY.MM.DD HH:mm:ss"),
+        end = moment.unix(endTime / 1000).format("YYYY.MM.DD HH:mm:ss");
+      return `${start}-${end}`;
     },
     /**
      * 获取甘特图的图片/报告详情
@@ -354,18 +425,17 @@ export default {
         file_type: 1,
         file_type_id: 1985,
         type: type
-      }
-      queryDetailData('/data/base/queryFileDetails', param).then((res) => {
-        console.log('photo', res)
-
-      })
+      };
+      queryDetailData("/data/base/queryFileDetails", param).then(res => {
+        console.log("photo", res);
+      });
     }
   }
-}
+};
 </script>
 
 <style lang='less' scoped>
-.gantt-chart{
+.gantt-chart {
   padding-left: 16px;
   padding-right: 16px;
   padding-top: 12px;
@@ -373,23 +443,23 @@ export default {
   width: 100%;
   height: 100%;
   background: #fff;
-  .condition-legend-bar{
+  .condition-legend-bar {
     margin-bottom: 12px;
     display: flex;
     justify-content: space-between;
   }
-  .legend-container{
+  .legend-container {
     display: flex;
-    .item-legend{
+    .item-legend {
       padding-left: 18px;
       position: relative;
       font-size: 14px;
-      color: #646C73;
+      color: #646c73;
       line-height: 32px;
-      &:not(:nth-of-type(4)){
+      &:not(:nth-of-type(4)) {
         margin-right: 20px;
       }
-      >div:first-child{
+      > div:first-child {
         position: absolute;
         left: 0;
         top: calc(50% - 6px);
@@ -397,131 +467,173 @@ export default {
         height: 12px;
         border: 1px solid;
       }
-      &:nth-of-type(4){
+      &:nth-of-type(4) {
         margin-right: 32px;
       }
     }
   }
-  .main-gantt-container{
+  .main-gantt-container {
     width: 100%;
     height: calc(100% - 44px);
-    background: #F2F5F7;
-    border:1px solid rgba(239,240,241,1);
-    border-radius:4px;
+    background: #f2f5f7;
+    border: 1px solid rgba(239, 240, 241, 1);
+    border-radius: 4px;
     display: flex;
-    .task-title{
+    .task-title {
       width: 404px;
       height: 100%;
-      border-right: 1px solid #EFF0F1;
-      .title{
+      border-right: 1px solid #eff0f1;
+      .title {
         padding-left: 32px;
         padding-top: 15px;
         padding-bottom: 15px;
         font-size: 14px;
-        color: #646C73;
+        color: #646c73;
         line-height: 19px;
-        border-bottom: 1px solid #EFF0F1;
+        border-bottom: 1px solid #eff0f1;
       }
-      >div:nth-of-type(2){
+      > div:nth-of-type(2) {
         max-height: calc(100% - 50px);
         overflow: auto;
       }
     }
-    .chart-container{
+    .chart-container {
       flex: 1;
       overflow: hidden;
       background: #fff;
     }
   }
-  .dialog-container{
+  .dialog-container {
     max-height: 580px;
-    overflow: auto ;
-    .row{
+    overflow: auto;
+    .row {
       display: flex;
-      >div:first-child{
+      > div:first-child {
         margin-right: 24px;
         display: flex;
         align-items: center;
       }
-      &:not(:last-of-type){
+      &:not(:last-of-type) {
         margin-bottom: 14px;
       }
-      .info{
+      .info {
         font-size: 14px;
-        color: #1F2429;
+        color: #1f2429;
         line-height: 22px;
       }
     }
-    .icon{
+    .icon {
       margin-right: 6px;
       width: 16px;
     }
-    .title{
+    .title {
       width: 84px;
       font-size: 14px;
-      color: #646C73;
+      color: #646c73;
       line-height: 22px;
       font-weight: 400;
     }
-    .task-status>div:nth-of-type(2){
+    .task-status > div:nth-of-type(2) {
       width: 58px;
       height: 24px;
-      background: rgba(91,143,249,0.2);
+      background: rgba(91, 143, 249, 0.2);
       border-radius: 2px;
-      color: #5B8FF9;
+      color: #5b8ff9;
       line-height: 24px;
       text-align: center;
     }
-    .picture{
-      margin-bottom: 19px!important;
-      >div:first-child{
+    .picture {
+      margin-bottom: 19px !important;
+      > div:first-child {
         align-items: baseline;
       }
-      >div:nth-of-type(2){
+      > div:nth-of-type(2) {
         flex: 1;
       }
-      >div:nth-of-type(2)>div:first-child{
+      > div:nth-of-type(2) > div:first-child {
         margin-bottom: 12px;
         display: flex;
       }
       .num,
-      .more{
+      .more {
         font-size: 14px;
         line-height: 22px;
         font-weight: 400;
       }
-      .num{
+      .num {
         margin-right: 22px;
-        color: #1F2429;
+        color: #1f2429;
       }
-      .more{
-        color: #025BAA;
+      .more {
+        color: #025baa;
         cursor: pointer;
       }
     }
-    .pictrue-container{
-      >div{
+    .pictrue-container {
+      > div {
         padding: 10px 16px;
         width: 100%;
-        border-radius:4px;
-        border:1px solid rgba(233,233,233,1);
+        border-radius: 4px;
+        border: 1px solid rgba(233, 233, 233, 1);
         display: flex;
         align-items: center;
-        >img{
+        > img {
           width: 24px;
           margin-right: 15px;
         }
       }
-      >div:not(:last-child){
+      > div:not(:last-child) {
         margin-bottom: 8px;
       }
     }
-    .test-content{
+    .test-content {
       display: block;
-      >div:first-child{
+      > div:first-child {
         margin-bottom: 13px;
       }
     }
   }
+  .detail-container {
+    display: flex;
+    height: 600px;
+  }
+  .pictures-menu {
+    margin-right: 21px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    width: 180px;
+    height: 100%;
+    overflow: auto;
+    .item {
+      > img {
+        width: 180px;
+        border: 4px solid rgba(245, 246, 247, 1);
+        border-radius: 4px;
+      }
+      .name {
+        font-size: 12px;
+        color: #1f2429;
+        line-height: 16px;
+        margin-top: 12px;
+        text-align: center;
+      }
+      &:not(:last-of-type) {
+        margin-bottom: 20px;
+      }
+    }
+  }
+  .cur-img-container {
+    padding: 20px;
+    flex: 1;
+    height: 100%;
+    background: #f5f6f7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    > img {
+      max-width: 730px;
+      max-height: 530px;
+    }
+  }
 }
 </style>

+ 0 - 13
src/views/first/index.vue

@@ -1,13 +0,0 @@
-<template>
-    <div class='first-demo'>首页</div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style>
-.first-demo {
-    background: rgba(242, 245, 247);
-}
-</style>

+ 8 - 8
src/views/homepage/index.vue

@@ -4,7 +4,7 @@
             <div class='cards-item' v-for='(item , index) in cardsList' :key='index' :style='itemStyle(item)'>
                 <h4>{{item.smsxtname}}</h4>
                 <div class='equipment-list' v-if='item.assetTypeList'>
-                    <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='equip in item.assetTypeList'>
+                    <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.assetTypeList' :key="index">
                         <div class='equip-name'>
                             <h5>{{equip.category_name}}</h5>
                             <div class='exception-number' v-if='equip.is_exception_num'>{{equip.is_exception_num}}</div>
@@ -127,25 +127,25 @@ export default {
         navToIntroduce () {
             this.$router.push({path:"./analysis", query:{module:'specification'}})
         },
-        itemStyle(option) {
+        itemStyle (option) {
             let num = 0
             if (option.assetTypeList) {
-                option.assetTypeList.forEach(item => {
-                    if (typeof item.is_exception_num === 'number') {
-                        num += item.is_exception_num
+                option.assetTypeList.forEach(item=>{
+                    if (typeof item.is_exception_num === "number") {
+                        num +=  item.is_exception_num
                     }
                 })
             }
             if (option.rptGlsmsStatisticsList) {
                 option.rptGlsmsStatisticsList.forEach(option => {
-                    if (typeof option.unfinished === 'number') {
-                        num += option.unfinished
+                    if (typeof option.unfinished === "number") {
+                        num +=  option.unfinished
                     }
                 })
             }
             if (num > 0) {
                 return {
-                    borderLeft: '3px solid #EF6B66'
+                    borderLeft:"3px solid #EF6B66"
                 }
             }
         },

+ 83 - 97
src/views/statistics/index.vue

@@ -92,9 +92,9 @@
             </section>
         </section>
         <section class="ratio-list">
-            <section class="block" v-for="(item , index) in maintainList" :key="index">
+            <section class="block" :style="panelStyle(item)" v-for="(item , index) in maintainList" :key="index">
                 <h4 class="section-title" @click="toggerPanel(item)">{{item.title}}</h4>
-                <div class="list" :style="panelStyle(item)">
+                <div class="list" >
                     <ul>
                         <li v-for="(option , index) in item.data" :key="index">
                             <div class="ratio">
@@ -118,14 +118,14 @@
 </template>
 
 <script>
-let maps = null 
+let myMaps = null 
 import {login} from "@/api/login"
 import {getPlazaInfoCount , querySystemCard , getCardList , queryEventStatus} from "@/api/homePage"
 import { formatTime } from '@/utils/format.js'
 import { mapGetters } from 'vuex'
 import ChinaGeoJson from "../../assets/CHN.geo2.json";
 import {sortBy} from "lodash"
-import OtherJson from "../../assets/regionData/other.json"
+// import OtherJson from "../../assets/regionData/other.json"
 import moment from 'moment'
 import L from "leaflet";
 import "leaflet-contextmenu";
@@ -145,20 +145,6 @@ export default {
                 "东南":"dongnan",
                 "其他":"Other"
             },
-            zoneGroup:{
-                "dongbei":["heilongjiang","liaoning","jilin"],
-                "xibei":["neimenggu","ningxia","shanxi1","xinjiang"],
-                "huabei":["shandong","hebei","beijing","tianjin"],
-                "huazhong":["shanxi2","henan","hubei"],
-                "huadong":["jiangsu","shanghai"],
-                "zhongnan":["hunan","anhui","jiangxi"],
-                "huanan":["guangdong","guangxi"],
-                "dongnan":["fujian","zhejiang"],
-                "xinan":["guizhou","sichuan","yunnan","chongqing"]
-            },
-            zoneCity:{
-                "shandong":["青岛区域","济南区域"]
-            },
             provinceCities:{
                 "青岛区域": {"province":"shandong", center: [36.06667 , 120.33333], zoom:8},
                 "北京区域": {"province":"beijing", center: [39.604882122321174,  116.43660987308282], zoom:8},
@@ -192,39 +178,6 @@ export default {
                 "昆明区域": {"province":"yunnan", center: [25.903703303407667,  105.10972266685498], zoom:8},
                 "重庆区域": {"province":"chongqing", center: [29.35, 106.33], zoom:8},
             },
-
-            provincesCenter:{
-                "anhui":[31.852559691577845, 117.2253589137454],
-                "beijing": [40.186106951230485,116.42285651967009],
-                "chongqing": [30.060254204354784, 107.89013862196842],
-                "fujian": [26.071368377569776, 118.00455426638014],
-                "gansu":[38.00325279557638, 100.5012462408473],
-                "guangdong":[23.334243521962527, 113.43297176882082],
-                "guangxi":[23.83265626692407, 108.79223788629494],
-                "guizhou":[26.824014276407205, 106.87707047290361],
-                "hebei":  [39.60459587653637, 116.15817616286789],
-                "heilongjiang":[48.03564457240887, 127.69009579234847],
-                "henan": [33.902894471142176, 113.61599693888945],
-                "hubei": [30.988423598416457, 112.27635740895998],
-                "hunan":[27.633668515110255, 111.70882955621366],
-                "jiangsu": [32.981911362532585, 119.48201035757698],
-                "jiangxi":[27.637831291898365, 115.73252266448846],
-                "jilin":[43.703126756480735, 126.15512329582789],
-                "liaoning":[41.30041310409345, 122.6094238905765],
-                "neimenggu":[44.47324785058833, 114.30352505865382],
-                "ningxia":[37.29635258864683, 106.17634546083286],
-                "qinghai":[35.7281048004562, 96.0459309719495],
-                "shandong":[36.374647201891335, 118.18901718013844],
-                "shanghai":[31.07710542026598, 121.44651073619633],
-                "shanxi1":[35.263055624551846, 108.88970748546511],
-                "shanxi2":"",
-                "sichuan":[30.67066959682666, 102.69531108397375],
-                "tianjin":[39.29260116656163, 117.35013172238374],
-                "xinjiang":[41.37183707717329, 85.29450850581013],
-                "xizang":[31.56242864291341, 88.39191208626079],
-                "yunnan":[25.004865694004916, 101.4821386658875],
-                "zhejiang": [29.180481383933902, 120.11087647324501],
-            },
             zoneCenter:{ 
                 "dongbei":[43.161614, 124.396818],    // 取自 东北运营中心 长春区域 四平万达广场
                 "xibei":[37.999781, 106.197518],    // 西北  银川区域 吴忠万达广场     zoom 5
@@ -237,12 +190,12 @@ export default {
                 "xinan":[ 28.749998, 104.648788]   // 西南 成都 宜宾万达广场
             },
             legendList:[
-                {color: "#FDE3E2", num:'≥200'},
-                {color: "#FEE9D2", num:'100-200'},
-                {color: "#FFF6EB", num:'50-99'},
-                {color: "#CCE9FF", num:'10-49'},
-                {color: "#E1F2FF", num:'1-9'},
-                {color: "#E1F2FF", num:'0'},
+                {color: "#F54E45", num:'≥200'},
+                {color: "#F58300", num:'100-200'},
+                {color: "#FFBA6B", num:'50-99'},
+                {color: "#0091FF", num:'10-49'},
+                {color: "#82C7FC", num:'1-9'},
+                {color: "#EEEEEE", num:'0'},
             ],
             plazaInfoCount:{},
             systemList:[],
@@ -281,7 +234,7 @@ export default {
         this.getFrameworkTreeData()
         this.getSystemList()
         this.queryPlazaInfoCount(1002347,0)
-        this.getEventStatusData()
+        
     },
     methods: {
  
@@ -326,6 +279,8 @@ export default {
         },
          // 获取 区域/中心/项目
         selectProjectItem (ids, data) {
+            this.currentLevel = data.level
+            this.getEventStatusData(this.currentLevel)
             this.createNavpathByData(data)
             this.currentZone = data
             let JSONName  = data.cname
@@ -392,6 +347,7 @@ export default {
                     this.currentZone = data
                     this.currentLevel = res.treeData[0].level // 初始化的时候判断是哪一级    //1集团 2中心 3区域 0广场
                     this.regulateDistrictData =  [data]
+                    this.getEventStatusData(this.currentLevel)
                     this.initMap()
                 }
                 function recursionData (data, parent) {
@@ -428,11 +384,11 @@ export default {
         panelStyle (item) {
             // expand 0 初始状态  1 展开状态 2 隐藏状态
             if (item.expand === 0) {
-                return {height:'22rem'}
+                return {height: `calc((100% - 2rem) / 3)`}
             } else if (item.expand === 1) {
-                return {height:'63rem'}
+                return {height:'calc(100% - 11.2rem)'}
             } else {
-                return {height:'0', margin:0}
+                return {height:'4.6rem'}
             }
         },
         /**
@@ -495,7 +451,6 @@ export default {
         /**根据选择的系统重新渲染地图
          * param sysId:系统Id 
         */
-   
         formatter(str, arrv) {
             if (str && arrv) {
                 const Objs = arrv.find(e => e && e.plazaid == str)
@@ -534,23 +489,21 @@ export default {
         /**
          * 获取事项状态统计数据
          */
-        getEventStatusData () {
+        getEventStatusData (level) {
             let params = {
                 getParams: {
-                    "level":1,
+                    "level": level,
                     "ccode":"0000000000",
                 }
             }
             queryEventStatus(params).then(res => {
                 if (res.result === "success") {
                     let arr =[]
-                    
                     let data = res.data
                     for(let key in data) {
                         let obj = {}
                         let sortData = data[key]
                         if (data.hasOwnProperty(key)) {
-                            
                             // 维保,第三方检测排名按照即将到期任务数量从多到少排序,多的靠前。专维按照 逾期未完成 + 即将到期任务数据排序,多的靠前
                              // due_num 即将到期    unfinished 逾期未完成
                             if (key == "0") {
@@ -582,21 +535,37 @@ export default {
           //初始化地图
         initMap() {
             let that = this;
-            maps = L.map("map", {        
+            myMaps = L.map("map", {        
                 center: new L.LatLng(38, 103),
                 zoom: 4,
+                // maxZoom:4,
+                // minZoom:4,
                 crs: L.CRS.EPSG3857,
-                minZoom: 3,
-                maxZoom: 14,
-                zoomControl: false,
+                zoomControl:false,
+                boxZoom: false,
                 attributionControl: false,
                 contextmenu: true,
                 contextmenuWidth: 140,
+                dragging:false,
             })
-            maps.on('click', (ev)=>{
-            })
-            maps.on('zoomend', (ev)=>{
-            })
+            let el = myMaps.getContainer()
+            
+         
+            el.addEventListener('DOMMouseScroll', scrollFunc)
+            el.addEventListener('wheel', scrollFunc)
+         
+            function scrollFunc(evt) {
+                evt = evt || window.event;
+                if(evt.preventDefault) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                } else{
+                    evt.cancelBubble=true;
+                    evt.returnValue = false;
+                }
+                return false;
+            }
+          
             let JsonData = require("../../assets/geoData/china.json")
             let layer = L.geoJSON(JsonData.features, {
                 style:function(){
@@ -606,7 +575,7 @@ export default {
                         'fillColor':'#DEECFF' 
                     }
                 }
-            }).addTo(maps);
+            }).addTo(myMaps);
             if(this.currentLevel === 1) {   //1集团 3区域 0广场
                 this.pantGroupMap(this.currentDistrictData[0], this.currentSysId)
             } else if (this.currentLevel === 2) {  // 2中心 
@@ -617,8 +586,8 @@ export default {
         },
         //**清空地图 并添加全国底图*/
         clearAllLayers(){
-            maps.eachLayer(function(layer){
-                maps.removeLayer(layer)
+            myMaps.eachLayer(function(layer){
+                myMaps.removeLayer(layer)
             })
             let JsonData = require("../../assets/geoData/china.json")
             let layer = L.geoJSON(JsonData.features, {
@@ -629,13 +598,13 @@ export default {
                         'fillColor':'#DEECFF' 
                     }
                 }
-            }).addTo(maps);
+            }).addTo(myMaps);
         },
         /**
          * 移动地图到指定中心
          */
         panTo(center, zoom){
-            maps.setView(center, zoom)
+            myMaps.setView(center, zoom)
         },
         /**
          * 切换系统时 地图响应
@@ -657,7 +626,7 @@ export default {
         },
         // 用于绘制集团地图
         pantGroupMap (data, sysId) {
-            maps.setView([38,103],4)
+            myMaps.setView([38,103],4)
             this.clearAllLayers() 
             let that = this
             let groupLayer = new L.layerGroup()
@@ -720,7 +689,7 @@ export default {
                             item.marker = L.marker([center[0]-2, center[1]], { icon: myIcon }).addTo(groupLayer)
                             L.circle(center, 100000, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(groupLayer);
                             L.circle(center, 50000, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(groupLayer);
-                            groupLayer.addTo(maps)
+                            groupLayer.addTo(myMaps)
                         
                             item.marker.on('click', (ev)=>{
                                 groupLayer.clearLayers()
@@ -729,7 +698,7 @@ export default {
                             })
                         }
                     })
-                    groupLayer.addTo(maps)
+                    groupLayer.addTo(myMaps)
                 },200)
             })
         },
@@ -741,7 +710,21 @@ export default {
             this.clearAllLayers()
             let name = data.cname.substr(0,2)
             let zone = this.zoneNames[name]
-            this.panTo(this.zoneCenter[zone], 6)
+            let zoom , inner, outer, offset
+            if (['xibei'].includes(zone)) {
+                zoom = 5
+                inner = 20000
+                outer = 40000
+                offset = 1
+            } else {
+                zoom = 6
+                inner = 10000
+                outer = 20000
+                offset = 0.5
+            }
+            this.panTo(this.zoneCenter[zone], zoom)
+            // myMaps.setMaxZoom(zoom)
+            // myMaps.setMinZoom(zoom)
             let that = this
             let groupLayer = new L.layerGroup() 
             data.children.forEach(item=>{
@@ -783,11 +766,11 @@ export default {
                         }
                         color = that.paintColorByData(num)
                         if (color && color.border && color.area && center) {
-                            marker = L.marker([center[0] -0.5, center[1]], { icon: myIcon }).addTo(groupLayer)
-                            L.circle(center, 20000, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(groupLayer);
-                            L.circle(center, 10000, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(groupLayer);
+                            marker = L.marker([center[0] -offset, center[1]], { icon: myIcon }).addTo(groupLayer)
+                            L.circle(center, outer, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(groupLayer);
+                            L.circle(center, inner, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(groupLayer);
                         }
-                        groupLayer.addTo(maps)
+                        groupLayer.addTo(myMaps)
                         marker.on('click', (ev)=>{
                             groupLayer.clearLayers()
                             this.pantProjectsMap(item,sysId)
@@ -802,6 +785,7 @@ export default {
          * 用于绘制项目的点
          */
         pantProjectsMap (data,sysId) {
+     
             this.clearAllLayers()
             let geo = this.provinceCities[data.cname]
             this.panTo(geo.center, geo.zoom)
@@ -856,11 +840,11 @@ export default {
                         }
                        
                         color = that.paintColorByData(num)
-                        let zoom = maps.getZoom()
+                        let zoom = myMaps.getZoom()
                         let size = this.circleSize[zoom]
-                        marker = L.marker([center[0]-size.offset, center[1]], { icon: myIcon }).addTo(maps)
-                        L.circle(center, size.outer, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(maps);
-                        L.circle(center, size.innder, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(maps);
+                        marker = L.marker([center[0]-size.offset, center[1]], { icon: myIcon }).addTo(myMaps)
+                        L.circle(center, size.outer, { color:'transparent', fillColor:color.border, fillOpacity:0.4}).bindPopup(contentHtml).addTo(myMaps);
+                        L.circle(center, size.innder, { color:'transparent', fillColor:color.area, fillOpacity:1}).bindPopup(contentHtml).addTo(myMaps);
                         marker.on("click", (ev) => {
                             // that.$router.push({path:'./'})
                         })
@@ -1077,6 +1061,7 @@ export default {
             font-size: 1.6rem;
             font-weight: bolder;
             line-height: 2rem;
+            cursor: pointer;
         }
         .system-general{
             width: 25.4%;
@@ -1226,6 +1211,7 @@ export default {
                 #map{
                     height: 70rem;
                     overflow: hidden;
+                    pointer-events: none;
                 }
                 .legend{
                     position: absolute;
@@ -1251,20 +1237,20 @@ export default {
             .block{
                 position: relative;
                 padding:1.2rem 1.6rem;
+                height: calc( (100% - 2rem) / 3);
                 border-radius: 4px;
-                margin-bottom: 1.2rem;
+                margin-bottom: 1rem;
                 background: white;
+                overflow: hidden;
+                transition: height 0.3s ease-in-out;
                 .section-title{
                     font-size: 1.6rem;
-                    
                 }
                 .list{
                     margin-top: 1.4rem;
-                    height: 21rem;
                     overflow: hidden;
-                    transition: height 0.3s ease-in-out;
+                    height: calc(100% - 3rem);
                     ul{
-                        overflow: hidden;
                         li{
                             display: flex;
                             flex-direction: column;
@@ -1297,7 +1283,7 @@ export default {
                 }
                 .arrow{
                     position: absolute;
-                    bottom: 0.5rem;
+                    bottom: 0;
                     left:50%;
                     cursor: pointer;
                     transform-origin: center center;