报表暗黑模式下样式调整

src/components/common/china-point-chart/index.vue

@@ -8,6 +8,8 @@ import * as echarts from 'echarts';
 import MyChart from '../../global/chart';
 import geoCoordMap from './geoCoordMap';
 import { colorList } from '@/utils/chart';
+import { useAppStore } from '@/store';
+const appStore = useAppStore();
 onMounted(() => {
   echarts.registerMap('china', { geoJSON: chinaMap });
 });
@@ -57,9 +59,6 @@ const dataHandle = (data) => {
     return [];
   } else {
     let arr = [];
-    // console.log('data', data);
-    // console.log('data[0].data:', data[0].data);
-    // console.log('convertData[data[0].data]', convertData[data[0].data]);
     for (let i = 0; i < data.length; i++) {
       let item = data[i];
       arr.push(
@@ -138,7 +137,7 @@ const options = computed(() => {
       x: 'center',
       data: ['教务处', '研究生'],
       textStyle: {
-        color: '#333',
+        color: appStore.isFullscreen ? '#e5e5e5' : '#333',
       },
     },
     geo: {

src/style/black.css

@@ -0,0 +1,163 @@
+body.app-fullscreen .app-menu,
+body.app-fullscreen .app-submenu {
+  display: none;
+}
+body.app-fullscreen .report-header {
+  background: #09182f;
+  position: relative;
+  border-bottom: 1px solid #0a3367;
+}
+body.app-fullscreen .report-header .right-box p {
+  color: #bedaff;
+}
+body.app-fullscreen .report-header-title {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  height: 60px;
+  width: 464px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 32px;
+  text-align: center;
+  padding: 14px 0;
+  margin: 0 !important;
+  background-image: url(../assets/imgs/bg_report_title.png);
+  background-size: 100% 100%;
+}
+body.app-fullscreen .page-main {
+  background-color: #060606;
+  color: #fff;
+}
+body.app-fullscreen .page-main .card {
+  background: #09182f !important;
+  border: 1px solid #0a3367 !important;
+}
+body.app-fullscreen .page-main .card .title .t-button {
+  color: #e5e5e5;
+}
+body.app-fullscreen .page-main .card .title .label {
+  color: #fff !important;
+}
+body.app-fullscreen .t-button {
+  border: 1px solid #0a3367;
+  background-color: transparent;
+  color: #bedaff;
+}
+body.app-fullscreen .t-button:hover {
+  opacity: 0.8;
+}
+body.app-fullscreen .t-input,
+body.app-fullscreen .t-range-input {
+  background-color: transparent;
+  border-color: #0a3367;
+  box-shadow: none;
+}
+body.app-fullscreen .t-input__inner {
+  color: #bedaff;
+}
+body.app-fullscreen .t-icon,
+body.app-fullscreen .t-fake-arrow {
+  color: #bedaff !important;
+}
+body.app-fullscreen .t-progress__bar {
+  background: #0a3367;
+}
+body.app-fullscreen .t-progress__info {
+  color: #fff;
+}
+body.app-fullscreen .t-table,
+body.app-fullscreen .t-table tr {
+  background-color: transparent !important;
+  border-color: #0a3367 !important;
+}
+body.app-fullscreen .t-table td,
+body.app-fullscreen .t-table th,
+body.app-fullscreen .t-table__content {
+  border-color: #0a3367 !important;
+  color: #fff;
+}
+body.app-fullscreen .t-table th {
+  color: #8c8c8c;
+}
+body.app-fullscreen .t-popup__content {
+  background-color: #0a3367 !important;
+}
+body.app-fullscreen .t-select-option {
+  color: #fff;
+}
+body.app-fullscreen .t-select-option.t-is-selected {
+  background-color: #114c9a;
+}
+body.app-fullscreen .t-select-option__hover {
+  background-color: #114c9a !important;
+}
+body.app-fullscreen .table-loop .thead .td {
+  background: rgba(10, 51, 103, 0.5);
+}
+body.app-fullscreen .table-loop .slide .td {
+  color: #fff !important;
+}
+body.app-fullscreen .table-loop .slide:nth-child(2n + 1) {
+  background: #173d6e;
+}
+body.app-fullscreen .quality-analysis .page-main .col1 .chart-wrap::after {
+  border-bottom: 1px solid #0a3367;
+}
+body.app-fullscreen .dispatch-analysis .statistics {
+  background: rgba(10, 51, 103, 0.85) !important;
+  border: 1px solid #0a3367 !important;
+}
+body.app-fullscreen .dispatch-analysis .col2 .service-box .service-item {
+  background: rgba(10, 51, 103, 0.5) !important;
+}
+body.app-fullscreen .dispatch-analysis .col2 .service-box .service-item .head {
+  color: #fff !important;
+}
+body.app-fullscreen .dispatch-analysis .col2 .service-box .service-item .body .process-box {
+  background: #0a3367;
+}
+body.app-fullscreen .dispatch-analysis .col2 .service-box .service-item .body .label {
+  color: #8c8c8c !important;
+}
+body.app-fullscreen .service-analysis .process-box {
+  background: #0a3367 !important;
+}
+body.app-fullscreen .service-analysis .grid1-others .label {
+  color: #bfbfbf !important;
+}
+body.app-fullscreen .service-analysis .grid1-others .num {
+  color: #fff !important;
+}
+body.app-fullscreen .service-analysis .grid3-others .num-show .label {
+  color: #bfbfbf !important;
+}
+body.app-fullscreen .service-analysis .grid3-others .desc-text {
+  background: #0a2448 !important;
+  color: #fff !important;
+}
+body.app-fullscreen .service-analysis .box4 .title-wrap {
+  color: #d9d9d9 !important;
+}
+body.app-fullscreen .service-analysis .box4 .desc-text {
+  background: #0a2448 !important;
+  color: #fff !important;
+}
+body.app-fullscreen .sop-analysis .col2 .tab-box {
+  background: #0a2448 !important;
+}
+body.app-fullscreen .sop-analysis .col2 .tab-box .tab.active {
+  background: #173d6e !important;
+}
+body.app-fullscreen .sop-analysis .col2 .list-wrap .list-item .item-head {
+  background: rgba(10, 51, 103, 0.5) !important;
+  color: #fff !important;
+}
+body.app-fullscreen .sop-analysis .col2 .list-wrap .list-item .item-body .label {
+  color: #bfbfbf !important;
+}
+body.app-fullscreen .sop-analysis .col2 .list-wrap .list-item .bar-box {
+  background: #0a3367 !important;
+}

src/style/black.less

@@ -40,10 +40,9 @@ body.app-fullscreen {
         .t-button {
           color: #e5e5e5;
         }
-      }
-
-      .label {
-        color: #fff !important;
+        .label {
+          color: #fff !important;
+        }
       }
     }
   }
@@ -103,10 +102,111 @@ body.app-fullscreen {
     background-color: #114c9a !important;
   }
 
+  .table-loop {
+    .thead {
+      .td {
+        background: rgba(10, 51, 103, 0.5);
+      }
+    }
+    .slide {
+      .td {
+        color: #fff !important;
+      }
+      &:nth-child(2n + 1) {
+        background: rgba(23, 61, 110, 1);
+      }
+    }
+  }
+
   // quality-analysis
   .quality-analysis {
     .page-main .col1 .chart-wrap::after {
       border-bottom: 1px solid #0a3367;
     }
   }
+
+  //dispatch-analysis
+  .dispatch-analysis {
+    .statistics {
+      background: rgba(10, 51, 103, 0.85) !important;
+      border: 1px solid #0a3367 !important;
+    }
+    .col2 .service-box {
+      .service-item {
+        background: rgba(10, 51, 103, 0.5) !important;
+        .head {
+          color: #fff !important;
+        }
+        .body {
+          .process-box {
+            background: #0a3367;
+          }
+          .label {
+            color: #8c8c8c !important;
+          }
+        }
+      }
+    }
+  }
+  //service-analysis
+  .service-analysis {
+    .process-box {
+      background: rgba(10, 51, 103, 1) !important;
+    }
+    .grid1-others {
+      .label {
+        color: #bfbfbf !important;
+      }
+      .num {
+        color: #fff !important;
+      }
+    }
+    .grid3-others {
+      .num-show {
+        .label {
+          color: #bfbfbf !important;
+        }
+      }
+      .desc-text {
+        background: rgba(10, 36, 72, 1) !important;
+        color: #fff !important;
+      }
+    }
+    .box4 {
+      .title-wrap {
+        color: #d9d9d9 !important;
+      }
+      .desc-text {
+        background: rgba(10, 36, 72, 1) !important;
+        color: #fff !important;
+      }
+    }
+  }
+  //sop-analysis
+  .sop-analysis {
+    .col2 {
+      .tab-box {
+        background: rgba(10, 36, 72, 1) !important;
+        .tab.active {
+          background: rgba(23, 61, 110, 1) !important;
+        }
+      }
+      .list-wrap {
+        .list-item {
+          .item-head {
+            background: rgba(10, 51, 103, 0.5) !important;
+            color: #fff !important;
+          }
+          .item-body {
+            .label {
+              color: #bfbfbf !important;
+            }
+          }
+          .bar-box {
+            background: rgba(10, 51, 103, 1) !important;
+          }
+        }
+      }
+    }
+  }
 }

src/utils/chart.js

@@ -127,7 +127,7 @@ export const createStackingBarOption = ({ xData, seriesData }, extend = {}) => {
         name: item.name,
         type: 'bar',
         data: item.data,
-        barWidth: item.barWidth ?? '8px',
+        // barWidth: item.barWidth ?? '8px',
         stack: '总量',
         // label: {
         //   normal: {
@@ -162,7 +162,7 @@ export const createBarOption = ({ xData, seriesData }, extend = {}) => {
           right: '0%',
           top: '1%',
           textStyle: {
-            color: '#595959',
+            color: appStore.isFullscreen ? '#e5e5e5' : '#8c8c8c',
             fontSize: 12,
           },
           itemWidth: 8,
@@ -171,13 +171,10 @@ export const createBarOption = ({ xData, seriesData }, extend = {}) => {
         },
       ],
       grid: {
-        // top: '22%',
-        // right: '3%',
-        // left: '16%',
-        // bottom: '10%',
         left: '1%',
         right: '1%',
         bottom: '1%',
+        top: '35',
         containLabel: true,
       },
       xAxis: [
@@ -192,7 +189,7 @@ export const createBarOption = ({ xData, seriesData }, extend = {}) => {
           },
           axisLabel: {
             margin: 6,
-            color: '#8c8c8c',
+            color: appStore.isFullscreen ? '#BFBFBF' : '#8c8c8c',
             textStyle: {
               fontSize: 12,
             },
@@ -203,7 +200,7 @@ export const createBarOption = ({ xData, seriesData }, extend = {}) => {
         {
           axisLabel: {
             formatter: '{value}',
-            color: '#8c8c8c',
+            color: appStore.isFullscreen ? '#BFBFBF' : '#8c8c8c',
             textStyle: {
               fontSize: 12,
             },
@@ -220,37 +217,13 @@ export const createBarOption = ({ xData, seriesData }, extend = {}) => {
         name: item.name,
         type: 'bar',
         data: item.data,
-        barWidth: '12px',
+        // barWidth: '12px',
         itemStyle: {
           normal: {
             color: colorList[index % colorList.length],
           },
         },
       })),
-      // series: [
-      //   {
-      //     name: '当期',
-      //     type: 'bar',
-      //     data: yDatas[0],
-      //     barWidth: '12px',
-      //     itemStyle: {
-      //       normal: {
-      //         color: '#4080FF',
-      //       },
-      //     },
-      //   },
-      //   {
-      //     name: '同期',
-      //     type: 'bar',
-      //     data: yDatas[1],
-      //     barWidth: '12px',
-      //     itemStyle: {
-      //       normal: {
-      //         color: '#23C343',
-      //       },
-      //     },
-      //   },
-      // ],
     },
     extend
   );
@@ -279,7 +252,7 @@ export const createRingPieOption = (
         icon: 'circle',
         data: data.map((item) => item.name),
         textStyle: {
-          color: '#595959',
+          color: appStore.isFullscreen ? '#fff' : '#595959',
         },
         itemWidth: 10,
         itemHeight: 10,
@@ -305,10 +278,10 @@ export const createRingPieOption = (
             rich: {
               total: {
                 fontSize: 16,
-                color: '#262626',
+                color: appStore.isFullscreen ? '#fff' : '#262626',
               },
             },
-            color: '#8c8c8c',
+            color: appStore.isFullscreen ? '#bfbfbf' : '#595959',
             fontSize: 12,
             lineHeight: 24,
           },
@@ -354,7 +327,7 @@ export const createCakePieOption = (
         top: 'center',
         icon: 'circle',
         textStyle: {
-          color: '#8C8C8C',
+          color: appStore.isFullscreen ? '#E5E5E5' : '#8C8C8C',
         },
         itemWidth: 10,
         itemHeight: 10,
@@ -432,7 +405,7 @@ export const createWaterBallOption = (
               left: '10',
               top: 'middle',
               style: {
-                fill: '#fff',
+                fill: appStore.isFullscreen ? '#BFBFBF' : '#fff',
                 text: title,
                 font: '12px Microsoft YaHei',
               },
@@ -452,8 +425,8 @@ export const createWaterBallOption = (
               // formatter: '',
               position: ['50%', '66%'],
               textStyle: {
-                color: '#333',
-                fontSize: 20,
+                color: appStore.isFullscreen ? '#BFBFBF' : '#333',
+                fontSize: 18,
               },
             },
           },
@@ -556,7 +529,7 @@ export const createPercentBarOption = (
         left: 'center',
         icon: 'circle',
         textStyle: {
-          color: '#8C8C8C',
+          color: appStore.isFullscreen ? '#E5E5E5' : '#8C8C8C',
         },
         itemWidth: 10,
         itemHeight: 10,
@@ -616,8 +589,12 @@ export const createLineOption = ({ sData = [], xData = [] }, extend = {}) => {
       },
       legend: {
         top: 10,
+        right: 0,
         itemWidth: 10,
         data: sData.map((item) => item.name),
+        textStyle: {
+          color: appStore.isFullscreen ? '#E5E5E5' : '#8C8C8C',
+        },
       },
       tooltip: {
         trigger: 'axis',
@@ -645,7 +622,7 @@ export const createLineOption = ({ sData = [], xData = [] }, extend = {}) => {
         data: item.data,
       })),
     },
-    {}
+    extend
   );
 };
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="dispatch-analysis">
+  <div class="service-analysis">
     <report-header
       title="服务单元分析"
       v-model:dateRange="curTimeRange"
@@ -24,20 +24,20 @@
             ></div>
             <div class="grid1-others">
               <div class="item">
-                <p class="num">{{ result1?.equipmentOutboundTotal }}</p>
                 <div class="label">设备出库总量(台)</div>
+                <p class="num">{{ result1?.equipmentOutboundTotal }}</p>
               </div>
               <div class="item">
-                <p class="num">{{ result1?.equipmentOccupancyRate }}</p>
                 <div class="label">设备占用率(%)</div>
+                <p class="num">{{ result1?.equipmentOccupancyRate }}</p>
               </div>
               <div class="item">
-                <p class="num">{{ result1?.servicePersonnelTotal }}</p>
                 <div class="label">在服务人员总数(人)</div>
+                <p class="num">{{ result1?.servicePersonnelTotal }}</p>
               </div>
               <div class="item">
-                <p class="num">{{ result1?.sitePersonnelOccupancyRate }}</p>
                 <div class="label">现场人员占用率(%)</div>
+                <p class="num">{{ result1?.sitePersonnelOccupancyRate }}</p>
               </div>
             </div>
           </div>
@@ -70,7 +70,7 @@
               <div style="width: 40%; height: 100%">
                 <my-chart :options="options3"></my-chart>
               </div>
-              <div class="gird3-others" style="width: 60%; height: 100%">
+              <div class="grid3-others" style="width: 60%; height: 100%">
                 <div class="num-show flex items-center justify-around">
                   <div class="desc">
                     <div class="label">实施工程师(人)</div>
@@ -529,7 +529,7 @@ const options8 = computed(() => {
 </script>
 
 <style lang="less" scoped>
-.dispatch-analysis {
+.service-analysis {
   .page-main {
     height: calc(100vh - 57px);
     padding: 15px;
@@ -576,7 +576,7 @@ const options8 = computed(() => {
           display: flex;
           flex-direction: column;
           .charts-box {
-            flex: 1;
+            height: 100%;
             display: flex;
             justify-content: space-around;
             .chart-item {
@@ -585,7 +585,7 @@ const options8 = computed(() => {
               display: flex;
               flex-direction: column;
               .chart-wrap {
-                flex: 1;
+                height: 100%;
               }
               .title-wrap {
                 text-align: center;
@@ -609,7 +609,7 @@ const options8 = computed(() => {
         }
         .box3 {
           height: calc(100% - 36px);
-          .gird3-others {
+          .grid3-others {
             display: flex;
             flex-direction: column;
             justify-content: space-around;

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

@@ -194,7 +194,14 @@
               </div>
             </div>
           </div>
-          <div class="card"></div>
+          <div class="card">
+            <div class="title">
+              <span class="label">供应商预警均值走势</span>
+            </div>
+            <div class="chart-wrap">
+              <my-chart :options="options8"></my-chart>
+            </div>
+          </div>
         </div>
         <div class="col3">
           <div class="card">
@@ -248,6 +255,7 @@ import {
   supWarningTrend,
   sopWarningAnalysis,
 } from '@/api/report';
+import { createLineOption } from '@/utils/chart';
 const curTimeRange = ref([]);
 const serviceOptions = ref([]);
 
@@ -297,6 +305,25 @@ const {
   loading: loading8,
   run: run8,
 } = useRequest(supWarningTrend);
+
+const options8 = computed(() => {
+  let res = result8.value || {};
+  let keys = Object.keys(res);
+  let xData = [],
+    sData = [];
+  let values = Object.values(res);
+  if (values.length) {
+    xData = values[0].map((item) => item.click_date);
+  }
+  sData = keys.map((key, index) => {
+    return {
+      name: key,
+      data: values[index].map((item) => item.count),
+    };
+  });
+  return createLineOption({ xData, sData });
+});
+
 const tableDataHandle = (data) => {
   return data || [];
 };