~xiaohui/daoAnOffice.git

New file
			@@ -0,0 +1,152 @@
			<script setup lang="ts">
			import { ref, reactive } from "vue";
			import { graphic } from "echarts/core";
			import { currentGET } from "@/api";

			let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
			const option = ref({});
			const state = reactive({
			lockNum: 0,
			offlineNum: 0,
			onlineNum: 0,
			alarmNum: 0,
			totalNum: 0,
			});
			const echartsGraphic = (colors: string[]) => {
			return new graphic.LinearGradient(1, 0, 0, 0, [
			{ offset: 0, color: colors[0] },
			{ offset: 1, color: colors[1] },
			]);
			};
			const getData = () => {
			currentGET("leftCenter").then((res) => {
			console.log(res);
			if (res.success) {
			state.lockNum = res.data.lockNum;
			state.offlineNum = res.data.offlineNum;
			state.onlineNum = res.data.onlineNum;
			state.totalNum = res.data.totalNum;
			state.alarmNum = res.data.alarmNum;
			setOption();
			}
			});
			};
			getData();
			const setOption = () => {
			option.value = {
			title: {
			top: "center",
			left: "center",
			text: [`{value\|${state.totalNum}}`, "{name\|总数}"].join("\n"),
			textStyle: {
			rich: {
			value: {
			color: "#ffffff",
			fontSize: 24,
			fontWeight: "bold",
			lineHeight: 20,
			padding:[4,0,4,0]
			},
			name: {
			color: "#ffffff",
			lineHeight: 20,
			},
			},
			},
			},
			tooltip: {
			trigger: "item",
			backgroundColor: "rgba(0,0,0,.6)",
			borderColor: "rgba(147, 235, 248, .8)",
			textStyle: {
			color: "#FFF",
			},
			},
			series: [
			{
			name: "用户总览",
			type: "pie",
			radius: ["40%", "70%"],
			// avoidLabelOverlap: false,
			itemStyle: {
			borderRadius: 6,
			borderColor: "rgba(255,255,255,0)",
			borderWidth: 2,
			},
			color: colors,
			label: {
			show: true,
			formatter: " {b\|{b}} \n {c\|{c}个} {per\|{d}%} ",
			// position: "outside",
			rich: {
			b: {
			color: "#fff",
			fontSize: 12,
			lineHeight: 26,
			},
			c: {
			color: "#31ABE3",
			fontSize: 14,
			},
			per: {
			color: "#31ABE3",
			fontSize: 14,
			},
			},
			},
			emphasis: {
			show: false,
			},
			legend: {
			show: false,
			},
			tooltip: { show: true },

			labelLine: {
			show: true,
			length: 20, // 第一段线长度
			length2: 36, // 第二段线长度
			smooth: 0.2,
			lineStyle: {},
			},
			data: [
			{
			value: state.onlineNum,
			name: "在线",
			itemStyle: {
			color: echartsGraphic(["#0BFC7F", "#A3FDE0"]),
			},
			},
			{
			value: state.offlineNum,
			name: "离线",
			itemStyle: {
			color: echartsGraphic(["#A0A0A0", "#DBDFDD"]),
			},
			},
			{
			value: state.lockNum,
			name: "锁定",
			itemStyle: {
			color: echartsGraphic(["#F48C02", "#FDDB7D"]),
			},
			},
			{
			value: state.alarmNum,
			name: "异常",
			itemStyle: {
			color: echartsGraphic(["#F4023C", "#FB6CB7"]),
			},
			},
			],
			},
			],
			};
			};
			</script>

			<template>
			<v-chart class="chart" :option="option" />
			</template>

			<style scoped lang="scss"></style>

	src/mock/mock-index.ts	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/index/index.vue	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/index/left-center.vue	152 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

			@@ -10,12 +10,13 @@
			const a = Mock.mock({
			success: true,
			data: {
			offlineNum: '@integer(1, 100)',
			lockNum: '@integer(1, 10)',
			totalNum: 218
			offlineNum: '@integer(50, 100)',
			alarmNum: '@integer(20, 100)',
			lockNum: '@integer(10, 50)',
			totalNum: 368
			}
			})
			a.data.onlineNum = a.data.totalNum - a.data.offlineNum - a.data.lockNum
			a.data.onlineNum = a.data.totalNum - a.data.offlineNum - a.data.lockNum-a.data.alarmNum
			return a
			},
			},

			@@ -1,6 +1,8 @@
			<script setup lang="ts">
			import ItemWrap from "@/components/item-wrap";
			import LeftTop from "./left-top.vue";
			import LeftCenter from "./left-center.vue";

			</script>

			<template>
			@@ -14,7 +16,7 @@
			<LeftTop />
			</ItemWrap>
			<ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
			<!-- <LeftCenter /> -->
			<LeftCenter />
			</ItemWrap>
			<ItemWrap
			class="contetn_left-bottom contetn_lr-item"