|
@@ -1,14 +1,14 @@
|
|
|
<template>
|
|
|
<div class="screen-common-component">
|
|
|
<ScreenComHeader :module-id="moduleId" title="设备监控" />
|
|
|
+ <div ref="chartRef" class="charts-container"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { useCommonStore } from "@/store";
|
|
|
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
|
|
|
-
|
|
|
-const commonS = useCommonStore();
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { allChartColors } from "@/views/screens/configs/chartsConfig";
|
|
|
|
|
|
const props = defineProps({
|
|
|
moduleId: {
|
|
@@ -17,10 +17,48 @@ const props = defineProps({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
-const selectComponents = () => {
|
|
|
- commonS.moduleKey = props.moduleId;
|
|
|
- commonS.isShowSelectModule = true;
|
|
|
+const chartRef = ref(null);
|
|
|
+
|
|
|
+const options = {
|
|
|
+ color: allChartColors,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: "5%",
|
|
|
+ left: "center",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "设备监控",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "center",
|
|
|
+ color: "#fff",
|
|
|
+ formatter: function () {
|
|
|
+ return "设备总数:1000";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: "运行" },
|
|
|
+ { value: 735, name: "空闲" },
|
|
|
+ { value: 580, name: "维护" },
|
|
|
+ { value: 484, name: "维修" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const chart = echarts.init(chartRef.value);
|
|
|
+ chart.setOption(options);
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|