bug

app/src/components/Monitor3D.vue

@@ -1,465 +1,470 @@
 <script setup>
-import { onMounted, ref,  watch} from "vue";
-import * as echarts from "echarts";
-import "echarts-gl";
-const props = defineProps({
-  data: Object,
-});
-let chart, option;
-const pieChart3d = ref();
-function initChart() {
-  chart = echarts.init(pieChart3d.value);
-  // 传入数据生成 option
-  option = getPie3D(
-    [
-      {
-        name: "生命通道监控点位",
-        value: props.data.smtd.zs,
-        label: {
-          show: true
-        }
-      },
-      {
-        name: "电气火灾监测点位",
-        value: props.data.dqhz.zs,
-        label: {
-          show: true
-        }
-      },
-      {
-        name: "水压检测点位",
-        value: props.data.sy.zs,
-        label: {
-          show: true
-        }
-      },
-      {
-        name: "火灾报警主机监测点位",
-        value: props.data.hzbjzj.zs,
-        label: {
-          show: true
-        }
-      },
-      {
-        name: "消防监控室人员离岗检测点位",
-        value: props.data.xfkzs.zs,
-        label: {
-          show: true
-        }
-      },
-    ],
-    0
-  );
-
-  // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
-  let hoveredIndex = "";
-  // 准备重新渲染扇形所需的参数
-  let isSelected;
-  let isHovered;
-  let startRatio;
-  let endRatio;
-  let k;
-
-  // 监听 mouseover，近似实现高亮（放大）效果
-  chart.on("mouseover", function (params) {
-    // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-    if (hoveredIndex === params.seriesIndex) {
-      return;
-
-      // 否则进行高亮及必要的取消高亮操作
-    } else {
-      // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-      if (hoveredIndex !== "") {
-        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-        isSelected = option.series[hoveredIndex].pieStatus.selected;
-        isHovered = false;
-        startRatio = option.series[hoveredIndex].pieData.startRatio;
-        endRatio = option.series[hoveredIndex].pieData.endRatio;
-        k = option.series[hoveredIndex].pieStatus.k;
-
-        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-        option.series[hoveredIndex].parametricEquation = getParametricEquation(
-          startRatio,
-          endRatio,
-          isSelected,
-          isHovered,
-          k,
-          option.series[hoveredIndex].pieData.value
-        );
-        option.series[hoveredIndex].pieStatus.hovered = isHovered;
-
-        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-        hoveredIndex = "";
-      }
-
-      // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-      if (params.seriesName !== "mouseoutSeries") {
-        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-        isSelected = option.series[params.seriesIndex].pieStatus.selected;
-        isHovered = true;
-        startRatio = option.series[params.seriesIndex].pieData.startRatio;
-        endRatio = option.series[params.seriesIndex].pieData.endRatio;
-        k = option.series[params.seriesIndex].pieStatus.k;
-
-        // 对当前点击的扇形，执行高亮操作（对 option 更新）
-        option.series[params.seriesIndex].parametricEquation =
-          getParametricEquation(
-            startRatio,
-            endRatio,
-            isSelected,
-            isHovered,
-            k,
-            option.series[params.seriesIndex].pieData.value + 5
-          );
-        option.series[params.seriesIndex].pieStatus.hovered = isHovered;
-
-        // 记录上次高亮的扇形对应的系列号 seriesIndex
-        hoveredIndex = params.seriesIndex;
-      }
-
-      // 使用更新后的 option，渲染图表
-      chart.setOption(option);
-    }
-  });
-
-  // 修正取消高亮失败的 bug
-  chart.on("globalout", function () {
-    if (hoveredIndex !== "") {
-      // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-      isSelected = option.series[hoveredIndex].pieStatus.selected;
-      isHovered = false;
-      k = option.series[hoveredIndex].pieStatus.k;
-      startRatio = option.series[hoveredIndex].pieData.startRatio;
-      endRatio = option.series[hoveredIndex].pieData.endRatio;
-
-      // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-      option.series[hoveredIndex].parametricEquation = getParametricEquation(
-        startRatio,
-        endRatio,
-        isSelected,
-        isHovered,
-        k,
-        option.series[hoveredIndex].pieData.value
-      );
-      option.series[hoveredIndex].pieStatus.hovered = isHovered;
-
-      // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-      hoveredIndex = "";
-    }
-
-    // 使用更新后的 option，渲染图表
-    chart.setOption(option);
-  });
-
-  if (option && typeof option === "object") {
-    chart.setOption(option);
-  }
-}
-
-watch(() => props.data, () => {
-  initChart()
-}, {
-  deep: true
-})
-
-onMounted(() => {
-  initChart()
-});
-
-defineExpose({
-  legendToggleSelect(name) {
-    chart.dispatchAction({
-      type: "legendToggleSelect",
-      // 图例名称
-      name: name,
-    });
-  },
-});
-
-// 生成扇形的曲面参数方程
-function getParametricEquation(
-  startRatio,
-  endRatio,
-  isSelected,
-  isHovered,
-  k,
-  h
-) {
-  // 计算
-  const midRatio = (startRatio + endRatio) / 2;
-  const startRadian = startRatio * Math.PI * 2;
-  const endRadian = endRatio * Math.PI * 2;
-  const midRadian = midRatio * Math.PI * 2;
-
-  // 如果只有一个扇形，则不实现选中效果。
-  if (startRatio === 0 && endRatio === 1) {
-    // eslint-disable-next-line no-param-reassign
-    isSelected = false;
-  }
-
-  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-  // eslint-disable-next-line no-param-reassign
-  k = typeof k !== "undefined" ? k : 1 / 3;
-
-  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-  const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-  const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-
-  // 计算高亮效果的放大比例（未高亮，则比例为 1）
-  const hoverRate = isHovered ? 1.05 : 1;
-
-  // 返回曲面参数方程
-  return {
-    u: {
-      min: -Math.PI,
-      max: Math.PI * 3,
-      step: Math.PI / 32,
-    },
-
-    v: {
-      min: 0,
-      max: Math.PI * 2,
-      step: Math.PI / 20,
-    },
-
-    x(u, v) {
-      if (u < startRadian) {
-        return (
-          offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
-        );
-      }
-      if (u > endRadian) {
-        return (
-          offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
-        );
-      }
-      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-    },
-
-    y(u, v) {
-      if (u < startRadian) {
-        return (
-          offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
-        );
-      }
-      if (u > endRadian) {
-        return (
-          offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
-        );
-      }
-      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-    },
-
-    z(u, v) {
-      if (u < -Math.PI * 0.5) {
-          return Math.sin(u);
-      }
-      if (u > Math.PI * 2.5) {
-          return Math.sin(u);
-      }
-      return Math.sin(v) > 0 ? 1 : -1;
-    },
-  };
-}
-// 生成模拟 3D 饼图的配置项
-function getPie3D(pieData, internalDiameterRatio) {
-  const series = [];
-  // 总和
-  let sumValue = 0;
-  let startValue = 0;
-  let endValue = 0;
-  const legendData = [];
-  const k =
-    typeof internalDiameterRatio !== "undefined"
-      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
-      : 1 / 3;
-       
-      let labelSeries = {
-    id: 'labelSeries',
-    type: 'bar3D',
-    //zlevel:-9,
-    barSize: [0, 0],
-    data: [],
-    label: {
-        show: true,
-        formatter: function (params) {
-            return `${params.value[3]}`;
-        },
-        color: '#fff',
-        fontSize: '18px'
-    },
-};
-  // 为每一个饼图数据，生成一个 series-surface 配置
-  for (let i = 0; i < pieData.length; i += 1) {
-    sumValue += pieData[i].value;
-    // console.log(pieData[i].name);
-    const seriesItem = {
-      name:
-        typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
-      type: "surface",
-      parametric: true,
-      wireframe: {
-        show: false,
-      },
-      pieData: pieData[i],
-      pieStatus: {
-        selected: false,
-        hovered: false,
-        k,
-      },
-      // radius: 'dataValue',
-    };
-    if (typeof pieData[i].itemStyle !== "undefined") {
-      const { itemStyle } = pieData[i];
-      typeof pieData[i].itemStyle.color !== "undefined"
-        ? (itemStyle.color = pieData[i].itemStyle.color)
-        : null;
-      typeof pieData[i].itemStyle.opacity !== "undefined"
-        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
-        : null;
-      seriesItem.itemStyle = itemStyle;
-    }
-    series.push(seriesItem);
-  }
-  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-  for (let i = 0; i < series.length; i += 1) {
-    endValue = startValue + series[i].pieData.value;
-    series[i].pieData.startRatio = startValue / sumValue;
-    series[i].pieData.endRatio = endValue / sumValue;
-    series[i].parametricEquation = getParametricEquation(
-      series[i].pieData.startRatio,
-      series[i].pieData.endRatio,
-      false,
-      false,
-      k,
-      // ，使除了第一个之外的值都是10
-      series[i].pieData.value
-    );
-    startValue = endValue;
-    legendData.push(series[i].name);
-     // 判断增加 label 效果 @20210613
-     if (pieData[i].label && pieData[i].label.show) {
-        let labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
-        labelSeries.data.push({
-            name: series[i].name,
-            value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
-            itemStyle: {
-                opacity: 1,
-            },
-        });
-    }
-  }
-  // 将 labelSeries 添加进去 @20210613
-  series.push(labelSeries);
-  // 准备待返回的配置项，把准备好的 legendData、series 传入。
-  const option = {
-    color: ["#D5C307", "#01ADEF", "#12A647", "#caf869", "#88ffc6"],
-    legend: {
-      top: "200%",
-    },
-    tooltip: {
-      formatter: (params) => {
-        if (params.seriesName !== "mouseoutSeries") {
-          return `${
+	import {
+		onMounted,
+		ref,
+		watch
+	} from "vue";
+	import * as echarts from "echarts";
+	import "echarts-gl";
+	const props = defineProps({
+		data: Object,
+	});
+	let chart, option;
+	const pieChart3d = ref();
+
+	function initChart() {
+		chart = echarts.init(pieChart3d.value);
+		// 传入数据生成 option
+		option = getPie3D(
+			[{
+					name: "生命通道监控点位",
+					value: props.data.smtd.zs || 0,
+					label: {
+						show: true
+					}
+				},
+				{
+					name: "电气火灾监测点位",
+					value: props.data.dqhz.zs || 0,
+					label: {
+						show: true
+					}
+				},
+				{
+					name: "水压检测点位",
+					value: props.data.sy.zs || 0,
+					label: {
+						show: true
+					}
+				},
+				{
+					name: "火灾报警主机监测点位",
+					value: props.data.hzbjzj.zs || 0,
+					label: {
+						show: true
+					}
+				},
+				{
+					name: "消防监控室人员离岗检测点位",
+					value: props.data.xfkzs.zs || 0,
+					label: {
+						show: true
+					}
+				},
+			],
+			0
+		);
+
+		// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+		let hoveredIndex = "";
+		// 准备重新渲染扇形所需的参数
+		let isSelected;
+		let isHovered;
+		let startRatio;
+		let endRatio;
+		let k;
+
+		// 监听 mouseover，近似实现高亮（放大）效果
+		chart.on("mouseover", function(params) {
+			// 如果触发 mouseover 的扇形当前已高亮，则不做操作
+			if (hoveredIndex === params.seriesIndex) {
+				return;
+
+				// 否则进行高亮及必要的取消高亮操作
+			} else {
+				// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+				if (hoveredIndex !== "") {
+					// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+					isSelected = option.series[hoveredIndex].pieStatus.selected;
+					isHovered = false;
+					startRatio = option.series[hoveredIndex].pieData.startRatio;
+					endRatio = option.series[hoveredIndex].pieData.endRatio;
+					k = option.series[hoveredIndex].pieStatus.k;
+
+					// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+					option.series[hoveredIndex].parametricEquation = getParametricEquation(
+						startRatio,
+						endRatio,
+						isSelected,
+						isHovered,
+						k,
+						option.series[hoveredIndex].pieData.value
+					);
+					option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+					// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+					hoveredIndex = "";
+				}
+
+				// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+				if (params.seriesName !== "mouseoutSeries") {
+					// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+					isSelected = option.series[params.seriesIndex].pieStatus.selected;
+					isHovered = true;
+					startRatio = option.series[params.seriesIndex].pieData.startRatio;
+					endRatio = option.series[params.seriesIndex].pieData.endRatio;
+					k = option.series[params.seriesIndex].pieStatus.k;
+
+					// 对当前点击的扇形，执行高亮操作（对 option 更新）
+					option.series[params.seriesIndex].parametricEquation =
+						getParametricEquation(
+							startRatio,
+							endRatio,
+							isSelected,
+							isHovered,
+							k,
+							option.series[params.seriesIndex].pieData.value + 5
+						);
+					option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+
+					// 记录上次高亮的扇形对应的系列号 seriesIndex
+					hoveredIndex = params.seriesIndex;
+				}
+
+				// 使用更新后的 option，渲染图表
+				chart.setOption(option);
+			}
+		});
+
+		// 修正取消高亮失败的 bug
+		chart.on("globalout", function() {
+			if (hoveredIndex !== "") {
+				// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+				isSelected = option.series[hoveredIndex].pieStatus.selected;
+				isHovered = false;
+				k = option.series[hoveredIndex].pieStatus.k;
+				startRatio = option.series[hoveredIndex].pieData.startRatio;
+				endRatio = option.series[hoveredIndex].pieData.endRatio;
+
+				// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+				option.series[hoveredIndex].parametricEquation = getParametricEquation(
+					startRatio,
+					endRatio,
+					isSelected,
+					isHovered,
+					k,
+					option.series[hoveredIndex].pieData.value
+				);
+				option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+				// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+				hoveredIndex = "";
+			}
+
+			// 使用更新后的 option，渲染图表
+			chart.setOption(option);
+		});
+
+		if (option && typeof option === "object") {
+			chart.setOption(option);
+		}
+	}
+
+	watch(() => props.data, () => {
+		initChart()
+	}, {
+		deep: true
+	})
+
+	onMounted(() => {
+		initChart()
+	});
+
+	defineExpose({
+		legendToggleSelect(name) {
+			chart.dispatchAction({
+				type: "legendToggleSelect",
+				// 图例名称
+				name: name,
+			});
+		},
+	});
+
+	// 生成扇形的曲面参数方程
+	function getParametricEquation(
+		startRatio,
+		endRatio,
+		isSelected,
+		isHovered,
+		k,
+		h
+	) {
+		// 计算
+		const midRatio = (startRatio + endRatio) / 2;
+		const startRadian = startRatio * Math.PI * 2;
+		const endRadian = endRatio * Math.PI * 2;
+		const midRadian = midRatio * Math.PI * 2;
+
+		// 如果只有一个扇形，则不实现选中效果。
+		if (startRatio === 0 && endRatio === 1) {
+			// eslint-disable-next-line no-param-reassign
+			isSelected = false;
+		}
+
+		// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+		// eslint-disable-next-line no-param-reassign
+		k = typeof k !== "undefined" ? k : 1 / 3;
+
+		// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+		const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+		const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+		// 计算高亮效果的放大比例（未高亮，则比例为 1）
+		const hoverRate = isHovered ? 1.05 : 1;
+
+		// 返回曲面参数方程
+		return {
+			u: {
+				min: -Math.PI,
+				max: Math.PI * 3,
+				step: Math.PI / 32,
+			},
+
+			v: {
+				min: 0,
+				max: Math.PI * 2,
+				step: Math.PI / 20,
+			},
+
+			x(u, v) {
+				if (u < startRadian) {
+					return (
+						offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+					);
+				}
+				if (u > endRadian) {
+					return (
+						offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+					);
+				}
+				return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+			},
+
+			y(u, v) {
+				if (u < startRadian) {
+					return (
+						offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+					);
+				}
+				if (u > endRadian) {
+					return (
+						offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+					);
+				}
+				return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+			},
+
+			z(u, v) {
+				if (u < -Math.PI * 0.5) {
+					return Math.sin(u);
+				}
+				if (u > Math.PI * 2.5) {
+					return Math.sin(u);
+				}
+				return Math.sin(v) > 0 ? 1 : -1;
+			},
+		};
+	}
+	// 生成模拟 3D 饼图的配置项
+	function getPie3D(pieData, internalDiameterRatio) {
+		const series = [];
+		// 总和
+		let sumValue = 0;
+		let startValue = 0;
+		let endValue = 0;
+		const legendData = [];
+		const k =
+			typeof internalDiameterRatio !== "undefined" ?
+			(1 - internalDiameterRatio) / (1 + internalDiameterRatio) :
+			1 / 3;
+
+		let labelSeries = {
+			id: 'labelSeries',
+			type: 'bar3D',
+			//zlevel:-9,
+			barSize: [0, 0],
+			data: [],
+			label: {
+				show: true,
+				formatter: function(params) {
+					return `${params.value[3]}`;
+				},
+				color: '#fff',
+				fontSize: '18px'
+			},
+		};
+		// 为每一个饼图数据，生成一个 series-surface 配置
+		for (let i = 0; i < pieData.length; i += 1) {
+			sumValue += pieData[i].value;
+			// console.log(pieData[i].name);
+			const seriesItem = {
+				name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
+				type: "surface",
+				parametric: true,
+				wireframe: {
+					show: false,
+				},
+				pieData: pieData[i],
+				pieStatus: {
+					selected: false,
+					hovered: false,
+					k,
+				},
+				// radius: 'dataValue',
+			};
+			if (typeof pieData[i].itemStyle !== "undefined") {
+				const {
+					itemStyle
+				} = pieData[i];
+				typeof pieData[i].itemStyle.color !== "undefined" ?
+					(itemStyle.color = pieData[i].itemStyle.color) :
+					null;
+				typeof pieData[i].itemStyle.opacity !== "undefined" ?
+					(itemStyle.opacity = pieData[i].itemStyle.opacity) :
+					null;
+				seriesItem.itemStyle = itemStyle;
+			}
+			series.push(seriesItem);
+		}
+		// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+		// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+		for (let i = 0; i < series.length; i += 1) {
+			endValue = startValue + series[i].pieData.value;
+			series[i].pieData.startRatio = startValue / sumValue;
+			series[i].pieData.endRatio = endValue / sumValue;
+			series[i].parametricEquation = getParametricEquation(
+				series[i].pieData.startRatio,
+				series[i].pieData.endRatio,
+				false,
+				false,
+				k,
+				// ，使除了第一个之外的值都是10
+				series[i].pieData.value
+			);
+			startValue = endValue;
+			legendData.push(series[i].name);
+			// 判断增加 label 效果 @20210613
+			if (pieData[i].label && pieData[i].label.show) {
+				let labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
+				labelSeries.data.push({
+					name: series[i].name,
+					value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
+					itemStyle: {
+						opacity: 1,
+					},
+				});
+			}
+		}
+		// 将 labelSeries 添加进去 @20210613
+		series.push(labelSeries);
+		// 准备待返回的配置项，把准备好的 legendData、series 传入。
+		const option = {
+			color: ["#D5C307", "#01ADEF", "#12A647", "#caf869", "#88ffc6"],
+			legend: {
+				top: "200%",
+			},
+			tooltip: {
+				formatter: (params) => {
+					if (params.seriesName !== "mouseoutSeries") {
+						return `${
             params.seriesName
           }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
             params.color
           };"></span>${option.series[params.seriesIndex].pieData.value}`;
-        }
-        return "";
-      },
-    },
-    xAxis3D: {
-      min: -1,
-      max: 1,
-    },
-    yAxis3D: {
-      min: -1,
-      max: 1,
-    },
-    zAxis3D: {
-      min: -1,
-      max: "dataMax",
-    },
-    grid3D: {
-      show: false,
-      boxHeight: 25,
-      top: "-17%",
-      left: "0",
-      viewControl: {
-        // 3d效果可以放大、旋转等，请自己去查看官方配置
-        alpha: 25,
-        beta: 70, //旋转角度
-        rotateSensitivity: 1,
-        zoomSensitivity: 0,
-        panSensitivity: 0,
-        autoRotate: true,
-        distance: 210,
-      },
-      // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
-      postEffect: {
-        // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
-        enable: false,
-        bloom: {
-          enable: true,
-          bloomIntensity: 0.1,
-        },
-        SSAO: {
-          enable: true,
-          quality: "medium",
-          radius: 0,
-        },
-      },
-    },
-    series,
-  };
-  return option;
-}
+					}
+					return "";
+				},
+			},
+			xAxis3D: {
+				min: -1,
+				max: 1,
+			},
+			yAxis3D: {
+				min: -1,
+				max: 1,
+			},
+			zAxis3D: {
+				min: -1,
+				max: "dataMax",
+			},
+			grid3D: {
+				show: false,
+				boxHeight: 25,
+				top: "-17%",
+				left: "0",
+				viewControl: {
+					// 3d效果可以放大、旋转等，请自己去查看官方配置
+					alpha: 25,
+					beta: 70, //旋转角度
+					rotateSensitivity: 1,
+					zoomSensitivity: 0,
+					panSensitivity: 0,
+					autoRotate: true,
+					distance: 210,
+				},
+				// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+				postEffect: {
+					// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+					enable: false,
+					bloom: {
+						enable: true,
+						bloomIntensity: 0.1,
+					},
+					SSAO: {
+						enable: true,
+						quality: "medium",
+						radius: 0,
+					},
+				},
+			},
+			series,
+		};
+		return option;
+	}
 </script>
 
 <template>
-  <div class="container">
-    <div ref="pieChart3d" class="chart"></div>
-  </div>
+	<div class="container">
+		<div ref="pieChart3d" class="chart"></div>
+	</div>
 </template>
 
 <style scoped lang="less">
-.container {
-  width: 443px;
-  height: 130px;
-  position: relative;
-}
-
-.container::after {
-  content: "";
-  position: absolute;
-  width: 150px;
-  height: 68px;
-  background: url("../assets/images/1.png") no-repeat;
-  background-size: 100% 100%;
-  bottom: -2px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.container::before {
-  content: attr(data-num);
-  position: absolute;
-  font-size: 18px;
-  font-family: YouSheBiaoTiHei;
-  color: #ffffff;
-  line-height: 42px;
-  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
-  left: 50%;
-  transform: translate(-50%);
-  top: 30%;
-}
-
-.chart {
-  width: 440px;
-  height: 100%;
-  position: relative;
-  z-index: 1;
-}
-</style>
+	.container {
+		width: 443px;
+		height: 130px;
+		position: relative;
+	}
+
+	.container::after {
+		content: "";
+		position: absolute;
+		width: 150px;
+		height: 68px;
+		background: url("../assets/images/1.png") no-repeat;
+		background-size: 100% 100%;
+		bottom: -2px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.container::before {
+		content: attr(data-num);
+		position: absolute;
+		font-size: 18px;
+		font-family: YouSheBiaoTiHei;
+		color: #ffffff;
+		line-height: 42px;
+		text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
+		left: 50%;
+		transform: translate(-50%);
+		top: 30%;
+	}
+
+	.chart {
+		width: 440px;
+		height: 100%;
+		position: relative;
+		z-index: 1;
+	}
+</style>

app/src/views/Detail/components/VideoInfo.vue

@@ -1,427 +1,449 @@
 <template>
-  <div class="video-list">
-    <!-- 视频 -->
-    <div v-if="caremaList" class="videos">
-      <!-- <img src="../../../assets/images/Group 1321314647.png" alt="" />
+	<div class="video-list">
+		<!-- 视频 -->
+		<div v-if="caremaList" class="videos">
+			<!-- <img src="../../../assets/images/Group 1321314647.png" alt="" />
       <img src="../../../assets/images/Group 1321314649.png" alt="" />
       <img src="../../../assets/images/Group 1321314650.png" alt="" />
       <img src="../../../assets/images/Group 1321314651.png" alt="" /> -->
-      <template v-for="(item, i) in caremaList">
-        <div class="video" :key="i" v-if="i < 4">
-          <Camera :id="item.sbbm" :byList="caremaList" />
-        </div>
-      </template>
+			<template v-for="(item, i) in caremaList">
+				<div class="video" :key="i" v-if="i < 4">
+					<Camera :id="item.sbbm" :byList="caremaList" />
+				</div>
+			</template>
 
-      <!-- <Camera :id="item.sbbm" v-for="(item, i) in caremaList" :key="i" /> -->
-    </div>
-    <Monitor3D ref="monitor" :data="pieData" v-if="pieData" />
-    <div v-if="pieData">
-      <div class="info">
-        <div class="bg-num" @click="clickItem(1)">
-          <div class="line-box">
-            <span
-              :class="{
+			<!-- <Camera :id="item.sbbm" v-for="(item, i) in caremaList" :key="i" /> -->
+		</div>
+		<Monitor3D ref="monitor" :data="pieData" v-if="pieData" />
+		<div v-if="pieData">
+			<div class="info">
+				<div class="bg-num" @click="clickItem(1)">
+					<div class="line-box">
+						<span :class="{
                 line: true,
                 active: pieActive1,
-              }"
-            ></span>
-            <span>生命通道监控点位</span>
-          </div>
-          <div>
-            <!-- 在线 -->
-            <div class="dis-online">
-              <div>
-                <span class="online"></span>
-                <span>{{ pieData.smtd.zx || 0 }}个</span>
-              </div>
-              <div>
-                <span class="off-line"> </span>
-                <span>{{ pieData.smtd.bj || 0 }}个</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-num" @click="clickItem(2)">
-          <div class="line-box">
-            <span
-              :class="{
+              }"></span>
+						<span>生命通道监控点位</span>
+					</div>
+					<div>
+						<!-- 在线 -->
+						<div class="dis-online">
+							<div>
+								<span class="online"></span>
+								<span>{{ pieData.smtd.zx || 0 }}个</span>
+							</div>
+							<div>
+								<span class="off-line"> </span>
+								<span>{{ pieData.smtd.bj || 0 }}个</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-num" @click="clickItem(2)">
+					<div class="line-box">
+						<span :class="{
                 line: true,
                 'line-b': true,
                 active: pieActive2,
-              }"
-            ></span>
-            <span>电气火灾监测点位</span>
-          </div>
-          <div>
-            <!-- 在线 -->
-            <div class="dis-online">
-              <div>
-                <span class="online"></span>
-                <span>{{ pieData.dqhz.zx || 0 }}个</span>
-              </div>
-              <div>
-                <span class="off-line"> </span>
-                <span>{{ pieData.dqhz.bj || 0 }}个</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-num" @click="clickItem(3)">
-          <div class="line-box">
-            <span
-              :class="{
+              }"></span>
+						<span>电气火灾监测点位</span>
+					</div>
+					<div>
+						<!-- 在线 -->
+						<div class="dis-online">
+							<div>
+								<span class="online"></span>
+								<span>{{ pieData.dqhz.zx || 0 }}个</span>
+							</div>
+							<div>
+								<span class="off-line"> </span>
+								<span>{{ pieData.dqhz.bj || 0 }}个</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-num" @click="clickItem(3)">
+					<div class="line-box">
+						<span :class="{
                 line: true,
                 active: pieActive3,
                 'line-g': true,
-              }"
-            ></span>
-            <span>水压检测点位</span>
-          </div>
-          <div>
-            <!-- 在线 -->
-            <div class="dis-online">
-              <div>
-                <span class="online"></span>
-                <span>{{ pieData.sy.zx || 0 }}个</span>
-              </div>
-              <div>
-                <span class="off-line"> </span>
-                <span>{{ pieData.sy.bj || 0 }}个</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="info-2">
-        <div class="bg-num" @click="clickItem(4)">
-          <div class="line-box">
-            <span
-              :class="{
+              }"></span>
+						<span>水压检测点位</span>
+					</div>
+					<div>
+						<!-- 在线 -->
+						<div class="dis-online">
+							<div>
+								<span class="online"></span>
+								<span>{{ pieData.sy.zx || 0 }}个</span>
+							</div>
+							<div>
+								<span class="off-line"> </span>
+								<span>{{ pieData.sy.bj || 0 }}个</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="info-2">
+				<div class="bg-num" @click="clickItem(4)">
+					<div class="line-box">
+						<span :class="{
                 line: true,
                 'line-d': true,
                 active: pieActive4,
-              }"
-            ></span>
-            <span>火灾报警主机监测点位</span>
-          </div>
-          <div>
-            <!-- 在线 -->
-            <div class="dis-online">
-              <div>
-                <span class="online"></span>
-                <span>{{ pieData.hzbjzj.zx || 0 }}个</span>
-              </div>
-              <div>
-                <span class="off-line"> </span>
-                <span>{{ pieData.hzbjzj.bj || 0 }}个</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="bg-num" @click="clickItem(5)">
-          <div class="line-box">
-            <span
-              :class="{
+              }"></span>
+						<span>火灾报警主机监测点位</span>
+					</div>
+					<div>
+						<!-- 在线 -->
+						<div class="dis-online">
+							<div>
+								<span class="online"></span>
+								<span>{{ pieData.hzbjzj.zx || 0 }}个</span>
+							</div>
+							<div>
+								<span class="off-line"> </span>
+								<span>{{ pieData.hzbjzj.bj || 0 }}个</span>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="bg-num" @click="clickItem(5)">
+					<div class="line-box">
+						<span :class="{
                 line: true,
                 'line-e': true,
                 active: pieActive5,
-              }"
-            ></span>
-            <span>消防监控室人员离岗检测点位</span>
-          </div>
-          <div>
-            <!-- 在线 -->
-            <div class="dis-online">
-              <div>
-                <span class="online"></span>
-                <span>{{ pieData.xfkzs.zx || 0 }}个</span>
-              </div>
-              <div>
-                <span class="off-line"> </span>
-                <span>{{ pieData.xfkzs.bj || 0 }}个</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+              }"></span>
+						<span>消防监控室人员离岗检测点位</span>
+					</div>
+					<div>
+						<!-- 在线 -->
+						<div class="dis-online">
+							<div>
+								<span class="online"></span>
+								<span>{{ pieData.xfkzs.zx || 0 }}个</span>
+							</div>
+							<div>
+								<span class="off-line"> </span>
+								<span>{{ pieData.xfkzs.bj || 0 }}个</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import Monitor3D from "@/components/Monitor3D.vue";
-import { getDeviceList, getJrs } from "@/api/iot.js";
-import { getXfjrs } from "@/api/detail.js";
-import Camera from "@/components/Camera.vue";
+	import Monitor3D from "@/components/Monitor3D.vue";
+	import {
+		getDeviceList,
+		getJrs
+	} from "@/api/iot.js";
+	import {
+		getXfjrs
+	} from "@/api/detail.js";
+	import Camera from "@/components/Camera.vue";
 
-export default {
-  components: { Monitor3D, Camera },
-  data() {
-    return {
-      pieActive1: true,
-      pieActive2: true,
-      pieActive3: true,
-      pieActive4: true,
-      pieActive5: true,
-      ctx: [
-        "生命通道监控点位",
-        "电气火灾监测点位",
-        "水压检测点位",
-        "火灾报警主机监测点位",
-        "消防监控室人员离岗检测点位",
-      ],
-      caremaList: [],
-      pieData: null,
-    };
-  },
-  props: ["detail"],
-  methods: {
-    clickItem(idx) {
-      // this[`pieActive${idx}`] = !this[`pieActive${idx}`];
-      // this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1]);
-      let sblx = "";
-      if (idx === 1) {
-        sblx = "生命通道监测";
-      } else if (idx === 2) {
-        sblx = "电气火灾终端";
-      } else if (idx === 3) {
-        sblx = "水压监测终端";
-      } else if (idx === 4) {
-        sblx = "火灾报警";
-      } else if (idx === 5) {
-        sblx = "消防控制室监控";
-      }
-      this.$emit("openModal", {
-        name: "zhxfModal",
-        params: { sblx, gcjzmc: this.detail.gcjzmc },
-      });
-    },
-    getCaremarList() {
-      getDeviceList({
-        jzid: this.detail.id,
-        pageNum: 1,
-        pageSize: 20,
-        zt: "在线",
-        sblx: "生命通道监测",
-      }).then((res) => {
-        this.caremaList = res.data.rows;
+	export default {
+		components: {
+			Monitor3D,
+			Camera
+		},
+		data() {
+			return {
+				pieActive1: true,
+				pieActive2: true,
+				pieActive3: true,
+				pieActive4: true,
+				pieActive5: true,
+				ctx: [
+					"生命通道监控点位",
+					"电气火灾监测点位",
+					"水压检测点位",
+					"火灾报警主机监测点位",
+					"消防监控室人员离岗检测点位",
+				],
+				caremaList: [],
+				pieData: null,
+			};
+		},
+		props: ["detail"],
+		methods: {
+			clickItem(idx) {
+				// this[`pieActive${idx}`] = !this[`pieActive${idx}`];
+				// this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1]);
+				let sblx = "";
+				if (idx === 1) {
+					sblx = "生命通道监测";
+				} else if (idx === 2) {
+					sblx = "电气火灾终端";
+				} else if (idx === 3) {
+					sblx = "水压监测终端";
+				} else if (idx === 4) {
+					sblx = "火灾报警";
+				} else if (idx === 5) {
+					sblx = "消防控制室监控";
+				}
+				this.$emit("openModal", {
+					name: "zhxfModal",
+					params: {
+						sblx,
+						gcjzmc: this.detail.gcjzmc
+					},
+				});
+			},
+			getCaremarList() {
+				getDeviceList({
+					jzid: this.detail.id,
+					pageNum: 1,
+					pageSize: 20,
+					zt: "在线",
+					sblx: "生命通道监测",
+				}).then((res) => {
+					this.caremaList = res.data.rows;
 
-        getDeviceList({
-          jzid: this.detail.id,
-          pageNum: 1,
-          pageSize: 20,
-          zt: "在线",
-          sblx: "消防控制室监控",
-        }).then((res) => {
-          this.caremaList = this.caremaList.concat(res.data.rows);
-        });
-      });
-    },
-    getJrsList() {
-      getXfjrs({
-        pageNum: 1,
-        pageSize: 100,
-        jzid: this.detail.id,
-      }).then((res) => {
-        const pieData = {
-          dqhz: {
-            zs: null,
-            bj: null,
-            zx: null,
-          },
-          hzbjzj: {
-            zs: null,
-            bj: null,
-            zx: null,
-          },
-          smtd: {
-            zs: null,
-            bj: null,
-            zx: null,
-          },
-          sy: {
-            zs: null,
-            bj: null,
-            zx: null,
-          },
-          xfkzs: {
-            zs: null,
-            bj: null,
-            zx: null,
-          },
-        };
-        if (res.data.rows) {
-          res.data.rows.forEach((p) => {
-            if (p.sblx === "水压监测终端") {
-              // 水压
-              pieData.sy.zs += p.zxs || 0;
-              pieData.sy.zx += p.sbzs || 0;
-              pieData.sy.bj += p.gjs || 0;
-            } else if (p.sblx === "生命通道监测") {
-              // 生命通道
-              pieData.smtd.zs += p.sbzs || 0;
-              pieData.smtd.zx += p.zxs || 0;
-              pieData.smtd.bj += p.gjs || 0;
-            } else if (p.sblx === "消防控制室监控") {
-              // 消防控制室
-              pieData.xfkzs.zs += p.sbzs || 0;
-              pieData.xfkzs.zx += p.zxs || 0;
-              pieData.xfkzs.bj += p.gjs || 0;
-            } else if (p.sblx === "电气火灾终端") {
-              // 电器火灾
-              pieData.dqhz.zs += p.sbzs || 0;
-              pieData.dqhz.zx += p.zxs || 0;
-              pieData.dqhz.bj += p.gjs || 0;
-            } else if (p.sblx === "火灾报警主机监测") {
-              // 火灾报警主机
-              pieData.hzbjzj.zs += p.sbzs || 0;
-              pieData.hzbjzj.zx += p.zxs || 0;
-              pieData.hzbjzj.bj += p.gjs || 0;
-            }
-          });
-        }
+					getDeviceList({
+						jzid: this.detail.id,
+						pageNum: 1,
+						pageSize: 20,
+						zt: "在线",
+						sblx: "消防控制室监控",
+					}).then((res) => {
+						this.caremaList = this.caremaList.concat(res.data.rows);
+					});
+				});
+			},
+			getJrsList() {
+				getXfjrs({
+					pageNum: 1,
+					pageSize: 100,
+					jzid: this.detail.id,
+				}).then((res) => {
+					const pieData = {
+						dqhz: {
+							zs: null,
+							bj: null,
+							zx: null,
+						},
+						hzbjzj: {
+							zs: null,
+							bj: null,
+							zx: null,
+						},
+						smtd: {
+							zs: null,
+							bj: null,
+							zx: null,
+						},
+						sy: {
+							zs: null,
+							bj: null,
+							zx: null,
+						},
+						xfkzs: {
+							zs: null,
+							bj: null,
+							zx: null,
+						},
+					};
+					if (res.data.rows) {
+						res.data.rows.forEach((p) => {
+							if (p.sblx.indexOf("水压") >= 0) {
+								// 水压
+								pieData.sy.zs += p.zxs || 0;
+								pieData.sy.zx += p.sbzs || 0;
+								pieData.sy.bj += p.gjs || 0;
+							} else if (p.sblx.indexOf("生命通道") >= 0) {
+								// 生命通道
+								pieData.smtd.zs += p.sbzs || 0;
+								pieData.smtd.zx += p.zxs || 0;
+								pieData.smtd.bj += p.gjs || 0;
+							} else if (p.sblx.indexOf("消防控制室") >= 0) {
+								// 消防控制室
+								pieData.xfkzs.zs += p.sbzs || 0;
+								pieData.xfkzs.zx += p.zxs || 0;
+								pieData.xfkzs.bj += p.gjs || 0;
+							} else if (p.sblx.indexOf("电气火灾") >= 0) {
+								console.log(p);
+								// 电器火灾
+								pieData.dqhz.zs += p.sbzs || 0;
+								pieData.dqhz.zx += p.zxs || 0;
+								pieData.dqhz.bj += p.gjs || 0;
+							} else if (p.sblx.indexOf("火灾报警") >= 0) {
+								// 火灾报警主机
+								pieData.hzbjzj.zs += p.sbzs || 0;
+								pieData.hzbjzj.zx += p.zxs || 0;
+								pieData.hzbjzj.bj += p.gjs || 0;
+							}
+						});
+					}
 
-        this.pieData = pieData;
-        console.log(this.pieData);
-      });
-    },
-  },
-  mounted() {
-    this.getCaremarList();
-    this.getJrsList();
-  },
-};
+					this.pieData = pieData;
+					console.log(this.pieData);
+				});
+			},
+		},
+		mounted() {
+			this.getCaremarList();
+			this.getJrsList();
+		},
+	};
 </script>
 
 <style lang="less" scoped>
-.info {
-  display: flex;
-  justify-content: space-between;
-  .online {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    background: #15ff2d;
-    border-radius: 50%;
-    margin-right: 2px;
-  }
-  .off-line {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    background: #f06040;
-    border-radius: 50%;
-    margin-right: 2px;
-  }
-  .dis-online {
-    display: flex;
-    // justify-content: space-between;
-    gap: 20px;
-    margin-top: 12px;
-  }
+	.info {
+		display: flex;
+		justify-content: space-between;
 
-  // 渐变
-  .bg-num {
-    width: 125px;
-    height: 50px;
-    background: rgba(0, 213, 255, 0.18);
-    padding: 5px 5px;
-    cursor: pointer;
-  }
-  .line-box {
-    display: flex;
-    align-items: center;
-    margin-top: 7px;
-  }
-  .line {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    background: #d3d3d3;
-    margin-right: 5px;
-    &.active {
-      background: #d5c307;
-    }
-  }
-  .line-g {
-    &.active {
-      background: #12a647;
-    }
-  }
-  .line-b {
-    &.active {
-      background: #01adef;
-    }
-  }
-}
-.info-2 {
-  display: flex;
-  margin-top: 4px;
-  gap: 8px;
-  .online {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    background: #15ff2d;
-    border-radius: 50%;
-    margin-right: 2px;
-  }
-  .off-line {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    background: #f06040;
-    border-radius: 50%;
-    margin-right: 2px;
-  }
-  .dis-online {
-    display: flex;
-    // justify-content: space-between;
-    gap: 20px;
-    margin-top: 12px;
-  }
-  .bg-num {
-    width: 197px;
-    height: 50px;
-    background: rgba(0, 213, 255, 0.18);
-    padding: 5px 5px;
-    cursor: pointer;
-  }
-  .line-box {
-    display: flex;
-    align-items: center;
-    margin-top: 7px;
-  }
-  .line {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    background: #d3d3d3;
-    margin-right: 5px;
-  }
-  .line-d {
-    &.active {
-      background: #caf869;
-    }
-  }
-  .line-e {
-    &.active {
-      background: #88ffc6;
-    }
-  }
-}
-.video-list {
-  padding: 10px 10px;
-  font-size: 13px;
-}
-.videos {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  height: 192px;
-  .video {
-    width: 208px;
-    height: 96px;
-  }
-}
-</style>
+		.online {
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			background: #15ff2d;
+			border-radius: 50%;
+			margin-right: 2px;
+		}
+
+		.off-line {
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			background: #f06040;
+			border-radius: 50%;
+			margin-right: 2px;
+		}
+
+		.dis-online {
+			display: flex;
+			// justify-content: space-between;
+			gap: 20px;
+			margin-top: 12px;
+		}
+
+		// 渐变
+		.bg-num {
+			width: 125px;
+			height: 50px;
+			background: rgba(0, 213, 255, 0.18);
+			padding: 5px 5px;
+			cursor: pointer;
+		}
+
+		.line-box {
+			display: flex;
+			align-items: center;
+			margin-top: 7px;
+		}
+
+		.line {
+			display: inline-block;
+			width: 14px;
+			height: 14px;
+			background: #d3d3d3;
+			margin-right: 5px;
+
+			&.active {
+				background: #d5c307;
+			}
+		}
+
+		.line-g {
+			&.active {
+				background: #12a647;
+			}
+		}
+
+		.line-b {
+			&.active {
+				background: #01adef;
+			}
+		}
+	}
+
+	.info-2 {
+		display: flex;
+		margin-top: 4px;
+		gap: 8px;
+
+		.online {
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			background: #15ff2d;
+			border-radius: 50%;
+			margin-right: 2px;
+		}
+
+		.off-line {
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			background: #f06040;
+			border-radius: 50%;
+			margin-right: 2px;
+		}
+
+		.dis-online {
+			display: flex;
+			// justify-content: space-between;
+			gap: 20px;
+			margin-top: 12px;
+		}
+
+		.bg-num {
+			width: 197px;
+			height: 50px;
+			background: rgba(0, 213, 255, 0.18);
+			padding: 5px 5px;
+			cursor: pointer;
+		}
+
+		.line-box {
+			display: flex;
+			align-items: center;
+			margin-top: 7px;
+		}
+
+		.line {
+			display: inline-block;
+			width: 14px;
+			height: 14px;
+			background: #d3d3d3;
+			margin-right: 5px;
+		}
+
+		.line-d {
+			&.active {
+				background: #caf869;
+			}
+		}
+
+		.line-e {
+			&.active {
+				background: #88ffc6;
+			}
+		}
+	}
+
+	.video-list {
+		padding: 10px 10px;
+		font-size: 13px;
+	}
+
+	.videos {
+		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+		height: 192px;
+
+		.video {
+			width: 208px;
+			height: 96px;
+		}
+	}
+</style>

app/src/views/Home/components/RiskWarning.vue

@@ -94,7 +94,7 @@ export default {
             fontSize: 14,
             position: index % 2 === 0 ? "left" : "right",
             formatter: () => {
-              return  `${item.name} ${item.value} 个`;
+              return  `${item.name} ${item.value} 栋`;
             },
           },
           labelLine: {