[Feat 0000] 保德配置调整及图标类配置重构

src/views/vent/deviceManager/configurationTable/index.vue

@@ -149,7 +149,6 @@
   async function handleUpdate() {
     isUpdate.value = true;
     try {
-      console.log('debug ', configJSON.value);
       saveOrUpdateHandler({
         ...formData,
         moduleData: JSON.parse(configJSON.value),

src/views/vent/deviceManager/configurationTable/types.ts

@@ -166,31 +166,45 @@ export interface ModuleDataGalleryList {
 export interface ModuleDataChart {
   /** 图表类型，一个类型对应一种图表预设 */
   type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。特别的是，pie 类型的图表应将路径指到对象上，其他的图表应该指到数组上 */
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。应该指到数组上 */
   readFrom: string;
   /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */
   order?: 'desc' | 'asc';
-  /** 图表x轴配置（若有），支持多个 */
+  /** 图表x轴配置（若有），支持多个，注意至少一个 */
   xAxis: {
-    /** x轴内容，formatter 格式 */
-    label: string;
+    show: boolean;
   }[];
-  /** 图表y轴配置（若有），支持多个 */
+  /** 图表y轴配置（若有），支持多个，注意至少一个 */
   yAxis: {
-    /** y轴内容，formatter 格式 */
-    label: string;
+    show: boolean;
+    /** y轴内容，不支持 formatter 格式 */
+    name: string;
     /** y轴的对齐方式 */
-    align: 'left' | 'right';
+    position: 'left' | 'right';
   }[];
-  /** 核心配置，一个系列应对应一个数据维度，例如：[{ label: '风量', prop: '${f1Val}' }] */
+  /**
+   * 核心配置
+   *
+   * 例如有数据：arr1: [{ name: 'A', data: [{ pos: '1', val: 1 }] }, { name: 'B', data: [{ pos: '1', val: 1 }] }]
+   * 首先假设 readFrom: 'arr1'，那么 series 将根据 arr1 数据生成
+   * 则配置一个标准折线图所需的 series 配置类似：[{ label: '${name}', readFrom: 'data', xprop: 'pos', yprop: 'val' }]
+   */
   series: {
-    /** 数据说明， formatter 格式 */
+    /** 该系列的数据说明， formatter 格式，将用于 legend 相关的内容 */
     label: string;
-    /** 取值 prop，注意该项不支持 formatter 格式 */
-    prop: string;
+    /** 设置 series 系列时的基础路径，配合上级 readFrom 使用，其应指向一个数组，该数组将作为映射系列时的基准 */
+    readFrom: string;
+    /** 取值 prop，注意该项不支持 formatter 格式，将用于 xAxis 相关的内容 */
+    xprop: string;
+    /** 取值 prop，注意该项不支持 formatter 格式，将用于 yAxis 相关的内容 */
+    yprop: string;
   }[];
+  /** 图表legend配置 */
+  legend: {
+    show: boolean;
+  };
 }
 
 export interface ModuleDataTable {

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

@@ -177,6 +177,10 @@
     }
   }
 
+  .list_C {
+    padding: 5px 10px;
+  }
+
   .list__wrapper_C {
     display: flex;
     justify-content: space-between;
@@ -186,7 +190,7 @@
   .list-item_C {
     position: relative;
     height: 140px;
-    width: 190px;
+    width: 210px;
     background-repeat: no-repeat;
     background-image: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
     background-size: 100% 100%;
@@ -194,14 +198,14 @@
   }
   .list-item__title_C {
     position: absolute;
-    left: 90px;
+    left: 99px;
     // font-size: 14px;
     top: 15px;
   }
   .list-item__content_C:nth-of-type(2) {
     position: absolute;
     top: 15px;
-    left: 17px;
+    left: 19px;
     width: 30%;
     text-align: center;
     display: block;
@@ -219,7 +223,7 @@
   }
   .list-item__content_C:nth-of-type(3) {
     position: absolute;
-    left: 90px;
+    left: 99px;
     top: 55px;
 
     .list-item__info {

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

@@ -11,7 +11,7 @@
 
   const props = withDefaults(
     defineProps<{
-      chartData: Record<string, any> | Record<string, any>[];
+      chartData: Record<string, any>[] | Record<string, any>;
       chartConfig: Config['moduleData']['chart']['0'];
       height?: string;
       width?: string;
@@ -25,27 +25,63 @@
 
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  function getData(raw, readFrom) {
+    if (readFrom) {
+      return get(raw, readFrom);
+    }
+    return raw;
+  }
 
   // 核心方法，生成适用与 echart 的选项，这个方法需要适配 chart 类型的每种子类型
   const genChartOption = () => {
     // 依据每一个图表配置生成图表选项
-    const { yAxis = [], xAxis = [], order, type, sortBy, series } = props.chartConfig;
-    const isArray = Array.isArray(props.chartData);
+    const { yAxis = [], xAxis = [], legend, order, type, sortBy, series } = props.chartConfig;
+
+    let sorttedData: any[] = [];
+    if (Array.isArray(props.chartData)) {
+      sorttedData = props.chartData;
+    } else {
+      sorttedData = [props.chartData];
+    }
+    // 如果这个配置指明了需要排序则执行排序
+    if (sortBy && order) {
+      sorttedData.sort((pre, cur) => {
+        if (order === 'asc') {
+          return get(pre, sortBy, 0) - get(cur, sortBy, 0);
+        } else {
+          return get(cur, sortBy, 0) - get(pre, sortBy, 0);
+        }
+      });
+    }
 
-    // 饼状图通常依赖单个对象的不同字段绘制
-    if (type === 'pie' && !isArray) {
+    // 该项作为下面所有图表依赖的基准系列数据
+    const baseSeries: { name: string; data: { name: string; value: any }[] }[] = sorttedData.reduce((res: any[], baseData) => {
+      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 */
+          }),
+        });
+      });
+
+      return res;
+    }, []);
+
+    if (type === 'pie') {
       return {
-        legend: { show: false },
+        legend,
         color: ['#d9a1ff', '#00d1ff', '#82fe78'],
-        series: [
-          {
+        series: baseSeries.map((serie) => {
+          return {
             type: 'pie',
             radius: ['50%', '75%'],
             center: ['50%', '55%'],
-            data: series.map((serie) => {
+            name: serie.name,
+            data: serie.data.map((serie) => {
               return {
-                name: serie.label,
-                value: get(props.chartData, serie.prop, 0),
+                ...serie,
                 labelLine: { show: false },
                 label: { show: false },
                 itemStyle: {
@@ -54,48 +90,28 @@
                 },
               };
             }),
-          },
-        ],
+          };
+        }),
       };
     }
-    if (!isArray) return {};
-
-    let sorttedData = [...(props.chartData as any[])];
 
-    // 如果这个配置指明了需要排序则执行排序
-    if (sortBy && order) {
-      sorttedData.sort((pre, cur) => {
-        if (order === 'asc') {
-          return get(pre, sortBy, 0) - get(cur, sortBy, 0);
-        } else {
-          return get(cur, sortBy, 0) - get(pre, sortBy, 0);
-        }
-      });
-    }
-
-    // 柱状图则要求使用数组形式的数据作依赖
+    // 柱状图
     if (type === 'bar') {
       return {
         grid: {
           top: 50,
-          height: 150,
-        },
-        textStyle: {
-          color: '#fff',
+          bottom: 30,
         },
-        legend: { show: false },
+        legend,
         xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
           };
         }),
         yAxis: yAxis.map((e) => {
           return {
-            name: e.label,
-            position: e.align,
+            ...e,
             splitLine: {
               lineStyle: {
                 color: '#ffffff',
@@ -104,17 +120,10 @@
             },
           };
         }),
-        series: series.reduce((curr: EChartsOption[], serie, index) => {
+        series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
           const colors = ['#66ffff', '#ffff66'];
-          // 系列选项，如果指定了x轴配置则以x轴配置优先
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-            };
-          });
           curr.push({
-            name: 'pictorial element',
+            ...serie,
             type: 'pictorialBar',
             symbol: 'circle',
             symbolPosition: 'end',
@@ -124,13 +133,14 @@
             itemStyle: {
               color: colors[index % colors.length],
             },
-            data,
           });
           curr.push({
-            name: 'reference bar',
+            ...serie,
             type: 'bar',
             silent: true,
             yAxisIndex: index,
+            tooltip: { show: false },
+            barWidth: 8,
             itemStyle: {
               color: new graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: colors[index % colors.length] },
@@ -138,9 +148,6 @@
                 { offset: 1, color: `${colors[index % colors.length]}22` },
               ]),
             },
-            tooltip: { show: false },
-            barWidth: 8,
-            data,
           });
 
           return curr;
@@ -152,16 +159,13 @@
     if (type === 'line') {
       return {
         legend: {
+          show: legend.show,
           top: 10,
           right: 10,
           textStyle: {
             color: '#fff',
           },
         },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
-        },
         grid: {
           left: 60,
           top: 50,
@@ -170,16 +174,13 @@
         },
         xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
           };
         }),
         yAxis: yAxis.map((e) => {
           return {
-            name: e.label,
-            position: e.align,
+            ...e,
             splitLine: {
               lineStyle: {
                 color: '#fff',
@@ -188,54 +189,39 @@
             },
           };
         }),
-        series: series.map((serie) => {
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-            };
-          });
-
+        series: baseSeries.map((serie) => {
           return {
+            ...serie,
             type: 'line',
-            data,
           };
         }),
       };
     }
 
-    // 折线图和上面的柱状图类似
+    // 平滑曲线图
     if (type === 'line_smooth') {
       return {
         legend: {
+          show: legend.show,
           top: 10,
-          right: 10,
           textStyle: {
             color: '#fff',
           },
         },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
-        },
         grid: {
-          left: 50,
-          top: 50,
-          right: 50,
-          bottom: 50,
+          left: 60,
+          right: 60,
+          bottom: 30,
         },
         xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
           };
         }),
         yAxis: yAxis.map((e) => {
           return {
-            name: e.label,
-            position: e.align,
+            ...e,
             splitLine: {
               lineStyle: {
                 opacity: 0.3,
@@ -243,33 +229,23 @@
             },
           };
         }),
-        series: series.map((serie) => {
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-            };
-          });
-
+        series: baseSeries.map((serie) => {
           return {
+            ...serie,
             type: 'line',
-            data,
             smooth: true,
+            itemStyle: {
+              opacity: 0,
+            },
           };
         }),
       };
     }
 
-    // 折线图和上面的柱状图类似
+    // 折线区域图，即折线下面的区域填满
     if (type === 'line_area') {
       return {
-        legend: {
-          show: false,
-        },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
-        },
+        legend,
         grid: {
           left: 50,
           top: 50,
@@ -278,17 +254,14 @@
         },
         xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
             boundaryGap: false,
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
           };
         }),
         yAxis: yAxis.map((e) => {
           return {
-            name: e.label,
-            position: e.align,
+            ...e,
             splitLine: {
               lineStyle: {
                 color: '#fff',
@@ -297,21 +270,14 @@
             },
           };
         }),
-        series: series.map((serie, index) => {
+        series: baseSeries.map((serie, index) => {
           const colors = ['#66ffff', '#6666ff'];
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-            };
-          });
 
           return {
+            ...serie,
             type: 'line',
-            data,
             symbol: 'none',
             endLabel: { distance: 0 },
-            // itemStyle: { show: false, opacity: 0 },
             lineStyle: { color: colors[index % colors.length] },
             areaStyle: {
               origin: 'auto',
@@ -329,16 +295,13 @@
     if (type === 'line_bar') {
       return {
         legend: {
+          show: legend.show,
           top: 10,
           right: 10,
           textStyle: {
             color: '#fff',
           },
         },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
-        },
         grid: {
           left: 40,
           top: 50,
@@ -346,112 +309,28 @@
           bottom: 10,
           show: false,
         },
-        xAxis: xAxis.map(() => {
+        xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
-            show: false,
           };
         }),
-        yAxis: yAxis.map(() => {
+        yAxis: yAxis.map((e) => {
           return {
-            show: false,
-            // name: e.label,
-            // position: e.align,
+            ...e,
           };
         }),
-        series: series.map((serie, i) => {
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-              label: {
-                show: true,
-                position: 'top',
-                borderWidth: 0,
-                color: '#fff',
-              },
-              itemStyle: {
-                color: new graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: '#66ffff' },
-                  { offset: 0.2, color: '#66ffff' },
-                  { offset: 1, color: '#66ffff22' },
-                ]),
-              },
-            };
-          });
-
+        series: baseSeries.map((serie, i) => {
           return {
+            ...serie,
             type: i % 2 ? 'line' : 'bar',
             smooth: true,
-            data,
             barWidth: 20,
           };
         }),
       };
     }
 
-    // 折线图和上面的柱状图类似
-    if (type === 'line_smooth_complex') {
-      // 基于以下情况作处理：
-      // 数据示例：arr1: [ { arr2: [ { val: 2 } ] } ]
-      // readFrom 指向 arr1，即 sorttedData 指向 arr1，则 prop 配置应为 arr2|val
-      const seriesData = sorttedData.map((data) => {
-        const serie = series[0];
-        const [p1, p2] = serie.prop.split('|');
-        // 从 readFrom 指向的数组项中，取出指定的子数组
-        const arr = get(data, p1);
-
-        return {
-          type: 'line',
-          data: arr.map((e) => {
-            return {
-              name: getFormattedText(e, serie.label),
-              value: get(e, p2, 0),
-            };
-          }),
-          smooth: true,
-        };
-      });
-
-      return {
-        legend: {
-          top: 10,
-          right: 10,
-          textStyle: {
-            color: '#fff',
-          },
-        },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
-        },
-        grid: {
-          left: 50,
-          top: 50,
-          right: 50,
-          bottom: 50,
-        },
-        xAxis: xAxis.map(() => {
-          return {
-            type: 'category',
-            data: get(seriesData, '[0].data', []).map((d: any) => d.name),
-          };
-        }),
-        yAxis: yAxis.map((e) => {
-          return {
-            name: e.label,
-            position: e.align,
-            splitLine: {
-              lineStyle: {
-                opacity: 0.3,
-              },
-            },
-          };
-        }),
-        series: seriesData,
-      };
-    }
-
     return {};
   };
 
@@ -467,7 +346,6 @@
 
   function initCharts() {
     const o = genChartOption();
-    console.log('debug initchart');
     setOptions(o as EChartsOption, false);
   }
 </script>

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

@@ -2524,7 +2524,7 @@ const BDfireMock = {
 export const testConfigBDFire: Config[] = [
   {
     deviceType: '',
-    moduleName: '工作面风险监测',
+    moduleName: '重点区域风险监测',
     pageType: '',
     moduleData: {
       header: {
@@ -2650,14 +2650,17 @@ export const testConfigBDFire: Config[] = [
       ],
       chart: [
         {
-          type: 'line_smooth_complex',
+          type: 'line_smooth',
           readFrom: 'arrayFiber',
-          xAxis: [{ label: '' }],
-          yAxis: [{ label: '温度（℃）', align: 'left' }],
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
           series: [
             {
-              label: '${pos}',
-              prop: 'fibreTemperatureArr|value',
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
             },
           ],
         },
@@ -2738,17 +2741,17 @@ export const testConfigBDFire: Config[] = [
             },
             {
               // label: 'C₂H₄',
-              label: 'H₂',
-              value: '--',
+              label: 'O₂',
+              value: '${o2Val}',
               color: 'blue',
-              info: '氢气',
+              info: '氧气',
             },
             {
               // label: 'O₂',
-              label: 'N₂',
-              value: '--',
+              label: 'C₂H₄',
+              value: '${c2h4Val}',
               color: 'blue',
-              info: '氮气',
+              info: '乙烯',
             },
             {
               label: '温度',
@@ -2809,13 +2812,16 @@ export const testConfigBDFire: Config[] = [
       chart: [
         {
           type: 'line_smooth',
-          readFrom: 'fibreTemperatureArr',
-          xAxis: [{ label: '${pos}' }],
-          yAxis: [{ label: '温度（℃）', align: 'left' }],
+          readFrom: '',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
           series: [
             {
-              label: '${pos}',
-              prop: 'value',
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
             },
           ],
         },
@@ -3321,9 +3327,10 @@ export const testConfigBDNew: Config[] = [
         {
           type: 'line',
           readFrom: 'btArray',
-          xAxis: [{ label: '${strinstallpos}' }],
-          yAxis: [{ label: '值', align: 'left' }],
-          series: [{ prop: 'val', label: '值' }],
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '值', position: 'left' }],
+          series: [{ label: '', readFrom: '', xprop: 'value', yprop: 'pos' }],
         },
       ],
       gallery: [],

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('https://bing.cn')">
+    <div class="right-t">
+      <div class="tcontent-l" @click="redirectTo('/grout-home')">
         <div>智能</div>
-        <div>灌浆系统</div>
+        <div>注浆系统</div>
       </div>
-      <div class="tcontent-r" @click="redirectTo('https://bing.cn')">
+      <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
         <div>智能</div>
-        <div>注氟系统</div>
+        <div>注氮系统</div>
       </div>
-    </div> -->
+    </div>
     <ModuleBD
       v-for="cfg in configs"
       :key="cfg.deviceType"
@@ -53,6 +53,17 @@
       :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>
@@ -64,30 +75,46 @@
   // import MonitorCenter from './components/MonitorCenter.vue';
   // import { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
-  import { testConfigBDDust } from './configurable.data';
+  import ModuleBDDual from './components/ModuleBDDual.vue';
+  import { testConfigBDFire } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getBDDustData } from './configurable.api';
+  import { getBDFireData } from './configurable.api';
 
-  const mainTitle = ref('保德煤矿粉尘灾害预警系统');
-  const pageType = 'BD_dust';
+  const mainTitle = ref('保德煤矿火灾预警系统');
+  const pageType = 'BD_fire';
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref(testConfigBDDust);
+  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, fetchConfigs } = useInitConfigs();
+
   const homedata = ref<any>({});
 
   onMounted(() => {
     // configs.value = testConfigB;
-    getBDDustData({}).then((r) => {
+    getBDFireData({}).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 {
@@ -224,7 +251,8 @@
   }
   .right-t {
     position: absolute;
-    height: 160px;
+    // height: 160px;
+    height: 115px;
     right: 0;
     top: 40px;
     width: 450px;
@@ -236,11 +264,12 @@
     display: flex;
     align-items: center;
     justify-content: space-around;
+    z-index: 1;
 
     .tcontent-l {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
@@ -252,14 +281,13 @@
         center,
         center top;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
+      padding-top: 35px;
+      line-height: 40px;
     }
     .tcontent-r {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
@@ -271,9 +299,8 @@
         center,
         center top;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
-      cursor: pointer;
+      padding-top: 35px;
+      line-height: 40px;
     }
   }