Compare commits
	
		
			11 Commits
		
	
	
		
			989f9b9976
			...
			master
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| e238691040 | |||
| 942da81c4f | |||
| 637d181638 | |||
| 159edc9fc3 | |||
| 0eaf7fd13e | |||
| c98608a941 | |||
| 4d7d2e0c3d | |||
| 50670208c1 | |||
| 
						 | 
					f0714123b7 | ||
| 4200801c7b | |||
| f4ba65a25f | 
@@ -248,7 +248,8 @@ export default {
 | 
			
		||||
      const password = Cookie.get('password')
 | 
			
		||||
 | 
			
		||||
      if (username && password) {
 | 
			
		||||
        window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
 | 
			
		||||
        window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}`
 | 
			
		||||
        // window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    winBlur() {
 | 
			
		||||
 
 | 
			
		||||
@@ -6,6 +6,7 @@
 | 
			
		||||
import echarts from 'echarts'
 | 
			
		||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
 | 
			
		||||
import { Random } from 'mockjs'
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
 | 
			
		||||
class ChartOption {
 | 
			
		||||
  constructor() {
 | 
			
		||||
@@ -50,16 +51,18 @@ class ChartOption {
 | 
			
		||||
      formatter: params => {
 | 
			
		||||
        return `
 | 
			
		||||
            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
 | 
			
		||||
              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
 | 
			
		||||
              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
 | 
			
		||||
  params[0].axisValue
 | 
			
		||||
}</h2>
 | 
			
		||||
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
 | 
			
		||||
  this.color[0]
 | 
			
		||||
              }"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
 | 
			
		||||
}"></span><span>${params[0].seriesName}: ${params[0].value}V</span></span>
 | 
			
		||||
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
 | 
			
		||||
  this.color[1]
 | 
			
		||||
              }"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
 | 
			
		||||
}"></span><span>${params[1].seriesName}: ${params[1].value}%</span></span>
 | 
			
		||||
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
 | 
			
		||||
  this.color[2]
 | 
			
		||||
              }"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
 | 
			
		||||
}"></span><span>${params[2].seriesName}: ${params[2].value}°C</span></span>
 | 
			
		||||
            </div>
 | 
			
		||||
            `
 | 
			
		||||
      }
 | 
			
		||||
@@ -67,7 +70,15 @@ class ChartOption {
 | 
			
		||||
 | 
			
		||||
    this.xAxis = {
 | 
			
		||||
      type: 'category',
 | 
			
		||||
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
 | 
			
		||||
      // boundaryGap: false,
 | 
			
		||||
      data: Array(7)
 | 
			
		||||
        .fill(1)
 | 
			
		||||
        .map((_, idx) => {
 | 
			
		||||
          const d = moment()
 | 
			
		||||
          const day = idx ? d.subtract(idx, 'd') : d
 | 
			
		||||
          return day.format('M-DD')
 | 
			
		||||
        })
 | 
			
		||||
        .reverse(),
 | 
			
		||||
      axisTick: { show: false },
 | 
			
		||||
      axisLabel: {
 | 
			
		||||
        color: '#fff9',
 | 
			
		||||
@@ -100,10 +111,11 @@ class ChartOption {
 | 
			
		||||
        },
 | 
			
		||||
        axisLabel: {
 | 
			
		||||
          color: '#fff9',
 | 
			
		||||
          fontSize: 10
 | 
			
		||||
          fontSize: 10,
 | 
			
		||||
          formatter: '{value}%'
 | 
			
		||||
        },
 | 
			
		||||
        splitLine: {
 | 
			
		||||
          show: true,
 | 
			
		||||
          show: false,
 | 
			
		||||
          lineStyle: {
 | 
			
		||||
            color: '#fff1',
 | 
			
		||||
            type: 'dotted'
 | 
			
		||||
@@ -133,7 +145,7 @@ class ChartOption {
 | 
			
		||||
        splitLine: {
 | 
			
		||||
          show: true,
 | 
			
		||||
          lineStyle: {
 | 
			
		||||
            color: '#fff1',
 | 
			
		||||
            color: '#fff3',
 | 
			
		||||
            type: 'dotted'
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
@@ -149,10 +161,13 @@ class ChartOption {
 | 
			
		||||
            width: 1
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        // min: 'dataMin',
 | 
			
		||||
        min: 20,
 | 
			
		||||
        max: 50,
 | 
			
		||||
        type: 'value',
 | 
			
		||||
        splitNumber: 4,
 | 
			
		||||
        splitLine: {
 | 
			
		||||
          show: true,
 | 
			
		||||
          show: false,
 | 
			
		||||
          lineStyle: {
 | 
			
		||||
            color: '#fff1',
 | 
			
		||||
            type: 'dotted'
 | 
			
		||||
@@ -160,41 +175,84 @@ class ChartOption {
 | 
			
		||||
        },
 | 
			
		||||
        axisLabel: {
 | 
			
		||||
          color: '#fff9',
 | 
			
		||||
          fontSize: 10
 | 
			
		||||
          fontSize: 10,
 | 
			
		||||
          formatter: '{value}°C'
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
 | 
			
		||||
    this.series = [
 | 
			
		||||
      {
 | 
			
		||||
        name: 'ABC三相电压/v',
 | 
			
		||||
        type: 'line',
 | 
			
		||||
        yAxisIndex: 0,
 | 
			
		||||
        // smooth: true,
 | 
			
		||||
        emphasis: {
 | 
			
		||||
          focus: 'series'
 | 
			
		||||
        },
 | 
			
		||||
        data: Array(12)
 | 
			
		||||
          .fill(1)
 | 
			
		||||
          .map(_ => Random.integer(30, 100)),
 | 
			
		||||
        symbol: 'circle',
 | 
			
		||||
        symbolSize: 0.2,
 | 
			
		||||
        showSymbol: false
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        name: 'ABC三相电流/a',
 | 
			
		||||
        name: '电压',
 | 
			
		||||
        type: 'line',
 | 
			
		||||
        yAxisIndex: 1,
 | 
			
		||||
        // smooth: true,
 | 
			
		||||
        emphasis: {
 | 
			
		||||
          focus: 'series'
 | 
			
		||||
        },
 | 
			
		||||
        data: Array(12)
 | 
			
		||||
        data: Array(7)
 | 
			
		||||
          .fill(1)
 | 
			
		||||
          .map(_ => Random.integer(30, 100)),
 | 
			
		||||
          // .map(_ => Random.integer(30, 100)),
 | 
			
		||||
          .map(_ => Random.integer(360, 390)),
 | 
			
		||||
        symbol: 'circle',
 | 
			
		||||
        symbolSize: 0.2,
 | 
			
		||||
        showSymbol: false
 | 
			
		||||
        showSymbol: false,
 | 
			
		||||
        areaStyle: {
 | 
			
		||||
          color: {
 | 
			
		||||
            type: 'linear',
 | 
			
		||||
            x: 0,
 | 
			
		||||
            y: 0,
 | 
			
		||||
            x2: 0,
 | 
			
		||||
            y2: 1,
 | 
			
		||||
            colorStops: [
 | 
			
		||||
              {
 | 
			
		||||
                offset: 0,
 | 
			
		||||
                color: '#E0209466' // 0% 处的颜色
 | 
			
		||||
              },
 | 
			
		||||
              {
 | 
			
		||||
                offset: 1,
 | 
			
		||||
                color: 'transparent' // 100% 处的颜色
 | 
			
		||||
              }
 | 
			
		||||
            ],
 | 
			
		||||
            global: false // 缺省为 false
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        name: '电流',
 | 
			
		||||
        type: 'line',
 | 
			
		||||
        yAxisIndex: 0,
 | 
			
		||||
        // smooth: true,
 | 
			
		||||
        emphasis: {
 | 
			
		||||
          focus: 'series'
 | 
			
		||||
        },
 | 
			
		||||
        data: Array(7)
 | 
			
		||||
          .fill(1)
 | 
			
		||||
          .map(_ => Random.integer(76, 85)),
 | 
			
		||||
        // .map(_ => Random.integer(30, 100)),
 | 
			
		||||
        symbol: 'circle',
 | 
			
		||||
        symbolSize: 0.2,
 | 
			
		||||
        showSymbol: false,
 | 
			
		||||
        areaStyle: {
 | 
			
		||||
          color: {
 | 
			
		||||
            type: 'linear',
 | 
			
		||||
            x: 0,
 | 
			
		||||
            y: 0,
 | 
			
		||||
            x2: 0,
 | 
			
		||||
            y2: 1,
 | 
			
		||||
            colorStops: [
 | 
			
		||||
              {
 | 
			
		||||
                offset: 0,
 | 
			
		||||
                color: '#F0D63C66' // 0% 处的颜色
 | 
			
		||||
              },
 | 
			
		||||
              {
 | 
			
		||||
                offset: 1,
 | 
			
		||||
                color: 'transparent' // 100% 处的颜色
 | 
			
		||||
              }
 | 
			
		||||
            ],
 | 
			
		||||
            global: false // 缺省为 false
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        name: '电缆温度',
 | 
			
		||||
@@ -204,12 +262,33 @@ class ChartOption {
 | 
			
		||||
        emphasis: {
 | 
			
		||||
          focus: 'series'
 | 
			
		||||
        },
 | 
			
		||||
        data: Array(12)
 | 
			
		||||
        data: Array(7)
 | 
			
		||||
          .fill(1)
 | 
			
		||||
          .map(_ => Random.integer(30, 100)),
 | 
			
		||||
          // .map(_ => Random.integer(20, 55)),
 | 
			
		||||
          .map(_ => Random.integer(36, 45)),
 | 
			
		||||
        symbol: 'circle',
 | 
			
		||||
        symbolSize: 0.2,
 | 
			
		||||
        showSymbol: false
 | 
			
		||||
        showSymbol: false,
 | 
			
		||||
        areaStyle: {
 | 
			
		||||
          color: {
 | 
			
		||||
            type: 'linear',
 | 
			
		||||
            x: 0,
 | 
			
		||||
            y: 0,
 | 
			
		||||
            x2: 0,
 | 
			
		||||
            y2: 1,
 | 
			
		||||
            colorStops: [
 | 
			
		||||
              {
 | 
			
		||||
                offset: 0,
 | 
			
		||||
                color: '#1A99FF66' // 0% 处的颜色
 | 
			
		||||
              },
 | 
			
		||||
              {
 | 
			
		||||
                offset: 1,
 | 
			
		||||
                color: 'transparent' // 100% 处的颜色
 | 
			
		||||
              }
 | 
			
		||||
            ],
 | 
			
		||||
            global: false // 缺省为 false
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    ]
 | 
			
		||||
  }
 | 
			
		||||
@@ -232,7 +311,7 @@ class ChartOption {
 | 
			
		||||
        if (key === 'colorStops') newOption[key] = option[key]
 | 
			
		||||
        else if (
 | 
			
		||||
          typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
 | 
			
		||||
          ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
 | 
			
		||||
          ['splitNumber', 'x', 'x2', 'min', 'max', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
 | 
			
		||||
        ) {
 | 
			
		||||
          newOption[key] = calcSize(option[key])
 | 
			
		||||
        } else newOption[key] = this.optionFilter(option[key], calcSize)
 | 
			
		||||
@@ -291,8 +370,8 @@ export default {
 | 
			
		||||
      return num * beilv
 | 
			
		||||
    },
 | 
			
		||||
    setChartOption() {
 | 
			
		||||
      let chartOption = new ChartOption()
 | 
			
		||||
      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
 | 
			
		||||
      const cOption = new ChartOption()
 | 
			
		||||
      this.chart.setOption(cOption.optionFilter(cOption.option, this.calcSize))
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,9 +1,9 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="public-consume__inner">
 | 
			
		||||
    <div>
 | 
			
		||||
    <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
 | 
			
		||||
      <TechyBox class="water-consume">
 | 
			
		||||
        <div class="header-part">
 | 
			
		||||
          <img src="./assets/consume/s.png" width="32" height="32" alt="water" />
 | 
			
		||||
          <img src="./assets/consume/s.png" width="32" height="32" alt="water">
 | 
			
		||||
          <span>水</span>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="content-part">
 | 
			
		||||
@@ -35,10 +35,10 @@
 | 
			
		||||
      </TechyBox>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <div>
 | 
			
		||||
    <div style="min-height: calc(106px * var(--beilv)); flex: 1;">
 | 
			
		||||
      <TechyBox class="gas-consume">
 | 
			
		||||
        <div class="header-part  ">
 | 
			
		||||
          <img src="./assets/consume/gas.png" width="32" height="32" alt="qi" />
 | 
			
		||||
          <img src="./assets/consume/gas.png" width="32" height="32" alt="qi">
 | 
			
		||||
          <span>气</span>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="content-part">
 | 
			
		||||
@@ -46,31 +46,31 @@
 | 
			
		||||
            <span class="name">氧    气</span>
 | 
			
		||||
            <span class="diy-process-bar bar-width-4 color-1" />
 | 
			
		||||
            <span class="amount">
 | 
			
		||||
              23Pa
 | 
			
		||||
              0.42MPa
 | 
			
		||||
            </span>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <span class="name">CDA</span>
 | 
			
		||||
            <span class="diy-process-bar bar-width-5 color-2" />
 | 
			
		||||
            <span class="amount">
 | 
			
		||||
              39Pa
 | 
			
		||||
              0.61MPa
 | 
			
		||||
            </span>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="row">
 | 
			
		||||
            <span class="name">天然气</span>
 | 
			
		||||
            <span class="diy-process-bar bar-width-6 color-3" />
 | 
			
		||||
            <span class="amount">
 | 
			
		||||
              239pa
 | 
			
		||||
              0.31MPa
 | 
			
		||||
            </span>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
      </TechyBox>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
 | 
			
		||||
    <div style="min-height: calc(168px * var(--beilv)); flex: 1;">
 | 
			
		||||
      <TechyBox class="dian-consume">
 | 
			
		||||
        <div class="header-part">
 | 
			
		||||
          <img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
 | 
			
		||||
          <img src="./assets/consume/d.png" width="32" height="32" alt="dian">
 | 
			
		||||
          <span>电</span>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div style="height: 100%; flex: 1; overflow: hidden">
 | 
			
		||||
@@ -79,30 +79,29 @@
 | 
			
		||||
      </TechyBox>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
 | 
			
		||||
    <!-- <div style="min-height: calc(144px * var(--beilv)); flex: 1;">
 | 
			
		||||
      <TechyBox class="elec-consume">
 | 
			
		||||
        <div class="header-part">
 | 
			
		||||
          <img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
 | 
			
		||||
          <span>发电</span>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div style="height: 100%; flex: 1; overflow: hidden">
 | 
			
		||||
          <!-- <FadianChart /> -->
 | 
			
		||||
          <DianChart id="fa-dian" key="fa-dian" />
 | 
			
		||||
        </div>
 | 
			
		||||
      </TechyBox>
 | 
			
		||||
    </div>
 | 
			
		||||
    </div> -->
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import TechyBarChart from './TechyBarChart.vue'
 | 
			
		||||
import TechyLineChart from './TechyLineChart.vue'
 | 
			
		||||
// import TechyBarChart from './TechyBarChart.vue'
 | 
			
		||||
// import TechyLineChart from './TechyLineChart.vue'
 | 
			
		||||
import TechyBox from './TechyBox.vue'
 | 
			
		||||
import FadianChart from './FadianChart.vue'
 | 
			
		||||
// import FadianChart from './FadianChart.vue'
 | 
			
		||||
import DianChart from './DianChart.vue'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'LeftContentPublicConsume',
 | 
			
		||||
  components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
 | 
			
		||||
  components: { TechyBox, DianChart },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {}
 | 
			
		||||
  },
 | 
			
		||||
@@ -153,17 +152,23 @@ export default {
 | 
			
		||||
.header-part > span {
 | 
			
		||||
  color: #fffc;
 | 
			
		||||
  font-size: calc(12px * var(--beilv));
 | 
			
		||||
  line-height: calc(12px * var(--beilv));
 | 
			
		||||
  white-space: nowrap;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.content-part {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
  font-size: calc(12px * var(--beilv));
 | 
			
		||||
  color: #fff9;
 | 
			
		||||
  height: calc(48px * var(--beilv));
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  /* height: calc(48px * var(--beilv)); */
 | 
			
		||||
  flex: 1 1;
 | 
			
		||||
  gap: calc(4px * var(--beilv));
 | 
			
		||||
  gap: calc(10px * var(--beilv));
 | 
			
		||||
  color: #fff9;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.content-part span.name {
 | 
			
		||||
  font-size: calc(12px * var(--beilv));
 | 
			
		||||
  line-height: calc(14px * var(--beilv));
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.row {
 | 
			
		||||
@@ -181,6 +186,7 @@ export default {
 | 
			
		||||
 | 
			
		||||
.row > .amount {
 | 
			
		||||
  text-align: right;
 | 
			
		||||
  width: 15%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.diy-process-bar {
 | 
			
		||||
@@ -211,13 +217,13 @@ export default {
 | 
			
		||||
  width: 99%;
 | 
			
		||||
}
 | 
			
		||||
.bar-width-4::after {
 | 
			
		||||
  width: 20%;
 | 
			
		||||
  width: 42%;
 | 
			
		||||
}
 | 
			
		||||
.bar-width-5::after {
 | 
			
		||||
  width: 29%;
 | 
			
		||||
  width: 61%;
 | 
			
		||||
}
 | 
			
		||||
.bar-width-6::after {
 | 
			
		||||
  width: 79%;
 | 
			
		||||
  width: 31%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.diy-process-bar.color-1::after {
 | 
			
		||||
 
 | 
			
		||||
@@ -6,6 +6,7 @@
 | 
			
		||||
import echarts from 'echarts'
 | 
			
		||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
 | 
			
		||||
import { Random } from 'mockjs'
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
 | 
			
		||||
class ChartOption {
 | 
			
		||||
  constructor() {
 | 
			
		||||
@@ -74,16 +75,18 @@ class ChartOption {
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    let d = new Date()
 | 
			
		||||
    this.xAxis = {
 | 
			
		||||
      type: 'category',
 | 
			
		||||
      boundaryGap: false,
 | 
			
		||||
      // boundaryGap: false,
 | 
			
		||||
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
 | 
			
		||||
      data: Array(7)
 | 
			
		||||
        .fill(0)
 | 
			
		||||
        .map((_, idx) => {
 | 
			
		||||
          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
 | 
			
		||||
        }),
 | 
			
		||||
          const d = moment()
 | 
			
		||||
          const day = idx ? d.subtract(idx, 'd') : d
 | 
			
		||||
          return day.format('M-DD')
 | 
			
		||||
        })
 | 
			
		||||
        .reverse(),
 | 
			
		||||
      axisTick: {
 | 
			
		||||
        show: false
 | 
			
		||||
      },
 | 
			
		||||
@@ -244,7 +247,7 @@ export default {
 | 
			
		||||
      return num * beilv
 | 
			
		||||
    },
 | 
			
		||||
    setChartOption() {
 | 
			
		||||
      let chartOption = new ChartOption()
 | 
			
		||||
      const chartOption = new ChartOption()
 | 
			
		||||
      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
@@ -9,13 +9,14 @@
 | 
			
		||||
          list: [32, 65, 65, 54, 37, 77]
 | 
			
		||||
        }
 | 
			
		||||
      ]" /> -->
 | 
			
		||||
  <div class="techy-chart" ref="realtimeLineChart"></div>
 | 
			
		||||
  <div ref="realtimeLineChart" class="techy-chart" />
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import echarts from 'echarts'
 | 
			
		||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
 | 
			
		||||
import { Random } from 'mockjs'
 | 
			
		||||
import moment from 'moment'
 | 
			
		||||
 | 
			
		||||
class ChartOption {
 | 
			
		||||
  constructor() {
 | 
			
		||||
@@ -59,7 +60,9 @@ class ChartOption {
 | 
			
		||||
      formatter: params => {
 | 
			
		||||
        return `
 | 
			
		||||
            <div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
 | 
			
		||||
              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
 | 
			
		||||
              <h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
 | 
			
		||||
  params[0].axisValue
 | 
			
		||||
}</h2>
 | 
			
		||||
              <span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
 | 
			
		||||
  this.color[0]
 | 
			
		||||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
 | 
			
		||||
@@ -77,14 +80,16 @@ class ChartOption {
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    let d = new Date()
 | 
			
		||||
    this.xAxis = {
 | 
			
		||||
      type: 'category',
 | 
			
		||||
      data: Array(7)
 | 
			
		||||
        .fill(1)
 | 
			
		||||
        .map((_, idx) => {
 | 
			
		||||
          return d.getMonth() + 1 + '-' + (d.getDate() + idx)
 | 
			
		||||
        }),
 | 
			
		||||
          const d = moment()
 | 
			
		||||
          const day = idx ? d.subtract(idx, 'd') : d
 | 
			
		||||
          return day.format('M-DD')
 | 
			
		||||
        })
 | 
			
		||||
        .reverse(),
 | 
			
		||||
      axisTick: { show: false },
 | 
			
		||||
      axisLabel: {
 | 
			
		||||
        color: '#fff9',
 | 
			
		||||
@@ -377,7 +382,7 @@ export default {
 | 
			
		||||
      return num * beilv
 | 
			
		||||
    },
 | 
			
		||||
    setChartOption() {
 | 
			
		||||
      let chartOption = new ChartOption()
 | 
			
		||||
      const chartOption = new ChartOption()
 | 
			
		||||
      this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <header class="techy-header">
 | 
			
		||||
    <img class="logo-img" src="./logo.png" alt="cnbm" />
 | 
			
		||||
    <img class="logo-img" src="./logo.png" alt="cnbm">
 | 
			
		||||
    <span class="techy-header__title">{{ headTitle }}</span>
 | 
			
		||||
 | 
			
		||||
    <div class="date">{{ now.format('yyyy.MM.DD') }}</div>
 | 
			
		||||
@@ -90,7 +90,8 @@ export default {
 | 
			
		||||
        const password = Cookie.get('password')
 | 
			
		||||
 | 
			
		||||
        if (username && password) {
 | 
			
		||||
          window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
 | 
			
		||||
          window.location = `http://main.cnbmai.picaiba.com/#/?username=${username}&password=${password}`
 | 
			
		||||
          // window.location = `http://192.168.1.103:9527/#/?username=${username}&password=${password}`
 | 
			
		||||
        } else {
 | 
			
		||||
          this.$router.push('/')
 | 
			
		||||
        }
 | 
			
		||||
 
 | 
			
		||||
@@ -170,6 +170,7 @@ export default {
 | 
			
		||||
    },
 | 
			
		||||
    handle3DClick() {
 | 
			
		||||
      this.eqId = document.getElementById('V3DData').rel
 | 
			
		||||
      // alert(this.eqId)
 | 
			
		||||
      if (this.eqId) {
 | 
			
		||||
        this.currentEquipment = eqList.find(item => item.id === this.eqId)
 | 
			
		||||
      }
 | 
			
		||||
 
 | 
			
		||||
@@ -1,21 +1,23 @@
 | 
			
		||||
export default [
 | 
			
		||||
  { id: 'C123-1', pl: 'A', name: 'A钢化', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C456-1', pl: 'B', name: 'B钢化', amount: 32, status: '生产中' },
 | 
			
		||||
 | 
			
		||||
  { id: 'C1-0', pl: 'A1', name: 'A1上片', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-1', pl: 'A1', name: 'A1磨边', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '调试中' },
 | 
			
		||||
  { id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-3', pl: 'A1', name: 'A1打孔', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-4', pl: 'A1', name: 'A1打孔后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-5', pl: 'A1', name: 'A1丝印', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-6', pl: 'A1', name: 'A1固化', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-7', pl: 'A1', name: 'A1储片', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-8', pl: 'A1', name: 'A钢化', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-9', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-10', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-8', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C1-9', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
 | 
			
		||||
 | 
			
		||||
  { id: 'C2-0', pl: 'A2', name: 'A2上片', amount: 32, status: '调试中' },
 | 
			
		||||
  { id: 'C2-1', pl: 'A2', name: 'A2磨边', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C2-2', pl: 'A2', name: 'A2磨边后清洗', amount: 32, status: '调试中' },
 | 
			
		||||
  { id: 'C2-3', pl: 'A2', name: 'A2打孔', amount: 32, status: '调试中' },
 | 
			
		||||
  { id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '调试中' },
 | 
			
		||||
  { id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C2-5', pl: 'A2', name: 'A2丝印', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C2-6', pl: 'A2', name: 'A2固化', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C2-7', pl: 'A2', name: 'A2储片', amount: 32, status: '生产中' },
 | 
			
		||||
@@ -26,8 +28,8 @@ export default [
 | 
			
		||||
  { id: 'C3-1', pl: 'A3', name: 'A3磨边', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C3-2', pl: 'A3', name: 'A3磨边后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C3-3', pl: 'A3', name: 'A3打孔', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '故障' },
 | 
			
		||||
  { id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '故障' },
 | 
			
		||||
  { id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C3-6', pl: 'A3', name: 'A3固化', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C3-7', pl: 'A3', name: 'A3储片', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C3-8', pl: 'A3', name: 'A3钢化后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
@@ -35,15 +37,14 @@ export default [
 | 
			
		||||
 | 
			
		||||
  { id: 'C4-0', pl: 'B1', name: 'B1上片', amount: 32, status: '故障' },
 | 
			
		||||
  { id: 'C4-1', pl: 'B1', name: 'B1磨边', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '故障' },
 | 
			
		||||
  { id: 'C4-3', pl: 'B1', name: 'B1打孔', amount: 32, status: '故障' },
 | 
			
		||||
  { id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '故障' },
 | 
			
		||||
  { id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-5', pl: 'B1', name: 'B1丝印', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-6', pl: 'B1', name: 'B1固化', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-7', pl: 'B1', name: 'B1储片', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-8', pl: 'B1', name: 'B钢化', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-9', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-10', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-8', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C4-9', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
 | 
			
		||||
 | 
			
		||||
  { id: 'C5-0', pl: 'B2', name: 'B2上片', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C5-1', pl: 'B2', name: 'B2磨边', amount: 32, status: '生产中' },
 | 
			
		||||
@@ -61,6 +62,6 @@ export default [
 | 
			
		||||
  { id: 'C6-3', pl: 'B3', name: 'B3打孔', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C6-4', pl: 'B3', name: 'B3打孔后清洗', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C6-5', pl: 'B3', name: 'B3丝印', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '生产中' },
 | 
			
		||||
  { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' },
 | 
			
		||||
  { id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '故障' },
 | 
			
		||||
  { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' }
 | 
			
		||||
]
 | 
			
		||||
		Reference in New Issue
	
	Block a user