大屏

src/api/wsScreen/index.js

@@ -181,3 +181,21 @@ export const getStatByTypeAndAgeByTurnoverRateApi = (data = {}) => {
     params: data,
   })
 }
+
+// 装备在用率统计-弹框列表
+export const getUsageStatisticsDetailsApi = (data = {}) => {
+  return request({
+    url: '/material-mall/provinceScreen/getUsageStatisticsDetails',
+    method: 'get',
+    params: data,
+  })
+}
+
+// 工程在用装备情况-弹框列表
+export const getEquipmentDetailsApi = (data = {}) => {
+  return request({
+    url: '/material-mall/provinceScreen/getEquipmentDetails',
+    method: 'get',
+    params: data,
+  })
+}

src/views/screen/wsScreen/components/right/EquipItemMore.vue

@@ -13,7 +13,7 @@
         <i class="close-btn" @click="dialogVisible = false" />
         <div class="dlg-title">{{ title }}</div>
 
-        <div ref="category" style="height: 300px"></div>
+        <div ref="category" style="height: 600px"></div>
       </div>
     </el-dialog>
   </div>
@@ -182,6 +182,7 @@ export default {
   background-image: url('../../img/right-dialog.png');
   background-size: 100% 100%;
   color: #fff;
+  height: 800px;
 }
 ::v-deep .el-dialog__header {
   display: none;

src/views/screen/wsScreen/components/right/EquipUsageRate.vue

@@ -15,10 +15,10 @@
       <div class="item" :class="`item-bg-${index + 1}`" v-for="(item, index) in tableList" :key="index">
         <div style="text-align: center; margin-top: 20px">{{ item.name || '-' }}</div>
         <div style="margin: 112px 0 0 42px"
-          ><span style="font-size: 12px; color: #ccc">在用率</span> {{ item.proportion || 0 }}</div
+          ><span style="font-size: 12px; color: #ccc">在用率</span> {{ item.proportion || 0 }} %</div
         >
         <div style="margin-left: 42px"
-          ><span style="font-size: 12px; color: #ccc">周转率</span> {{ item.turnoverRate || 0 }}</div
+          ><span style="font-size: 12px; color: #ccc">周转率</span> {{ item.turnoverRate || 0 }} 次/年</div
         >
       </div>
     </div>
@@ -160,11 +160,12 @@ export default {
   margin-top: 15px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   .item {
     width: 190px;
     height: 220px;
     font-weight: bolder;
+    margin-right: 22px;
   }
   .item-bg-1 {
     background-image: url('../../img/list-1.png');

src/views/screen/wsScreen/components/right/EquipUsageRateMore.vue

@@ -43,7 +43,7 @@
         <!-- 分页 -->
         <pagination
           v-show="total > 0"
-          :total="88"
+          :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
@@ -54,6 +54,8 @@
 </template>
 
 <script>
+import { getUsageStatisticsDetailsApi } from '@/api/wsScreen'
+
 export default {
   data() {
     return {
@@ -65,9 +67,9 @@ export default {
       },
 
       tableColumns: [
-        { label: '装备名称', prop: 'equipName' },
+        { label: '装备名称', prop: 'name' },
-        { label: '在用率', prop: 'usageRate' },
+        { label: '在用率 (%)', prop: 'proportion' },
-        { label: '周转率', prop: 'turnoverRate' },
+        { label: '周转率 (次/年)', prop: 'turnoverRate' },
       ],
       tableList: [],
       total: 0,
@@ -76,20 +78,17 @@ export default {
   created() {},
   methods: {
     openDialog() {
+      this.getList()
       this.dialogVisible = true
     },
-    getList() {},
+    async getList() {
-    // 查询
+      try {
-    handleQuery() {
+        const res = await getUsageStatisticsDetailsApi({ ...this.queryParams })
-      this.queryParams.pageNum = 1
+        this.tableList = res.rows || []
-      this.getList()
+        this.total = res.total || 0
-    },
+      } catch (err) {
-    // 重置
+        console.log('🚀 ~ err:', err)
-    handleReset() {
+      }
-      this.$refs.queryForm.resetFields()
-      this.queryParams.pageNum = 1
-      this.queryParams.pageSize = 10
-      this.getList()
     },
   },
 }

src/views/screen/wsScreen/components/right/ProEquipMore.vue

@@ -15,10 +15,8 @@
 
         <!-- 表单 -->
         <el-form :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
-          <el-form-item label="装备类型" prop="equipType">
+          <el-form-item label="工程名称" prop="proName">
-            <el-select v-model="queryParams.equipType" placeholder="请选择" clearable style="width: 240px">
+            <el-input v-model="queryParams.proName" clearable placeholder="请输入" />
-              <el-option v-for="item in equipTypeList" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
           </el-form-item>
 
           <!-- 表单按钮 -->
@@ -58,7 +56,7 @@
         <!-- 分页 -->
         <pagination
           v-show="total > 0"
-          :total="88"
+          :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
@@ -69,6 +67,8 @@
 </template>
 
 <script>
+import { getEquipmentDetailsApi } from '@/api/wsScreen'
+
 export default {
   data() {
     return {
@@ -77,19 +77,15 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        equipType: '', // 装备类型
+        proName: '', // 装备类型
       },
-      equipTypeList: [
-        { label: '类型1', value: 1 },
-        { label: '类型2', value: 2 },
-      ],
       tableColumns: [
         { label: '工程名称', prop: 'proName' },
-        { label: '在用装备数量（台）', prop: 'usageNum' },
+        { label: '在用装备数量（台）', prop: 'inUser' },
-        { label: '类型', prop: 'equipType' },
+        { label: '类型', prop: 'projectTypeName' },
-        { label: '电压等级（kV）', prop: 'voltageLevel' },
+        { label: '电压等级（kV）', prop: 'voltage' },
         { label: '规模（拆单公里）', prop: 'scale' },
-        { label: '百公里线路装备使用情况', prop: 'equipUsage' },
+        { label: '百公里线路装备使用情况', prop: 'usage' },
       ],
       tableList: [],
       total: 0,
@@ -98,9 +94,18 @@ export default {
   created() {},
   methods: {
     openDialog() {
+      this.getList()
       this.dialogVisible = true
     },
-    getList() {},
+    async getList() {
+      try {
+        const res = await getEquipmentDetailsApi({ ...this.queryParams })
+        this.tableList = res.rows || []
+        this.total = res.total || 0
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
     // 查询
     handleQuery() {
       this.queryParams.pageNum = 1

src/views/screen/wsScreen/components/right/ProEquipSituationList.vue

@@ -4,8 +4,8 @@
       <div class="title-text">工程在用装备情况</div>
       <div class="more more-warp">
         <div>
-          <el-select v-model="select" placeholder="" multiple clearable filterable size="mini" @change="">
+          <el-select v-model="proCode" placeholder="" clearable filterable size="mini" @change="getList">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" />
           </el-select>
         </div>
         <div style="margin-left: 50px" @click="openDialog">更多 ></div>
@@ -75,19 +75,21 @@
 
 <script>
 import { getEquipmentUseApi } from '@/api/wsScreen'
+import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'
 
 export default {
   data() {
     return {
-      select: null,
+      proCode: '',
       options: [],
-      proNum: 10,
+      proNum: 0,
-      equipNum: 233,
+      equipNum: 0,
       tabIndex: 1,
       tableData: [],
     }
   },
   created() {
+    this.getProList()
     this.getList()
   },
   methods: {
@@ -97,10 +99,24 @@ export default {
     },
     async getList() {
       try {
-        const res = await getEquipmentUseApi({ type: this.tabIndex })
+        const params = {
-        this.tableData = res.data || []
+          type: this.tabIndex,
+          proCode: this.proCode
+        }
+        const res = await getEquipmentUseApi(params)
+        this.tableData = res.data.equipmentUse || []
+        this.proNum = res.data.proNum || 0
+        this.equipNum = res.data.equipmentNum || 0
       } catch (error) {}
     },
+    async getProList() {
+      try {
+        const res = await getUseProjectListAPI()
+        this.options = res.data
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
     openDialog() {
       this.$emit('openDialog')
     },
@@ -117,13 +133,13 @@ export default {
   overflow: auto;
 
   /* 隐藏滚动条轨迹 */
-  -ms-overflow-style: none;  /* IE / Edge */
+  -ms-overflow-style: none; /* IE / Edge */
-  scrollbar-width: none;     /* Firefox */
+  scrollbar-width: none; /* Firefox */
 }
 
 /* Chrome / Safari */
 .scroll-container::-webkit-scrollbar {
-  width: 0;   /* 或者直接隐藏 */
+  width: 0; /* 或者直接隐藏 */
   height: 0;
   background: transparent; /* 背景透明 */
 }

src/views/screen/wsScreen/components/right/UsageRateMore.vue

@@ -65,7 +65,7 @@ export default {
       },
 
       tableColumns: [
-        { label: '工程名称', prop: 'proName' },
+        { label: '单位名称', prop: 'proName' },
         { label: '在用率', prop: 'usageRate' },
         { label: '周转率', prop: 'turnoverRate' },
       ],