定点测厚首页demo

master/src/main/java/com/ruoyi/project/pssr/controller/TPssrApproveController.java

@@ -1096,7 +1096,9 @@ public class TPssrApproveController extends BaseController {
                 .taskAssignee(userId)
                 .processInstanceId(processInstancesId).singleResult();
         String taskId = task.getId();
-
+        if(task.getName().contains("检查内容负责人")){
+            return;
+        }
         //处理流程节点
         Map<String, Object> param = new HashMap<>();
         param.put("condition", "0");

ui/src/assets/icons/svg/deviceCount.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741853566664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5774" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M804.571429 1024H219.428571c-53.638095 0-97.52381-43.885714-97.523809-97.52381V97.52381c0-53.638095 43.885714-97.52381 97.523809-97.52381h585.142858c53.638095 0 97.52381 43.885714 97.523809 97.52381v828.95238c0 53.638095-43.885714 97.52381-97.523809 97.52381z" fill="#2C9EF4" p-id="5775"></path><path d="M219.428571 597.333333c-14.628571-14.628571-14.628571-36.571429 0-51.2l160.914286-160.914285c14.628571-14.628571 36.571429-14.628571 51.2 0l131.657143 131.657142 187.733333-187.733333c14.628571-14.628571 36.571429-14.628571 51.2 0 14.628571 14.628571 14.628571 36.571429 0 51.2l-214.552381 214.552381c-14.628571 14.628571-36.571429 14.628571-51.2 0L407.161905 463.238095l-134.095238 134.095238c-17.066667 14.628571-39.009524 14.628571-53.638096 0z" fill="#FFFFFF" p-id="5776"></path><path d="M646.095238 950.857143h-268.190476c-19.504762 0-36.571429-17.066667-36.571429-36.571429s17.066667-36.571429 36.571429-36.571428h268.190476c19.504762 0 36.571429 17.066667 36.571429 36.571428s-17.066667 36.571429-36.571429 36.571429z" fill="#95CEF9" p-id="5777"></path></svg>

ui/src/assets/icons/svg/pipeCount.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741853488629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2679" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M184.27116 204.024045h360.594925v140.437671h-360.594925zM753.615217 519.065955h129.058449v349.208478h-129.058449zM468.209861 520.019643h-0.223972V370.088449H223.170039v332.360003c0 66.165665 52.532272 119.933395 118.14162 122.202015v0.187848h4.161544l0.115598 0.014449 0.108374-0.014449h365.702932v-236.97683H508.387548c-21.797533-7.925719-38.255863-34.889058-40.177687-67.841842z" fill="#F8B62D" p-id="2680"></path></svg>

ui/src/views/sems/thickness/home/dashboard/botPie.vue

@@ -0,0 +1,185 @@
+<template>
+  <div :class="className" :style="{height: height, width: width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Array,
+      default: () => [
+        { value: 450, name: '不足三年' },
+        { value: 600, name: '3~6年' },
+        { value: 1000, name: '6~10年' },
+        { value: 670, name: '>10年' }
+      ]
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      colorArr: [
+        "#218de0",
+        "#01cbb3",
+        "#85e647",
+        "#5d5cda",
+        "#05c5b0",
+        "#c29927",
+      ],
+      colorAlpha: [
+        "rgba(60,170,211,0.05)",
+        "rgba(1,203,179,0.05)",
+        "rgba(133,230,71,0.05)",
+        "rgba(93,92,218,0.05)",
+        "rgba(5,197,176,0.05)",
+        "rgba(194,153,39,0.05)",
+      ]
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(newVal) {
+        if (this.chart) {
+          this.setOptions(newVal);
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) return;
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    // 初始化图表
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+      this.setOptions();
+    },
+
+    // 生成虚线环数据
+    dashed(val) {
+      return Array.from({ length: val }, (_, i) => ({
+        name: `${i + 1}`,
+        value: i % 2 === 0 ? 10 : 20,
+        itemStyle: {
+          normal: {
+            color: "rgba(0,0,0,0)",
+            ...(i % 2 !== 0 && {
+              borderWidth: 2,
+              borderColor: "rgba(33, 141, 224,0.18)"
+            })
+          }
+        }
+      }));
+    },
+
+    // 设置图表配置
+    setOptions() {
+      const sum = this.chartData.reduce((t, v) => t + v.value, 0);
+
+      this.chart.setOption({
+        // backgroundColor: '#243252',
+        tooltip: {
+          trigger: "item",
+          formatter: "{b}: {c}个 ({d}%)"
+        },
+        legend: {
+          top: "center",
+          left: "62%",
+          orient: "vertical",
+          data: this.chartData,
+          icon: "circle",
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 40,
+          formatter: name => {
+            const item = this.chartData.find(v => v.name === name);
+            return `{name|${name}:}{value1|${item.value}个}{value2|${((item.value / sum) * 100).toFixed(2)}%}`;
+          },
+          textStyle: {
+            rich: {
+              name: { color: "#fff", fontSize: 18, width: 100 },
+              value1: { color: "#01cbb3", fontSize: 16, padding: [0, 15, 0, 10] },
+              value2: { color: "#85e647", fontSize: 16 }
+            }
+          }
+        },title: {
+          text: '管道预估剩余寿命分成', // 标题内容
+          top: '5%',
+          left:'3%',    // 距离顶部5%
+          textStyle: {     // 文字样式
+            color: '#fff',
+            fontSize: 16,
+            fontWeight: 'normal'
+          }
+        },
+        series: [
+          // 主饼图
+          {
+            type: "pie",
+            radius: "70%",
+            center: ["35%", "50%"],
+            roseType: "radius",
+            label: { show: false },
+            data: this.chartData.map((item, i) => ({
+              ...item,
+              itemStyle: {
+                borderColor: this.colorArr[i],
+                borderWidth: 2,
+                shadowBlur: 20,
+                shadowColor: this.colorArr[i],
+                shadowOffsetX: 25,
+                shadowOffsetY: 20,
+                color: this.colorAlpha[i]
+              }
+            }))
+          },
+          // 虚线环系列
+          ...[18, 40, 60, 70, 80].map(radius => ({
+            type: "pie",
+            radius: [`${radius}%`, `${radius + 0.3}%`],
+            center: ["35%", "50%"],
+            hoverAnimation: false,
+            clockwise: false,
+            itemStyle: { normal: { color: "#017383" } },
+            label: { show: false },
+            data: this.dashed(radius === 18 ? 18 : Math.round(radius * 1.2))
+          }))
+        ]
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.chart {
+  /* 如果出现颜色覆盖问题，可以添加以下样式 */
+  background-color: transparent !important;
+}
+</style>

ui/src/views/sems/thickness/home/dashboard/botPieRight.vue

@@ -0,0 +1,283 @@
+<template>
+  <div :class="className" :style="{height: height, width: width}"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    normaldata: {
+      type: Object,
+      default: () => ([
+        { value: 632, name: '不足三年' },
+        { value: 323, name: '3~6年' },
+        { value: 456, name: '6~10年' },
+        { value: 810, name: '>10年' }])
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      colorList: [
+        'rgba(6, 194, 255, 1)',
+        'rgba(255, 205, 40, 1)',
+        'rgb(40,205,40)',
+        'rgba(235,42,55,1)'
+      ]
+    }
+  },
+  computed: {
+    colorList1() {
+      const list = [];
+      this.colorList.forEach(item => {
+        list.push(item);
+        list.push('');
+      });
+      return list;
+    },
+    colorList2() {
+      const list = [];
+      this.colorList.forEach(item => {
+        list.push(item.replace(/,\s*\d+(\.\d+)?\)/, ", 0.3)"));
+        list.push('');
+      });
+      return list;
+    },
+    valdata() {
+      let sum = 0;
+      const data = [];
+      this.normaldata.forEach(item => sum += Number(item.value));
+      this.normaldata.forEach(item => {
+        data.push({value: item.value, name: item.name});
+        data.push({
+          name: '',
+          value: sum / 100,
+          itemStyle: {color: 'transparent'}
+        });
+      });
+      return data;
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    if (!this.chart) return
+    this.chart.dispose()
+    this.chart = null
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el)
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        // backgroundColor: '#243c54',
+        legend: {
+          orient: 'vertical',
+          right: '5%',
+          top:'center',
+          icon: 'none',
+          width: 450,
+          itemWidth: 6,
+          itemHeight: 6,
+          formatter: (name) => `{iconName|}{name|${name}}`,
+          textStyle: {
+            color: '#FFF',
+            fontSize: 20,
+            rich: {
+              name: {
+                color: 'rgba(144, 178, 210, 1)',
+                fontSize: 20,
+                width: 100,
+                padding: [0, 0, 0, 10]
+              }
+            }
+          },
+          data: this.normaldata.map((dItem, dIndex) => ({
+            ...dItem,
+            textStyle: {
+              rich: {
+                iconName: {
+                  width: 8,
+                  height: 8,
+                  backgroundColor: this.colorList[dIndex % this.colorList.length]
+                }
+              }
+            }
+          }))
+        },title: {
+          text: '设备预估剩余寿命分成', // 标题内容
+          top: '5%',
+          left:'3%',    // 距离顶部5%
+          textStyle: {     // 文字样式
+            color: '#fff',
+            fontSize: 16,
+            fontWeight: 'normal'
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            name: 'TypeB',
+            radius: ['40%', '44.5%'],
+            center: ['40%', '50%'],
+            hoverAnimation: false,
+            clockWise: false,
+            itemStyle: {color: 'rgba(2, 131, 255, 0.35)'},
+            label: {show: false},
+            data: [100]
+          },
+          {
+            type: 'pie',
+            zlevel: 1,
+            silent: true,
+            radius: ['48%', '50%'],
+            center: ['40%', '50%'],
+            itemStyle: {
+              color: (params) => this.colorList1[params.dataIndex % this.colorList1.length]
+            },
+            label: {
+              padding: [0, -75],
+              alignTo: 'labelLine',
+              formatter: (params) => params.name
+                  ? `{dot|}   {d|${params.name} ${params.percent}%}\n\n{c|${params.value}个}`
+                  : ``,
+              rich: {
+                c: {color: '#fff', fontSize: 14, lineHeight: 20, margin: 20},
+                d: {fontSize: 14, color: 'rgba(255,255,255,0.7)'},
+                dot: {
+                  backgroundColor: 'auto',
+                  width: 0,
+                  height: 0,
+                  borderRadius: 3,
+                  fontSize: 16,
+                  padding: [3, -3, 3, -3]
+                }
+              }
+            },
+            labelLine: {length: 50, length2: 70,},
+            data: this.valdata
+          },
+          // 其他系列配置...
+          {
+            type: 'pie', //最外圆圈
+            radius: ['57%', '57.3%'],
+            // radius: ['44%', '50%'],
+            center: ['40%', '50%'],
+            // radius: '90%',
+            hoverAnimation: false,
+            clockWise: false,
+
+            itemStyle: {
+              normal: {
+                shadowBlur: 1,
+                shadowColor: 'rgba(15, 79, 150,0.61)',
+                color: 'rgba(255,255,255,.3)'
+                // borderColor: '#1f1e26',
+                // borderWidth: 5,
+              }
+            },
+            label: {
+              show: false
+            },
+            data: [0]
+            // data: labelData,
+          },
+          {
+            type: 'pie', //点
+            radius: ['57%', '57.9%'],
+            center: ['40%', '50%'],
+            // radius: '90%',
+            hoverAnimation: false,
+            clockWise: false,
+            color: ['#55c2e200', 'rgba(6, 192, 252, 1)', '#ff5a6100', 'ff5a6100'],
+            label: {
+              show: false
+            },
+            data: [30, 10, 240, 30]
+            // data: [30,30,30,30,30,30],
+          },
+          {
+            type: 'pie', //点
+            radius: ['57%', '57.9%'],
+            center: ['40%', '50%'],
+            // radius: '90%',
+            hoverAnimation: false,
+            clockWise: false,
+            // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
+            label: {
+              show: false
+            },
+            data: [170, 15, 240, 30]
+            // data: [30,30,30,30,30,30],
+          },
+          {
+            type: 'pie', //点
+            radius: ['57%', '57.9%'],
+            center: ['40%', '50%'],
+            // radius: '90%',
+            hoverAnimation: false,
+            clockWise: false,
+            // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
+            label: {
+              show: false
+            },
+            data: [250, 15, 130, 30]
+            // data: [30,30,30,30,30,30],
+          },
+          {
+            type: 'pie', //点
+            radius: ['57%', '57.9%'],
+            center: ['40%', '50%'],
+            // radius: '90%',
+            hoverAnimation: false,
+            clockWise: false,
+            // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
+            label: {
+              show: false
+            },
+            data: [250, 10, 10, 20]
+            // data: [30,30,30,30,30,30],
+          }
+        ]
+      })
+    },
+    handleResize() {
+      if (this.autoResize && this.chart) {
+        this.chart.resize()
+      }
+    }
+  }
+}
+</script>

ui/src/views/sems/thickness/home/dashboard/midLeft.vue

@@ -0,0 +1,116 @@
+<template>
+
+  <div :class="className" :style="{height:height,width:width}">
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      default:{}
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions() {
+      this.chart.setOption({
+        // backgroundColor: "#041139",
+        color: "#04CFE4",
+        grid: {
+          top: 80,
+          left: 60,
+          right: 40,
+          bottom: 60
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: false,
+          axisLabel: {
+            interval: 0,
+            color: '#fff',
+            fontSize: 14
+          },
+          data: ['2025', '2026', '2027', '2028', '2029', '2030', '2031', '2032', '2033', '2034']
+        },
+        yAxis: {
+          type: 'value',
+          interval: 100,
+          splitLine: false,
+          axisLabel: {
+            color: '#fff'
+          }
+        }, title: {
+          text: '达到预估寿命极限的管道统计', // 标题内容  // 水平居中
+          top: '7%',
+          left: '3%',   // 距离顶部5%
+          textStyle: {     // 文字样式
+            color: '#fff',
+            fontSize: 16,
+            fontWeight: 'normal'
+          }
+        },
+        series: [
+          {
+            data: [10, 20, 15, 52, 55, 54, 67, 76, 332, 73],
+            type: "pictorialBar",
+            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
+            label: {
+              show: true,
+              color: '#fff',
+              position: 'top'
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

ui/src/views/sems/thickness/home/dashboard/midRight.vue

@@ -0,0 +1,176 @@
+<template>
+
+  <div :class="className" :style="{height:height,width:width}">
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions() {
+      this.chart.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(255,255,255,0.75)",
+          extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+          textStyle: {
+            fontSize: 14,
+            color: "#000",
+          },
+          formatter: (params) => {
+            const item = params[0];
+            return item.name + " : " + item.value + " 条";
+          },
+        },
+        grid: {
+          top: 80,
+          left: 60,
+          right: 40,
+          bottom: 60
+        },
+        title: {
+          text: '达到预估寿命极限的设备统计', // 标题内容  // 水平居中
+          top: '7%',
+          left: '3%',   // 距离顶部5%
+          textStyle: {     // 文字样式
+            color: '#fff',
+            fontSize: 16,
+            fontWeight: 'normal'
+          }
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              interval: 0,
+              color: "#fff",
+              fontSize: 12,
+            },
+            axisLine: {
+              lineStyle: {
+                //y轴网格线设置
+                color: "rgba(0, 168, 255, 0.4)",
+                width: 1,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            data: ['2025', '2026', '2027', '2028', '2029', '2030', '2031', '2032', '2033', '2034'],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            nameTextStyle: {
+              color: "#fff",
+              fontWeight: 400,
+              fontSize: 14,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "rgba(0, 168, 255, 0.3)",
+                width: 1,
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              fontSize: 12,
+              color: "#fff",
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            barWidth: 16,
+            label: {
+              show: true,
+              position: "top",
+              color: "#00A8FF",
+            },
+            itemStyle: {
+              borderRadius: [8, 8, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#00A8FF",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(0, 122, 255, 0)",
+                },
+              ]),
+            },
+            data: [134, 54, 342, 76, 153, 55, 77, 324, 252, 234],
+          },
+        ],
+      })
+    }
+  }
+}
+</script>

ui/src/views/sems/thickness/home/dashboard/topLine.vue

@@ -0,0 +1,213 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :lg="4" :sm="12" :xs="12" class="card-panel-col">
+      <dv-border-box-8 :dur="10">
+      <div class="card-panel" style="text-align: center;align-items: center;justify-content: center;display: flex;">
+
+        <el-select v-model="form.plant" :placeholder="$t('请选择') + $t('装置')" filterable clearable size="small" style="margin:auto;width: 80%">
+          <el-option
+            v-for="dict in plantOptions"
+            :key="dict.name"
+            :label="dict.name"
+            :value="dict.name"
+          />
+        </el-select>
+
+      </div>
+      </dv-border-box-8>
+    </el-col>
+    <el-col :lg="5" :sm="12" :xs="12" class="card-panel-col">
+      <dv-border-box-8 :dur="10">
+      <div class="card-panel">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon class-name="card-panel-icon" icon-class="pipeCount"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" >
+            管道数量
+          </div>
+          <count-to :duration="3000" :end-val="1054" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+      </dv-border-box-8>
+    </el-col>
+    <el-col :lg="5" :sm="12" :xs="12" class="card-panel-col">
+      <dv-border-box-8 :dur="10">
+      <div class="card-panel">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon class-name="card-panel-icon" icon-class="vesselCount"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            设备数量
+          </div>
+          <count-to :duration="3000" :end-val="413" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+      </dv-border-box-8>
+    </el-col>
+    <el-col :lg="5" :sm="12" :xs="12" class="card-panel-col">
+      <dv-border-box-8 :dur="10">
+      <div class="card-panel">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon class-name="card-panel-icon" icon-class="pipeCount"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            待测厚设备数量
+          </div>
+          <count-to :duration="3000" :end-val="126" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+      </dv-border-box-8>
+    </el-col>
+    <el-col :lg="5" :sm="12" :xs="12" class="card-panel-col">
+      <dv-border-box-8 :dur="10">
+      <div class="card-panel">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon class-name="card-panel-icon" icon-class="vesselCount"/>
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            待测厚设备数量
+          </div>
+          <count-to :duration="3000" :end-val="234" :start-val="0" class="card-panel-num"/>
+        </div>
+      </div>
+      </dv-border-box-8>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import {mylistPlant} from "@/api/system/plant";
+
+export default {
+  components: {
+    CountTo
+  },
+  data() {
+    return {
+      plantOptions: [],
+      form:{}
+    }
+  },
+  created() {
+    mylistPlant({pType: 1}).then(response => {
+      this.plantOptions = response.data;
+    });
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #ffffff;
+    //background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(255, 255, 255, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

ui/src/views/sems/thickness/home/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="dashboard-editor-container">
+    <top-line/>
+    <el-row>
+      <el-col :span="12">
+        <dv-decoration-1 style="width:100%;height:20px;" />
+        <div>
+          <dv-border-box-3>
+            <mid-left :chart-data="{}"/>
+          </dv-border-box-3>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <dv-decoration-1 style="width:100%;height:20px;" />
+        <div>
+          <dv-border-box-3>
+            <mid-right :chart-data="{}"/>
+          </dv-border-box-3>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <dv-border-box-9>
+          <bot-pie/>
+        </dv-border-box-9>
+      </el-col>
+      <el-col :span="12">
+        <dv-border-box-9>
+          <bot-pie-right/>
+        </dv-border-box-9>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import PanelGroup from "@/views/patrol/home/dashboard/PanelGroup.vue";
+import PieChart from "@/views/patrol/home/dashboard/PieChart.vue";
+import NoticeChart from "@/views/patrol/home/dashboard/NoticeChart.vue";
+import TopLine from "@/views/sems/thickness/home/dashboard/topLine.vue";
+import MidLeft from "@/views/sems/thickness/home/dashboard/midLeft.vue";
+import BotPie from "@/views/sems/thickness/home/dashboard/botPie.vue";
+import MidRight from "@/views/sems/thickness/home/dashboard/midRight.vue";
+import BotPieRight from "@/views/sems/thickness/home/dashboard/botPieRight.vue";
+
+export default {
+  name: 'Index',
+  components: {BotPieRight, MidRight, BotPie, MidLeft, TopLine, NoticeChart, PieChart, PanelGroup},
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-image: url("../../../../assets/image/elec/bg.jpg");
+  position: relative;
+
+}
+
+/*
+@media (max-width: 1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}*/
+</style>