[Feat 0000] 更新配置及部分样式

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -36,6 +36,9 @@
   const genChartOption = () => {
     // 依据每一个图表配置生成图表选项
     const { yAxis = [], xAxis = [], legend, order, type, sortBy, series } = props.chartConfig;
+    const textStyle = {
+      color: '#fff',
+    };
 
     let sorttedData: any[] = [];
     if (Array.isArray(props.chartData)) {
@@ -59,9 +62,9 @@
       series.forEach((serie) => {
         res.push({
           name: getFormattedText(baseData, serie.label),
-          data: (getData(baseData, serie.readFrom) as any[]).map((data) => {
-            // return [getData(data, serie.xprop), getData(data, serie.yprop)]; /** x y */
-            return { name: getData(data, serie.xprop), value: getData(data, serie.yprop) }; /** x y */
+          data: (getData(baseData, serie.readFrom) || []).map((data) => {
+            return [getData(data, serie.xprop), getData(data, serie.yprop)]; /** x y */
+            // return { name: getData(data, serie.xprop), value: getData(data, serie.yprop) }; /** x y */
           }),
         });
       });
@@ -71,7 +74,11 @@
 
     if (type === 'pie') {
       return {
-        legend,
+        textStyle,
+        legend: {
+          textStyle,
+          show: legend.show,
+        },
         color: ['#d9a1ff', '#00d1ff', '#82fe78'],
         series: baseSeries.map((serie) => {
           return {
@@ -98,11 +105,15 @@
     // 柱状图
     if (type === 'bar') {
       return {
+        textStyle,
         grid: {
           top: 50,
           bottom: 30,
         },
-        legend,
+        legend: {
+          textStyle,
+          show: legend.show,
+        },
         xAxis: xAxis.map((e) => {
           return {
             ...e,
@@ -158,13 +169,12 @@
     // 折线图和上面的柱状图类似
     if (type === 'line') {
       return {
+        textStyle,
         legend: {
           show: legend.show,
           top: 10,
           right: 10,
-          textStyle: {
-            color: '#fff',
-          },
+          textStyle,
         },
         grid: {
           left: 60,
@@ -201,12 +211,11 @@
     // 平滑曲线图
     if (type === 'line_smooth') {
       return {
+        textStyle,
         legend: {
           show: legend.show,
           top: 10,
-          textStyle: {
-            color: '#fff',
-          },
+          textStyle,
         },
         grid: {
           left: 60,
@@ -245,7 +254,11 @@
     // 折线区域图，即折线下面的区域填满
     if (type === 'line_area') {
       return {
-        legend,
+        textStyle,
+        legend: {
+          textStyle,
+          show: legend.show,
+        },
         grid: {
           left: 50,
           top: 50,
@@ -294,13 +307,12 @@
 
     if (type === 'line_bar') {
       return {
+        textStyle,
         legend: {
+          textStyle,
           show: legend.show,
           top: 10,
           right: 10,
-          textStyle: {
-            color: '#fff',
-          },
         },
         grid: {
           left: 40,

src/views/vent/home/configurable/configurable.data.ts

@@ -1591,22 +1591,16 @@ export const testConfigBDDust: Config[] = [
       chart: [
         {
           type: 'line_area',
-          readFrom: 'historyList',
-          xAxis: [
-            {
-              label: '${time}',
-            },
-          ],
-          yAxis: [
-            {
-              label: '浓度',
-              align: 'left',
-            },
-          ],
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '浓度', position: 'left' }],
           series: [
             {
-              label: '粉尘浓度',
-              prop: 'dustval',
+              label: '${strinstallpos}',
+              readFrom: 'historyList',
+              xprop: 'time',
+              yprop: 'dustval',
             },
           ],
         },

src/views/vent/home/configurable/index.vue

@@ -25,24 +25,24 @@
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
             {{ homedata.allMineWarn }}
           </div>
-          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
+          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
         </div>
         <div class="tcontent-r">
-          <div>火灾</div>
+          <div>粉尘</div>
           <div>风险</div>
         </div>
       </div>
     </div>
-    <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('/grout-home')">
+    <!-- <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('https://bing.cn')">
         <div>智能</div>
-        <div>注浆系统</div>
+        <div>灌浆系统</div>
       </div>
-      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
+      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
         <div>智能</div>
-        <div>注氮系统</div>
+        <div>注氟系统</div>
       </div>
-    </div>
+    </div> -->
     <ModuleBD
       v-for="cfg in configs"
       :key="cfg.deviceType"
@@ -53,17 +53,6 @@
       :visible="true"
       :page-type="pageType"
     />
-    <ModuleBDDual
-      :show-style="configA.showStyle"
-      :module-data-a="configA.moduleData"
-      :module-name-a="configA.moduleName"
-      :device-type-a="configA.deviceType"
-      :module-data-b="configB.moduleData"
-      :module-name-b="configB.moduleName"
-      :device-type-b="configB.deviceType"
-      :visible="true"
-      :page-type="pageType"
-    />
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
     </div>
@@ -75,46 +64,30 @@
   // import MonitorCenter from './components/MonitorCenter.vue';
   // import { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
-  import ModuleBDDual from './components/ModuleBDDual.vue';
-  import { testConfigBDFire } from './configurable.data';
+  import { testConfigBDDust } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getBDFireData } from './configurable.api';
+  import { getBDDustData } from './configurable.api';
 
-  const mainTitle = ref('保德煤矿火灾预警系统');
-  const pageType = 'BD_fire';
+  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
+  const pageType = 'BD_dust';
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref(
-    testConfigBDFire.filter(({ moduleName }) => {
-      return moduleName !== '工作面光纤监测' && moduleName !== '工作面束管监测';
-    })
-  );
-  const configA = ref<any>(
-    testConfigBDFire.find(({ moduleName }) => {
-      return moduleName === '工作面束管监测';
-    })
-  );
-  const configB = ref<any>(
-    testConfigBDFire.find(({ moduleName }) => {
-      return moduleName === '工作面光纤监测';
-    })
-  );
+  const configs = ref(testConfigBDDust);
   // const { configs, fetchConfigs } = useInitConfigs();
-
   const homedata = ref<any>({});
 
   onMounted(() => {
     // configs.value = testConfigB;
-    getBDFireData({}).then((r) => {
+    getBDDustData({}).then((r) => {
       homedata.value = r;
     });
     // fetchConfigs(pageType);
   });
 
-  function redirectTo(url) {
-    window.open(url);
-  }
+  // function redirectTo(url) {
+  //   window.open(url);
+  // }
 </script>
 <style lang="less" scoped>
   @font-face {
@@ -251,8 +224,7 @@
   }
   .right-t {
     position: absolute;
-    // height: 160px;
-    height: 115px;
+    height: 160px;
     right: 0;
     top: 40px;
     width: 450px;
@@ -264,12 +236,11 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
-    z-index: 1;
 
     .tcontent-l {
       flex: 1;
-      height: 100%;
-      font-size: 16px;
+      height: 70%;
+      font-size: 20px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
@@ -281,13 +252,14 @@
         center,
         center top;
       text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
+      padding-top: 40px;
+      line-height: 50px;
+      cursor: pointer;
     }
     .tcontent-r {
       flex: 1;
-      height: 100%;
-      font-size: 16px;
+      height: 70%;
+      font-size: 20px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
@@ -299,8 +271,9 @@
         center,
         center top;
       text-align: center;
-      padding-top: 35px;
-      line-height: 40px;
+      padding-top: 40px;
+      line-height: 50px;
+      cursor: pointer;
     }
   }