feat: 新效果大屏暂存

.env.development

@@ -1,3 +1,4 @@
 NODE_ENV=development
 VUE_APP_PREVIEW=true
-VUE_APP_API_BASE_URL=http://localhost:82
+VUE_APP_API_BASE_URL=http://47.94.254.249:3182
+VUE_APP_API_BASE_URL_PSPACE=/pspace-server

src/api/modular/largeScreen/pSpaceApi.js

@@ -0,0 +1,49 @@
+import axios from 'axios'
+
+const isDevelopment = process.env.NODE_ENV === 'development'
+
+export const getPSpaceData = async (url, params) => {
+  // const data = JSON.stringify(params)
+  try {
+    const res = await axios({
+      baseURL: isDevelopment ? undefined : process.env.VUE_APP_PSPACE_API_BASE_URL,
+      url: isDevelopment ? `/pspace-server${url}` : url,
+      method: 'get',
+      headers: {
+        'ngrok-skip-browser-warning': 'true'
+      },
+      params
+    })
+    return res.data
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+/**
+ * 炉温变化率（炉温变化率DELTA*10000/AVG得出万分之几，大屏上显示万分之：）（炉温稳定率-百分比）
+ */
+export function getFurnaceTemperatureChangeRate (parameter) {
+  return getPSpaceData('/HistDataByAggre', parameter)
+}
+
+/**
+ * 中心炉底温度变化量（炉温变化曲线，每个炉子一条）（炉温稳定率-柱状图）
+ */
+export function getFurnaceTemperatureChangeRateBar (parameter) {
+  return getPSpaceData('/HistAggreData', parameter)
+}
+
+/**
+ * 每天耗电量（1单位耗电量用这个除以每天产品产量，2总耗电量指标把日期调成每月1号）（单位电耗）
+ */
+export function getDailyPowerConsumption (parameter) {
+  return getPSpaceData('/HistAggreData', parameter)
+}
+
+/**
+ * 能耗与电耗（Kvar无功功率 Kvarh无功电量 KW有功功率 KWh有功电量  cos功率因数（大屏左边第一块用这个））（能耗与电耗数据）
+ */
+export function getEnergyAndElectricityConsumption(parameter) {
+  return getPSpaceData('/HistDataByAggre', parameter)
+}

src/api/modular/largeScreen/productionCommandCenterManage.js

@@ -13,3 +13,36 @@ export function productionCommandCenterPage (parameter) {
     params: parameter
   })
 }
+
+const commonParams = {
+  charset: 'utf-8',
+  archived: 0
+}
+
+/**
+ * 炉温
+ */
+export function getFurnaceTemperature (parameter) {
+  return axios({
+    url: '/HistAtTime',
+    method: 'post',
+    params: {
+      ...parameter,
+      ...commonParams
+    }
+  })
+}
+
+/**
+ * 功率因数（每月和每小时功率因数，用这个平均值调整时间）
+ */
+export function getHistAggreData (parameter) {
+  return axios({
+    url: '/HistAggreData',
+    method: 'get',
+    params: {
+      ...parameter,
+      ...commonParams
+    }
+  })
+}

src/views/largeScreen/ProductionCommandCenter3.vue

@@ -3,6 +3,13 @@
 import PieChart from './components/PieChart.vue'
 import BarChart from './components/BarChart.vue'
 import ElectrodeConsumption from './components/ElectrodeConsumption.vue'
+import {
+  getFurnaceTemperatureChangeRate,
+  getDailyPowerConsumption,
+  getFurnaceTemperatureChangeRateBar,
+  getEnergyAndElectricityConsumption
+} from '@/api/modular/largeScreen/pSpaceApi'
+// import { getFurnaceTemperatureChangeRate } from '@/api/modular/largeScreen/productionCommandCenterManage'
 
 export default {
   components: {
@@ -10,7 +17,137 @@ export default {
     BarChart,
     ElectrodeConsumption
   },
+  data() {
+    return {
+      // 累计用电量
+      totalElectricityConsumption: 0,
+      // 单位电耗
+      unitElectricityConsumption: 0,
+      // 发电厂发电量
+      totalPowerGeneration: 0,
+      // 功率因数
+      powerFactor: 0,
+      productionData: [
+        {
+          icon: 'icon-guimeng',
+          value: '2,234',
+          unit: 't',
+          description: '耗电量:999kavrh',
+          silica: '120.05',
+          petroleumCoke: '120.05',
+          lanzhouCoal: '120.05'
+        },
+        {
+          icon: 'icon-getie',
+          value: '10.4',
+          unit: 't',
+          description: '耗电量:999kavrh',
+          silica: '120.05',
+          petroleumCoke: '120.05',
+          lanzhouCoal: '120.05'
+        },
+        {
+          icon: 'icon-guitie',
+          value: '20.5',
+          unit: 't',
+          description: '耗电量:999kavrh',
+          silica: '120.05',
+          petroleumCoke: '120.05',
+          lanzhouCoal: '120.05'
+        }
+      ]
+    }
+  },
+  mounted() {
+    // this.getFurnaceTemperatureChangeRate()
+    // this.getFurnaceTemperatureChangeRateBar()
+    // this.getDailyPowerConsumption()
+    // this.getEnergyAndElectricityConsumption()
+  },
   methods: {
+    // 炉温稳定率（百分比）
+    async getFurnaceTemperatureChangeRate() {
+      const parameter = {
+        'btime': '2025-08-07 16:00:00',
+        'etime': '2025-08-08 16:00:10',
+        'aggredata':
+            [{
+                'aggfunc': 'AVG',
+                'tagnames': '/corp/factory1/boiler/luwen/中心炉底温度'
+            }, {
+                'aggfunc': 'DELTA',
+                'tagnames': '/corp/factory1/boiler/luwen/中心炉底温度'
+            }],
+        'interval': 3600,
+        'charset': 'utf-8',
+        'archived': 0
+      }
+      const data = await getFurnaceTemperatureChangeRate(parameter)
+      console.log(data)
+    },
+    // 炉温稳定率（柱状图）
+    async getFurnaceTemperatureChangeRateBar() {
+      const parameter = {
+        'btime': '2025-08-07 16:00:00',
+        'etime': '2025-08-08 16:00:10',
+        'aggredata':
+            {
+                'aggfunc': 'DELTA',
+                'tagnames': '/corp/factory1/boiler/luwen/中心炉底温度'
+            },
+        'interval': 3600,
+        'charset': 'utf-8',
+        'archived': 0
+      }
+      const data = await getFurnaceTemperatureChangeRateBar(parameter)
+      console.log(data)
+    },
+    // 单位电耗
+    async getDailyPowerConsumption() {
+      const parameter = {
+        'btime': '2025-08-07 16:00:10',
+        'etime': '2025-08-08 16:00:00',
+        'aggredata':
+            {
+                'aggfunc': 'DELTA',
+                'tagnames': '/corp/factory1/boiler/yibiao/kWh'
+            },
+        'interval': 86400,
+        'charset': 'utf-8',
+        'archived': 0
+      }
+      const data = await getDailyPowerConsumption(parameter)
+      console.log(data)
+    },
+    // 能耗与电耗
+    async getEnergyAndElectricityConsumption() {
+      const parameter = {
+        'btime': '2025-08-07 16:00:00',
+        'etime': '2025-08-07 18:00:10',
+        'aggredata':
+            [{
+                'aggfunc': 'AVG',
+                'tagnames': '/corp/factory1/boiler/yibiao/kW'
+            }, {
+                'aggfunc': 'AVG',
+                'tagnames': '/corp/factory1/boiler/yibiao/Kvarh'
+            }, {
+                'aggfunc': 'AVG',
+                'tagnames': '/corp/factory1/boiler/yibiao/cos'
+            }, {
+                'aggfunc': 'DELTA',
+                'tagnames': '/corp/factory1/boiler/yibiao/kWh'
+            }, {
+                'aggfunc': 'DELTA',
+                'tagnames': '/corp/factory1/boiler/yibiao/Kvarh'
+            }],
+        'interval': 3600,
+        'charset': 'utf-8',
+        'archived': 0
+      }
+      const data = await getEnergyAndElectricityConsumption(parameter)
+      console.log(data)
+    },
     getItemStyle(item) {
       return {
         backgroundImage: `url(${require('@/assets/big-screen/nav/' + item + '.png')})`,
@@ -36,23 +173,25 @@ export default {
 
         <div class="container-content-top">
           <div class="title-box yunxingzhuangtai"></div>
-          <div class="box-container">
-            <div class="line-item bg">
+          <div class="box-container first">
+            <div class="line-item bg tc">
               <div class="lint-item-title">本月累计产量</div>
-              <div class="icon"><img src="@/assets/big-screen/icon-chanliang.png" alt="" /><</div>
-              <div class="value">432,928<span class="unit">t</span></div>
-              <div class="end-time">截止到8-20</div>
+              <div class="lint-item-content">
+                <div class="icon"><img src="@/assets/big-screen/icon-chanliang.png"/></div>
+                <div class="value t-white">432,928<span class="unit t-light-blue">t</span></div>
+                <div class="end-time t-light-blue">截止到8-20</div>
+              </div>
             </div>
             <div class="line-item bg">
               <div class="lint-item-title">产品回收率</div>
-              <div style="width: 100%; height: calc(100% - 60px);">
-                <PieChart></PieChart>
+              <div style="width: 100%; height: calc(100% - 150px);">
+                <PieChart color="blue" :data="75"></PieChart>
               </div>
             </div>
             <div class="line-item bg">
               <div class="lint-item-title">炉温稳定率</div>
-              <div style="width: 100%; height: calc(100% - 60px);">
-                <PieChart></PieChart>
+              <div style="width: 100%; height: calc(100% - 150px);">
+                <PieChart color="orange" :data="75"></PieChart>
               </div>
             </div>
           </div>
@@ -69,10 +208,44 @@ export default {
               <div class="lint-item-title">硅铁合计</div>
             </div>
           </div>
-          <div class="box-container title-box">
-            <div class="line-item bg"></div>
-            <div class="line-item bg"></div>
-            <div class="line-item bg"></div>
+          <div class="box-container title-box chanliang-item">
+            <div class="line-item bg" v-for="(item, index) in productionData" :key="index">
+              <div class="production-card">
+                <div class="card-icon" v-if="item.icon">
+                  <img :src="require(`@/assets/big-screen/${item.icon}.png`)" alt="" />
+                </div>
+                <div class="card-content">
+                  <div class="card-value">
+                    <span class="value-number t-white">{{ item.value }}</span>
+                    <span class="value-unit t-light-blue">{{ item.unit }}</span>
+                  </div>
+                  <div class="card-description t-light-blue">{{ item.description }}</div>
+                </div>
+              </div>
+              <div class="production-item-card">
+                <div>
+                  <div class="tl">
+                    <img src="@/assets/big-screen/icon-silica.png" alt="">
+                    <span>硅石</span>
+                  </div>
+                  <div class="tr">{{ item.silica }} <span>吨</span></div>
+                </div>
+                <div>
+                  <div class="tl">
+                    <img src="@/assets/big-screen/icon-petroleum-coke.png" alt="">
+                    <span>石油焦</span>
+                  </div>
+                  <div class="tr">{{ item.petroleumCoke }} <span>吨</span></div>
+                </div>
+                <div>
+                  <div class="tl">
+                    <img src="@/assets/big-screen/icon-lanzhou-coal.png" alt="">
+                    <span>兰炭</span>
+                  </div>
+                  <div class="tr">{{ item.lanzhouCoal }} <span>吨</span></div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -89,15 +262,35 @@ export default {
     </div>
 
     <div class="right-container">
-      <div class="container-content" style="display: flex;">
+      <div class="container-content" style="display: flex; justify-content: space-evenly;">
 
         <div class="left">
           <div class="container-content-top">
             <div class="title-box xiaohaoshuju"></div>
-            <div class="box-container">
-              <div class="line-item">1</div>
-              <div class="line-item">2</div>
-              <div class="line-item">3</div>
+            <div class="box-container xiaohaoshuju">
+              <div class="line-item">
+                <div class="tl">
+                  <p class="t-blue">本月累计用电量</p>
+                  <p>{{ totalElectricityConsumption }}kWh</p>
+                </div>
+                <div class="tl">
+                  <p class="t-blue">单位电耗</p>
+                  <p>{{ unitElectricityConsumption }}mkWh/t</p>
+                </div>
+              </div>
+              <div class="line-item" style="display: flex; justify-content: center;">
+                <img src="@/assets/big-screen/icon-energy.png"/>
+              </div>
+              <div class="line-item">
+                <div class="tr">
+                  <p class="t-blue">发电厂发电量</p>
+                  <p>{{ totalPowerGeneration }}kWh</p>
+                </div>
+                <div class="tr">
+                  <p class="t-blue">功率因数</p>
+                  <p>{{ powerFactor }}</p>
+                </div>
+              </div>
             </div>
 
             <div class="chart-container danweidianhao">
@@ -114,12 +307,12 @@ export default {
 
             <div class="chart-container anquanjiance">
               <div>
-                <div>2022-11-23 11:37:25</div>
-                <div>Ⅱ级 xxxx段发生严重xx，请立即前往处理!</div>
+                <div class="time">2022-11-23 11:37:25</div>
+                <div class="content danger">xxxx段发生严重xx，请立即前往处理!</div>
               </div>
               <div>
-                <div>2022-11-23 09:37:25</div>
-                <div>Ⅱ级 xxxx段发生严重xx，请立即前往处理!</div>
+                <div class="time">2022-11-23 09:37:25</div>
+                <div class="content warning">xxxx段发生严重xx，请立即前往处理!</div>
               </div>
             </div>
           </div>
@@ -139,14 +332,39 @@ export default {
 </template>
 
 <style scoped lang="less">
+.tc {
+  text-align: center;
+}
+.tl {
+  text-align: left;
+}
+.tr {
+  text-align: right;
+}
+.t-white {
+  color: #fff;
+}
+.t-blue {
+  color: #40a9ff !important;
+}
+.t-light-blue {
+  color: #40ccff;
+}
 .bg-image-mixin(@image-path) {
   background-image: url(@image-path);
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
-.lint-item-title {
-  color: #40a9ff;
-  font-size: 2rem;
+.first {
+  .line-item {
+    padding-top: 4rem;
+  }
+  .lint-item-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 65%;
+  }
 }
 .line-item {
   width: 32%;
@@ -154,10 +372,70 @@ export default {
   float: left;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  font-size: 2rem;
   &.bg, .bg {
     .bg-image-mixin('~@/assets/big-screen/bg-line-item.png');
   }
+  > div {
+    width: 100%;
+  }
+  .production-card {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 2rem;
+    img {
+      width: 5rem;
+      height: 6rem;
+      display: block;
+    }
+  }
+  .production-item-card {
+    color: #40a9ff;
+    margin-top: 2rem;
+    padding: 1rem;
+    > div {
+      display: flex;
+      justify-content: space-between;
+      margin: 1rem;
+      padding-bottom: 1rem;
+      img {
+        width: 2.5rem;
+        height: 2.5rem;
+        margin-right: 1rem;
+      }
+      border-bottom: 1px solid #234c6d87;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+  .lint-item-title {
+    color: #40a9ff;
+    font-size: 2rem;
+    text-align: center;
+  }
+  .icon {
+    img {
+      width: 6rem;
+      height: 6rem;
+      margin: 1rem;
+    }
+  }
+  .value {
+    font-size: 3rem;
+    font-family: 'DingTalk JinBuTi';
+    font-weight: 700;
+  }
+  .unit {
+    font-size: 2rem;
+    font-weight: 700;
+  }
+  .end-time {
+    font-size: 2rem;
+  }
 }
 .main-container {
   position: relative;
@@ -178,15 +456,15 @@ export default {
   .center-container {
     position: absolute;
     z-index: 20;
-    width: 36%;
+    width: 50%;
     height: 100%;
     left: 50%;
-    margin-left: -18%;
+    margin-left: -25%;
   }
   .left-container, .right-container {
     position: absolute;
     z-index: 20;
-    width: 36%;
+    width: 28%;
     height: 100%;
     background-image: url('~@/assets/big-screen/bg-right.png');
     background-size: 100% 100%;
@@ -196,7 +474,7 @@ export default {
     .container-content {
       width: 90%;
       height: 91%;
-      margin: 7% 5% 2%;
+      margin: 9% 5% 2%;
       background-image: url('~@/assets/big-screen/bg-border-right.png');
       background-size: auto 100%;
       background-repeat: no-repeat;
@@ -207,11 +485,11 @@ export default {
         padding-right: 5%;
       }
       .container-content-top {
-        height: 60%;
+        height: 70%;
         padding-top: 3rem;
       }
       .container-content-bottom {
-        height: 40%;
+        height: 30%;
       }
     }
     .title-chart-box {
@@ -237,6 +515,13 @@ export default {
       &.chanliang {
         background-image: url('~@/assets/big-screen/title-chanliang.png');
       }
+      &.chanliang-item {
+        height: 40%;
+        > div {
+          display: flex;
+          justify-content: space-around;
+        }
+      }
       &.xiaohaoshuju {
         background-image: url('~@/assets/big-screen/title-xiaohaoshuju.png');
       }
@@ -252,6 +537,32 @@ export default {
       &.title {
         height: 5rem;
       }
+      &.xiaohaoshuju {
+        height: 35%;
+        .line-item {
+          display: block;
+          > div {
+            background-image: url('~@/assets/big-screen/bg-energy.png');
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            padding: 1rem;
+            height: 50%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+          }
+          img {
+            display: block;
+            width: 98%;
+            margin-left: 1%;
+          }
+          p {
+            margin: 0;
+            color: #fff;
+            margin-bottom: 1rem;
+          }
+        }
+      }
     }
     .chart-container {
       width: 100%;
@@ -271,29 +582,54 @@ export default {
       }
       &.danweidianhao {
         padding-top: 0.5rem;
-        height: 40%;
+        height: 50%;
         background-image: url('~@/assets/big-screen/border-danweidianhao.png');
       }
       &.anquanjiance {
         height: 77%;
         background-image: url('~@/assets/big-screen/border-anquanjiance.png');
+        display: flex;
+        flex-direction: column;
+        color: #fff;
+        font-size: 2rem;
+        > div {
+          height: 50%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 0 5%;
+          .time {
+            color: #40a9ff;
+            font-size: 2.5rem;
+            margin-bottom: 1.5rem;
+          }
+          .content {
+            padding-left: 20%;
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            &.danger {
+              background-image: url('~@/assets/big-screen/bg-danger.png');
+            }
+            &.warning {
+              background-image: url('~@/assets/big-screen/bg-warning.png');
+            }
+          }
+        }
       }
     }
   }
   .right-container {
     .container-content {
       background: none;
-      margin-right: 15px;
-      width: 100%;
       .left, .right {
         height: 100%;
         display: inline-block;
       }
       .left {
-        width: 70%;
+        width: 74%;
       }
       .right {
-        width: 26%;
+        width: 25%;
       }
       .left {
         background-image: url('~@/assets/big-screen/bg-border-right.png');

src/views/largeScreen/components/PieChart.vue

@@ -9,13 +9,19 @@ import * as echarts from 'echarts'
 
 export default {
   name: 'PieChart',
+  props: {
+    color: {
+      type: String,
+      default: 'blue'
+    },
+    data: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
-      chart: null,
-      productionData: {
-        dates: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
-        values: [7000, 5000, 6000, 4500, 3000, 5000, 9000, 4500, 6000, 3500, 2000, 6500, 4500, 7500, 5000, 5000, 4500, 6000, 3000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-      }
+      chart: null
     }
   },
   mounted() {
@@ -25,12 +31,14 @@ export default {
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.resizeChart)
-    if (this.productionChart) {
-      this.productionChart.dispose()
+    if (this.chart) {
+      this.chart.dispose()
     }
   },
   methods: {
     initChart() {
+      const [color1, color2] = this.color === 'blue' ? ['#0060D5', '#85EDFF'] : ['#DD8323', '#FFEE9A']
+      const data = [this.data]
       this.chart = echarts.init(this.$refs.chart)
       const option = {
         title: [
@@ -44,7 +52,7 @@ export default {
             }
           },
           {
-            text: '75%',
+            text: `${this.data}%`,
             x: 'center',
             y: 'center',
             textStyle: {
@@ -56,7 +64,7 @@ export default {
           }
         ],
         polar: {
-            radius: ['42%', '52%'],
+          radius: ['70%', '90%'],
           center: ['50%', '50%']
         },
         angleAxis: {
@@ -86,18 +94,18 @@ export default {
             backgroundStyle: {
               color: 'rgba(66, 66, 66, .3)'
             },
-            data: [60],
+            data,
             coordinateSystem: 'polar',
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                   {
                     offset: 0,
-                    color: '#16CEB9'
+                    color: color1
                   },
                   {
                     offset: 1,
-                    color: '#6648FF'
+                    color: color2
                   }
                 ])
               }
@@ -107,7 +115,7 @@ export default {
             name: '',
             type: 'pie',
             startAngle: 80,
-            radius: ['56%'],
+            radius: ['86%'],
             hoverAnimation: false,
             center: ['50%', '50%'],
             itemStyle: {
@@ -121,7 +129,7 @@ export default {
             name: '',
             type: 'pie',
             startAngle: 80,
-            radius: ['38%'],
+            radius: ['68%'],
             hoverAnimation: false,
             center: ['50%', '50%'],
             itemStyle: {

src/views/largeScreen/components/ProductData.vue

@@ -19,11 +19,26 @@
 
 <script>
 import * as echarts from 'echarts'
+import chartMixins from './chartMixins'
 
 export default {
   name: 'ProductData',
+  mixins: [chartMixins],
   data() {
     return {
+      pspaceApiInfo: {
+        url: '/HistAggreData',
+        params: {
+          btime: '2025-09-01 00:00:00',
+          etime: '2025-09-30 23:59:59',
+          aggredata: {
+            aggfunc: 'count'
+          },
+          interval: 86400,
+          charset: 'utf-8',
+          archived: 0
+        }
+      },
       productionData: {
         monthlyProduction: '432,928',
         date: '8-20',
@@ -34,11 +49,11 @@ export default {
       temperatureStabilityChart: null
     }
   },
-  mounted() {
-    this.initQualifiedRateChart()
-    this.initTemperatureStabilityChart()
-  },
   methods: {
+    initChart() {
+      this.initQualifiedRateChart()
+      this.initQualifiedRateChart()
+    },
     initQualifiedRateChart() {
       this.qualifiedRateChart = echarts.init(this.$refs.qualifiedRateChart)
       const option = {

src/views/largeScreen/components/chartMixins.js

@@ -0,0 +1,21 @@
+import { getPSpaceData } from '@/api/modular/largeScreen/pSpaceApi'
+
+export default {
+  data() {
+    return {
+      pspaceApiInfo: {}
+    }
+  },
+  methods: {
+    initChart() {},
+    async getData() {
+      const { url, params } = this.pspaceApiInfo
+      const res = await getPSpaceData(
+        url,
+        params
+      )
+      console.log('getPSpaceData', res)
+      this.initChart(res)
+    }
+  }
+}

vue.config.js

@@ -101,6 +101,14 @@ const vueConfig = {
         pathRewrite: {
           '^/api': '' // 需要rewrite的,
         }
+      },
+      '/pspace-server': {
+        target: 'https://c3abc956bca5.ngrok-free.app',
+        changeOrigin: true,
+        secure: false,
+        pathRewrite: {
+          '^/pspace-server': '/',
+        },
       }
     }
   },