修改二期前端样式布局

src/api/AcquisitionStation/index.js

@@ -0,0 +1,51 @@
+import request from '@/utils/request'
+
+/**
+ * 采集站 API
+ */
+
+const AcquisitionStationApi = {
+  base: '/acquisition-station',
+  all: '/acquisition-station/all',
+  current: '/acquisition-station/current',
+}
+
+export function findAll(parameter) {
+  return request({
+    url: AcquisitionStationApi.all,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function findCurrentAcquisitionStation(parameter) {
+  return request({
+    url: AcquisitionStationApi.current,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function updateAcquisitionStation(parameter) {
+  return request({
+    url: AcquisitionStationApi.base,
+    method: 'put',
+    data: parameter
+  })
+}
+
+export function addAcquisitionStation(parameter) {
+  return request({
+    url: AcquisitionStationApi.base,
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function deleteAcquisitionStation(parameter) {
+  return request({
+    url: AcquisitionStationApi.base,
+    method: 'delete',
+    data: parameter
+  })
+}

src/api/CollectEntity/index.js

@@ -6,7 +6,7 @@ import request from '@/utils/request'
 
 const CollectEntityApi = {
   current: '/collect-entity/current',
-  info: '/collect-entity/info',
+  info: '/collect-entity/findByAcquisitionStationId',
   findById: '/collect-entity/findById',
 }
 
@@ -17,10 +17,11 @@ export function currentCollectEntity() {
   })
 }
 
-export function findCollectEntityInfo() {
+export function findCollectEntityInfo(parameter) {
   return request({
     url: CollectEntityApi.info,
     method: 'get',
+    params: parameter
   })
 }
 

src/api/DashboardLayout/index.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+/**
+ * 数据概览页面 API
+ */
+
+const DashboardLayoutApi = {
+  layout: '/dashboard-layout/layout',
+  findYMax: '/dashboard-layout/yMax',
+  generateData: '/dashboard-layout/generateData',
+}
+
+export function findLayout() {
+  return request({
+    url: DashboardLayoutApi.layout,
+    method: 'get',
+  })
+}
+
+export function findYMax() {
+  return request({
+    url: DashboardLayoutApi.findYMax,
+    method: 'get',
+  })
+}
+
+export function generateData() {
+  return request({
+    url: DashboardLayoutApi.generateData,
+    method: 'post',
+  })
+}

src/components/DataModal/common/DeviceAnalysis.vue

@@ -25,7 +25,8 @@
           </div>
           <div>
             <div>运行时长</div>
-            <div class="chart-right-text-rate">{{ durations.day.duration }}</div>
+            <div v-if="durations.day.duration" class="chart-right-text-rate">{{ durations.day.duration }}</div>
+            <div class="device-not-run-text" v-else>设备未运行</div>
           </div>
         </div>
       </div>
@@ -41,8 +42,9 @@
             <div class="chart-right-text-rate">{{ durations.week.stop }}%</div>
           </div>
           <div>
-            <div>运行时长</div>
-            <div class="chart-right-text-rate">{{ durations.week.duration }}</div>
+            <div>总运行时长</div>
+            <div v-if="durations.week.duration" class="chart-right-text-rate">{{ durations.week.duration }}</div>
+            <div class="device-not-run-text" v-else>设备未运行</div>
           </div>
         </div>
       </div>
@@ -58,8 +60,27 @@
             <div class="chart-right-text-rate">{{ durations.month.stop }}%</div>
           </div>
           <div>
-            <div>运行时长</div>
-            <div class="chart-right-text-rate">{{ durations.month.duration }}</div>
+            <div>总运行时长</div>
+            <div v-if="durations.month.duration" class="chart-right-text-rate">{{ durations.month.duration }}</div>
+            <div class="device-not-run-text" v-else>设备未运行</div>
+          </div>
+        </div>
+      </div>
+      <div class="charts-inner">
+        <jg-chart :_height="chartHeight" :option="optionThreeMonth"/>
+        <div class="chart-right-text">
+          <div>
+            <div>运行占比</div>
+            <div class="chart-right-text-rate">{{ durations.threeMonth.run }}%</div>
+          </div>
+          <div>
+            <div>停机占比</div>
+            <div class="chart-right-text-rate">{{ durations.threeMonth.stop }}%</div>
+          </div>
+          <div>
+            <div>总运行时长</div>
+            <div v-if="durations.threeMonth.duration" class="chart-right-text-rate">{{ durations.threeMonth.duration }}</div>
+            <div class="device-not-run-text" v-else>设备未运行</div>
           </div>
         </div>
       </div>
@@ -78,10 +99,16 @@ export default {
   props: {
     chartHeight: {
       type: String,
-      default: '200px'
+      default: '160px'
     },
   },
   data() {
+    // 暗蓝色#4962FC，亮蓝色#4B7CF3，紫色#dd3ee5，绿色#12e78c，橙色#fe8104，青色#01C2F9，亮黄色#F4CB29，暗黄色 #FD9E06
+    const colors = [
+      '#4962FC', '#4B7CF3', '#dd3ee5', '#12e78c',
+      '#fe8104', '#01C2F9', '#F4CB29', '#FD9E06',
+      '#a171fa'
+    ]
     return {
       selectOptions: [],
       collectEntityId: '',
@@ -91,7 +118,7 @@ export default {
           left: 'left',
           top: 'top',
           textStyle: {
-            fontSize: 18,
+            fontSize: 16,
             color: '#FFF'
           },
         },
@@ -132,7 +159,7 @@ export default {
                 value: 75,
                 name: '运行时长',
                 itemStyle: {
-                  color: '#1f73d8',
+                  color: colors[0],
                 }
               },
             ]
@@ -145,7 +172,7 @@ export default {
           left: 'left',
           top: 'top',
           textStyle: {
-            fontSize: 18,
+            fontSize: 16,
             color: '#FFF'
           },
         },
@@ -187,7 +214,7 @@ export default {
                 value: 75,
                 name: '运行时长',
                 itemStyle: {
-                  color: '#854def',
+                  color: colors[3],
                 }
               },
             ]
@@ -200,7 +227,7 @@ export default {
           left: 'left',
           top: 'top',
           textStyle: {
-            fontSize: 18,
+            fontSize: 16,
             color: '#FFF'
           },
         },
@@ -241,7 +268,61 @@ export default {
                 value: 75,
                 name: '运行时长',
                 itemStyle: {
-                  color: '#5329e0',
+                  color: colors[8],
+                }
+              },
+            ]
+          }
+        ]
+      },
+      optionThreeMonth: {
+        title: {
+          text: '三个月内运行统计',
+          left: 'left',
+          top: 'top',
+          textStyle: {
+            fontSize: 16,
+            color: '#FFF'
+          },
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '70%'],
+            center: ['60%', '60%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 20,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 25,
+                name: '停机时长',
+                itemStyle: {
+                  color: '#999999'
+                }
+              },
+              {
+                value: 76,
+                name: '运行时长',
+                itemStyle: {
+                  color: '#f18c27',
                 }
               },
             ]
@@ -264,6 +345,11 @@ export default {
           stop: 0,
           duration: ''
         },
+        threeMonth: {
+          run: 0,
+          stop: 0,
+          duration: ''
+        },
       },
     }
   },
@@ -322,6 +408,14 @@ export default {
           this.durations.month.run = Math.round(res.data.month.runDurationRate * 100)
           this.durations.month.stop = Math.round(res.data.month.stopDurationRate * 100)
           this.durations.month.duration = res.data.month.duration
+
+          const threeMonth = this.optionThreeMonth.series
+          threeMonth[0].data[0].value = res.data.threeMonth.stopDuration
+          threeMonth[0].data[1].value = res.data.threeMonth.runDuration
+          this.optionThreeMonth.series = threeMonth
+          this.durations.threeMonth.run = Math.round(res.data.threeMonth.runDurationRate * 100)
+          this.durations.threeMonth.stop = Math.round(res.data.threeMonth.stopDurationRate * 100)
+          this.durations.threeMonth.duration = res.data.threeMonth.duration
         } else {
           this.$message.error(res.message)
         }
@@ -372,6 +466,11 @@ export default {
           font-size: 20px;
           font-weight: bolder;
         }
+        .device-not-run-text {
+          margin-top: 8px;
+          font-size: 16px;
+          color: #999999;
+        }
       }
     }
 

src/components/DataModal/common/RealtimeLine.vue

@@ -19,21 +19,18 @@
 <script>
 import { historyChartAllData } from '@/api/HistoryData'
 import { findAll } from '@/api/Workshop'
+import { findLayout, findYMax } from '@/api/DashboardLayout'
 import moment from 'moment'
 import { mapState } from 'vuex'
 
+const codeMap = {
+  ELECTRIC: '电流',
+  VIBRATION: '振动',
+  NOISE: '噪声'
+}
+
 export default {
   name: 'RealtimeLine',
-  props: {
-    x: {
-      type: Number,
-      default: 3
-    },
-    y: {
-      type: Number,
-      default: 2
-    },
-  },
   data() {
     return {
       chartLoading: true,
@@ -43,6 +40,9 @@ export default {
       chartList: {},
       initCompleted: false,
       canUpdate: true,
+      x: 3,
+      y: 3,
+      yMaxMap: {},
     }
   },
   computed: {
@@ -51,7 +51,6 @@ export default {
       lastTime: (state, getter) => state.queue.lastTime,
     }),
     chartBoxStyle() {
-
       const baseX = this.x === 1 ? 99 : 90
       const baseY = this.y === 1 ? 99 : 90
       const baseMargin = this.x === 1 ? 10000 : 3
@@ -69,7 +68,7 @@ export default {
         this.updateChart()
       }
     },
-    workshopList(newVal) {
+    async workshopList(newVal) {
       if (newVal) {
         this.$nextTick(() => {
           this.chartLoading = false
@@ -81,12 +80,17 @@ export default {
           this.chartList = {}
           for (const key in this.workshopList) {
             this.chartList[key] = this.$echarts.init(document.getElementById(key))
+
+            const tagList = this.workshopList[key].tagList
+
+            const legendData = tagList.map(e => this.getLegendName(e.name))
+            const startType = codeMap[this.workshopList[key].collectEntityList[0].startType]
+            const collectEntityId = this.workshopList[key].collectEntityList[0].id
+            const legendSelected = {}
+            legendData.forEach(e => {
+              legendSelected[e] = e === startType
+            })
             const options = {
-              /*color: ['#1f73d8', '#854def', '#5329e0', '#80FFA5', '#00DDFF', '#FFBF00', '#FF0087'],*/
-              color: [
-                '#ef0505', '#f1ca05', '#17f107',
-                '#ec0ad5', '#00DDFF', '#3bf1e2'
-              ],
               legend: {
                 right: '4%',
                 icon: 'roundRect',
@@ -94,6 +98,8 @@ export default {
                   fontSize: 12,
                   color: '#FFFFFF',
                 },
+                data: legendData,
+                selected: legendSelected,
               },
               tooltip: {
                 trigger: 'axis',
@@ -107,7 +113,7 @@ export default {
               grid: {
                 top: '15%',
                 left: '5%',
-                right: '6%',
+                right: '10%',
                 bottom: '3%',
                 containLabel: true
               },
@@ -168,13 +174,36 @@ export default {
                 axisLabel: { //y轴文字的配置
                   color: '#FFF', //Y轴内容文字颜色
                 },
-                max: value => value.max < 5 ? 5 : 100,
+                max: this.yMaxMap[collectEntityId]
               },
               series: []
             }
-            for (const e of this.workshopList[key].tagList) {
+            for (const e of tagList) {
+              const name = this.getLegendName(e.name)
               options.series.push(
-                { name: e.name, type: 'line', smooth: true, symbol: 'none', connectNulls: true, data: [] }
+                {
+                  name,
+                  color: this.getLineColor(name),
+                  type: 'line',
+                  smooth: true,
+                  symbol: 'none',
+                  connectNulls: true,
+                  data: [],
+                  markLine: {
+                    symbol: ['none', 'none'],
+                    data: [
+                      {
+                        name: '告警线',
+                        yAxis: e.warnMaxValue
+                      },
+                    ],
+                    lineStyle: {
+                      type: 'solid',
+                      color: '#ef0505',
+                    },
+                    animation: false,
+                  }
+                }
               )
             }
             this.chartList[key].setOption(options)
@@ -186,9 +215,24 @@ export default {
     },
   },
   methods: {
-    initData() {
+    async initData() {
       this.initCompleted = false
-      findAll().then(res => {
+      await findLayout().then(layOutRes => {
+        if (layOutRes && layOutRes.code === '200') {
+          this.x = layOutRes.data.xQuantity
+          this.y = layOutRes.data.yQuantity
+        }
+      })
+      await findYMax().then(res => {
+        if (res && res.code === '200') {
+          const yMaxMap = {}
+          res.data.forEach(e => {
+            yMaxMap[e.collectEntityId] = e.yMax
+          })
+          this.yMaxMap = yMaxMap
+        }
+      })
+      await findAll().then(res => {
         if (res && res.code === '200') {
           const obj = {}
           res.data.forEach((val, index) => {
@@ -197,6 +241,7 @@ export default {
           this.workshopList = obj
         }
       })
+
     },
     async fetchData() {
       const params = {
@@ -226,6 +271,28 @@ export default {
         }
       })
     },
+    getLineColor(name) {
+      const colors = ['#17f107', '#ec0ad5', '#00DDFF', '#f1ca05']
+      switch (name) {
+        case '电流':
+          return colors[0]
+        case '振动':
+          return colors[1]
+        case '噪声':
+          return colors[2]
+        default:
+          return colors[3]
+      }
+    },
+    getLegendName(name) {
+      if (name.endsWith('电流')) {
+        return '电流'
+      } else if (name.endsWith('振动')) {
+        return '振动'
+      } else if (name.endsWith('噪声')) {
+        return '噪声'
+      }
+    },
     updateChart() {
       this.canUpdate = false
       try {
@@ -276,6 +343,7 @@ export default {
       }
       .chart-box-content {
         flex: 1;
+        padding-top: 8px;
       }
     }
 

src/components/NavigationName/index.vue

@@ -13,6 +13,10 @@
           系统时间: {{ now }}
         </div>
 
+        <div>
+          <slot/>
+        </div>
+
         <div v-if="showOther" style="margin-left: 20px">
           <el-button @click="showDataWindow">数据概览</el-button>
         </div>

src/store/modules/company.js

@@ -1,49 +1,25 @@
 import { projectConfig } from '@/assets/mock'
-
 import { current } from '@/api/ClientInfo'
 
-// const projectKey = 'lyqy-No.7-1'
-// const projectKey = 'lyqy-No.7-2'
-// const projectKey = 'lyqy-high-energy-center-No.1'
-// const projectKey = 'lyqy-high-energy-center-No.2'
-// const projectKey = 'lyqy-high-energy-center-No.3'
-const projectKey = 'lyqy-No.8-1'
-// const projectKey = 'lyqy-No.8-2'
-// const projectKey = 'lyqy-No.8-3'
-// const projectKey = 'lyqy-No.8-4'
-// const projectKey = 'lyqy-No.103-1'
-// const projectKey = 'lyqy-No.301-1'
-// const projectKey = 'lyqy-No.402-1'
-// const projectKey = 'lyqy-No.1-1'
-
 // 八分场底牌车间200立方
 
 const company = {
   state: {
-    projectKey,
     clientCode: '',
-    systemTitle: 'JG-ADC工业生产监测系统',
-    companyName: projectConfig[projectKey].companyName,
-    companyEnglishName: projectConfig[projectKey].companyEnglishName,
+    companyName: '',
     factoryName: '',
-    pageConfig: projectConfig[projectKey].pageConfig,
-    workshop: '',
+    acquisitionStationId: null
   },
 
   mutations: {
-    SET_SYSTEM_TITLE: (state, payload) => {
-      // console.log('aaaaaaaaaa', payload)
-      state.systemTitle = payload
+    SET_ACQUISITION_STATION_ID: (state, payload) => {
+      state.acquisitionStationId = payload
     },
     SET_CLIENT_CODE: (state, payload) => {
-      // console.log('aaaaaaaaaa', payload)
       state.clientCode = payload.code
       state.companyName = payload.company
       state.factoryName = payload.desc
     },
-    SET_WORKSHOP_NAME: (state, payload) => {
-      state.workshop = payload
-    }
   },
 
   actions: {

src/views/Data.vue

@@ -1,6 +1,22 @@
 <template>
   <div class="realtime-data">
-    <navigation-name :msg="companyName" show-time show-other/>
+    <navigation-name :msg="companyName" show-time show-other>
+      <div style="margin-left: 20px;">
+        <el-select
+          v-model="acquisitionStationId"
+          popper-class="jg-select"
+          :popper-append-to-body="false"
+          placeholder="采集站数据"
+          @change="changeAcquisitionStation"
+        >
+          <el-option
+            v-for="(item, index) in acquisitionStationList"
+            :key="index"
+            :label="item.name"
+            :value="item.id"/>
+        </el-select>
+      </div>
+    </navigation-name>
     <div style="font-weight: bolder;font-size: 30px;padding-top: 16px;text-align: center">
       {{ factoryName }}
       <!--数据显示-->
@@ -65,6 +81,7 @@ import PositionModal from '@/components/PositionModal'
 import { mapState, mapMutations } from 'vuex'
 import { findCollectEntityInfo } from '@/api/CollectEntity'
 import { findColumnsByTableName } from '@/api/TableConfig'
+import { findAll, findCurrentAcquisitionStation, updateAcquisitionStation } from '@/api/AcquisitionStation'
 
 export default {
   name: 'Data',
@@ -76,23 +93,12 @@ export default {
     return {
       tableColumns: [],
       tableDataWrapper: [],
-      timer: null,
+      acquisitionStationList: [],
+      acquisitionStationId: null,
     }
   },
   mounted () {
-    this.timer = setInterval(() => {
-      if (this.clientCode) {
-        this.fetchData()
-        window.clearInterval(this.timer)
-        this.timer = null
-      }
-    }, 1000)
-  },
-  beforeDestroy () {
-    if (this.timer) {
-      window.clearInterval(this.timer)
-      this.timer = null
-    }
+    this.fetchData()
   },
   computed: {
     ...mapState({
@@ -122,7 +128,7 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(['SET_WORKSHOP_NAME']),
+    ...mapMutations(['SET_ACQUISITION_STATION_ID']),
     getPositionArr() {
       const obj = {}
       this.tableData.forEach(e => {
@@ -159,32 +165,43 @@ export default {
       }
       this.$refs.positionModal.showModal(row.id, entity)
     },
-    fetchData() {
-      findColumnsByTableName({
+    async fetchData() {
+      await findAll().then(res => {
+        this.acquisitionStationList = res.data
+      })
+      await findCurrentAcquisitionStation().then(res => {
+        this.acquisitionStationId = res.data.id
+        this.SET_ACQUISITION_STATION_ID(res.data.id)
+      })
+      await findColumnsByTableName({
         tableName: 'Data',
         clientCode: this.clientCode
       }).then(res => {
         console.log('findColumnsByTableName =>', res.data)
         if (res && res.code === '200') {
           this.tableColumns = res.data
-
-          findCollectEntityInfo().then(res => {
-            console.log('findCollectEntityInfo =>', res.data)
-            this.SET_WORKSHOP_NAME(res.data[0].collectStationName)
-            // 按照实体分类, 对应第二列
-            const tableDataWrapper = []
-            handleData(tableDataWrapper, res.data)
-            this.tableDataWrapper = tableDataWrapper
-          })
         } else {
           this.$message.error(res.message)
         }
       })
+      await this.getCollectEntity()
+    },
+    getCollectEntity() {
+      const entityParams = {
+        acquisitionStationId: this.acquisitionStationId
+      }
+      findCollectEntityInfo(entityParams).then(res => {
+        console.log('findCollectEntityInfo =>', res.data)
+        // 按照实体分类, 对应第二列
+        const tableDataWrapper = []
+        handleData(tableDataWrapper, res.data)
+        this.tableDataWrapper = tableDataWrapper
+      })
       const handleData = (dataArr, data) => {
         for (const item of data) {
           const obj = {
             id: item.id,
-            first: item.collectStationName,
+            first: item.acquisitionStationName,
             second: item.entityName,
             startType: item.startType,
             limitValue: item.limitValue,
@@ -199,12 +216,16 @@ export default {
         }
       }
     },
-  },
-  watch: {
-    clientCode(newVal) {
-      if (newVal) {
-        this.fetchData()
+    async changeAcquisitionStation(acquisitionStationId) {
+      console.log('切换采集站', acquisitionStationId)
+      this.SET_ACQUISITION_STATION_ID(acquisitionStationId)
+      const params = {
+        id: acquisitionStationId,
+        status: 1
       }
+      await updateAcquisitionStation(params).then(res => {
+        this.getCollectEntity()
+      })
     },
   },
 }
@@ -247,4 +268,48 @@ export default {
       height: 100%;
     }
   }
+  /deep/ .el-input__inner {
+    background-color: #ebebeb;
+    box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
+    border: none;
+    font-size: 16px;
+    color: #666666;
+  }
+
+  /deep/ .el-input-group__append, .el-input-group__prepend {
+    background-color: transparent;
+    font-size: 14px;
+    box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.05rem -0.05rem 0.05rem #FFFFFF;
+    color: #333333;
+    border: none;
+    border-radius: 4px;
+    padding: 0 10px;
+    width: 1px;
+    white-space: nowrap;
+  }
+
+  /deep/ .jg-select {
+    padding: 10px;
+    background-color: #ebebeb;
+    box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;
+
+    .el-select-dropdown__item {
+      box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;
+      margin: 8px 3px;
+      border-radius: 5px;
+    }
+  }
+
+  /deep/ .el-select-dropdown__item.selected {
+    font-weight: normal;
+    color: #FFFFFF;
+    background-color: #A20D13;
+    border-radius: 5px;
+    box-shadow: inset 0.2rem 0.2rem 0.5rem #6E090C, inset -0.2rem -0.2rem 0.5rem #C71016;
+  }
+
+  /deep/ .popper__arrow {
+    display: none;
+  }
+
 </style>