coding

src/api/report.js

@@ -132,3 +132,5 @@ export const sopWarningAnalysis = (params) =>
     url: '/api/sop/analyse/overview',
     params,
   });
+
+// -----------------------------------项目进度监控-----------------------------------------

src/components/global/report-header/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="report-header flex items-center justify-between">
     <div class="title flex items-center"
-      ><span class="m-r-10px">{{ props.title }}</span>
+      ><span style="margin-right: 10px">{{ props.title }}</span>
       <slot />
       <CustomDatePicker
+        style="margin-left: 10px"
         v-model="range"
         @timeChange="timeChange"
       ></CustomDatePicker

src/utils/chart.js

@@ -455,3 +455,44 @@ export const createWaterBallOption = (
     extend
   );
 };
+
+//基础百分比堆叠柱状图
+export const createPercentBarOption = (
+  {
+    xData = [],
+    seriesData = [],
+    legendData = ['准备', '扫描', '评卷', '收尾', '已完结'],
+    xName = '',
+  },
+  extend = {}
+) => {
+  return mergeParams({
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (obj) {
+        let total = 0;
+        let str = '';
+        for (let i = 0; i < obj.length; i++) {
+          total += obj[i]['value'];
+        }
+        for (let i = 0; i < obj.length; i++) {
+          str =
+            str +
+            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+            obj[i]['color'] +
+            ';"></span>' +
+            ' ' +
+            obj[i]['seriesName'] +
+            ' : ' +
+            obj[i]['value'] +
+            ' (' +
+            ((obj[i]['value'] / total) * 100).toFixed(1) +
+            ' %)' +
+            '</br>';
+        }
+        return str;
+      },
+    },
+    color: colorList,
+  });
+};

src/views/report/dispatch-analysis/index.vue

@@ -339,15 +339,20 @@ const options4 = computed(() =>
       }
     }
     .card {
-      padding: 10px;
+      padding: 4px 10px 10px 10px;
       background-color: #fff;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
       .title {
-        color: #262626;
-        font-size: 14px;
-        font-weight: bold;
         height: 36px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .label {
+          color: #262626;
+          font-size: 14px;
+          // font-weight: bold;
+        }
       }
       .chart-wrap {
         height: calc(100% - 36px);

src/views/report/project-analysis/index.vue

@@ -3,9 +3,41 @@
     <report-header
       title="项目进度监控"
       v-model:dateRange="curTimeRange"
-    ></report-header>
+      @timeChange="timeChange"
+    >
+      <t-select
+        style="width: 200px"
+        :options="serviceOptions"
+        v-model="serviceId"
+        :keys="{ label: 'name', value: 'id' }"
+      ></t-select>
+    </report-header>
     <div class="page-main">
-      <div class="scroll-content"> </div>
+      <div class="scroll-content">
+        <div class="row1 flex items-center">
+          <div class="card">
+            <div class="title">
+              <span class="label">大区在服务人数分布及对比</span>
+            </div>
+            <div class="chart-wrap"> </div>
+          </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">设备供应商设备使用占比</span>
+            </div>
+            <div class="chart-wrap"> </div>
+          </div>
+          <div class="card">
+            <div class="title">
+              <span class="label">供应商项目阶段分布及对比</span>
+            </div>
+            <div class="chart-wrap"> </div>
+          </div>
+        </div>
+        <div class="row2">
+          <div class="card"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -14,7 +46,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useRequest } from 'vue-request';
 import { createCakePieOption } from '@/utils/chart';
-import {} from '@/api/report';
+import { serviceServiceList } from '@/api/report';
 const curTimeRange = ref([]);
 const timeParams = computed(() => {
   return {
@@ -22,6 +54,14 @@ const timeParams = computed(() => {
     endTime: new Date(curTimeRange.value[1]).getTime(),
   };
 });
+const serviceOptions = ref([]);
+const serviceId = ref('');
+const timeChange = (time) => {
+  serviceServiceList(timeParams.value).then((res) => {
+    serviceOptions.value = res || [];
+    res?.length && (serviceId.value = res[0].id);
+  });
+};
 </script>
 
 <style lang="less" scoped>
@@ -34,64 +74,39 @@ const timeParams = computed(() => {
       height: 100%;
       min-height: 600px;
       min-width: 1000px;
+      .row1 {
+        height: calc((100% - 16px) / 2);
+        .card {
+          width: calc((100% - 30px) / 3);
+          height: 100%;
+          &:not(:first-child) {
+            margin-left: 15px;
+          }
+        }
+      }
+      .row2 {
+        margin-top: 15px;
+        height: calc((100% - 16px) / 2);
+        .card {
+          height: 100%;
+        }
+      }
     }
 
     .card {
-      padding: 10px;
+      padding: 4px 10px 10px 10px;
       background-color: #fff;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
       .title {
-        color: #262626;
-        font-size: 14px;
-        font-weight: bold;
         height: 36px;
-      }
-      .chart-wrap {
-        height: calc(100% - 36px);
-        &.service-box {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-          align-content: flex-start;
-        }
-        .service-item {
-          height: 54px;
-          width: calc(50% - 8px);
-          margin-bottom: 8px;
-          padding: 6px 8px;
-          background-color: #f7f7f7;
-          border-radius: 2px;
-
-          .head {
-            font-size: 12px;
-            color: #262626;
-          }
-          .body {
-            font-size: 12px;
-            .label {
-              color: #8c8c8c;
-            }
-            .status {
-              color: #ff7d00;
-              &.finished {
-                color: #00b42a;
-              }
-            }
-            .process-box {
-              flex: 1;
-              margin-left: 30px;
-              background-color: #d9d9d9;
-              height: 6px;
-              border-radius: 3px;
-              width: 90%;
-              overflow: hidden;
-              .process {
-                background-color: #4080ff;
-                height: 100%;
-              }
-            }
-          }
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .label {
+          color: #262626;
+          font-size: 14px;
+          // font-weight: bold;
         }
       }
     }

src/views/report/service-analysis/index.vue

@@ -6,7 +6,7 @@
       @timeChange="timeChange"
     >
       <t-select
-        style="width: 200px; margin-right: 10px"
+        style="width: 200px"
         :options="serviceOptions"
         v-model="serviceId"
         :keys="{ label: 'name', value: 'id' }"
@@ -428,17 +428,7 @@ const options8 = computed(() => {
       min-height: 600px;
       min-width: 1000px;
       display: flex;
-      .title {
-        height: 36px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .label {
-          color: #262626;
-          font-size: 14px;
-          font-weight: bold;
-        }
-      }
+
       .col1,
       .col3 {
         width: 268px;
@@ -562,6 +552,17 @@ const options8 = computed(() => {
       background-color: #fff;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
+      .title {
+        height: 36px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .label {
+          color: #262626;
+          font-size: 14px;
+          // font-weight: bold;
+        }
+      }
     }
   }
 }

src/views/report/sop-analysis/index.vue

@@ -6,7 +6,7 @@
       @timeChange="timeChange"
     >
       <t-select
-        style="width: 200px; margin-right: 10px"
+        style="width: 200px"
         :options="serviceOptions"
         v-model="serviceId"
         :keys="{ label: 'name', value: 'id' }"
@@ -199,7 +199,7 @@
         <div class="col3">
           <div class="card">
             <div class="title">
-              <span>项目考勤异常TOP10</span>
+              <span class="label">项目考勤异常TOP10</span>
             </div>
             <div class="chart-wrap">
               <table-loop
@@ -210,7 +210,7 @@
           </div>
           <div class="card">
             <div class="title">
-              <span>项目考勤异常TOP10</span>
+              <span class="label">项目考勤异常TOP10</span>
             </div>
             <div class="chart-wrap">
               <table-loop
@@ -221,7 +221,7 @@
           </div>
           <div class="card">
             <div class="title">
-              <span>供应商考勤异常TOP5</span>
+              <span class="label">供应商考勤异常TOP5</span>
             </div>
             <div class="chart-wrap">
               <table-loop
@@ -470,17 +470,7 @@ const changeSort = (group, index) => {
       min-height: 600px;
       min-width: 1000px;
       display: flex;
-      .title {
-        height: 36px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .label {
-          color: #262626;
-          font-size: 14px;
-          font-weight: bold;
-        }
-      }
+
       .chart-wrap {
         height: calc(100% - 36px);
       }
@@ -607,6 +597,17 @@ const changeSort = (group, index) => {
       background-color: #fff;
       border: 1px solid #e5e5e5;
       border-radius: 4px;
+      .title {
+        height: 36px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .label {
+          color: #262626;
+          font-size: 14px;
+          // font-weight: bold;
+        }
+      }
     }
   }
 }