核心设备报表、甘特图图片 附件显示功能开发

src/api/coreDeviceReport.js

@@ -4,7 +4,7 @@ import httputils from '@/api/httputils'
  * 系统列表
  */
 export function querySystemList() {
-  return httputils.getJson(`/data/v_glsms_systemcfg/querySmsxt`);
+  return httputils.getJson(`/data/sms_systemcfg/querySmsxt`);
 }
 /**
  * 系统下的设备

src/views/analysis/CoreDeviceReport.vue

@@ -2,26 +2,35 @@
 <template>
   <div class="core-device-report">
     <div class="main-left">
-      <Select 
+      <Select
         class="system-select"
         width="217"
-        :isReadOnly="true" 
-        tipPlace="top" 
+        :isReadOnly="true"
+        tipPlace="top"
         caption="系统名称："
-        @change="changeCurSystem" 
-        v-model="systemId" 
+        @change="changeCurSystem"
+        v-model="systemId"
         :selectdata="systemList"
         :placeholder="'请选择'"
         hideClear
       />
       <div class="system-content">
-        <div v-for="(item) in systemContentData" :key="'key_' + item.category_code" class="item-content" :class="{'active': item.isActive}" @click="changeEquipment(item.category_code)">
+        <div
+          v-for="(item) in systemContentData"
+          :key="'key_' + item.category_code"
+          class="item-content"
+          :class="{'active': item.isActive}"
+          @click="changeEquipment(item.category_code)"
+        >
           <div class="first-row">
             <div>{{item.name}}</div>
             <div>{{item.isMaintenance?'维保中' : ''}}</div>
           </div>
           <div class="sec-row">
-            <div>{{item.num}}<span>台</span></div>
+            <div>
+              {{item.num}}
+              <span>台</span>
+            </div>
             <span :class="{'abnormal': item.abnormal}">{{item.statusNum !== 0?item.statusNum : ''}}</span>
           </div>
         </div>
@@ -29,27 +38,45 @@
     </div>
     <div class="main-right">
       <div class="search-container">
-        <Input iconType="search" v-model="searchKey" placeholder="搜索" width="192" @pressEnter="getTableData" @clear="getTableData"/>
+        <Input
+          iconType="search"
+          v-model="searchKey"
+          placeholder="搜索"
+          width="192"
+          @pressEnter="getTableData"
+          @clear="getTableData"
+        />
       </div>
-      <el-table :data="tableData" style="width: 100%;margin-bottom: 63px;" @row-click="showEquipmentStatus">
+      <el-table
+        :data="tableData"
+        style="width: 100%;margin-bottom: 63px;"
+        @row-click="showEquipmentStatus"
+      >
         <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
         <el-table-column prop="sbjc" label="设备简称"></el-table-column>
         <el-table-column prop="assetnum" label="设备编号"></el-table-column>
         <el-table-column prop="is_exception" label="状态">
           <template slot-scope="scope">
-            <span style="display: inline-block;width: 6px;height:6px;border-radius: 3px;background: #0091FF;" :style="{'background': !scope.row.is_exception?'#0091FF' : '#F54E45'}"></span>
+            <span
+              style="display: inline-block;width: 6px;height:6px;border-radius: 3px;background: #0091FF;"
+              :style="{'background': !scope.row.is_exception?'#0091FF' : '#F54E45'}"
+            ></span>
             <span style="margin-left: 10px">{{ !scope.row.is_exception?'正常' : '异常' }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="photos_num" label="照片">
           <template slot-scope="scope">
-            <span style="color: #025BAA" @click="showPicturesDetail(scope.row, 'equip')">{{ scope.row.photos_num?(scope.row.photos_num + '张') : '—' }}</span>
+            <span
+              style="color: #025BAA"
+              @click="showPicturesDetail(scope.row, 'equip')"
+            >{{ scope.row.photos_num?(scope.row.photos_num + '张') : '—' }}</span>
             <!-- <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span> -->
           </template>
         </el-table-column>
         <el-table-column prop="attachments_num" label="报告">
           <template slot-scope="scope">
-            <span style="color: #025BAA" @click="showReportDetail(scope.row, 'equip')">{{ scope.row.attachments_num?(scope.row.attachments_num+ '张') : '—'}}</span>
+            <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'equip', e)">{{ scope.row.attachments_num?(scope.row.attachments_num+ '张') : '—'}}</span>
+            <!-- <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'equip', e)">1张</span> -->
           </template>
         </el-table-column>
       </el-table>
@@ -60,8 +87,8 @@
           :total="tatol"
           :current-page="curPage"
           :page-size="pageSize"
-          @current-change="changeTablePage">
-        </el-pagination>
+          @current-change="changeTablePage"
+        ></el-pagination>
       </div>
       <el-dialog :title="equipTitle" :visible.sync="dialogTableVisible" width="1260px">
         <el-date-picker
@@ -71,21 +98,25 @@
           range-separator="至"
           @change="changeTime"
           start-placeholder="开始日期"
-          end-placeholder="结束日期">
-        </el-date-picker>
+          end-placeholder="结束日期"
+        ></el-date-picker>
         <el-table :data="historyTableData" style="margin-bottom: 55px;" max-height="500">
           <el-table-column width="200" property="finishDate" label="日期"></el-table-column>
           <el-table-column width="100" property="typeName" label="事项类型"></el-table-column>
           <el-table-column property="taskName" label="事项名称"></el-table-column>
           <el-table-column width="100" property="photosNum" label="照片">
             <template slot-scope="scope">
-              <span style="color: #025BAA" @click="showPicturesDetail(scope.row, 'his')">{{ scope.row.photosNum || scope.row.photosNum === 0?(scope.row.photosNum + '张') : '—' }}</span>
+              <span
+                style="color: #025BAA"
+                @click="showPicturesDetail(scope.row, 'his')"
+              >{{ scope.row.photosNum || scope.row.photosNum === 0?(scope.row.photosNum + '张') : '—' }}</span>
               <!-- <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span> -->
             </template>
           </el-table-column>
           <el-table-column width="100" property="attachmentsNum" label="报告">
             <template slot-scope="scope">
-              <span style="color: #025BAA" @click="showReportDetail(scope.row, 'his')">{{ scope.row.attachmentsNum?(scope.row.attachmentsNum+ '张') : '—'}}</span>
+              <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'his', e)">{{ scope.row.attachmentsNum?(scope.row.attachmentsNum+ '张') : '—'}}</span>
+              <!-- <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'his', e)">1张</span> -->
             </template>
           </el-table-column>
         </el-table>
@@ -96,39 +127,56 @@
             :current-page="hisCurPage"
             :page-size="hisPageSize"
             :total="hisTotal"
-            @current-change="changeHisTablePage">
-          </el-pagination>
+            @current-change="changeHisTablePage"
+          ></el-pagination>
         </div>
       </el-dialog>
       <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" @click="changeCurImg(item.id)" :class="{'active': item.isActive}">
-                <img :src="item.url" alt="">
+              <div
+                v-for="(item) in pictureList"
+                :key="'id_' + item.id"
+                class="item"
+                @click="changeCurImg(item.id)"
+                :class="{'active': item.isActive}"
+              >
+                <img :src="item.url" alt />
                 <div class="name" :title="item.name">{{item.name}}</div>
               </div>
             </div>
             <div class="cur-img-container">
-              <img :src="curImg.url" alt="">
+              <img v-if="curImg.url" :src="curImg.url" alt />
             </div>
           </div>
         </el-dialog>
       </div>
     </div>
+    <div v-show="showAccessory" class="accessory-container" :style="{'top': accessoryPos.top + 'px', 'left': accessoryPos.left + 'px'}">
+      <div v-for="(item) in accessoryList" :key="'id_' + item.id">
+        <a :href="item.url" target="_blank" :title="item.name">{{item.name}}</a>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { Select, Input } from 'meri-design';
-import { querySystemList, queryEquipmentList, queryTableData, queryHistoryTableData, queryDetailData } from '../../api/coreDeviceReport';
-import _ from 'lodash';
-import moment from 'moment';
-import { log } from 'util';
+import { Select, Input } from "meri-design";
+import {
+  querySystemList,
+  queryEquipmentList,
+  queryTableData,
+  queryHistoryTableData,
+  queryDetailData
+} from "../../api/coreDeviceReport";
+import _ from "lodash";
+import moment from "moment";
+import { log } from "util";
 export default {
-  data () {
+  data() {
     return {
-      systemId: '', // 当前系统Id
+      systemId: "", // 当前系统Id
       systemList: [], // 系统
       systemContentData: [
         // {id: 1, name: '高压配电柜', isMaintenance: true, num: 95, statusNum: 0, abnormal: false, isActive: true},
@@ -137,7 +185,7 @@ export default {
         // {id: 4, name: '直流屏', isMaintenance: false, num: 175, statusNum: 0, abnormal: false, isActive: false},
         // {id: 5, name: '柴油发电机组', isMaintenance: false, num: 186, status: 0, abnormal: false, isActive: false},
       ], // 系统下的各种组成
-      searchKey: '', // 搜索关键字
+      searchKey: "", // 搜索关键字
       tableData: [
         // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
         // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '异常', photo: 5, report: 6},
@@ -149,7 +197,7 @@ export default {
       dialogTableVisible: false, // 弹窗显示状态
 
       // 核心设备实例
-      equipTitle: '', // 核心设备弹窗名称
+      equipTitle: "", // 核心设备弹窗名称
       assetnum: null, // 设备台账编码
       historyTableData: [], // 核心设备实例的所有历史事项信息
       dialogTime: null, // 弹框内的时间
@@ -160,24 +208,41 @@ export default {
       endTime: null, // 结束事件
 
       showDetail: false, // 显示照片、报告详情
-      detailTitle: '图片预览', // 弹窗名称
+      detailTitle: "图片预览", // 弹窗名称
       pictureList: [
         // {id: 1, url: require('../../assets/images/login_back.png'), name: '图层名称1.jpg'},
         // {id: 2, url: require('../../assets/images/matter_pop3.png'), name: '图层名称2.jpg'},
         // {id: 3, url: require('../../assets/images/login_back.png'), name: '图层名称3.jpg'},
       ], // 图片列表
       curImg: {}, // 当前图片
-    }
+
+      showAccessory: false, // 附件窗口显示状态
+      isClickAccessory: false, // 是否点击的是附件
+      accessoryList: [], // 附件
+      accessoryPos: {
+        top: 0, 
+        left: 0
+      }, // 附件弹窗位置
+    };
   },
 
-    components: {
-        Select,
-        Input
-    },
+  components: {
+    Select,
+    Input
+  },
 
-    computed: {},
+  computed: {},
 
   mounted() {
+    document.addEventListener('click', () => {
+      setTimeout(() => {
+        if (this.isClickAccessory) {
+          this.isClickAccessory = false;
+          return
+        }
+        this.showAccessory = false;
+      }, 20)
+    })
     this.getSystemList();
   },
 
@@ -186,16 +251,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)) {
@@ -205,13 +270,13 @@ export default {
           }
           this.getEquipmentOfSystem();
         }
-      })
+      });
     },
     /**
      * 切换系统名称
      */
     changeCurSystem(val) {
-      console.log('val', val)
+      console.log("val", val);
       this.getEquipmentOfSystem();
     },
     /**
@@ -220,15 +285,16 @@ export default {
     getEquipmentOfSystem() {
       let param = {
         plazaId: 1000423,
-        ccode: 1002347,
-      }
-      if (this.systemId !== '') {
+        ccode: 1002347
+      };
+      if (this.systemId !== "") {
         param.smsxt = this.systemId;
       }
-      queryEquipmentList('/data/home/querySystemCard', param).then((res) => {
+      queryEquipmentList("/data/home/querySystemCard", param).then(res => {
         const { result, data } = res;
-        if (result === 'success') {
-          let newData = [], abnormalList = [];
+        if (result === "success") {
+          let newData = [],
+            abnormalList = [];
 
           _.forEach(data[0].assetTypeList, (item, index) => {
             let itemData = {
@@ -238,32 +304,38 @@ export default {
               num: item.asset_num,
               abnormal: item.is_exception_num !== 0,
               category_code: item.category_code
-            }
+            };
             if (!item.category_code) {
-              console.error('without category_code..', item)
+              console.error("without category_code..", item);
             }
             if (item.is_exception_num === 0) {
-              newData.push(itemData)
+              newData.push(itemData);
             } else {
               abnormalList.push(itemData);
             }
-          })
+          });
           newData = abnormalList.concat(newData);
-          _.map(newData, (o, i) => {return o.isActive = i === 0});
+          _.map(newData, (o, i) => {
+            return (o.isActive = i === 0);
+          });
           const { query } = this.$route;
           this.systemContentData = newData;
           if (!_.isEmpty(query) && query.equipId) {
-            _.map(this.systemContentData, (o) => {return o.isActive = o.category_code == query.equipId});
+            _.map(this.systemContentData, o => {
+              return (o.isActive = o.category_code == query.equipId);
+            });
           }
           this.getTableData();
         }
-      })
+      });
     },
     /**
      * 切换系统下的设备
      */
     changeEquipment(id) {
-      _.map(this.systemContentData, (o) => {return o.isActive = o.category_code === id});
+      _.map(this.systemContentData, o => {
+        return (o.isActive = o.category_code === id);
+      });
       this.getTableData();
     },
     /**
@@ -271,19 +343,21 @@ export default {
      */
     getTableData() {
       let query = {
-        category_code: _.find(this.systemContentData, (o) => {return o.isActive}).category_code
+        category_code: _.find(this.systemContentData, o => {
+          return o.isActive;
+        }).category_code
+      };
+      let url = `/data/sms_asset/query?plazaId=1000423&page=${this.curPage}&size=${this.pageSize}&orderBy=is_exception,0`;
+      if (_.trim(this.searchKey) !== "") {
+        url = `${url}&keyword=${this.searchKey}:sbjc,sbjbm`;
       }
-      let url = `/data/glsms_asset/query?plazaId=1000423&page=${this.curPage}&size=${this.pageSize}&orderBy=is_exception,0`;
-      if (_.trim(this.searchKey) !== '') {
-        url = `${url}&keyword=${this.searchKey}:sbjc,sbjbm`
-      }
-      queryTableData(url, query).then((res) => {
+      queryTableData(url, query).then(res => {
         const { result, count, data } = res;
-        if (result === 'success') {
+        if (result === "success") {
           this.tatol = count;
           this.tableData = data;
         }
-      })
+      });
     },
     /**
      * 表第一列序号
@@ -303,12 +377,17 @@ export default {
      */
     showEquipmentStatus(row, column, e) {
       setTimeout(() => {
-        if (this.showDetail) return
+        if (this.showDetail || this.showAccessory) {
+          // if (this.showAccessory) {
+          //   this.showAccessory = false;
+          // }
+          return;
+        }
         this.equipTitle = row.sbjc;
         this.dialogTableVisible = true;
         this.assetnum = row.assetnum;
         this.initTimePicker();
-      }, 36)
+      }, 36);
     },
     /**
      * 获取核心设备实例的所有历史事项信息
@@ -319,43 +398,47 @@ export default {
         page: this.hisCurPage,
         size: this.hisPageSize,
         plazaId: 1000423,
-        // assetnum: this.assetnum,
-        assetnum: 24071,
-        // startDate: this.startTime,
-        startDate: 20000101000000,
-        // endDate: this.endTime
-        endDate: 20200201000000
-      }
-      queryHistoryTableData('/data/base/queryDateByAssetNum', param).then((res) => {
-        const { result, data, count } = res;
-        if (result === 'success') {
-          this.historyTableData = data;
-          this.hisTotal = count;
-          _.forEach(this.historyTableData, (item) => {
-            let name;
-            switch (item.type) {
-              case 0:
-                name = '专维'
-                break
-              case 1:
-                name = '维保专业'
-                break
-              case 2:
-                name = '第三方视图'
-                break
-            }
-            item.typeName = name;
-            item.finishDate = moment.unix(item.finishDate / 1000).format('YYYY.MM.DD');
-          })
+        assetnum: this.assetnum,
+        // assetnum: 24071,
+        startDate: this.startTime,
+        // startDate: 20000101000000,
+        endDate: this.endTime
+        // endDate: 20200201000000
+      };
+      queryHistoryTableData("/data/base/queryDateByAssetNum", param).then(
+        res => {
+          const { result, data, count } = res;
+          if (result === "success") {
+            this.historyTableData = data;
+            this.hisTotal = count;
+            _.forEach(this.historyTableData, item => {
+              let name;
+              switch (item.type) {
+                case 0:
+                  name = "专维";
+                  break;
+                case 1:
+                  name = "维保专业";
+                  break;
+                case 2:
+                  name = "第三方视图";
+                  break;
+              }
+              item.typeName = name;
+              item.finishDate = moment
+                .unix(item.finishDate / 1000)
+                .format("YYYY.MM.DD");
+            });
+          }
         }
-      })
+      );
     },
     /**
      * 初始化时间选择器
      */
     initTimePicker() {
       let endTime = new Date(),
-          startTime = new Date(endTime.getTime() - 1000*60*60*24*30);
+        startTime = new Date(endTime.getTime() - 1000 * 60 * 60 * 24 * 30);
       this.dialogTime = [startTime, endTime];
       this.changeTime();
     },
@@ -365,8 +448,12 @@ export default {
     changeTime() {
       this.hisCurPage = 1;
       if (this.dialogTime) {
-        this.startTime = moment.unix(new Date(this.dialogTime[0]).getTime() / 1000).format('YYYYMMDDHHmmss');
-        this.endTime = moment.unix(new Date(this.dialogTime[1]).getTime() / 1000).format('YYYYMMDDHHmmss');
+        this.startTime = moment
+          .unix(new Date(this.dialogTime[0]).getTime() / 1000)
+          .format("YYYYMMDDHHmmss");
+        this.endTime = moment
+          .unix(new Date(this.dialogTime[1]).getTime() / 1000)
+          .format("YYYYMMDDHHmmss");
       } else {
         this.initTimePicker();
       }
@@ -383,36 +470,42 @@ export default {
      * 显示图片详情
      */
     showPicturesDetail(val, type) {
-      console.log('val', val)
-      if (type === 'equip') {
+      console.log("val", val);
+      if (type === "equip") {
         if (!val.file_type || !val.file_type_id) {
-          return
+          return;
         }
       } else {
         if (!val.photosNum) {
-          return
+          return;
         }
       }
       this.showDetail = true;
-      this.detailTitle = '图片预览';
+      this.detailTitle = "图片预览";
       this.getDetailData(val);
     },
     /**
      * 显示附件详情
      */
-    showReportDetail(val) {
-      console.log('val', val)
-      if (type === 'equip') {
+    showReportDetail(val, type, e) {
+      console.log("val", val);
+      if (type === "equip") {
         if (!val.file_type || !val.file_type_id) {
-          return
+          // return;
         }
       } else {
         if (!val.attachments_num) {
-          return
+          // return;
         }
       }
-      this.showDetail = true;
-      this.detailTitle = '附件预览';
+      console.log('e', e)
+      this.accessoryPos = {
+        top: e.clientY + 5,
+        left: e.clientX - 360 -5
+      }
+      this.isClickAccessory = true;
+      this.showAccessory = true;
+      this.detailTitle = "附件预览";
       this.getDetailData(val);
     },
     /**
@@ -420,16 +513,17 @@ export default {
      */
     getDetailData(val, type) {
       let param = {
-        file_type: type === 'equip'?val.file_type : val.type, 
+        file_type: type === 'equip'?val.file_type : val.type,
         // file_type: 0,
         file_type_id: type === 'equip'?val.file_type_id : val.id,
-        // file_type_id: 2914,
-        type: this.detailTitle === '图片预览'? 0 : 1
-      }
-      queryDetailData('/data/base/queryFileDetails', param).then((res) => {
-        console.log('res', res)
+        // file_type_id: this.detailTitle === "图片预览" ?2914 : 1136,
+        // file_type_id: 9886,
+        type: this.detailTitle === "图片预览" ? 0 : 1
+      };
+      queryDetailData("/data/base/queryFileDetails", param).then(res => {
+        console.log("res", res);
         const { result, data } = res;
-        if (result === 'success') {
+        if (result === "success") {
           let newData = [];
           _.forEach(data, (item, index) => {
             newData.push({
@@ -437,179 +531,213 @@ export default {
               url: item.urlname,
               isActive: index === 0,
               name: item.description
-            })
-          })
-          if (this.detailTitle === '图片预览') {
+            });
+          });
+          if (this.detailTitle === "图片预览") {
             this.pictureList = newData;
-            this.curImg = this.pictureList[0];
+            if (this.pictureList.length > 0) {
+              this.curImg = this.pictureList[0];
+            }
           } else {
-            
+            this.accessoryList = newData;
           }
         }
-      })
+      });
     },
     /**
      * 切换当前预览大图
      */
     changeCurImg(id) {
-      _.map(this.pictureList, (o) => {return o.isActive = o.id === id});
-      this.curImg = _.find(this.pictureList, (o) => {return o.isActive});
+      _.map(this.pictureList, o => {
+        return (o.isActive = o.id === id);
+      });
+      this.curImg = _.find(this.pictureList, o => {
+        return o.isActive;
+      });
     }
   }
-}
+};
 </script>
 
 <style lang='less' scoped>
 .core-device-report {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    .main-left {
-        padding-left: 16px;
-        padding-right: 14px;
-        padding-top: 12px;
-        padding-bottom: 12px;
-        width: 247px;
-        border-top: 1px solid #e4e6e7;
-        border-right: 1px solid #e4e6e7;
-        .system-select {
-            margin-bottom: 16px;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .main-left {
+    padding-left: 16px;
+    padding-right: 14px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    width: 247px;
+    border-top: 1px solid #e4e6e7;
+    border-right: 1px solid #e4e6e7;
+    .system-select {
+      margin-bottom: 16px;
+    }
+    .item-content {
+      padding-left: 12px;
+      padding-right: 21px;
+      padding-top: 7px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #e4e6e7;
+      cursor: pointer;
+      > div {
+        display: flex;
+      }
+      .first-row {
+        margin-bottom: 6px;
+        display: flex;
+        justify-content: space-between;
+        > div:first-child {
+          font-size: 14px;
+          color: #1f2429;
+          line-height: 19px;
         }
-        .item-content {
-            padding-left: 12px;
-            padding-right: 21px;
-            padding-top: 7px;
-            padding-bottom: 8px;
-            border-bottom: 1px solid #e4e6e7;
-            cursor: pointer;
-            > div {
-                display: flex;
-            }
-            .first-row {
-                margin-bottom: 6px;
-                display: flex;
-                justify-content: space-between;
-                > div:first-child {
-                    font-size: 14px;
-                    color: #1f2429;
-                    line-height: 19px;
-                }
-                > div:nth-of-type(2) {
-                    margin-left: 8px;
-                    font-size: 12px;
-                    color: #cd981d;
-                    line-height: 20px;
-                }
-            }
-            .sec-row {
-                margin-bottom: 6px;
-                > div:first-child {
-                    font-size: 14px;
-                    color: #1f2429;
-                    line-height: 19px;
-                    > span {
-                        font-size: 12px;
-                        color: #646c73;
-                    }
-                }
-                // >div:nth-of-type(2){
-                //   padding-left: 8px;
-                //   padding-right: 8px;
-                //   font-size: 12px;
-                //   color: #0065B3;
-                //   line-height: 22px;
-                //   background: #E1F2FF;
-                // }
-                .abnormal {
-                    margin-left: 11px;
-                    padding-left: 3px;
-                    padding-right: 3px;
-                    font-size: 12px;
-                    color: #f54e45 !important;
-                    background: #fde3e2 !important;
-                    border-radius: 9px;
-                }
-            }
+        > div:nth-of-type(2) {
+          margin-left: 8px;
+          font-size: 12px;
+          color: #cd981d;
+          line-height: 20px;
         }
-        .system-content {
-            .active {
-                background: #e5eef5;
-                border-radius: 2px;
-                .first-row > div:first-child,
-                .sec-row > div {
-                    color: #025baa;
-                    > span {
-                        color: #025baa;
-                    }
-                }
-            }
+      }
+      .sec-row {
+        margin-bottom: 6px;
+        > div:first-child {
+          font-size: 14px;
+          color: #1f2429;
+          line-height: 19px;
+          > span {
+            font-size: 12px;
+            color: #646c73;
+          }
         }
-    }
-    .main-right {
-        flex: 1;
-        background: #fff;
-        padding-left: 15px;
-        padding-right: 13px;
-        padding-top: 13px;
-        padding-bottom: 25px;
-        .search-container {
-            margin-bottom: 12px;
+        // >div:nth-of-type(2){
+        //   padding-left: 8px;
+        //   padding-right: 8px;
+        //   font-size: 12px;
+        //   color: #0065B3;
+        //   line-height: 22px;
+        //   background: #E1F2FF;
+        // }
+        .abnormal {
+          margin-left: 11px;
+          padding-left: 3px;
+          padding-right: 3px;
+          font-size: 12px;
+          color: #f54e45 !important;
+          background: #fde3e2 !important;
+          border-radius: 9px;
         }
-        .page {
-            display: flex;
-            justify-content: flex-end;
+      }
+    }
+    .system-content {
+      .active {
+        background: #e5eef5;
+        border-radius: 2px;
+        .first-row > div:first-child,
+        .sec-row > div {
+          color: #025baa;
+          > span {
+            color: #025baa;
+          }
         }
+      }
     }
-    .el-dialog{
-      min-height: 600px;
+  }
+  .main-right {
+    flex: 1;
+    background: #fff;
+    padding-left: 15px;
+    padding-right: 13px;
+    padding-top: 13px;
+    padding-bottom: 25px;
+    .search-container {
+      margin-bottom: 12px;
     }
-    .detail-container{
+    .page {
       display: flex;
-      height: 600px
+      justify-content: flex-end;
     }
-    .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;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        &:not(:last-of-type){
-          margin-bottom: 20px;
-        }
+  }
+  .el-dialog {
+    min-height: 600px;
+  }
+  .detail-container {
+    display: flex;
+    height: 600px;
+  }
+  .pictures-menu {
+    margin-right: 21px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    padding-right: 5px;
+    height: 100%;
+    overflow: auto;
+    .item {
+      > img {
+        width: 180px;
+        border: 4px solid rgba(245, 246, 247, 1);
+        border-radius: 4px;
       }
-      .active>img{
-        border-color: rgba(31, 35, 41, 0.15);
+      .name {
+        width: 180px;
+        font-size: 12px;
+        color: #1f2429;
+        line-height: 16px;
+        margin-top: 12px;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      &: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;
+    .active > img {
+      border-color: rgba(31, 35, 41, 0.15);
+    }
+  }
+  .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;
+    }
+  }
+  .accessory-container{
+    padding-top: 4px;
+    padding-bottom: 4px;
+    width: 360px;
+    max-height: 166px;
+    overflow: auto;
+    position: fixed;
+    background: #fff;
+    box-shadow: 0px 2px 10px 0px rgba(31,35,41,0.1);
+    border-radius: 2px;
+    border: 1px solid rgba(228,229,231,1);
+    z-index: 5000;
+    >div>a{
+      padding-left: 12px;
+      padding-right: 12px;
+      display: block;
+      height: 38px;
+      font-size: 14px;
+      line-height: 38px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      &:hover{
+        background: #F5F6F7;
       }
     }
   }
+}
 </style>

src/views/analysis/GanttChart.vue

@@ -44,7 +44,7 @@
               <Task class="icon" />
               <div class="title">任务状态</div>
             </div>
-            <div>进行中</div>
+            <div :style="{'background': ganttDetail.color && ganttDetail.color[1]?ganttDetail.color[1] : '', 'color': ganttDetail.color && ganttDetail.color[0]?ganttDetail.color[0] : ''}">{{ganttDetail.status}}</div>
           </div>
           <div class="row">
             <div>
@@ -67,13 +67,13 @@
             </div>
             <div>
               <div>
-                <div class="num">12张</div>
-                <div class="more" @click="() => showImgDetail = true">查看更多</div>
+                <div class="num">{{pictureList.length}}张</div>
+                <div v-if="pictureList.length > 0" 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 />
-                  <div class="info">{{item.title}}</div>
+                <div v-for="(item) in pictures" :key="'id_' + item.id" @click="showImgContainer(item.id)" class="item">
+                  <img src="../../assets/imgs/analysis/picture.png" alt />
+                  <div class="info" :title="item.name">{{item.name}}</div>
                 </div>
               </div>
             </div>
@@ -85,12 +85,16 @@
             </div>
             <div>
               <div>
-                <div class="num">2张</div>
+                <div class="num">{{accessoryList.length}}张</div>
               </div>
-              <div class="pictrue-container">
-                <div v-for="(item) in reports" :key="'id_' + item.id">
-                  <img :src="item.imgSrc" alt />
-                  <div class="info">{{item.title}}</div>
+              <div class="accessory-container" :style="{'max-height': accessoryIsExpand?'' : '115px'}">
+                <a :href="item.url" target="_blank" v-for="(item) in accessoryList" :key="'id_' + item.id" class="item">
+                  <img src="../../assets/imgs/analysis/report_pdf.png" alt />
+                  <div class="info" :title="item.name">{{item.name}}</div>
+                </a>
+                <div v-if="accessoryList.length > 0" class="expand-more" @click="() => accessoryIsExpand = !accessoryIsExpand">
+                  <ExpandArrow :class="{'expand': accessoryIsExpand}"/>
+                  展开更多
                 </div>
               </div>
             </div>
@@ -115,7 +119,7 @@
             <div class="pictures-menu">
               <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item" @click="changeCurImg(item.id)" :class="{'active': item.isActive}">
                 <img :src="item.url" alt="">
-                <div class="name">{{item.name}}</div>
+                <div class="name" :title="item.name">{{item.name}}</div>
               </div>
             </div>
             <div class="cur-img-container">
@@ -144,6 +148,7 @@ 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 ExpandArrow from "../../assets/svg/expand_arrow.svg";
 export default {
   data() {
     return {
@@ -184,40 +189,31 @@ export default {
       showDetail: false, // 弹框显示状态
       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"
-        }
-      ], // 报告
       ganttDetail: {}, // 甘特图明细
       tableData: [], // 表数据
       curTask: {}, // 当前查看的任务
       pictureList: [
-        {id: 1, url: require('../../assets/images/login_back.png'), name: '图层名称1.jpg', isActive: true},
-        {id: 2, url: require('../../assets/images/matter_pop3.png'), name: '图层名称2.jpg', isActive: false},
-        {id: 3, url: require('../../assets/images/login_back.png'), name: '图层名称3.jpg', isActive: false},
+        // {id: 1, url: require('../../assets/images/login_back.png'), name: '图层名称1.jpg', isActive: true},
+        // {id: 2, url: require('../../assets/images/matter_pop3.png'), name: '图层名称2.jpg', isActive: false},
+        // {id: 3, url: require('../../assets/images/login_back.png'), name: '图层名称3.jpg', isActive: false},
       ], // 图片
       curImg: {}, // 当前查看的图片
+      accessoryList: [], // 附件
+      accessoryIsExpand: false, // 附件是否展开
 
       showImgDetail: false, // 查看更多图片弹框显示状态
+
     };
   },
 
@@ -227,12 +223,22 @@ export default {
     RealTime,
     Picture,
     Report,
-    Menu
+    Menu,
+    ExpandArrow
   },
 
   computed: {},
 
   mounted() {
+    document.addEventListener('click', () => {
+      setTimeout(() => {
+        if (this.isClickAccessory) {
+          this.isClickAccessory = false;
+          return
+        }
+        this.showAccessory = false;
+      }, 20)
+    })
     this.initChartTime();
     this.getSystemList();
   },
@@ -446,11 +452,30 @@ export default {
             planStartDate,
             planEndDate,
             realStartDate,
-            realEndDate
+            realEndDate,
+            statusType
           } = data;
+          let color;
+          switch (statusType) {
+            case 1:
+              color = ['#c3c7cb', '#e7e9ea'];
+              break
+            case 2:
+              color = ['#5b8ff9', '#5b8ff933'];
+              break
+            case 3:
+              color = ['#f58300', '#fbce99'];
+              break
+            case 4:
+              color = ['#f54e45', '#fbb8b5'];
+              break
+            default:
+              color = ['#f54e45', '#fbb8b5'];
+              break
+          }
           let newData = {
             status,
-            color: "",
+            color: color,
             planTime: this.dealDetailTime(planStartDate, planEndDate),
             realTime: this.dealDetailTime(realStartDate, realEndDate)
           };
@@ -474,14 +499,31 @@ export default {
       const { id, statusType } = this.curTask._pdata;
       let param = {
         file_type: statusType,
+        // file_type: 0,
         file_type_id: id,
-        type: type
+        // file_type_id: 9886,
+        type: type,
       };
       queryDetailData("/data/base/queryFileDetails", param).then(res => {
         console.log("photo", res);
         const { result, data } = res;
         if (result === 'success') {
-          
+          let newData = [];
+          _.forEach(data, (item, index) => {
+            newData.push({
+              id: item.id,
+              url: item.urlname,
+              isActive: index === 0,
+              name: item.description
+            });
+          });
+          if (type === 0) {
+            this.pictureList = newData;
+            this.curImg = newData[0];
+            this.pictures = this.pictureList.slice(0, 2);
+          } else {
+            this.accessoryList = newData;
+          }
         }
       });
     },
@@ -491,6 +533,15 @@ export default {
     changeCurImg(id) {
       _.map(this.pictureList, (o) => {return o.isActive = o.id === id});
       this.curImg = _.find(this.pictureList, (o) => {return o.isActive});
+    },
+    /**
+     * 展示图片
+     */
+    showImgContainer(id) {
+      console.log('id', id)
+      _.map(this.pictures, (o) => {return o.isActive = o.id === id});
+      this.curImg = _.find(this.pictures, (o) => {return o.isActive});
+      this.showImgDetail = true;
     }
   },
   beforeDestroy() {
@@ -571,6 +622,7 @@ export default {
   .dialog-container {
     max-height: 580px;
     overflow: auto;
+    padding-right: 5px;
     .row {
       display: flex;
       > div:first-child {
@@ -599,7 +651,9 @@ export default {
       font-weight: 400;
     }
     .task-status > div:nth-of-type(2) {
-      width: 58px;
+      padding-left: 8px;
+      padding-right: 8px;
+      // width: 58px;
       height: 24px;
       background: rgba(91, 143, 249, 0.2);
       border-radius: 2px;
@@ -634,23 +688,51 @@ export default {
         cursor: pointer;
       }
     }
-    .pictrue-container {
-      > div {
+    .pictrue-container,
+    .accessory-container {
+      .item {
         padding: 10px 16px;
-        width: 100%;
+        width: 400px;
         border-radius: 4px;
         border: 1px solid rgba(233, 233, 233, 1);
         display: flex;
         align-items: center;
+        cursor: pointer;
         > img {
           width: 24px;
           margin-right: 15px;
         }
+        .info{
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
-      > div:not(:last-child) {
+      .item:not(:last-of-type) {
         margin-bottom: 8px;
       }
     }
+    .accessory-container{
+      position: relative;
+      overflow: hidden;
+      .expand-more{
+        position: absolute;
+        left: 444px;
+        bottom: 0;
+        color: #025baa;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        >svg{
+          margin-right: 4px;
+          width: 16px;
+          transition: transform .36s;
+        }
+        .expand{
+          transform: rotate(180deg);
+        }
+      } 
+    }
     .test-content {
       display: block;
       > div:first-child {
@@ -676,11 +758,15 @@ export default {
         border-radius: 4px;
       }
       .name {
+        width: 180px;
         font-size: 12px;
         color: #1f2429;
         line-height: 16px;
         margin-top: 12px;
         text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       &:not(:last-of-type) {
         margin-bottom: 20px;