调整停机数据统计页面

src/views/calc/calcStop/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <!--
       <el-form-item label="设备号" prop="deviceId">
         <el-input
           v-model="queryParams.deviceId"
@@ -19,6 +20,7 @@
           />
         </el-select>
       </el-form-item>
+      -->
       <el-form-item label="日期" prop="daterangeTime">
         <el-date-picker clearable
           v-model="queryParams.daterangeTime"
@@ -42,8 +44,8 @@
       </el-form-item>
     </el-form>
     <div style="display: flex;flex-direction: row;width: 100%;">
-        <div style="width: 35%;">
-            <el-row :gutter="10" class="mb8">
+        <div style="width: 45%;">
+            <el-row :gutter="10" class="mb8" style="line-height: 32px;">
               <el-col :span="1.5">
                 停机原因分析
               </el-col>
@@ -56,6 +58,7 @@
               </el-table-column>
               <el-table-column label="停机次数" align="center" prop="num"></el-table-column>
               <el-table-column label="停机时长" align="center" prop="time" width="150px"></el-table-column>
+              <el-table-column label="平均时长" align="center" prop="avgTime"></el-table-column>
               <el-table-column label="次数占比" align="center" prop="percentNum">
                 <template #default="scope">
                   <span>{{  (scope.row.percentNum*100).toFixed(1)+' %' }}</span>
@@ -66,15 +69,45 @@
                   <span>{{  (scope.row.percentTimes*100).toFixed(1)+' %' }}</span>
                 </template>
               </el-table-column>
+              <el-table-column label="明细" align="center">
+                <template #default="scope">
+                  <el-button @click="detailList(scope.row.type)">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+        </div>
+        <div style="width: 55%;margin-left: 5%;">
+            <el-row :gutter="10" class="mb8" style="line-height: 32px;">
+              <el-col :span="16">
+                并发分析—下卷及叫料
+              </el-col>
+              <el-col :span="3.5">
+                停机类型：
+              </el-col>
+              <el-col :span="4">
+                <el-select clearable v-model="bfFilterStopType" @change="handerBFChange" @clearable="handerBFClear">
+                  <el-option v-for="item in stop_type"  :key="item.value"   :label="item.label"  :value="item.value"></el-option>
+                </el-select>
+              </el-col>
+            </el-row>
+            <el-table v-loading="loading" :data="calcBF2" height="720px" :row-attributes="setBFRowAttributes">
+              <el-table-column label="类型" align="center" prop="type">
+                <template #default="scope">
+                  <span>{{  getStopTypeName(scope.row.type) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="日期" align="center" prop="date"></el-table-column>
+              <el-table-column label="小时" align="center" prop="hour"></el-table-column>
+              <el-table-column label="并发数" align="center" prop="tps"></el-table-column>
+              <el-table-column label="停机次数" align="center" prop="num"></el-table-column>
+              <el-table-column label="最长时间(秒)" align="center" prop="max"></el-table-column>
+              <el-table-column label="最小时间(秒)" align="center" prop="min"></el-table-column>
+              <el-table-column label="平均时间(秒)" align="center" prop="avg"></el-table-column>
             </el-table>
         </div>
-        <div style="width: 60%;margin-left: 5%;">
-          <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-              数据明细
-            </el-col>
-          </el-row>
-          <el-table v-loading="loading" :data="calcStopList">
+     </div>
+     <el-dialog title="明细数据" v-model="detail" width="1100px" append-to-body>
+          <el-table v-loading="loading" :data="calcStopList" height="640px">
             <el-table-column label="设备号" align="center" prop="deviceId">
               <template #default="scope">
                 <span>{{ scope.row.deviceId+'号' }}</span>
@@ -109,8 +142,12 @@
             v-model:limit="queryParams.pageSize"
             @pagination="getList"
           />
-        </div>
-     </div>
+          <template #footer>
+            <div class="dialog-footer" style="text-align: center;">
+              <el-button type="primary" @click="cancel">关 闭</el-button> 
+            </div>
+          </template>
+     </el-dialog>
     <!-- 添加或修改停机数据统计对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form ref="calcStopRef" :model="form" :rules="rules" label-width="80px">
@@ -181,19 +218,22 @@
 </template>
 
 <script setup name="CalcStop">
-import { listCalcStop, statCalcStop, getCalcStop, delCalcStop, addCalcStop, updateCalcStop } from "@/api/calc/calcStop";
+import { listCalcStop, statCalcStop, addCalcStop, updateCalcStop } from "@/api/calc/calcStop";
 const { proxy } = getCurrentInstance();
 
 const calcStopList = ref([]);
 const open = ref(false);
+const detail = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
-const single = ref(true);
+const bfFilterStopType = ref('');
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const calcStopStat = ref([]);
+const calcBF = ref([]);
+const calcBF2 = ref([]);
 let day = new Date();
 day=day.setDate(day.getDate()-1);
 const data = reactive({
@@ -216,12 +256,17 @@ const { stop_type } = proxy.useDict('stop_type');
 function getStopTypeName(v){
   for (let index = 0; index < stop_type.value.length; index++) {
     const element = stop_type.value[index];
-    if(element.value==v) return element.label;
-    
+    if(element.value==v) return element.label;    
   }
   return '';
 }
 const { queryParams, form, rules } = toRefs(data);
+/*获取明细数据 */
+function detailList(type){
+  detail.value = true;
+  queryParams.value.stopType = type;
+  getList();
+}
 /** 查询停机数据统计列表 */
 function getList() {
   loading.value = true;
@@ -253,14 +298,36 @@ function getStat() {
       return;
     }
     calcStopStat.value = response.data.calc;
+    calcBF.value = response.data.tps;
+    calcBF2.value = response.data.tps;
   });
 }
 
+function handerBFClear(){
+  calcBF2.value = calcBF.value;
+  bfFilterStopType.value='';
+}
+function handerBFChange(type){
+  bfFilterStopType.value=type;
+  calcBF2.value = calcBF.value.filter((row, index) => {
+        if (type==null || row.type==type) {
+          return true; 
+        }
+        return false;
+  });
+}
 
+function setBFRowAttributes({ row, rowIndex }){
+  return {
+    'data-id': rowIndex + 1, // 添加 data-id 属性
+    'stoptypecode': row.type,   // 添加 data-name 属性
+  };
+}
 
 // 取消按钮
 function cancel() {
   open.value = false;
+  detail.value = false;
   reset();
 }
 
@@ -282,41 +349,17 @@ function reset() {
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
-  getList();
+  queryParams.value.stopType = '';
   getStat();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
+  queryParams.value.stopType = '';
   handleQuery();
 }
 
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加停机数据统计";
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const _id = row.id || ids.value
-  getCalcStop(_id).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改停机数据统计";
-  });
-}
-
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["calcStopRef"].validate(valid => {
@@ -338,16 +381,6 @@ function submitForm() {
   });
 }
 
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const _ids = row.id || ids.value;
-  proxy.$modal.confirm('是否确认删除停机数据统计编号为"' + _ids + '"的数据项？').then(function() {
-    return delCalcStop(_ids);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
 
 /** 导出按钮操作 */
 function handleExport() {
@@ -356,5 +389,4 @@ function handleExport() {
   }, `calcStop_${new Date().getTime()}.xlsx`)
 }
 getStat();
-getList();
 </script>