Bläddra i källkod

甘特图调整

fujunwen 4 år sedan
förälder
incheckning
9b8daadab3

+ 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>

+ 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;
       }
     }
   }

+ 259 - 149
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,15 +287,15 @@ 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({
               id: index + 1,
@@ -244,66 +303,69 @@ export default {
               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) => {
+          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)
-
+      console.log("status", status);
     },
     /**
      * 显示弹窗
@@ -323,28 +385,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 +423,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 +441,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 +465,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>

+ 1 - 1
src/views/statistics/index.vue

@@ -125,7 +125,7 @@ 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";