Explorar o código

报表分析 核心设备报表开发

fujunwen %!s(int64=4) %!d(string=hai) anos
pai
achega
52512d4c2a

+ 1 - 5
package.json

@@ -8,15 +8,11 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
-        "@saga-web/base": "2.1.22",
-        "@saga-web/big": "1.0.48",
-        "@saga-web/draw": "2.1.98",
-        "@saga-web/feng-map": "1.0.11",
-        "@saga-web/graph": "2.1.91",
         "ant-design-vue": "^1.4.10",
         "axios": "^0.19.2",
         "core-js": "^3.4.4",
         "element-ui": "^2.13.2",
+        "lodash": "^4.17.15",
         "meri-design": "^1.2.8",
         "moment": "^2.24.0",
         "quill": "^1.3.7",

+ 9 - 0
src/App.vue

@@ -227,4 +227,13 @@ body {
     opacity: 0
   }
 }
+// element表头背景颜色修改
+.core-device-report{
+  .el-table thead th{
+    background-color: #F8F9FA;
+  }
+  .el-pagination.is-background .el-pager li:not(.disabled).active{
+    background: linear-gradient(180deg,rgba(54,156,247,1) 0%,rgba(2,91,170,1) 100%);
+  }
+}
 </style>

BIN=BIN
src/assets/imgs/apply.png


A diferenza do arquivo foi suprimida porque é demasiado grande
+ 22 - 0
src/assets/svg/apply.svg


+ 23 - 0
src/assets/svg/gantt_chart.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
+    <title>甘特图</title>
+    <desc>Created with Sketch.</desc>
+    <g id="各种首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="核心设备报表" transform="translate(-793.000000, -77.000000)" fill-rule="nonzero">
+            <g id="报表">
+                <g id="编组-2" transform="translate(452.000000, 60.000000)">
+                    <g id="甘特图" transform="translate(340.000000, 16.000000)">
+                        <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                        <polygon id="路径" fill="#8D9399" points="4 12 14 12 14 14 4 14"></polygon>
+                        <path d="M14,14.5 L4,14.5 C3.72385763,14.5 3.5,14.2761424 3.5,14 L3.5,12 C3.5,11.7238576 3.72385763,11.5 4,11.5 L14,11.5 C14.2761424,11.5 14.5,11.7238576 14.5,12 L14.5,14 C14.5,14.2761424 14.2761424,14.5 14,14.5 Z M4.5,13.5 L13.5,13.5 L13.5,12.5 L4.5,12.5 L4.5,13.5 Z" id="形状" fill="#8D9399"></path>
+                        <polygon id="路径" fill="#8D9399" points="2 7 10 7 10 9 2 9"></polygon>
+                        <path d="M10,9.5 L2,9.5 C1.72385763,9.5 1.5,9.27614237 1.5,9 L1.5,7 C1.5,6.72385763 1.72385763,6.5 2,6.5 L10,6.5 C10.2761424,6.5 10.5,6.72385763 10.5,7 L10.5,9 C10.5,9.27614237 10.2761424,9.5 10,9.5 Z M2.5,8.5 L9.5,8.5 L9.5,7.5 L2.5,7.5 L2.5,8.5 Z" id="形状" fill="#8D9399"></path>
+                        <polygon id="路径" fill="#8D9399" points="8 2 14 2 14 4 8 4"></polygon>
+                        <path d="M14,4.5 L8,4.5 C7.72385763,4.5 7.5,4.27614237 7.5,4 L7.5,2 C7.5,1.72385763 7.72385763,1.5 8,1.5 L14,1.5 C14.2761424,1.5 14.5,1.72385763 14.5,2 L14.5,4 C14.5,4.27614237 14.2761424,4.5 14,4.5 Z M8.5,3.5 L13.5,3.5 L13.5,2.5 L8.5,2.5 L8.5,3.5 Z" id="形状" fill="#8D9399"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 16 - 0
src/assets/svg/table.svg


+ 185 - 0
src/views/analysis/CoreDeviceReport.vue

@@ -0,0 +1,185 @@
+<!-- 核心设备报表 -->
+<template>
+  <div class="core-device-report">
+    <div class="main-left">
+      <Select 
+        class="system-select"
+        width="217"
+        :isReadOnly="true" 
+        tipPlace="top" 
+        caption="系统名称:"
+        @change="testClick" 
+        v-model="systemName" 
+        :selectdata="systemList" 
+        :placeholder="'请选择'"
+      />
+      <div class="system-content">
+        <div v-for="(item) in systemContentData" :key="'key_' + item.id" class="item-content" :class="{'active': item.isActive}">
+          <div class="first-row">
+            <div>{{item.name}}</div>
+            <div>{{item.isMaintenance?'维保中' : ''}}</div>
+          </div>
+          <div class="sec-row">
+            <div>{{item.num}}<span>台</span></div>
+            <div :class="{'abnormal': item.abnormal}">{{item.status}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main-right">
+      <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-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>
+        <el-table-column prop="status" label="状态"></el-table-column>
+        <el-table-column prop="photo" label="照片"></el-table-column>
+        <el-table-column prop="report" label="报告"></el-table-column>
+      </el-table>
+      <div class="page">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="tatol">
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Select, Input } from 'meri-design';
+export default {
+  data () {
+    return {
+      systemName: '', // 系统名称
+      systemList: [], // 系统
+      systemContentData: [
+        {id: 1, name: '高压配电柜', isMaintenance: true, num: 95, status: '正常', abnormal: false, isActive: true},
+        {id: 2, name: '变压器', isMaintenance: false, num: 256, status: '异常: 323', abnormal: true, isActive: false},
+        {id: 3, name: '低压配电柜', isMaintenance: false, num: 354, status: '正常', abnormal: false, isActive: false},
+        {id: 4, name: '直流屏', isMaintenance: false, num: 175, status: '正常', abnormal: false, isActive: false},
+        {id: 5, name: '柴油发电机组', isMaintenance: false, num: 186, status: '正常', abnormal: false, isActive: false},
+      ], // 系统下的各种组成
+      searchKey: '', // 搜索关键字
+      tableData: [
+        {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: 4, photo: 5, report: 6},
+        {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: 4, photo: 5, report: 6},
+        {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: 4, photo: 5, report: 6},
+      ], // 表数据
+      tatol: 100, // 总数据
+    }
+  },
+
+  components: {
+    Select,
+    Input
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {
+    testClick() {
+
+    }
+  }
+}
+</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;
+    }
+    .item-content{
+      padding-left: 12px;
+      padding-right: 21px;
+      padding-top: 7px;
+      padding-bottom: 8px;
+      >div{
+        display: flex;
+      }
+      .first-row{
+        margin-bottom: 6px;
+        >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;
+        display: flex;
+        justify-content: space-between;
+        >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{
+          background: #FDE3E2!important;
+          color: #AC2F28!important;
+        }
+      }
+    }
+    .system-content{
+      .active{
+        background: #E5EEF5;
+        border-radius: 2px;
+        .first-row>div:first-child,
+        .sec-row>div{
+          color: #025BAA;
+        }
+      }
+    }
+  }
+  .main-right{
+    flex: 1;
+    background: #fff;
+    padding-left: 15px;
+    padding-right: 13px;
+    padding-top: 13px;
+    padding-bottom: 25px;
+    .search-container{
+      margin-bottom: 12px;
+    }
+    .page{
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

+ 100 - 3
src/views/analysis/index.vue

@@ -1,10 +1,107 @@
 <template>
-    <div>fenxi</div>
+  <div class="analysis-table">
+		<div class="module-navs-container">
+			<div>
+				<div v-for="(item) in navList" :key="'key_' + item.id" class="item-nav" :class="{'nav-active': item.isActive}" @click="changeModule(item.id)">
+					<NavTable v-if="item.imgType === 'table'"/>
+					<NavApply v-if="item.imgType === 'apply'"/>
+					<NavGantt v-if="item.imgType === 'gantt'"/>
+					<div>{{item.name}}</div>
+				</div>
+			</div>
+		</div>
+		<div class="module">
+			<CoreDeviceReport v-if="curModule.id === 1"/>
+		</div>
+	</div>
 </template>
 
 <script>
-export default {}
+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 _ from 'lodash';
+export default {
+	data() {
+		return {
+			navList: [
+				{id: 1, name: '核心设备报表', imgType: 'table', isActive: true},
+				{id: 2, name: '说明书更新记录', imgType: 'apply', isActive: false},
+				{id: 3, name: '事项甘特图', imgType: 'gantt', isActive: false},
+			],
+			curModule: {}, // 当前选中的模块
+		}
+	},
+	components: {
+		NavTable,
+		NavApply,
+		NavGantt,
+		CoreDeviceReport
+	},
+	mounted() {
+		this.findCurModule();
+	},
+	methods: {
+		/**
+		 * 查询当前选中模块
+		 */
+		findCurModule() {
+			this.curModule = _.find(this.navList, (item) => {return item.isActive});
+		},
+		/**
+		 * 切换模块
+		 */
+		changeModule(id) {
+			_.map(this.navList, (item) => {return item.isActive = item.id === id});
+			this.findCurModule();
+		}
+	}
+};
 </script>
 
-<style>
+<style lang="less" scoped>
+.analysis-table{
+	height: calc(100% - 48px);
+	background: #F2F5F7;
+	.module-navs-container{
+		margin: 12px 0;
+		display: flex;
+		justify-content: center;
+		>div{
+			display: flex;
+		}
+	}
+	.item-nav{
+		padding-top: 12px;
+		padding-bottom: 12px;
+		padding-left: 20px;
+		padding-right: 16px;
+		display: flex;
+		align-items: center;
+		background: #fff;
+		cursor: pointer;
+		>svg{
+			margin-right: 6px;
+		}
+		>div:last-child{
+			font-size: 16px;
+			color: #1F2429;
+			line-height: 22px;
+		}
+	}
+	.nav-active{
+		background: linear-gradient(360deg,rgba(2,91,170,.1) 0%,rgba(2,91,170,0) 100%);
+		>svg{
+			stroke: #025BAA;
+		}
+		>div:last-child{
+			color: #025BAA;
+		}
+	}
+	.module{
+		width: 100%;
+		height: calc(100% - 70px);
+	}
+}
 </style>

+ 12 - 3
vue.config.js

@@ -2,15 +2,24 @@ module.exports = {
     devServer: {
         port: 8090,
         proxy: {
-            // 工程信息化服务
             '/data': {
-                target: 'http://192.168.200.87:9003',
+                target: 'http://60.205.177.43',
+                // target: 'http://localhost:6040/data/',
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {
-                    '^/data': '',
+                    '^/data': '/data',
                 },
             },
+            // // 工程信息化服务
+            // '/data': {
+            //     target: 'http://192.168.200.87:9003',
+            //     changeOrigin: true,
+            //     secure: false,
+            //     pathRewrite: {
+            //         '^/data': '',
+            //     },
+            // },
             // 万达蜂鸟服务
             '/wdfn': {
                 target: 'http://map.wanda.cn',