From 50cd9f6356fdf511908c33e9a085ae7a54501082 Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期二, 25 十月 2022 15:50:51 +0800
Subject: [PATCH] feat: 增加安装计划,增加右侧结构
---
src/views/index/center-bottom.vue | 160 ++++++++++++++++++++++++++++++++
src/views/index/right-center.vue | 13 ++
src/views/index/right-top.vue | 13 ++
components.d.ts | 3
src/api/modules/index.ts | 6 +
src/views/index/center-map.vue | 8
src/views/index/right-bottom.vue | 13 ++
src/api/api.ts | 4
src/mock/mock-index.ts | 41 +++++++
src/views/index/index.vue | 12 +
src/plugins/echarts.ts | 4
11 files changed, 261 insertions(+), 16 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index 2228740..835eb88 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,13 +8,10 @@
declare module '@vue/runtime-core' {
export interface GlobalComponents {
CountUp: typeof import('./src/components/count-up/count-up.vue')['default']
- DialogContent: typeof import('./src/components/Plugins/DialogContent/index.vue')['default']
- ElButton: typeof import('element-plus/es')['ElButton']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ItemWrap: typeof import('./src/components/item-wrap/item-wrap.vue')['default']
- LoadingContent: typeof import('./src/components/Plugins/LoadingContent/index.vue')['default']
MessageContent: typeof import('./src/components/Plugins/MessageContent/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/api/api.ts b/src/api/api.ts
index 1c6e1f4..0d6e66e 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -1,7 +1,7 @@
/*
* @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-10-25 11:07:25
+ * @LastEditTime: 2022-10-25 15:34:56
*/
import axios from 'axios';
@@ -114,7 +114,7 @@
*/
export const GETNOBASE = async (url: string, params?: Params): Promise<any> => {
try {
- const data = await axios.get(url, {
+ const data = await axios.get(location.pathname+url, {
params: params,
});
return data;
diff --git a/src/api/modules/index.ts b/src/api/modules/index.ts
index 5d9744f..66db6bd 100644
--- a/src/api/modules/index.ts
+++ b/src/api/modules/index.ts
@@ -2,4 +2,10 @@
'leftTop':'/bigscreen/countDeviceNum',//宸︿笂
'leftCenter':'/bigscreen/countUserNum',//宸︿腑
"centerMap":"/bigscreen/centerMap",
+ "centerBottom":"/bigscreen/installationPlan",
+
+ // 'big3':"/bigscreen/sbtx", //璁惧鎻愰啋
+ // 'big4':"/bigscreen/alarmNum", //鎶ヨ娆℃暟
+ // 'big5':'/bigscreen/ssyj',//瀹炴椂棰勮
+ // 'big7':'/bigscreen/ranking',// 鎶ヨ鎺掑悕
}
\ No newline at end of file
diff --git a/src/mock/mock-index.ts b/src/mock/mock-index.ts
index b54e53f..82e78c5 100644
--- a/src/mock/mock-index.ts
+++ b/src/mock/mock-index.ts
@@ -10,7 +10,18 @@
}, [])
return arrays
}
-
+/**
+* @description: min 鈮� r 鈮� max 闅忔満鏁�
+* @param {*} Min
+* @param {*} Max
+* @return {*}
+*/
+function RandomNumBoth(Min: any, Max: any) {
+ var Range = Max - Min;
+ var Rand = Math.random();
+ var num = Min + Math.round(Rand * Range); //鍥涜垗浜斿叆
+ return num;
+}
//宸︿腑
export default [
{
@@ -44,6 +55,32 @@
})
a.data.onlineNum = a.data.totalNum - a.data.offlineNum
return a
+ }
+ },
+ //瀹夎璁″垝
+ {
+ url: "/bigscreen/installationPlan",
+ type: "get",
+ response: () => {
+
+ let num = RandomNumBoth(26, 32);
+ const a = Mock.mock({
+ ["category|" + num]: ["@city()"],
+ ["barData|" + num]: ["@integer(10, 100)"],
+ })
+ let lineData = [], rateData = [];
+ for (let index = 0; index < num; index++) {
+ let lineNum = Mock.mock('@integer(0, 100)') + a.barData[index]
+ lineData.push(lineNum)
+ let rate = a.barData[index] / lineNum;
+ rateData.push((rate * 100).toFixed(0))
+ }
+ a.lineData = lineData
+ a.rateData = rateData
+ return {
+ success: true,
+ data: a
+ }
}
},
{
@@ -80,7 +117,7 @@
}
})
// 鍘婚噸
- a.data.dataList = ArrSet(a.data.dataList,"name")
+ a.data.dataList = ArrSet(a.data.dataList, "name")
return a
}
}
diff --git a/src/plugins/echarts.ts b/src/plugins/echarts.ts
index 1c59e92..25fe485 100644
--- a/src/plugins/echarts.ts
+++ b/src/plugins/echarts.ts
@@ -5,7 +5,7 @@
CanvasRenderer
} from 'echarts/renderers'
import {
- BarChart,PieChart,MapChart,EffectScatterChart
+ BarChart,PieChart,MapChart,EffectScatterChart,LineChart
} from 'echarts/charts'
import {
GridComponent,
@@ -19,7 +19,7 @@
use([
CanvasRenderer,
- BarChart,PieChart,MapChart,EffectScatterChart,
+ BarChart,PieChart,MapChart,EffectScatterChart,LineChart,
GridComponent,
LegendComponent,
TooltipComponent,
diff --git a/src/views/index/center-bottom.vue b/src/views/index/center-bottom.vue
new file mode 100644
index 0000000..c047996
--- /dev/null
+++ b/src/views/index/center-bottom.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick } from "vue";
+import { currentGET } from "@/api";
+import {graphic} from "echarts/core"
+const option = ref({});
+const getData = () => {
+ currentGET("centerBottom", {}).then((res) => {
+ console.log("瀹夎璁″垝", res);
+ if (res.success) {
+ setOption(res.data);
+ } else {
+ window["$message"]({
+ text: res.msg,
+ type: "warning",
+ });
+ }
+ });
+};
+const setOption =async (newData: any) => {
+ await nextTick()
+ option.value = {
+ tooltip: {
+ trigger: "axis",
+ backgroundColor: "rgba(0,0,0,.6)",
+ borderColor: "rgba(147, 235, 248, .8)",
+ textStyle: {
+ color: "#FFF",
+ },
+ formatter: function (params: any) {
+ // 娣诲姞鍗曚綅
+ var result = params[0].name + "<br>";
+ params.forEach(function (item: any) {
+ if (item.value) {
+ if (item.seriesName == "瀹夎鐜�") {
+ result +=
+ item.marker +
+ " " +
+ item.seriesName +
+ " : " +
+ item.value +
+ "%</br>";
+ } else {
+ result +=
+ item.marker +
+ " " +
+ item.seriesName +
+ " : " +
+ item.value +
+ "涓�</br>";
+ }
+ } else {
+ result += item.marker + " " + item.seriesName + " : - </br>";
+ }
+ });
+ return result;
+ },
+ },
+ legend: {
+ data: ["宸插畨瑁�", "璁″垝瀹夎", "瀹夎鐜�"],
+ textStyle: {
+ color: "#B4B4B4",
+ },
+ top: "0",
+ },
+ grid: {
+ left: "50px",
+ right: "40px",
+ bottom: "30px",
+ top: "20px",
+ },
+ xAxis: {
+ data: newData.category,
+ axisLine: {
+ lineStyle: {
+ color: "#B4B4B4",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ yAxis: [
+ {
+ splitLine: { show: false },
+ axisLine: {
+ lineStyle: {
+ color: "#B4B4B4",
+ },
+ },
+
+ axisLabel: {
+ formatter: "{value}",
+ },
+ },
+ {
+ splitLine: { show: false },
+ axisLine: {
+ lineStyle: {
+ color: "#B4B4B4",
+ },
+ },
+ axisLabel: {
+ formatter: "{value}% ",
+ },
+ },
+ ],
+ series: [
+ {
+ name: "宸插畨瑁�",
+ type: "bar",
+ barWidth: 10,
+ itemStyle: {
+ borderRadius: 5,
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#956FD4" },
+ { offset: 1, color: "#3EACE5" },
+ ]),
+ },
+ data: newData.barData,
+ },
+ {
+ name: "璁″垝瀹夎",
+ type: "bar",
+ barGap: "-100%",
+ barWidth: 10,
+ itemStyle: {
+ borderRadius: 5,
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "rgba(156,107,211,0.8)" },
+ { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+ { offset: 1, color: "rgba(156,107,211,0.2)" },
+ ]),
+ },
+ z: -12,
+ data: newData.lineData,
+ },
+ {
+ name: "瀹夎鐜�",
+ type: "line",
+ smooth: true,
+ showAllSymbol: true,
+ symbol: "emptyCircle",
+ symbolSize: 8,
+ yAxisIndex: 1,
+ itemStyle: {
+ color: "#F02FC2",
+ },
+ data: newData.rateData,
+ },
+ ],
+ };
+};
+getData();
+</script>
+
+<template>
+ <v-chart class="chart" :option="option" v-if="JSON.stringify(option)!='{}'"/>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/index/center-map.vue b/src/views/index/center-map.vue
index 4ed9922..052b475 100644
--- a/src/views/index/center-map.vue
+++ b/src/views/index/center-map.vue
@@ -6,7 +6,7 @@
import type { MapdataType } from "./center.map";
const option = ref({});
const code = ref("china"); //china 浠ｈ〃涓浗 鍏朵粬鍦板競鏄鏀跨紪鐮�
-const centerMapRef = ref();
+
withDefaults(
defineProps<{
// 缁撴潫鏁板��
@@ -36,7 +36,6 @@
}
});
await nextTick();
- centerMapRef.value?.resize();
option.value = optionHandle(regionCode, list, mapData);
};
@@ -56,7 +55,7 @@
mapjson = mapjson.geoJSON;
resolve(mapjson);
} else {
- mapjson = await GETNOBASE(`/map-geojson/${regionCode}.json`).then(
+ mapjson = await GETNOBASE(`map-geojson/${regionCode}.json`).then(
(data) => data
);
code.value=regionCode
@@ -98,6 +97,7 @@
:option="option"
ref="centerMapRef"
@click="mapClick"
+ v-if="JSON.stringify(option)!='{}'"
/>
</div>
</div>
@@ -147,7 +147,7 @@
}
.mapwrap {
- height: 548px;
+ height: 580px;
width: 100%;
// padding: 0 0 10px 0;
box-sizing: border-box;
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index c7bb11b..1fec044 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -3,6 +3,12 @@
import LeftTop from "./left-top.vue";
import LeftCenter from "./left-center.vue";
import CenterMap from "./center-map.vue";
+import CenterBottom from "./center-bottom.vue";
+import RightTop from "./right-top.vue";
+import RightCenter from "./right-center.vue";
+import RightBottom from "./right-bottom.vue";
+
+
</script>
@@ -32,11 +38,11 @@
<div class="contetn_center">
<CenterMap class="contetn_center_top" title="璁惧鍒嗗竷鍥�"/>
<ItemWrap class="contetn_center-bottom" title="瀹夎璁″垝">
- <!-- <CenterBottom /> -->
+ <CenterBottom />
</ItemWrap>
</div>
<div class="contetn_right">
- <!-- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="鎶ヨ娆℃暟">
+ <ItemWrap class="contetn_left-bottom contetn_lr-item" title="鎶ヨ娆℃暟">
<RightTop />
</ItemWrap>
<ItemWrap
@@ -48,7 +54,7 @@
</ItemWrap>
<ItemWrap class="contetn_left-bottom contetn_lr-item" title="鏁版嵁缁熻鍥� ">
<RightBottom />
- </ItemWrap> -->
+ </ItemWrap>
</div>
</div>
</template>
diff --git a/src/views/index/right-bottom.vue b/src/views/index/right-bottom.vue
new file mode 100644
index 0000000..7df5872
--- /dev/null
+++ b/src/views/index/right-bottom.vue
@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+ <div class=''>
+
+ </div>
+</template>
+
+<style scoped lang='scss'>
+
+</style>
\ No newline at end of file
diff --git a/src/views/index/right-center.vue b/src/views/index/right-center.vue
new file mode 100644
index 0000000..7df5872
--- /dev/null
+++ b/src/views/index/right-center.vue
@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+ <div class=''>
+
+ </div>
+</template>
+
+<style scoped lang='scss'>
+
+</style>
\ No newline at end of file
diff --git a/src/views/index/right-top.vue b/src/views/index/right-top.vue
new file mode 100644
index 0000000..7df5872
--- /dev/null
+++ b/src/views/index/right-top.vue
@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+ <div class=''>
+
+ </div>
+</template>
+
+<style scoped lang='scss'>
+
+</style>
\ No newline at end of file
--
Gitblit v1.8.0