Browse Source

甘特图弹框开发

fujunwen 4 years ago
parent
commit
02026dca7c

+ 14 - 0
src/api/ganttChart.js

@@ -1,5 +1,19 @@
 import httputils from "@/api/httputils";
 
+/**
+ * 获取甘特图数据
+ * @param {*} url 
+ * @param {*} getParams 
+ */
 export function queryGanttChart(url, getParams) {
   return httputils.getJson(url, getParams);
+}
+
+/**
+ * 获取甘特图任务数据
+ * @param {*} url 
+ * @param {*} getParams 
+ */
+export function queryGanttDetail(url, getParams) {
+  return httputils.getJson(url, getParams);
 }

BIN
src/assets/imgs/analysis/picture.png


BIN
src/assets/imgs/analysis/report_pdf.png


BIN
src/assets/imgs/analysis/report_word.png


+ 105 - 3
src/views/analysis/GanttChart.vue

@@ -63,8 +63,46 @@
               <div class="title">照片</div>
             </div>
             <div>
-
+              <div>
+                <div class="num">12张</div>
+                <div class="more">查看更多</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>
+              </div>
+            </div>
+          </div>
+          <div class="row picture">
+            <div>
+              <Report class="icon" />
+              <div class="title">报告</div>
+            </div>
+            <div>
+              <div>
+                <div class="num">2张</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>
+              </div>
+            </div>
+          </div>
+          <div class="row test-content">
+            <div>
+              <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>
           </div>
         </div>
       </el-dialog>
@@ -73,7 +111,7 @@
 </template>
 
 <script>
-import { queryGanttChart } from '../../api/ganttChart';
+import { queryGanttChart, queryGanttDetail } from '../../api/ganttChart';
 import { querySystemList } from '../../api/coreDeviceReport';
 import { Tree } from 'meri-design';
 import _ from 'lodash';
@@ -85,6 +123,8 @@ 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 () {
     return {
@@ -102,6 +142,14 @@ 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'},
+      ], // 照片
+      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'},
+      ], // 报告
     }
   },
 
@@ -109,7 +157,9 @@ export default {
     Task,
     PlanTime,
     RealTime,
-    Picture
+    Picture,
+    Report,
+    Menu
   },
 
   computed: {},
@@ -319,6 +369,8 @@ export default {
     }
   }
   .dialog-container{
+    max-height: 580px;
+    overflow: auto ;
     .row{
       display: flex;
       >div:first-child{
@@ -355,6 +407,56 @@ export default {
       line-height: 24px;
       text-align: center;
     }
+    .picture{
+      margin-bottom: 19px!important;
+      >div:first-child{
+        align-items: baseline;
+      }
+      >div:nth-of-type(2){
+        flex: 1;
+      }
+      >div:nth-of-type(2)>div:first-child{
+        margin-bottom: 12px;
+        display: flex;
+      }
+      .num,
+      .more{
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+        cursor: pointer;
+      }
+      .num{
+        margin-right: 22px;
+        color: #1F2429;
+      }
+      .more{
+        color: #025BAA;
+      }
+    }
+    .pictrue-container{
+      >div{
+        padding: 10px 16px;
+        width: 100%;
+        border-radius:4px;
+        border:1px solid rgba(233,233,233,1);
+        display: flex;
+        align-items: center;
+        >img{
+          width: 24px;
+          margin-right: 15px;
+        }
+      }
+      >div:not(:last-child){
+        margin-bottom: 8px;
+      }
+    }
+    .test-content{
+      display: block;
+      >div:first-child{
+        margin-bottom: 13px;
+      }
+    }
   }
 }
 </style>