Parcourir la source

说明书更新记录开发

fujunwen il y a 4 ans
Parent
commit
09f024ee66

+ 12 - 0
src/App.vue

@@ -236,4 +236,16 @@ body {
     background: linear-gradient(180deg,rgba(54,156,247,1) 0%,rgba(2,91,170,1) 100%);
   }
 }
+// 说明书更新记录 element 时间控件样式重写
+.specification-update-record{
+  .el-input__inner{
+    height: 32px;
+    line-height: 32px;
+  }
+  .el-date-editor .el-range__icon,
+  .el-date-editor .el-range-separator{
+    line-height: 26px;
+    width: 8%;
+  }
+}
 </style>

+ 34 - 1
src/views/analysis/CoreDeviceReport.vue

@@ -30,7 +30,7 @@
       <div class="search-container">
         <Input iconType="search" v-model="searchKey" placeholder="搜索" width="192"/>
       </div>
-      <el-table :data="tableData" style="width: 100%;margin-bottom: 63px;">
+      <el-table :data="tableData" style="width: 100%;margin-bottom: 63px;" @row-click="showEquipmentStatus">
         <el-table-column prop="serialNumber" label="序号"></el-table-column>
         <el-table-column prop="equipmentName" label="设备简称"></el-table-column>
         <el-table-column prop="equipmentNumber" label="设备编号"></el-table-column>
@@ -45,6 +45,30 @@
           :total="tatol">
         </el-pagination>
       </div>
+      <el-dialog title="交换机-照明系统" :visible.sync="dialogTableVisible">
+        <el-date-picker
+          style="margin-bottom: 12px;"
+          v-model="dialogTime"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+        <el-table :data="tableData" style="margin-bottom: 55px">
+          <el-table-column property="serialNumber" label="日期"></el-table-column>
+          <el-table-column property="equipmentName" label="事项类型"></el-table-column>
+          <el-table-column property="equipmentNumber" label="事项名称"></el-table-column>
+          <el-table-column property="photo" label="照片"></el-table-column>
+          <el-table-column property="report" label="报告"></el-table-column>
+        </el-table>
+        <div class="page">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="tatol">
+          </el-pagination>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -70,6 +94,8 @@ export default {
         {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: 4, photo: 5, report: 6},
       ], // 表数据
       tatol: 100, // 总数据
+      dialogTableVisible: false, // 弹窗显示状态
+      dialogTime: '', // 弹框内的时间
     }
   },
 
@@ -85,6 +111,13 @@ export default {
   methods: {
     testClick() {
 
+    },
+    /**
+     * 显示设备实例的维保、专维等状态
+     */
+    showEquipmentStatus(row, column, e) {
+      console.log('row', row)
+      this.dialogTableVisible = true;
     }
   }
 }

+ 98 - 0
src/views/analysis/GanttChart.vue

@@ -0,0 +1,98 @@
+<!-- 事项甘特图 -->
+<template>
+  <div class="gantt-chart">
+    <div class="condition-legend-bar">
+      <Select 
+        class="system-select"
+        width="217"
+        :isReadOnly="true" 
+        tipPlace="top" 
+        caption="系统名称:"
+        @change="testClick" 
+        v-model="systemName" 
+        :selectdata="systemList" 
+        :placeholder="'请选择'"
+      />
+      <div class="legend-container">
+        <div v-for="(item) in legends" :key="'key_' + item.id" class="item-legend">
+          <div :style="{'background': item.backgroundColor, 'border-color': item.borderColor}"></div>
+          <div>{{item.text}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="main-gantt-container">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      systemList: [], // 系统列表
+      systemName: '', // 系统名称
+      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'},
+      ]
+    }
+  },
+
+  components: {},
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {}
+}
+</script>
+
+<style lang='less' scoped>
+.gantt-chart{
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 16px;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  .condition-legend-bar{
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .legend-container{
+    display: flex;
+    .item-legend{
+      padding-left: 18px;
+      position: relative;
+      font-size: 14px;
+      color: #646C73;
+      line-height: 32px;
+      &:not(:nth-of-type(4)){
+        margin-right: 20px;
+      }
+      >div:first-child{
+        position: absolute;
+        left: 0;
+        top: calc(50% - 6px);
+        width: 12px;
+        height: 12px;
+        border: 1px solid;
+      }
+      &:nth-of-type(4){
+        margin-right: 32px;
+      }
+    }
+  }
+  .main-gantt-container{
+    width: 100%;
+    height: calc(100% - 44px);
+    background: #F2F5F7;
+  }
+}
+</style>

+ 85 - 0
src/views/analysis/SpecificationUpdateRecord.vue

@@ -0,0 +1,85 @@
+<!-- 说明书更新记录 -->
+<template>
+  <div class="specification-update-record">
+    <div class="screening-condition">
+      <Select 
+        style="margin-right: 12px;"
+        width="200"
+        :isReadOnly="true" 
+        tipPlace="top" 
+        caption="事件类型:"
+        @change="testClick" 
+        v-model="incidentType" 
+        :selectdata="incidentList" 
+        :placeholder="'请选择'"
+      />
+      <el-date-picker
+        v-model="timeVal"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期">
+      </el-date-picker>
+    </div>
+    <el-table :data="tableData" style="margin-bottom: 19px">
+      <el-table-column property="date" label="日期"></el-table-column>
+      <el-table-column property="itemType" label="事项类型"></el-table-column>
+      <el-table-column property="serialNumber" label="编号"></el-table-column>
+      <el-table-column property="update" label="更新内容"></el-table-column>
+    </el-table>
+    <div class="page">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="tatol">
+      </el-pagination>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      incidentList: [], // 事件列表
+      incidentType: '', // 事件类型
+      timeVal: '', // 时间
+      tableData: [], // 表数据
+      tatol: 100, // 数据总量
+    }
+  },
+
+  components: {},
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {
+    testClick() {
+
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+.specification-update-record{
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 20px;
+  background: #fff;
+  height: 100%;
+  width: 100%;
+  .screening-condition{
+    margin-bottom: 13px;
+    display: flex;
+  }
+  .page{
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>

+ 7 - 1
src/views/analysis/index.vue

@@ -12,6 +12,8 @@
 		</div>
 		<div class="module">
 			<CoreDeviceReport v-if="curModule.id === 1"/>
+			<SpecificationUpdateRecord v-if="curModule.id === 2" />
+			<GanttChart v-if="curModule.id === 3" />
 		</div>
 	</div>
 </template>
@@ -21,6 +23,8 @@ import NavTable from '../../assets/svg/table.svg';
 import NavApply from '../../assets/svg/apply.svg';
 import NavGantt from '../../assets/svg/gantt_chart.svg';
 import CoreDeviceReport from './CoreDeviceReport';
+import SpecificationUpdateRecord from './SpecificationUpdateRecord';
+import GanttChart from './GanttChart';
 import _ from 'lodash';
 export default {
 	data() {
@@ -37,7 +41,9 @@ export default {
 		NavTable,
 		NavApply,
 		NavGantt,
-		CoreDeviceReport
+		CoreDeviceReport,
+		SpecificationUpdateRecord,
+		GanttChart
 	},
 	mounted() {
 		this.findCurModule();