feat: 新效果大屏接口调用

.env

@@ -1,3 +1,4 @@
 NODE_ENV=production
 VUE_APP_PREVIEW=true
-VUE_APP_API_BASE_URL=http://localhost:82
+VUE_APP_API_BASE_URL=http://localhost:82
+VUE_APP_API_BASE_URL_PSPACE=https://c3abc956bca5.ngrok-free.app

src/api/modular/largeScreen/productionCommandCenterManage.js

@@ -14,35 +14,46 @@ export function productionCommandCenterPage (parameter) {
   })
 }
 
-const commonParams = {
-  charset: 'utf-8',
-  archived: 0
-}
-
 /**
- * 炉温
+ * 产品数据：本月累计产量、回收率、单位单耗
  */
-export function getFurnaceTemperature (parameter) {
+export function getProductData (parameter) {
   return axios({
-    url: '/HistAtTime',
+    url: 'scrProduction/driQuery',
-    method: 'post',
-    params: {
-      ...parameter,
-      ...commonParams
-    }
-  })
-}
-
-/**
- * 功率因数（每月和每小时功率因数，用这个平均值调整时间）
- */
-export function getHistAggreData (parameter) {
-  return axios({
-    url: '/HistAggreData',
     method: 'get',
-    params: {
+    params: parameter
-      ...parameter,
+  })
-      ...commonParams
+}
-    }
+
+/**
+ * 安全与异常事件
+ */
+export function getSafetyExceptionEvent (parameter) {
+  return axios({
+    url: '/scrSecurity/driQuery',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 各炉号产量贡献
+ */
+export function getProductContribution (parameter) {
+  return axios({
+    url: 'scrProduction/driQhQuery',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 各产品合计产量
+ */
+export function getProductTotalProduction (parameter) {
+  return axios({
+    url: 'scrProduction/driMaterQuery',
+    method: 'get',
+    params: parameter
   })
 }

src/views/largeScreen/ProductionCommandCenter3.vue

@@ -1,5 +1,6 @@
 <!-- 4096*2160版本 6个图表 iframe作为背景-->
 <script>
+import moment from 'moment'
 import PieChart from './components/PieChart.vue'
 import BarChart from './components/BarChart.vue'
 import ElectrodeConsumption from './components/ElectrodeConsumption.vue'
@@ -9,7 +10,19 @@ import {
   getFurnaceTemperatureChangeRateBar,
   getEnergyAndElectricityConsumption
 } from '@/api/modular/largeScreen/pSpaceApi'
-// import { getFurnaceTemperatureChangeRate } from '@/api/modular/largeScreen/productionCommandCenterManage'
+import {
+  getProductData,
+  getSafetyExceptionEvent,
+  // getProductContribution,
+  getProductTotalProduction
+} from '@/api/modular/largeScreen/productionCommandCenterManage'
+
+const currentDate = moment()
+const today = currentDate.format('YYYY-MM-DD')
+const currentMonth = currentDate.format('YYYY-MM')
+const currentYear = currentDate.format('YYYY')
+const startOfMonth = currentDate.startOf('month').format('YYYY-MM-DD')
+const endOfMonth = currentDate.endOf('month').format('YYYY-MM-DD')
 
 export default {
   components: {
@@ -19,6 +32,18 @@ export default {
   },
   data() {
     return {
+      today,
+      currentMonth,
+      currentYear,
+      startOfMonth,
+      // 安全与异常事件
+      safetyExceptionEventList: [],
+      // 本月累计产量
+      currentMonthCumulativeProduction: 0,
+      // 产品回收率
+      productRecoveryRate: 0,
+      // 本月累计产量截止时间
+      endOfMonth,
       // 累计用电量
       totalElectricityConsumption: 0,
       // 单位电耗
@@ -30,30 +55,33 @@ export default {
       productionData: [
         {
           icon: 'icon-guimeng',
-          value: '2,234',
+          name: '硅锰',
+          value: 0,
           unit: 't',
-          description: '耗电量:999kavrh',
+          description: 0,
-          silica: '120.05',
+          silica: 0,
-          petroleumCoke: '120.05',
+          petroleumCoke: 0,
-          lanzhouCoal: '120.05'
+          lanzhouCoal: 0
         },
         {
           icon: 'icon-getie',
-          value: '10.4',
+          name: '铬铁',
+          value: 0,
           unit: 't',
-          description: '耗电量:999kavrh',
+          description: 0,
-          silica: '120.05',
+          silica: 0,
-          petroleumCoke: '120.05',
+          petroleumCoke: 0,
-          lanzhouCoal: '120.05'
+          lanzhouCoal: 0
         },
         {
           icon: 'icon-guitie',
-          value: '20.5',
+          name: '硅铁',
+          value: 0,
           unit: 't',
-          description: '耗电量:999kavrh',
+          description: 0,
-          silica: '120.05',
+          silica: 0,
-          petroleumCoke: '120.05',
+          petroleumCoke: 0,
-          lanzhouCoal: '120.05'
+          lanzhouCoal: 0
         }
       ]
     }
@@ -63,8 +91,80 @@ export default {
     // this.getFurnaceTemperatureChangeRateBar()
     // this.getDailyPowerConsumption()
     // this.getEnergyAndElectricityConsumption()
+    this.getProductData()
+    this.getSafetyExceptionEvent()
+    // this.getProductContribution()
+    this.getProductTotalProduction()
   },
   methods: {
+    // 产品数据：本月累计产量、回收率、单位单耗
+    async getProductData() {
+      const {
+        data: {
+          production,
+          passRate,
+          units
+        }
+      } = await getProductData({
+        // productionDay: today
+        year: currentYear
+        // month: currentMonth,
+        // startDate: startOfMonth,
+        // endDate: endOfMonth
+      })
+      this.currentMonthCumulativeProduction = production ?? 0
+      this.productRecoveryRate = passRate ?? 0
+      this.unitElectricityConsumption = units ?? 0
+    },
+    // 安全与异常事件
+    async getSafetyExceptionEvent() {
+      const { data } = await getSafetyExceptionEvent({
+        // productionDay: today
+        year: currentYear
+        // month: currentMonth,
+        // startDate: startOfMonth,
+        // endDate: endOfMonth
+      })
+      this.safetyExceptionEventList = data
+    },
+    // FIXME: 目前没有，各炉号产量贡献
+    // async getProductContribution() {
+    //   const data = await getProductContribution({
+    //     // productionDay: today
+    //     year: currentYear
+    //     // month: currentMonth,
+    //     // startDate: startOfMonth,
+    //     // endDate: endOfMonth
+    //   })
+    //   console.log('getProductContribution: 各炉号产量贡献', data)
+    // },
+    // 各产品合计产量
+    async getProductTotalProduction() {
+      const { data } = await getProductTotalProduction({
+        // productionDay: today
+        year: currentYear
+        // month: currentMonth,
+        // startDate: startOfMonth,
+        // endDate: endOfMonth
+      })
+      if (data && Array.isArray(data)) {
+        const positionMap = {
+          '硅锰': 0,
+          '铬铁': 1,
+          '硅铁': 2
+        }
+        data.forEach(({ title, consumption, power, list }) => {
+          Object.assign(this.productionData[positionMap[title]], {
+            value: consumption ?? 0,
+            description: power ?? 0,
+            silica: list?.find(item => item.title === '硅石')?.consumption ?? 0,
+            petroleumCoke: list?.find(item => item.title === '石油焦')?.consumption ?? 0,
+            lanzhouCoal: list?.find(item => item.title === '兰炭')?.consumption ?? 0
+          })
+        })
+      }
+    },
+    // ---------------------------pspace---------------------------------
     // 炉温稳定率（百分比）
     async getFurnaceTemperatureChangeRate() {
       const parameter = {
@@ -178,14 +278,14 @@ export default {
               <div class="lint-item-title">本月累计产量</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="value t-white">{{ currentMonthCumulativeProduction }}<span class="unit t-light-blue">t</span></div>
-                <div class="end-time t-light-blue">截止到8-20</div>
+                <div class="end-time t-light-blue">截止到{{ endOfMonth }}</div>
               </div>
             </div>
             <div class="line-item bg">
               <div class="lint-item-title">产品回收率</div>
               <div style="width: 100%; height: calc(100% - 150px);">
-                <PieChart color="blue" :data="75"></PieChart>
+                <PieChart color="blue" :data="productRecoveryRate"></PieChart>
               </div>
             </div>
             <div class="line-item bg">
@@ -219,7 +319,7 @@ export default {
                     <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 class="card-description t-light-blue">耗电量:{{ item.description }}kavrh</div>
                 </div>
               </div>
               <div class="production-item-card">
@@ -306,13 +406,12 @@ export default {
             <div class="title-box anquanjiance"></div>
 
             <div class="chart-container anquanjiance">
-              <div>
+              <div v-for="(item, index) in safetyExceptionEventList" :key="index">
-                <div class="time">2022-11-23 11:37:25</div>
+                <div class="time">{{ item.happenTime }}</div>
-                <div class="content danger">xxxx段发生严重xx，请立即前往处理!</div>
+                <div
-              </div>
+                  class="content ell"
-              <div>
+                  :class="{'danger': item.eventType === '2级', 'warning': item.eventType === '1级'}"
-                <div class="time">2022-11-23 09:37:25</div>
+                >{{ item.content }}</div>
-                <div class="content warning">xxxx段发生严重xx，请立即前往处理!</div>
               </div>
             </div>
           </div>
@@ -332,6 +431,20 @@ export default {
 </template>
 
 <style scoped lang="less">
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: #0b3b6c;
+  &-thumb {
+    background: #40a9ff;
+    border-radius: 3px;
+  }
+}
+.ell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tc {
   text-align: center;
 }
@@ -587,17 +700,14 @@ export default {
       }
       &.anquanjiance {
         height: 77%;
+        overflow-y: auto;
         background-image: url('~@/assets/big-screen/border-anquanjiance.png');
-        display: flex;
-        flex-direction: column;
         color: #fff;
         font-size: 2rem;
+        padding-bottom: 2rem;
         > div {
-          height: 50%;
+          height: 12rem;
-          display: flex;
+          padding: 2rem 5% 1rem;
-          flex-direction: column;
-          justify-content: center;
-          padding: 0 5%;
           .time {
             color: #40a9ff;
             font-size: 2.5rem;