zc

keyword/keyword.md

@@ -7,3 +7,14 @@
 - 组件内图表内容使用eCharts  eCharts组件已经全量引入项目 直接使用即可
 
 ## 开始生成 ##
+
+# 你没有严格按照我提供的图片样式生成组件
+- 修改代码 严格按照我提供的图片样式生成
+- 组件页面实际尺寸为 width:1280px; height:570px;
+## 开始生成 ##
+
+# 检查页面
+1. 进水水温和出水温度的 eCharts图表 上的刻度 应该是5个 分别是0 30 50 70 100
+
+# 检查页面
+1. 水箱液位的 eCharts图表 是水球图 改一下

src/views/pureWaterSystem/index.vue

@@ -22,10 +22,10 @@
       <title-page-img-components :propsData="propsData1"></title-page-img-components>
       <div class="max-big-box">
         <div class="big-box">
-
+          <pureWaterPage :propsData="propsData"></pureWaterPage>
         </div>
         <div class="big-box">
-
+          <pureWaterPage :propsData="propsData"></pureWaterPage>
         </div>
       </div>
     </div>
@@ -33,10 +33,10 @@
       <title-page-img-components :propsData="propsData2"></title-page-img-components>
       <div class="max-big-box">
         <div class="big-box">
-
+          <pureWaterPage :propsData="propsData"></pureWaterPage>
         </div>
         <div class="big-box">
-
+          <pureWaterPage :propsData="propsData"></pureWaterPage>
         </div>
       </div>
     </div>
@@ -44,10 +44,12 @@
 </template>
 <script>
   import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
+  import pureWaterPage from './pageComponent/pureWaterPage.vue'
   export default {
     name: 'index',
     components: {
-      titlePageImgComponents
+      titlePageImgComponents,
+      pureWaterPage
     },
     data () {
       return {
@@ -58,6 +60,22 @@
         propsData2:{
           title:'食品楼 - 纯水设备数据监测',
         },
+        propsData:{
+          annualWater:300,
+          currentMonthWater:400,
+          lastYearSamePeriod:500,
+          pipelineFlow:80,
+          tankLevel:200,
+          deviceStatus:'正常',
+          inletTemp:35,
+          outletTemp:75,
+          inletResistivity:40,
+          outletResistivity:50,
+          returnPressure:0.2,
+          minPressure:1,
+          maxPressure:4,
+
+        },
       }
     },
     created(){
@@ -178,10 +196,8 @@
     .max-big-box{
       width:1280px;
       height:1172px;
-      background-color: red;
       .big-box{
         height:570px;
-        background-color: #2f54eb;
       }
       .big-box:nth-child(2){
         margin-top:32px;

src/views/pureWaterSystem/pageComponent/pureWaterPage.vue

@@ -1,29 +1,604 @@
 <template>
   <div class="pureWaterPage">
 
+    <!-- 左侧：设备面板 -->
+    <div class="left-panel">
+      <div class="device-name-bar">
+        <span class="dn-name">{{ propsData.deviceName || '设备名称' }}</span>
+        <span class="dn-sep"> – </span>
+        <span class="dn-status" :class="propsData.deviceStatus === '正常' ? 'ok' : 'err'">
+          {{ propsData.deviceStatus || '正常' }}
+        </span>
+      </div>
+      <div class="device-photo-area">
+        <img v-if="propsData.deviceImg" :src="propsData.deviceImg" class="photo"/>
+        <div v-else class="photo-placeholder"></div>
+      </div>
+    </div>
+
+    <!-- 右侧：数据网格面板 -->
+    <div class="right-panel">
+
+      <!-- Row 1: 产水量统计 -->
+      <div class="grid-row row-1">
+        <div class="grid-cell center-cell">
+          <div class="cell-label">年度产水量</div>
+          <div class="cell-num">{{ propsData.annualWater || 0 }}<span class="num-unit">M³</span></div>
+        </div>
+        <div class="grid-cell center-cell">
+          <div class="cell-label">当月</div>
+          <div class="cell-num">
+            {{ propsData.currentMonthWater || 0 }}<span class="num-unit">M³</span>
+            <i class="num-trend" :class="propsData.currentMonthTrend === 'up' ? 'trend-up' : 'trend-down'">
+              {{ propsData.currentMonthTrend === 'up' ? '↑' : '↓' }}
+            </i>
+          </div>
+        </div>
+        <div class="grid-cell center-cell">
+          <div class="cell-label">去年同期</div>
+          <div class="cell-num">{{ propsData.lastYearSamePeriod || 0 }}<span class="num-unit">M³</span></div>
+        </div>
+      </div>
+
+      <!-- Row 2: 仪表盘 -->
+      <div class="grid-row row-2">
+        <div class="grid-cell chart-cell">
+          <div class="cell-label">水箱液位</div>
+          <div class="echart-box" :id="'tank_' + uid"></div>
+        </div>
+        <div class="grid-cell chart-cell">
+          <div class="cell-label">进水水温</div>
+          <div class="echart-box" :id="'inlet_' + uid"></div>
+        </div>
+        <div class="grid-cell chart-cell">
+          <div class="cell-label">出水温度</div>
+          <div class="echart-box" :id="'outlet_' + uid"></div>
+        </div>
+      </div>
+
+      <!-- Row 3: 其他指标 -->
+      <div class="grid-row row-3">
+        <!-- 管网流量 -->
+        <div class="grid-cell left-cell">
+          <div class="cell-label">管网流量</div>
+          <div class="cell-num num-flow">{{ propsData.pipelineFlow || 0 }}<span class="num-unit">L/min</span></div>
+          <div class="flow-track">
+            <div class="flow-bar" :style="{width: flowPercent + '%'}"></div>
+          </div>
+        </div>
+        <!-- 水质电阻率 -->
+        <div class="grid-cell left-cell">
+          <div class="cell-label">水质电阻率</div>
+          <div class="max-resist-line">
+            <div class="resist-line">
+              <i class="resist-dot dot-green"></i>
+              <span class="resist-key">进水:</span>
+              <span class="resist-val">{{ propsData.inletResistivity || 0 }} MΩ</span>
+            </div>
+            <div class="resist-line">
+              <i class="resist-dot dot-yellow"></i>
+              <span class="resist-key">出水:</span>
+              <span class="resist-val">{{ propsData.outletResistivity || 0 }} MΩ</span>
+            </div>
+          </div>
+        </div>
+        <!-- 回水压力 -->
+        <div class="grid-cell left-cell">
+          <div class="cell-label">回水压力</div>
+          <div class="max-resist-line-2">
+            <div class="num-pressure">{{ propsData.returnPressure || 0 }}<span class="num-unit">bar</span></div>
+            <div class="pressure-sub">最低: {{ propsData.minPressure !== undefined ? propsData.minPressure : 0 }} bar</div>
+            <div class="pressure-sub">最高: {{ propsData.maxPressure || 0 }} bar</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
   </div>
 </template>
-<script>
-  export default {
-    name: 'pureWaterPage',
-    data () {
-      return {
 
+<script>
+import 'echarts-liquidfill/src/liquidFill.js'
+export default {
+  name: 'pureWaterPage',
+  props: {
+    propsData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      uid: Math.random().toString(36).slice(2, 10),
+      tankChart: null,
+      inletChart: null,
+      outletChart: null,
+    }
+  },
+  computed: {
+    flowPercent() {
+      const flow = this.propsData.pipelineFlow || 0;
+      const max = this.propsData.pipelineFlowMax || 100;
+      return Math.min(100, (flow / max) * 100);
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts();
+    });
+  },
+  watch: {
+    propsData: {
+      deep: true,
+      handler() {
+        this.updateCharts();
+      }
+    }
+  },
+  beforeDestroy() {
+    if (this.tankChart) this.tankChart.dispose();
+    if (this.inletChart) this.inletChart.dispose();
+    if (this.outletChart) this.outletChart.dispose();
+  },
+  methods: {
+    initCharts() {
+      var tankEl = document.getElementById('tank_' + this.uid);
+      var inletEl = document.getElementById('inlet_' + this.uid);
+      var outletEl = document.getElementById('outlet_' + this.uid);
+      if (tankEl) {
+        this.tankChart = this.$echarts.init(tankEl);
+        this.tankChart.setOption(this.getTankOpt());
+      }
+      if (inletEl) {
+        this.inletChart = this.$echarts.init(inletEl);
+        this.inletChart.setOption(this.getTempOpt(this.propsData.inletTemp || 0));
+      }
+      if (outletEl) {
+        this.outletChart = this.$echarts.init(outletEl);
+        this.outletChart.setOption(this.getTempOpt(this.propsData.outletTemp || 0));
       }
     },
-    created(){
-
-    },
-    mounted(){
-
+    updateCharts() {
+      if (this.tankChart) this.tankChart.setOption(this.getTankOpt());
+      if (this.inletChart) this.inletChart.setOption(this.getTempOpt(this.propsData.inletTemp || 0));
+      if (this.outletChart) this.outletChart.setOption(this.getTempOpt(this.propsData.outletTemp || 0));
     },
-    methods:{
-
+    // 水箱液位 - 水球图
+    getTankOpt() {
+      var val = this.propsData.tankLevel || 0;
+      var cap = this.propsData.tankCapacity || 350;
+      var ratio = val / cap;
+      return {
+        backgroundColor: 'transparent',
+        title: [
+          {
+            text: val + 'L',
+            left: '50%',
+            top: '35%',
+            textAlign: 'center',
+            textStyle: {
+              fontSize: 22,
+              fontWeight: 'bold',
+              color: '#FFFFFF'
+            }
+          },
+          {
+            text: '容量' + cap + 'L',
+            left: '50%',
+            top: '55%',
+            textAlign: 'center',
+            textStyle: {
+              fontSize: 12,
+              fontWeight: '400',
+              color: 'rgba(255,255,255,0.55)'
+            }
+          }
+        ],
+        series: [{
+          type: 'liquidFill',
+          radius: '80%',
+          center: ['50%', '50%'],
+          amplitude: 12,
+          waveLength: '120%',
+          backgroundStyle: {
+            color: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.5,
+              colorStops: [
+                { offset: 0, color: 'rgba(0, 100, 135, 0.2)' },
+                { offset: 0.8, color: 'rgba(0, 80, 115, 0.3)' },
+                { offset: 1, color: 'rgba(0, 60, 95, 0.4)' }
+              ],
+              globalCoord: false
+            }
+          },
+          color: [
+            {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                { offset: 0, color: '#5DCCFF' },
+                { offset: 1, color: '#15827C' }
+              ],
+              globalCoord: false
+            },
+            {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                { offset: 0, color: '#5DCCFF' },
+                { offset: 1, color: '#15827C' }
+              ],
+              globalCoord: false
+            },
+            {
+              type: 'linear',
+              x: 0, y: 0, x2: 0, y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(93, 204, 255, 0.6)' },
+                { offset: 1, color: 'rgba(21, 130, 124, 0.6)' }
+              ],
+              globalCoord: false
+            }
+          ],
+          data: [ratio + 0.02, { value: ratio - 0.01, direction: 'left' }, ratio - 0.01],
+          label: {
+            normal: {
+              formatter: ''
+            }
+          },
+          outline: {
+            show: true,
+            itemStyle: {
+              borderWidth: 2,
+              borderColor: 'rgba(0, 230, 255, 0.4)'
+            },
+            borderDistance: 3
+          }
+        }]
+      };
     },
+    // 温度 - 半圆仪表盘（带指针+多色弧）
+    getTempOpt(val) {
+      var max = this.propsData.tempMax || 100;
+      return {
+        backgroundColor: 'transparent',
+        series: [{
+          type: 'gauge',
+          startAngle: 225,
+          endAngle: -45,
+          radius: '82%',
+          center: ['50%', '62%'],
+          min: 0,
+          max: max,
+          splitNumber: 10,
+          axisLine: {
+            lineStyle: {
+              width: 12,
+              color: [
+                [0.3, '#67C23A'],
+                [0.7, '#E6A23C'],
+                [1, '#F56C6C']
+              ]
+            }
+          },
+          pointer: {
+            show: true,
+            length: '60%',
+            width: 4,
+            itemStyle: { color: '#FFFFFF' }
+          },
+          anchor: {
+            show: true,
+            size: 8,
+            showAbove: true,
+            itemStyle: { color: '#FFFFFF' }
+          },
+          axisTick: {
+            show: true,
+            splitNumber: 5,
+            length: 4,
+            lineStyle: { color: '#FFFFFF', width: 1 }
+          },
+          splitLine: {
+            show: true,
+            length: 8,
+            lineStyle: { color: '#FFFFFF', width: 2 }
+          },
+          axisLabel: {
+            show: true,
+            color: '#FFFFFF',
+            fontSize: 11,
+            distance: 14,
+            formatter: function(value) {
+              if (value === 0 || value === 30 || value === 50 || value === 70 || value === 100) {
+                return value;
+              }
+              return '';
+            }
+          },
+          title: { show: false },
+          detail: {
+            valueAnimation: true,
+            formatter: '{value}°C',
+            color: '#20EEFA',
+            fontSize: 20,
+            fontWeight: 'bold',
+            offsetCenter: [0, '70%']
+          },
+          data: [{ value: val }]
+        }]
+      };
+    }
   }
+}
 </script>
+
 <style scoped lang="scss">
-  .pureWaterPage{
+.pureWaterPage {
+  width: 1280px;
+  height: 570px;
+  display: flex;
+  overflow: hidden;
+
+  /* ===== 左侧设备面板 ===== */
+  .left-panel {
+    width: 500px;
+    flex-shrink: 0;
+    height: 570px;
+    display: flex;
+    flex-direction: column;
+
+    .device-name-bar {
+      padding: 32px 18px 0;
+      font-size: 24px;
+      font-weight: 700;
+      flex-shrink: 0;
+      line-height: 1;
+      text-align: center;
+      .dn-name { color: #FFFFFF;font-weight:500; }
+      .dn-sep  { color: rgba(255,255,255,0.5); }
+      .ok  { color: #70B607; }
+      .err { color: #FF4D4F; }
+    }
 
+    .device-photo-area {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .photo {
+        max-width: 460px;
+        max-height: 510px;
+        object-fit: contain;
+      }
+
+      .photo-placeholder {
+        width: 360px;
+        height: 440px;
+        border: 2px dashed rgba(0,230,255,0.2);
+        border-radius: 4px;
+      }
+    }
+  }
+
+  /* ===== 右侧数据网格面板 ===== */
+  .right-panel {
+    flex: 1;
+    height: 570px;
+    border: 1px solid #00E6FF;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    /* --- 行 --- */
+    .grid-row {
+      display: flex;
+      /*border-bottom: 1px solid rgba(0,230,255,0.4);*/
+      &:last-child { border-bottom: none; }
+    }
+
+    /* --- 单元格通用 --- */
+    .grid-cell {
+      position: relative;
+      overflow: hidden;
+      flex: 1;
+      /*border-right: 1px solid rgba(0,230,255,0.4);*/
+      box-sizing: border-box;
+      &:last-child { border-right: none; }
+    }
+
+    /* 居中单元格 */
+    .center-cell {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 10px;
+    }
+
+    /* 图表单元格 */
+    .chart-cell {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 28px 6px 4px;
+      .echart-box {
+        flex: 1;
+        width: 100%;
+      }
+    }
+    .chart-cell:nth-child(1){
+      padding: 38px 6px 4px;
+    }
+
+    /* 左对齐单元格 */
+    .left-cell {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 14px 22px;
+    }
+
+    /* --- 标签 --- */
+    .cell-label {
+      font-size: 18px;
+      color: #FFFFFF;
+      letter-spacing: 1px;
+      margin-bottom: 10px;
+      flex-shrink: 0;
+      position: absolute;
+      top:1px;
+      left:0;
+      width:260px;
+      text-align: center;
+      line-height:40px;
+      background-color: #052628;
+    }
+    .grid-cell:nth-child(3){
+      .cell-label{
+        width:258px!important;
+      }
+    }
+
+    /* --- 数值 --- */
+    .cell-num {
+      margin-top:30px;
+      font-size: 32px;
+      font-weight: 700;
+      color: #00E6FF;
+      font-family: 'AlimamaShuHeiTi-Bold', sans-serif;
+      display: flex;
+      align-items: baseline;
+      line-height: 1;
+
+      .num-unit {
+        font-size: 22px;
+        font-weight: 700;
+        margin-left: 2px;
+        color: #00E6FF;
+      }
+
+      .num-trend {
+        font-style: normal;
+        font-size: 16px;
+        margin-left: 4px;
+        font-weight: 700;
+        &.trend-up   { color: #FF4D4F; }
+        &.trend-down { color: #52C41A; }
+      }
+    }
+
+    /* ====== Row 1: 产水量统计 ====== */
+    .row-1 {
+      height: 148px;
+      flex-shrink: 0;
+    }
+
+    /* ====== Row 2: 仪表盘 ====== */
+    .row-2 {
+      height: 224px;
+      flex-shrink: 0;
+
+      .cell-label {
+        margin-bottom: 4px;
+      }
+    }
+
+    /* ====== Row 3: 其他指标 ====== */
+    .row-3 {
+      flex: 1;
+
+      /* 管网流量 */
+      .num-flow {
+        font-size: 28px;
+        margin-bottom: 12px;
+      }
+
+      .flow-track {
+        width: 100%;
+        height: 8px;
+        background: rgba(0,230,255,0.1);
+        border-radius: 4px;
+        overflow: hidden;
+
+        .flow-bar {
+          height: 100%;
+          background: linear-gradient(90deg, #15827C, #00E6FF);
+          border-radius: 4px;
+          transition: width 0.4s;
+        }
+      }
+
+      /* 水质电阻率 */
+      .max-resist-line{
+        border:1px solid #00E6FF;
+        padding:20px 10px;
+        margin-top:40px;
+        border-radius:6px;
+      }
+      .resist-line {
+        display: flex;
+        align-items: center;
+        margin-bottom: 14px;
+        &:last-of-type { margin-bottom: 0; }
+
+        .resist-dot {
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          flex-shrink: 0;
+          margin-right: 8px;
+          display: inline-block;
+          font-style: normal;
+        }
+
+        .dot-green  { background: #1890FF; }
+        .dot-yellow { background: #52C41A; }
+
+        .resist-key {
+          font-size: 20px;
+          color: #FFFFFF;
+          margin-right: 4px;
+          white-space: nowrap;
+        }
+
+        .resist-val {
+          font-size: 22px;
+          font-weight: 700;
+          color: #00E6FF;
+          font-family: 'AlimamaShuHeiTi-Bold', sans-serif;
+          margin-right: 4px;
+          line-height: 1;
+        }
+      }
+
+      /* 回水压力 */
+      .max-resist-line-2{
+        border:1px solid #00E6FF;
+        padding:12px 10px;
+        margin-top:40px;
+        border-radius:6px;
+      }
+      .num-pressure {
+        margin-bottom: 8px;
+        color:#00E6FF;
+        text-align: center;
+        font-size: 22px;
+        font-weight: 700;
+      }
+
+      .pressure-sub {
+        text-align: center;
+        font-size: 18px;
+        color: rgba(255,255,255,0.55);
+        line-height:24px;
+      }
+    }
   }
+}
 </style>