4.24 修改详情展示页面上传

src/pages/electricity/direct_current/index.vue

@@ -1,28 +1,38 @@
 <template>
+  <div class="main_content_hei">
+    <h1>电能监控</h1>
     <div>
-      <a-card>
-        <a-row>
-          <a-col
-            v-for="(item, index) in dataSource"
-            :span="6"
-            :key="index"
-            style="text-align: center"
+      <div class="title">
+        <div class="iconzz"></div>
+        <div style="margin-left: 10px">
+          <span style="font-weight: 700; font-size: medium; margin-top: 20px"
+            >充电机直流表</span
           >
-            <a-card>
-              <p>{{ item.f_EqmCode == null? '空': item.f_EqmCode }}</p>
-              <div style="position: relative">
+        </div>
+      </div>
+    </div>
+    <div style="margin-top: 20px" class="batter_table">
+      <div v-for="(item, index) in dataSource" :key="index">
+        <div class="posi_title">#{{ index + 1 }}仓电流表</div>
+        <div class="imgs_item" style="margin-top: 35px">
           <img src="@/assets/img/ammeter.png" />
-                <span class="power_value">{{ item.f_ShowEnergy }}</span>
         </div>
-              <!-- <p style="margin-top: 10px">
-                电表值：<label style="font-weight: bold; color: #1890ff">{{
-                  item
-                }}</label>
-              </p> -->
-            </a-card>
-          </a-col>
-        </a-row>
-      </a-card>
+        <div style="margin-top: 35px">
+          <div class="pub_flex">
+            <span>有功功率:</span>
+            <span>{{ item.f_TotalActivePower }}</span>
+          </div>
+          <div class="pub_flex">
+            <span>有功电能:</span>
+            <span>{{ item.f_TotalActiveEnergy }}</span>
+          </div>
+          <div class="pub_flex">
+            <span>有功电能二次侧:</span>
+            <span>{{ item.f_ShowEnergy }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -82,6 +92,12 @@
 };
 </script>
 <style lang="less" scoped>
+.main_content_hei {
+  background: #fff;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
 .power_value {
   position: absolute;
   left: 50%;
@@ -90,5 +106,83 @@
   font-weight: 600;
   transform: translateX(-50%);
 }
-  </style>
+h1 {
+  font-size: 20px;
+  font-weight: 600;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  padding: 10px;
+}
+.title {
+  display: flex;
+}
+.iconzz {
+  height: 23px;
+  width: 5px;
+  background-color: #191d24;
+  // margin-left: -15px;
+}
+img {
+  width: 60px;
+  height: 76px;
+}
+.batter_table {
+  display: flex;
+  flex-wrap: wrap;
+
+  > div {
+    margin: 15px;
+    width: 23%;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    // border-bottom-right-radius: 5px;
+    display: flex;
+    align-items: center;
+    position: relative;
     
+    .posi_title {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 0;
+      line-height: 35px;
+      padding-left: 15px;
+      font-size: 14px;
+      background: #d2d2d9;
+      font-weight: 600;
+      color: #191d24;
+      font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+    }
+    .imgs_item {
+      width: 100px;
+      height: 100px;
+      background: #b5bcce;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+    }
+    > div:last-child {
+      margin-left: 20px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      > div {
+        flex: 1;
+        > span {
+          font-size: 14px;
+          font-weight: 600;
+          color: #191d24;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+.pub_flex {
+  display: flex;
+  align-items: center;
+}
+</style>

src/pages/heat/liquid_cooling/index.vue

@@ -171,6 +171,7 @@ import {
   handle_SetElectromagneticValve,
 } from "@/services/heat/liquid_cooling";
 export default {
+  name: 'battery_details',
   data() {
     return {
       charge_eq: 0,

src/pages/heat/ups_monitor/index.vue

@@ -145,13 +145,14 @@ export default {
 <style scoped lang="less">
 .main_content_hei {
   background: #fff;
-  padding: 10px;
+  padding: 10px 20px;
   box-sizing: border-box;
+  border-radius: 8px;
 }
 h1 {
   font-size: 20px;
   font-weight: 600;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  padding: 20px 0 0 20px;
+  padding: 10px 0 0 0;
 }
 </style>

src/pages/swapping/components/bot_one.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="comp">
     <h1 style="font-size: 20px; font-weight: 600">充电设备状态</h1>
-    <div class="cdz">
+    <div class="cdz" v-for="(item, index) in data_souce" :key="index">
       <div class="mang">
         <div>
-          <label><em>1</em>充电桩</label>
-          <img src="../../../assets/imgs/chongdianz.png" style="width: 150px" />
+          <label
+            ><em>{{ index + 1 }}</em
+            >充电桩</label
+          >
+          <img src="../../../assets/imgs/chongdianz.png" style="width: 100px" />
         </div>
 
         <div>
-          <div class="loader"></div>
+          <div class="loader" v-if="item.fChargeStatus == 1"></div>
           <strong
+            v-if="item.fChargeStatus == 1"
             style="
               position: absolute;
               top: 0;
@@ -20,30 +24,8 @@
             "
             >占用中...</strong
           >
-          <div style="color: #3ee0b9">
-            <p>
-              当前SOC:
-              <strong style="color: #000000; margin-left: 5px">100%</strong>
-            </p>
-            <p>
-              电量:
-              <strong style="color: #000000; margin-left: 5px">96.6kWh</strong>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="cdz">
-      <div class="mang">
-        <div>
-          <label><em>2</em>充电桩</label>
-          <img src="../../../assets/imgs/chongdianx.png" style="width: 150px" />
-        </div>
-
-        <div>
-          <!-- <div class="loader"></div> -->
           <strong
+            v-else
             style="
               position: absolute;
               top: 0;
@@ -51,14 +33,64 @@
               color: #0aa2ee;
               font-size: 24px;
             "
-            >空闲</strong
+            >{{ handle_label(item.fChargeStatus) }}</strong
+          >
+          <div style="color: #3ee0b9">
+            <div>
+              当前SOC:
+              <strong style="color: #000000; margin-left: 5px">
+                {{ item.fChargeSOC }} %</strong
+              >
+            </div>
+            <div>
+              A枪电量:
+              <strong style="color: #000000; margin-left: 5px">
+                {{ item.fElectricA }} kWh</strong
+              >
+            </div>
+            <div>
+              B枪电量:
+              <strong style="color: #000000; margin-left: 5px">
+                {{ item.fElectricB }} kWh</strong
               >
             </div>
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </template>
-
+<script>
+import { handle_GetChargingDeviceStatus } from "@/services/swapping";
+export default {
+  data() {
+    return {
+      data_souce: [],
+    };
+  },
+  methods: {
+    handle_GetChargingDeviceStatus() {
+      handle_GetChargingDeviceStatus().then((response) => {
+        // console.log(response, "-------");
+        this.data_souce = response.data.data.data;
+      });
+    },
+    handle_label(data) {
+      switch (data) {
+        case 0:
+          return "待机";
+        case 2:
+          return "工作完成";
+        case 3:
+          return "暂停";
+      }
+    },
+  },
+  mounted() {
+    this.handle_GetChargingDeviceStatus();
+  },
+};
+</script>
 <style scoped lang="less">
 .comp {
   position: relative;

src/pages/swapping/components/bot_two.vue

@@ -466,12 +466,16 @@
           <div>
             <span class="cicle_bg" style="background: #0afc76"></span>
             <span>启用:</span>
-            <span style="color: #0afc76;margin-left: 5px;">{{ fStatus_true }}仓</span>
+            <span style="color: #0afc76; margin-left: 5px"
+              >{{ fStatus_true }}仓</span
+            >
           </div>
           <div>
             <span class="cicle_bg" style="background: #f2c516"></span>
             <span>禁用:</span>
-            <span style="color: #0afc76;margin-left: 5px;">{{ fStatus_false }}仓</span>
+            <span style="color: #0afc76; margin-left: 5px"
+              >{{ fStatus_false }}仓</span
+            >
           </div>
         </div>
         <!--  -->
@@ -483,22 +487,30 @@
           <div>
             <span class="cicle_bg" style="background: #0afc76"></span>
             <span>未知:</span>
-            <span style="color: #f9c20d;margin-left: 5px;">{{ fChargeStatus_0 }}块</span>
+            <span style="color: #f9c20d; margin-left: 5px"
+              >{{ fChargeStatus_0 }}块</span
+            >
           </div>
           <div>
             <span class="cicle_bg" style="background: #0afc76"></span>
             <span>正在充电:</span>
-            <span style="color: #f9c20d;margin-left: 5px;">{{ fChargeStatus_1 }}块</span>
+            <span style="color: #f9c20d; margin-left: 5px"
+              >{{ fChargeStatus_1 }}块</span
+            >
           </div>
           <div>
             <span class="cicle_bg" style="background: #f5402b"></span>
             <span>无电池:</span>
-            <span style="color: #f9c20d;margin-left: 5px;">{{ fChargeStatus_2 }}块</span>
+            <span style="color: #f9c20d; margin-left: 5px"
+              >{{ fChargeStatus_2 }}块</span
+            >
           </div>
           <div>
             <span class="cicle_bg" style="background: #dbd003"></span>
             <span>空闲:</span>
-            <span style="color: #f9c20d;margin-left: 5px;">{{ fChargeStatus_3 }}块</span>
+            <span style="color: #f9c20d; margin-left: 5px"
+              >{{ fChargeStatus_3 }}块</span
+            >
           </div>
         </div>
       </div>
@@ -542,6 +554,7 @@ import {
   handle_SetBarrier,
   handle_ShowHomeScreenInfoShow,
   handleGetChargMonitorChargBmsData,
+  handle_GetChargingDeviceStatus,
 } from "@/services/swapping";
 export default {
   data() {
@@ -591,7 +604,7 @@ export default {
   },
   created() {},
   mounted() {
-    this.getbuleth_data()
+    this.getbuleth_data();
   },
   methods: {
     handleGetChargMonitorChargBmsData() {
@@ -748,6 +761,7 @@ export default {
         this.businessSwappingState = response.data.data.businessSwappingState;
       });
     },
+   
   },
 };
 </script>

src/router/async/router.map.js

@@ -33,6 +33,11 @@ const routerMap = {
         path: '404',
         component: () => import('@/pages/exception/404')
     },
+    battery_details: {
+        path: 'battery_details',
+        name: '详情展示',
+        component: () => import('@/pages/battery_details/index')
+    },
     exp500: {
         name: 'exp500',
         path: '500',
@@ -496,16 +501,7 @@ const routerMap = {
     },
 
     // zz
-    battery_details: {
-        path: 'battery_details',
-        name: '详情展示',
-        meta: {
-            authority: {
-                permission: 'battery_details'
-            }
-        },
-        component: () => import('@/pages/battery_details/index')
-    },
+  
 
 
 
@@ -842,6 +838,16 @@ const routerMap = {
         },
         component: () => import('@/pages/heat/warehouses/index')
     },
+    ups_monitor: {
+        path: 'ups_monitor',
+        name: 'UPS监控',
+        meta: {
+            authority: {
+                permission: 'ups_monitor'
+            }
+        },
+        component: () => import('@/pages/heat/ups_monitor/index')
+    },
     electricity: {
         name: '电能监控',
         path: 'electricity',

src/services/api.js

@@ -59,6 +59,7 @@ module.exports = {
 	GetChargerRecordReport: `${second_url}/ChrgMonitor/GetChargerRecordReport`, // 尖峰平谷7242
 	ShowHomeScreenInfoShow: `${BASE_URL}/ShowHomeScreenInfoShow`, // 大屏车辆信息8111
 	TCgRealTimeDisplay: `${second_url}/TCgRealTimeDisplay`, // 充电功率控制 7242
+	GetChargingDeviceStatus: `${second_url}/ChrgMonitor/GetChargingDeviceStatus`, // 充电桩 7242
 
 
 	GetBattPerStatusCount: `${BASE_URL}/SwapMonitor/GetBattPerStatusCount`, // 换电大屏数据

src/services/swapping/index.js

@@ -15,7 +15,8 @@ import {
     GetElecTotal,
     GetChargerRecordReport,
     ShowHomeScreenInfoShow,
-    TCgRealTimeDisplay
+    TCgRealTimeDisplay,
+    GetChargingDeviceStatus
 } from '@/services/api'
 import {
     request,
@@ -90,3 +91,7 @@ export async function handle_ShowHomeScreenInfoShow() {
 export async function handle_TCgRealTimeDisplay(data) {
     return request(TCgRealTimeDisplay + '?sn=' + data.sn + '&expectePower=' + data.expectePower, METHOD.POST)
 }
+
+export async function handle_GetChargingDeviceStatus() {
+    return request(GetChargingDeviceStatus, METHOD.GET)
+}