整体布局，带标题的框封装
This commit is contained in:
张宁
parent
658c40dae2
commit
3aff4d0633
|
|
@ -0,0 +1 @@
|
||||||
|
VITE_API_BASEURL = http://api.nclg.yx.zheke.com
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
VITE_API_BASEURL = http://api.nclg.yx.zheke.com
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build:old": "run-p type-check build-only",
|
"build:old": "run-p type-check build-only",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview --port 4173",
|
"preview": "vite preview --port 9527",
|
||||||
"build-only": "vite build",
|
"build-only": "vite build",
|
||||||
"type-check": "vue-tsc --noEmit"
|
"type-check": "vue-tsc --noEmit"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/*
|
/*
|
||||||
* @LastEditors: 张宁
|
* @LastEditors: 张宁
|
||||||
* @LastEditTime: 2024-05-21 15:07:36
|
* @LastEditTime: 2024-05-23 10:32:10
|
||||||
*/
|
*/
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import type { AxiosRequestConfig, AxiosResponse } from "axios";
|
import type { AxiosRequestConfig, AxiosResponse } from "axios";
|
||||||
|
|
@ -18,7 +18,7 @@ axios.interceptors.request.use(
|
||||||
function (config: AxiosRequestConfig): any {
|
function (config: AxiosRequestConfig): any {
|
||||||
// 在发送请求之前做些什么 传token
|
// 在发送请求之前做些什么 传token
|
||||||
// let token: any = getLocalStorage(StorageEnum.GB_TOKEN_STORE);
|
// let token: any = getLocalStorage(StorageEnum.GB_TOKEN_STORE);
|
||||||
let token: any = getToken();
|
let token: any = getToken() || 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA4ZGI3NTE5LTMxOGUtNDE0My04MDhjLWVmYTI3YmZkZWUyOCIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6IlRlYWNoZXIiLCJ1c2VyaW5mbyI6IntcIklkXCI6XCIwOGRiNzUxOS0zMThlLTQxNDMtODA4Yy1lZmEyN2JmZGVlMjhcIixcIk5hbWVcIjpcImFkbWluXCIsXCJQd2RcIjpcIlwiLFwiUGhvbmVOdW1iZXJcIjpcIjE1OTcyMTc4NDQ1XCIsXCJQZXJzb25uZWxUeXBlXCI6MSxcIlVzZXJUeXBlXCI6MCxcIlJlcG9ydGluZ1Byb2Nlc3NcIjowLFwiSGVhZFNjdWxwdHVyZVVybFwiOm51bGwsXCJTZXhcIjowLFwiVGVhY2hlckNsYXNzSWRzXCI6bnVsbCxcIklzU3VydmV5XCI6ZmFsc2UsXCJTdHVkZW50SWRcIjpcIlwiLFwiV2VsY29tZVllYXJcIjowLFwiSURDYXJkXCI6bnVsbCxcIkV4YW1pbmVlTnVtYmVyXCI6bnVsbCxcIk5vdGlmaWNhdGlvbk51bWJlclwiOm51bGwsXCJFZHVjYXRpb25hbExldmVsXCI6MCxcIlBob3RvUmV2aWV3U3RhdGVcIjowLFwiQ29sbGVnZU5hbWVcIjpudWxsLFwiRW5kVGltZVwiOlwiMDAwMS0wMS0wMVQwMDowMDowMFwiLFwiQWxsRGF0YVBlcm1pc3Npb25cIjowLFwiUm9sZXNcIjpudWxsLFwiUmV2aWV3ZWRTdGF0ZVwiOm51bGx9IiwibmJmIjoxNzE2NDI4NjIxLCJleHAiOjE3MTY0MzIyMjEsImlzcyI6InprSXNzdWVyIUAjJCVeJioiLCJhdWQiOiJ6a0F1ZGllbmNlIUAjJCVeJioifQ.iH1LYSEHNKs5LZVAvRTdghF-hUkKQxFLxBbJOXdRIao';
|
||||||
if (token) {
|
if (token) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
// config.headers.common[RequestEnum.GB_TOKEN_KEY] = token;
|
// config.headers.common[RequestEnum.GB_TOKEN_KEY] = token;
|
||||||
|
|
@ -56,6 +56,8 @@ axios.interceptors.response.use(
|
||||||
*/
|
*/
|
||||||
if (response.data.code == UtilVar.code) {
|
if (response.data.code == UtilVar.code) {
|
||||||
// router.push("/login")
|
// router.push("/login")
|
||||||
|
// window.location.href = 'http://nclg.yx.zheke.com/#/login';
|
||||||
|
|
||||||
return Promise.resolve(response);
|
return Promise.resolve(response);
|
||||||
}
|
}
|
||||||
return Promise.resolve(response);
|
return Promise.resolve(response);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43" height="43" viewBox="0 0 43 43">
|
||||||
|
<image id="色相_饱和度_1" data-name="色相/饱和度 1" x="2" width="40" height="41" xlink:href="data:img/png;base64,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"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -5,7 +5,7 @@
|
||||||
ref="box"
|
ref="box"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
:style="{ ...styles.wrapper, ...wrapperStyle }"
|
:style="{ ...styles.wrapper, ...wrapperStyle,margin:0 }"
|
||||||
class="screen-wrapper"
|
class="screen-wrapper"
|
||||||
ref="screenWrapper"
|
ref="screenWrapper"
|
||||||
>
|
>
|
||||||
|
|
@ -244,3 +244,6 @@ onUnmounted(() => {
|
||||||
// state.observer?.disconnect();
|
// state.observer?.disconnect();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import zkItem from "./zk-item.vue"
|
||||||
|
export default zkItem
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
// 标题
|
||||||
|
title: number | string;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
title: "",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="item_wrap">
|
||||||
|
<div class="item_title" v-if="title !== ''">
|
||||||
|
<q-svg width="35" height="35" name="titleIcon" />
|
||||||
|
<span class="title-inner"> {{ title }} </span>
|
||||||
|
</div>
|
||||||
|
<div class="title-hr" v-if="title !== ''"></div>
|
||||||
|
|
||||||
|
<div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
$item-title-height: 38px;
|
||||||
|
$item_title_content-height: calc(100% - 38px);
|
||||||
|
|
||||||
|
.item_wrap {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title {
|
||||||
|
height: $item-title-height;
|
||||||
|
line-height: $item-title-height;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.title-inner {
|
||||||
|
font-family: YouSheBiaoTiHei;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #F7F9FE;
|
||||||
|
text-shadow: 2px 3px 0px rgba(28, 28, 26, 0.27);
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-hr {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: repeating-linear-gradient(90deg, #2C3E50 2%, #68C6DE 10%, #2C3E50 40%, #11181f 80%, #11181f 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.dv-border-box-content) {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 6px 16px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title_content {
|
||||||
|
height: $item_title_content-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_title_content_def {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -14,23 +14,17 @@ const wrapperStyle = {};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<scale-screen
|
<scale-screen width="1920" height="1080" :delay="500" :fullScreen="false" :boxStyle="{
|
||||||
width="1920"
|
background: '#03050C',
|
||||||
height="1080"
|
overflow: isScale ? 'hidden' : 'auto',
|
||||||
:delay="500"
|
|
||||||
:fullScreen="false"
|
}" :wrapperStyle="wrapperStyle" :autoScale="isScale">
|
||||||
:boxStyle="{
|
|
||||||
background: '#03050C',
|
|
||||||
overflow: isScale ? 'hidden' : 'auto',
|
|
||||||
}"
|
|
||||||
:wrapperStyle="wrapperStyle"
|
|
||||||
:autoScale="isScale"
|
|
||||||
>
|
|
||||||
<div class="content_wrap">
|
<div class="content_wrap">
|
||||||
<Headers />
|
<Headers />
|
||||||
<RouterView />
|
<RouterView />
|
||||||
<MessageContent />
|
<MessageContent />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="title_bg"></div>
|
||||||
</scale-screen>
|
</scale-screen>
|
||||||
<Setting />
|
<Setting />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -40,8 +34,17 @@ const wrapperStyle = {};
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 16px 16px 16px 16px;
|
padding: 16px 16px 16px 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-image: url("@/assets/img/pageBg.png");
|
background-image: url("@/assets/img/zheke/bg.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
}
|
}
|
||||||
|
.title_bg{
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
background-image: url("@/assets/img/zheke/top_title_bg.png");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center left;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,69 +6,101 @@ const test = () => {
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
const returnHome = () => {
|
const returnHome = () => {
|
||||||
console.log('history.go(-1)');
|
|
||||||
|
|
||||||
history.go(-1)
|
history.go(-1)
|
||||||
// window.location.href = 'http://nclg.yx.zheke.com/#/login';
|
// window.location.href = 'http://nclg.yx.zheke.com/#/login';
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="d-flex jc-center title_wrap">
|
<div class="d-flex">
|
||||||
<div class="guang"></div>
|
<div class="top-left">
|
||||||
<div class="d-flex jc-center">
|
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span class="title-text" @click="test()">新生报道情况</span>
|
<span class="title-text" @click="test()">新生报道情况</span>
|
||||||
<span style="color: yellow;" @click="returnHome()">返回</span>
|
<span style="color: yellow;" @click="returnHome()">返回</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="en-title">
|
||||||
|
<div class="en-line"></div>
|
||||||
|
<span>New student registration status</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="change-time">
|
||||||
|
<div class="change-year">切换年份</div>
|
||||||
|
<div class="change-year">切换月份</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.title_wrap {
|
.d-flex {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
z-index: 999;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
background-image: url("../assets/img/top.png");
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|
||||||
.guang {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -26px;
|
|
||||||
background-image: url("../assets/img/guang.png");
|
|
||||||
background-position: 80px center;
|
|
||||||
width: 100%;
|
|
||||||
height: 56px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-left{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.title {
|
.title {
|
||||||
position: relative;
|
// position: relative;
|
||||||
// width: 500px;
|
width: 300px;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
background-size: cover;
|
// color: transparent;
|
||||||
color: transparent;
|
|
||||||
height: 60px;
|
height: 60px;
|
||||||
line-height: 46px;
|
line-height: 46px;
|
||||||
|
|
||||||
.title-text {
|
.title-text {
|
||||||
font-family: 'YouSheBiaoTiHei';
|
font-family: 'YouSheBiaoTiHei';
|
||||||
font-size: 38px;
|
font-size: 38px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
letter-spacing: 6px;
|
letter-spacing: 6px;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #ECEDEE;
|
color: #ECEDEE;
|
||||||
text-shadow: 0px 4px 1px rgba(50, 81, 140, 0.66);
|
}
|
||||||
// background: linear-gradient(
|
}
|
||||||
// 0deg, rgba(141, 185, 253, 0.45) 0%,
|
|
||||||
// rgba(237, 247, 255, 0.45) 73.3154296875%,
|
.en-title {
|
||||||
// rgba(255, 255, 255, 0.45) 100%);
|
width: 300px;
|
||||||
// opacity: 0.89;
|
height: 40px;
|
||||||
// -webkit-background-clip: text;
|
font-family: 'YouSheBiaoTiHei';
|
||||||
// -webkit-text-fill-color: transparent;
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ADC0DE;
|
||||||
|
opacity: 0.2;
|
||||||
|
// line-height: 40px;
|
||||||
|
padding-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
.en-line{
|
||||||
|
width: 80%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #ADC0DE;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-time {
|
||||||
|
// position: relative;
|
||||||
|
// float: right;
|
||||||
|
width: 300px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: 'YouSheBiaoTiHei';
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
|
||||||
|
.change-year {
|
||||||
|
width: 125px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: url("@/assets/img/zheke/top_change.png");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted, nextTick } from "vue";
|
||||||
|
import { installationPlan } from "@/api";
|
||||||
|
import { graphic } from "echarts/core";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
const option = ref({});
|
||||||
|
const getData = () => {
|
||||||
|
return
|
||||||
|
installationPlan()
|
||||||
|
.then((res) => {
|
||||||
|
console.log("中下--安装计划", res);
|
||||||
|
if (res.success) {
|
||||||
|
setOption(res.data);
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
message: res.msg,
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
ElMessage.error(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const setOption = async (newData: any) => {
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, nextTick } from "vue";
|
||||||
|
import { centerMap, GETNOBASE } from "@/api";
|
||||||
|
import { registerMap, getMap } from "echarts/core";
|
||||||
|
import { optionHandle, regionCodes } from "./center.map";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
import type { MapdataType } from "./center.map";
|
||||||
|
|
||||||
|
const option = ref({});
|
||||||
|
const code = ref("china"); //china 代表中国 其他地市是行政编码
|
||||||
|
|
||||||
|
withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
// 结束数值
|
||||||
|
title: number | string;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
title: "地图",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const dataSetHandle = async (regionCode: string, list: object[]) => {
|
||||||
|
const geojson: any = await getGeojson(regionCode);
|
||||||
|
let cityCenter: any = {};
|
||||||
|
let mapData: MapdataType[] = [];
|
||||||
|
//获取当前地图每块行政区中心点
|
||||||
|
geojson.features.forEach((element: any) => {
|
||||||
|
cityCenter[element.properties.name] = element.properties.centroid || element.properties.center;
|
||||||
|
});
|
||||||
|
//当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
|
||||||
|
list.forEach((item: any) => {
|
||||||
|
if (cityCenter[item.name]) {
|
||||||
|
mapData.push({
|
||||||
|
name: item.name,
|
||||||
|
value: cityCenter[item.name].concat(item.value),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await nextTick();
|
||||||
|
|
||||||
|
option.value = optionHandle(regionCode, list, mapData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getData = async (regionCode: string) => {
|
||||||
|
return
|
||||||
|
centerMap({ regionCode: regionCode })
|
||||||
|
.then((res) => {
|
||||||
|
console.log("中上--设备分布", res);
|
||||||
|
if (res.success) {
|
||||||
|
dataSetHandle(res.data.regionCode, res.data.dataList);
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
ElMessage.error(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const getGeojson = (regionCode: string) => {
|
||||||
|
return new Promise<boolean>(async (resolve) => {
|
||||||
|
let mapjson = getMap(regionCode);
|
||||||
|
if (mapjson) {
|
||||||
|
mapjson = mapjson.geoJSON;
|
||||||
|
resolve(mapjson);
|
||||||
|
} else {
|
||||||
|
mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then((data) => data);
|
||||||
|
code.value = regionCode;
|
||||||
|
registerMap(regionCode, {
|
||||||
|
geoJSON: mapjson as any,
|
||||||
|
specialAreas: {},
|
||||||
|
});
|
||||||
|
resolve(mapjson);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
getData(code.value);
|
||||||
|
|
||||||
|
const mapClick = (params: any) => {
|
||||||
|
// console.log(params);
|
||||||
|
let xzqData = regionCodes[params.name];
|
||||||
|
if (xzqData) {
|
||||||
|
getData(xzqData.adcode);
|
||||||
|
} else {
|
||||||
|
window["$message"].warning("暂无下级地市");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="mapwrap">
|
||||||
|
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
|
||||||
|
<v-chart class="chart" :option="option" ref="centerMapRef" @click="mapClick"
|
||||||
|
v-if="JSON.stringify(option) != '{}'" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.mapwrap {
|
||||||
|
height: 780px;
|
||||||
|
width: 100%;
|
||||||
|
// padding: 0 0 10px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #f00;
|
||||||
|
|
||||||
|
.quanguo {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: -46px;
|
||||||
|
width: 80px;
|
||||||
|
height: 28px;
|
||||||
|
border: 1px solid #00eded;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #00f7f6;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 26px;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,399 @@
|
||||||
|
|
||||||
|
|
||||||
|
//mapData数据结构
|
||||||
|
export interface MapdataType {
|
||||||
|
name: string;
|
||||||
|
value: [number, number, number]; //x,y,value 第一个x 第二个y 第三个value
|
||||||
|
}
|
||||||
|
export const optionHandle = (regionCode: string,
|
||||||
|
list: object[],
|
||||||
|
mapData: MapdataType[]) => {
|
||||||
|
let top = 45;
|
||||||
|
let zoom = ["china"].includes(regionCode) ? 1.05 : 1;
|
||||||
|
return {
|
||||||
|
backgroundColor: "rgba(0,0,0,0)",
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
seriesIndex:0,
|
||||||
|
left: 20,
|
||||||
|
bottom: 20,
|
||||||
|
pieces: [
|
||||||
|
{ gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||||
|
{ gte: 600, lte: 999, label: "600-999个" },
|
||||||
|
{ gte: 200, lte: 599, label: "200-599个" },
|
||||||
|
{ gte: 50, lte: 199, label: "49-199个" },
|
||||||
|
{ gte: 10, lte: 49, label: "10-49个" },
|
||||||
|
{ lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||||
|
],
|
||||||
|
inRange: {
|
||||||
|
// 渐变颜色，从小到大
|
||||||
|
// FFFFFF,EDF7FD,DBF0FA,C9E8F8,B7E1F6,A5D9F3,93D2F1,81CAEF,6FC2EC,5DBBEA,4AB3E8,38ACE5,26A4E3,1C9AD9,1A8DC7,
|
||||||
|
// 1781B5,
|
||||||
|
// 1573A2,136790,105A7E,0E4D6C,0C405A,093348,072636,051A24,020D12
|
||||||
|
color: [
|
||||||
|
// "#EDF7FD",
|
||||||
|
"rgba(237,247,253,.8)",
|
||||||
|
// "#B7E1F6",
|
||||||
|
"rgba(183,225,246,.9)",
|
||||||
|
// "#81CAEF",
|
||||||
|
"rgba(129,202,239,.9)",
|
||||||
|
// "#38ACE5",
|
||||||
|
"rgba(56,172,229,.9)",
|
||||||
|
// "#1781B5",
|
||||||
|
"rgba(23,129,181,.9)",
|
||||||
|
// "#105A7E",
|
||||||
|
"rgba(16,90,126,0.9)"
|
||||||
|
],
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
geo: {
|
||||||
|
map: regionCode,
|
||||||
|
roam: false,
|
||||||
|
selectedMode: false, //是否允许选中多个区域
|
||||||
|
zoom: zoom,
|
||||||
|
top: top,
|
||||||
|
// aspectScale: 0.78,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "MAP",
|
||||||
|
type: "map",
|
||||||
|
map: regionCode,
|
||||||
|
// aspectScale: 0.78,
|
||||||
|
data: list,
|
||||||
|
// data: [1,100],
|
||||||
|
selectedMode: false, //是否允许选中多个区域
|
||||||
|
zoom: zoom,
|
||||||
|
geoIndex: 1,
|
||||||
|
top: top,
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
formatter: function (params: any) {
|
||||||
|
if (params.data) {
|
||||||
|
return params.name + "：" + params.data["value"];
|
||||||
|
} else {
|
||||||
|
return params.name;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: "rgba(0,0,0,.6)",
|
||||||
|
borderColor: "rgba(147, 235, 248, .8)",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
color: "#000",
|
||||||
|
// position: [-10, 0],
|
||||||
|
formatter: function (val: any) {
|
||||||
|
// console.log(val)
|
||||||
|
if (val.data !== undefined) {
|
||||||
|
return val.name.slice(0, 2);
|
||||||
|
} else {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rich: {},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// areaColor: "rgba(56,155,183,.7)",
|
||||||
|
areaColor:{
|
||||||
|
type: "radial",
|
||||||
|
x: 0.5,
|
||||||
|
y: 0.5,
|
||||||
|
r: 0.8,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(56,155,183, .8)", // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: false, // 缺为 false
|
||||||
|
},
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "rgba(147, 235, 248, .8)",
|
||||||
|
borderWidth: 1,
|
||||||
|
areaColor: {
|
||||||
|
type: "radial",
|
||||||
|
x: 0.5,
|
||||||
|
y: 0.5,
|
||||||
|
r: 0.8,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
globalCoord: false, // 缺为 false
|
||||||
|
},
|
||||||
|
shadowColor: "rgba(128, 217, 248, .3)",
|
||||||
|
shadowOffsetX: -2,
|
||||||
|
shadowOffsetY: 2,
|
||||||
|
shadowBlur: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: mapData,
|
||||||
|
type: "effectScatter",
|
||||||
|
coordinateSystem: "geo",
|
||||||
|
symbolSize: function (val: any) {
|
||||||
|
return 4;
|
||||||
|
// return val[2] / 50;
|
||||||
|
},
|
||||||
|
legendHoverLink: true,
|
||||||
|
showEffectOn: "render",
|
||||||
|
rippleEffect: {
|
||||||
|
// period: 4,
|
||||||
|
scale: 6,
|
||||||
|
color: "rgba(255,255,255, 1)",
|
||||||
|
brushType: "fill",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
formatter: function (params: any) {
|
||||||
|
if (params.data) {
|
||||||
|
return params.name + "：" + params.data["value"][2];
|
||||||
|
} else {
|
||||||
|
return params.name;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
backgroundColor: "rgba(0,0,0,.6)",
|
||||||
|
borderColor: "rgba(147, 235, 248, .8)",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: (param: any) => {
|
||||||
|
return param.name.slice(0, 2);
|
||||||
|
},
|
||||||
|
|
||||||
|
fontSize: 11,
|
||||||
|
offset: [0, 2],
|
||||||
|
position: "bottom",
|
||||||
|
textBorderColor: "#fff",
|
||||||
|
textShadowColor: "#000",
|
||||||
|
textShadowBlur: 10,
|
||||||
|
textBorderWidth: 0,
|
||||||
|
color: "#FFF",
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
// colorBy: "data",
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(255,255,255,1)",
|
||||||
|
borderColor: "rgba(2255,255,255,2)",
|
||||||
|
borderWidth: 4,
|
||||||
|
shadowColor: "#000",
|
||||||
|
shadowBlur: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
//动画效果
|
||||||
|
// animationDuration: 1000,
|
||||||
|
// animationEasing: 'linear',
|
||||||
|
// animationDurationUpdate: 1000
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const regionCodes: any = {
|
||||||
|
"中国": {
|
||||||
|
"adcode": "100000",
|
||||||
|
"level": "country",
|
||||||
|
"name": "中华人民共和国"
|
||||||
|
},
|
||||||
|
"新疆维吾尔自治区": {
|
||||||
|
"adcode": "650000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "新疆维吾尔自治区"
|
||||||
|
},
|
||||||
|
"湖北省": {
|
||||||
|
"adcode": "420000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "湖北省"
|
||||||
|
},
|
||||||
|
"辽宁省": {
|
||||||
|
"adcode": "210000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "辽宁省"
|
||||||
|
},
|
||||||
|
"广东省": {
|
||||||
|
"adcode": "440000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "广东省"
|
||||||
|
},
|
||||||
|
"内蒙古自治区": {
|
||||||
|
"adcode": "150000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "内蒙古自治区"
|
||||||
|
},
|
||||||
|
"黑龙江省": {
|
||||||
|
"adcode": "230000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "黑龙江省"
|
||||||
|
},
|
||||||
|
"河南省": {
|
||||||
|
"adcode": "410000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "河南省"
|
||||||
|
},
|
||||||
|
"山东省": {
|
||||||
|
"adcode": "370000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "山东省"
|
||||||
|
},
|
||||||
|
"陕西省": {
|
||||||
|
"adcode": "610000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "陕西省"
|
||||||
|
},
|
||||||
|
"贵州省": {
|
||||||
|
"adcode": "520000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "贵州省"
|
||||||
|
},
|
||||||
|
"上海市": {
|
||||||
|
"adcode": "310000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "上海市"
|
||||||
|
},
|
||||||
|
"重庆市": {
|
||||||
|
"adcode": "500000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "重庆市"
|
||||||
|
},
|
||||||
|
"西藏自治区": {
|
||||||
|
"adcode": "540000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "西藏自治区"
|
||||||
|
},
|
||||||
|
"安徽省": {
|
||||||
|
"adcode": "340000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "安徽省"
|
||||||
|
},
|
||||||
|
"福建省": {
|
||||||
|
"adcode": "350000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "福建省"
|
||||||
|
},
|
||||||
|
"湖南省": {
|
||||||
|
"adcode": "430000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "湖南省"
|
||||||
|
},
|
||||||
|
"海南省": {
|
||||||
|
"adcode": "460000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "海南省"
|
||||||
|
},
|
||||||
|
"江苏省": {
|
||||||
|
"adcode": "320000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "江苏省"
|
||||||
|
},
|
||||||
|
"青海省": {
|
||||||
|
"adcode": "630000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "青海省"
|
||||||
|
},
|
||||||
|
"广西壮族自治区": {
|
||||||
|
"adcode": "450000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "广西壮族自治区"
|
||||||
|
},
|
||||||
|
"宁夏回族自治区": {
|
||||||
|
"adcode": "640000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "宁夏回族自治区"
|
||||||
|
},
|
||||||
|
"浙江省": {
|
||||||
|
"adcode": "330000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "浙江省"
|
||||||
|
},
|
||||||
|
"河北省": {
|
||||||
|
"adcode": "130000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "河北省"
|
||||||
|
},
|
||||||
|
"香港特别行政区": {
|
||||||
|
"adcode": "810000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "香港特别行政区"
|
||||||
|
},
|
||||||
|
"台湾省": {
|
||||||
|
"adcode": "710000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "台湾省"
|
||||||
|
},
|
||||||
|
"澳门特别行政区": {
|
||||||
|
"adcode": "820000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "澳门特别行政区"
|
||||||
|
},
|
||||||
|
"甘肃省": {
|
||||||
|
"adcode": "620000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "甘肃省"
|
||||||
|
},
|
||||||
|
"四川省": {
|
||||||
|
"adcode": "510000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "四川省"
|
||||||
|
},
|
||||||
|
"天津市": {
|
||||||
|
"adcode": "120000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "天津市"
|
||||||
|
},
|
||||||
|
"江西省": {
|
||||||
|
"adcode": "360000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "江西省"
|
||||||
|
},
|
||||||
|
"云南省": {
|
||||||
|
"adcode": "530000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "云南省"
|
||||||
|
},
|
||||||
|
"山西省": {
|
||||||
|
"adcode": "140000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "山西省"
|
||||||
|
},
|
||||||
|
"北京市": {
|
||||||
|
"adcode": "110000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "北京市"
|
||||||
|
},
|
||||||
|
"吉林省": {
|
||||||
|
"adcode": "220000",
|
||||||
|
"level": "province",
|
||||||
|
"name": "吉林省"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import ItemWrap from "@/components/item-wrap";
|
||||||
|
import zkItem from "@/components/zk-item";
|
||||||
|
import LeftTop from "./left-top.vue";
|
||||||
|
import LeftCenter from "./left-center.vue";
|
||||||
|
import LeftBottom from "./left-bottom.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>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="index-box">
|
||||||
|
<div class="contetn_left">
|
||||||
|
<zkItem class="contetn_left-top contetn_lr-item" title="设备总览">
|
||||||
|
<LeftTop />
|
||||||
|
</zkItem>
|
||||||
|
<ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
|
||||||
|
<LeftCenter />
|
||||||
|
</ItemWrap>
|
||||||
|
<ItemWrap
|
||||||
|
class="contetn_left-bottom contetn_lr-item"
|
||||||
|
title="设备提醒"
|
||||||
|
style="padding: 0 10px 16px 10px"
|
||||||
|
>
|
||||||
|
<LeftBottom />
|
||||||
|
</ItemWrap>
|
||||||
|
</div>
|
||||||
|
<div class="contetn_center">
|
||||||
|
<CenterMap class="contetn_center_top" title="全国地图" />
|
||||||
|
</div>
|
||||||
|
<div class="contetn_right">
|
||||||
|
<zkItem class="contetn_left-bottom contetn_lr-item" title="报警次数">
|
||||||
|
<RightTop />
|
||||||
|
</zkItem>
|
||||||
|
<zkItem
|
||||||
|
class="contetn_left-bottom contetn_lr-item"
|
||||||
|
title="报警排名(TOP8)"
|
||||||
|
style="padding: 0 10px 16px 10px"
|
||||||
|
>
|
||||||
|
<RightCenter />
|
||||||
|
</zkItem>
|
||||||
|
<zkItem class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">
|
||||||
|
<RightBottom />
|
||||||
|
</zkItem>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.index-box {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
min-height: calc(100% - 64px);
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
//左边 右边 结构一样
|
||||||
|
.contetn_left,
|
||||||
|
.contetn_right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
position: relative;
|
||||||
|
width: 540px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-clip: padding-box, border-box;
|
||||||
|
background-origin: padding-box, border-box;
|
||||||
|
background-image: linear-gradient(to bottom, #003, #000), linear-gradient(0deg,rgba(43,74,158,0.18),#5999FC);
|
||||||
|
}
|
||||||
|
.contetn_center {
|
||||||
|
flex: 1;
|
||||||
|
// margin: 0 54px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.contetn_lr-item {
|
||||||
|
height: 310px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { leftBottom } from "@/api";
|
||||||
|
import SeamlessScroll from "@/components/seamless-scroll";
|
||||||
|
import { computed, onMounted, reactive } from "vue";
|
||||||
|
import { useSettingStore } from "@/stores";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
import EmptyCom from "@/components/empty-com";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
const settingStore = useSettingStore();
|
||||||
|
const { defaultOption, indexConfig } = storeToRefs(settingStore);
|
||||||
|
const state = reactive<any>({
|
||||||
|
list: [],
|
||||||
|
defaultOption: {
|
||||||
|
...defaultOption.value,
|
||||||
|
singleHeight: 256,
|
||||||
|
limitScrollNum: 4,
|
||||||
|
},
|
||||||
|
scroll: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getData = () => {
|
||||||
|
return
|
||||||
|
leftBottom( { limitNum: 20 })
|
||||||
|
.then((res) => {
|
||||||
|
console.log("左下--设备提醒", res);
|
||||||
|
if (res.success) {
|
||||||
|
state.list = res.data.list;
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
message: res.msg,
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
ElMessage.error(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const addressHandle = (item: any) => {
|
||||||
|
let name = item.provinceName;
|
||||||
|
if (item.cityName) {
|
||||||
|
name += "/" + item.cityName;
|
||||||
|
if (item.countyName) {
|
||||||
|
name += "/" + item.countyName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return name;
|
||||||
|
};
|
||||||
|
const comName = computed(() => {
|
||||||
|
if (indexConfig.value.leftBottomSwiper) {
|
||||||
|
return SeamlessScroll;
|
||||||
|
} else {
|
||||||
|
return EmptyCom;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="left_boottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
|
||||||
|
<component
|
||||||
|
:is="comName"
|
||||||
|
:list="state.list"
|
||||||
|
v-model="state.scroll"
|
||||||
|
:singleHeight="state.defaultOption.singleHeight"
|
||||||
|
:step="state.defaultOption.step"
|
||||||
|
:limitScrollNum="state.defaultOption.limitScrollNum"
|
||||||
|
:hover="state.defaultOption.hover"
|
||||||
|
:singleWaitTime="state.defaultOption.singleWaitTime"
|
||||||
|
:wheel="state.defaultOption.wheel"
|
||||||
|
>
|
||||||
|
<ul class="left_boottom">
|
||||||
|
<li class="left_boottom_item" v-for="(item, i) in state.list" :key="i">
|
||||||
|
<span class="orderNum doudong">{{ i + 1 }}</span>
|
||||||
|
<div class="inner_right">
|
||||||
|
<div class="dibu"></div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="info">
|
||||||
|
<span class="labels">设备ID：</span>
|
||||||
|
<span class="text-content zhuyao doudong wangguan"> {{ item.gatewayno }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<span class="labels">时间：</span>
|
||||||
|
<span class="text-content" style="font-size: 12px"> {{ item.createTime }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="types doudong"
|
||||||
|
:class="{
|
||||||
|
typeRed: item.onlineState == 0,
|
||||||
|
typeGreen: item.onlineState == 1,
|
||||||
|
}"
|
||||||
|
>{{ item.onlineState == 1 ? "上线" : "下线" }}</span
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="info addresswrap">
|
||||||
|
<span class="labels">地址：</span>
|
||||||
|
<span class="text-content ciyao" style="font-size: 12px"> {{ addressHandle(item) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</component>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.left_boottom_wrap {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doudong {
|
||||||
|
overflow: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-auto {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_boottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.left_boottom_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 10px 0;
|
||||||
|
.orderNum {
|
||||||
|
margin: 0 16px 0 -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.labels {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuyao {
|
||||||
|
color: $primary-color;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ciyao {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
color: #e6a23c;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner_right {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 380px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
line-height: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.dibu {
|
||||||
|
position: absolute;
|
||||||
|
height: 2px;
|
||||||
|
width: 104%;
|
||||||
|
background-image: url("@/assets/img/zuo_xuxian.png");
|
||||||
|
bottom: -10px;
|
||||||
|
left: -2%;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.addresswrap {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wangguan {
|
||||||
|
color: #1890ff;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 80px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 12px;
|
||||||
|
// color: rgba(211, 210, 210,.8);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
// @include text-overflow(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.types {
|
||||||
|
width: 30px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typeRed {
|
||||||
|
color: #fc1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.typeGreen {
|
||||||
|
color: #29fc29;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
import { graphic } from "echarts/core";
|
||||||
|
import { countUserNum } from "@/api";
|
||||||
|
import {ElMessage} from "element-plus"
|
||||||
|
|
||||||
|
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 = () => {
|
||||||
|
return
|
||||||
|
countUserNum().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();
|
||||||
|
}else{
|
||||||
|
ElMessage.error(res.msg)
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
ElMessage.error(err)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { countDeviceNum } from "@/api";
|
||||||
|
import CountUp from "@/components/count-up";
|
||||||
|
import {ElMessage} from "element-plus"
|
||||||
|
|
||||||
|
const duration = ref(2);
|
||||||
|
const state = reactive({
|
||||||
|
alarmNum: 0,
|
||||||
|
offlineNum: 0,
|
||||||
|
onlineNum: 0,
|
||||||
|
totalNum: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const getData = () => {
|
||||||
|
return
|
||||||
|
countDeviceNum().then((res) => {
|
||||||
|
console.log("左上--设备总览",res);
|
||||||
|
if (res.success) {
|
||||||
|
state.alarmNum = res.data.alarmNum;
|
||||||
|
state.offlineNum = res.data.offlineNum;
|
||||||
|
state.onlineNum = res.data.onlineNum;
|
||||||
|
state.totalNum = res.data.totalNum;
|
||||||
|
}else{
|
||||||
|
ElMessage.error(res.msg)
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
ElMessage.error(err)
|
||||||
|
});;
|
||||||
|
};
|
||||||
|
getData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ul class="user_Overview flex">
|
||||||
|
<li class="user_Overview-item" style="color: #00fdfa">
|
||||||
|
<div class="user_Overview_nums allnum">
|
||||||
|
<CountUp :endVal="state.totalNum" :duration="duration" />
|
||||||
|
</div>
|
||||||
|
<p>总设备数</p>
|
||||||
|
</li>
|
||||||
|
<li class="user_Overview-item" style="color: #07f7a8">
|
||||||
|
<div class="user_Overview_nums online">
|
||||||
|
<CountUp :endVal="state.onlineNum" :duration="duration" />
|
||||||
|
</div>
|
||||||
|
<p>在线数</p>
|
||||||
|
</li>
|
||||||
|
<li class="user_Overview-item" style="color: #e3b337">
|
||||||
|
<div class="user_Overview_nums offline">
|
||||||
|
<CountUp :endVal="state.offlineNum" :duration="duration" />
|
||||||
|
</div>
|
||||||
|
<p>掉线数</p>
|
||||||
|
</li>
|
||||||
|
<li class="user_Overview-item" style="color: #f5023d">
|
||||||
|
<div class="user_Overview_nums laramnum">
|
||||||
|
<CountUp :endVal="state.alarmNum" :duration="duration" />
|
||||||
|
</div>
|
||||||
|
<p>告警次数</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.left-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user_Overview {
|
||||||
|
li {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
height: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user_Overview_nums {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
font-size: 22px;
|
||||||
|
margin: 50px auto 30px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bgdonghua::before {
|
||||||
|
animation: rotating 14s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.allnum {
|
||||||
|
&::before {
|
||||||
|
background-image: url("@/assets/img/left_top_lan.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.online {
|
||||||
|
&::before {
|
||||||
|
background-image: url("@/assets/img/left_top_lv.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.offline {
|
||||||
|
&::before {
|
||||||
|
background-image: url("@/assets/img/left_top_huang.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.laramnum {
|
||||||
|
&::before {
|
||||||
|
background-image: url("@/assets/img/left_top_hong.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,194 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { rightBottom } from "@/api";
|
||||||
|
import SeamlessScroll from "@/components/seamless-scroll";
|
||||||
|
import { computed, onMounted, reactive } from "vue";
|
||||||
|
import { useSettingStore } from "@/stores";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
import EmptyCom from "@/components/empty-com";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
const settingStore = useSettingStore();
|
||||||
|
const { defaultOption, indexConfig } = storeToRefs(settingStore);
|
||||||
|
const state = reactive<any>({
|
||||||
|
list: [],
|
||||||
|
defaultOption: {
|
||||||
|
...defaultOption.value,
|
||||||
|
singleHeight: 252,
|
||||||
|
limitScrollNum: 3,
|
||||||
|
// step:3
|
||||||
|
},
|
||||||
|
scroll: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getData = () => {
|
||||||
|
return
|
||||||
|
rightBottom({ limitNum: 20 })
|
||||||
|
.then((res) => {
|
||||||
|
console.log("右下", res);
|
||||||
|
if (res.success) {
|
||||||
|
state.list = res.data.list;
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
message: res.msg,
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
ElMessage.error(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const comName = computed(() => {
|
||||||
|
if (indexConfig.value.rightBottomSwiper) {
|
||||||
|
return SeamlessScroll;
|
||||||
|
} else {
|
||||||
|
return EmptyCom;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function montionFilter(val: any) {
|
||||||
|
// console.log(val);
|
||||||
|
return val ? Number(val).toFixed(2) : "--";
|
||||||
|
}
|
||||||
|
const handleAddress = (item: any) => {
|
||||||
|
return `${item.provinceName}/${item.cityName}/${item.countyName}`;
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
|
||||||
|
<component
|
||||||
|
:is="comName"
|
||||||
|
:list="state.list"
|
||||||
|
v-model="state.scroll"
|
||||||
|
:singleHeight="state.defaultOption.singleHeight"
|
||||||
|
:step="state.defaultOption.step"
|
||||||
|
:limitScrollNum="state.defaultOption.limitScrollNum"
|
||||||
|
:hover="state.defaultOption.hover"
|
||||||
|
:singleWaitTime="state.defaultOption.singleWaitTime"
|
||||||
|
:wheel="state.defaultOption.wheel"
|
||||||
|
>
|
||||||
|
<ul class="right_bottom">
|
||||||
|
<li class="right_center_item" v-for="(item, i) in state.list" :key="i">
|
||||||
|
<span class="orderNum">{{ i + 1 }}</span>
|
||||||
|
<div class="inner_right">
|
||||||
|
<div class="dibu"></div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="info">
|
||||||
|
<span class="labels">设备ID：</span>
|
||||||
|
<span class="text-content zhuyao"> {{ item.gatewayno }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<span class="labels">型号：</span>
|
||||||
|
<span class="text-content"> {{ item.terminalno }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<span class="labels">告警值：</span>
|
||||||
|
<span class="text-content warning"> {{ montionFilter(item.alertvalue) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<div class="info">
|
||||||
|
<span class="labels shrink-0"> 地址：</span>
|
||||||
|
<span class="ciyao truncate" style="font-size: 12px; width: 220px" :title="handleAddress(item)">
|
||||||
|
{{ handleAddress(item) }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="info time shrink-0">
|
||||||
|
<span class="labels">时间：</span>
|
||||||
|
<span class="text-content" style="font-size: 12px"> {{ item.createtime }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="info">
|
||||||
|
<span class="labels">报警内容：</span>
|
||||||
|
<span class="text-content ciyao" :class="{ warning: item.alertdetail }">
|
||||||
|
{{ item.alertdetail || "无" }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</component>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.right_bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.right_center_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: auto;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.orderNum {
|
||||||
|
margin: 0 20px 0 -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner_right {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 400px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
.dibu {
|
||||||
|
position: absolute;
|
||||||
|
height: 2px;
|
||||||
|
width: 104%;
|
||||||
|
background-image: url("@/assets/img/zuo_xuxian.png");
|
||||||
|
bottom: -12px;
|
||||||
|
left: -2%;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.labels {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhuyao {
|
||||||
|
color: $primary-color;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ciyao {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
color: #e6a23c;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_bottom_wrap {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 252px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-auto {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from "vue";
|
||||||
|
import CapsuleChart from "@/components/datav/capsule-chart";
|
||||||
|
import { ranking } from "@/api";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
const config = ref({
|
||||||
|
showValue: true,
|
||||||
|
unit: "次",
|
||||||
|
});
|
||||||
|
const data = ref([]);
|
||||||
|
const getData = () => {
|
||||||
|
return
|
||||||
|
ranking()
|
||||||
|
.then((res) => {
|
||||||
|
console.log("右中--报警排名", res);
|
||||||
|
if (res.success) {
|
||||||
|
data.value = res.data;
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
message: res.msg,
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
ElMessage.error(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
getData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="right_bottom">
|
||||||
|
<CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.right_bottom {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,233 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { alarmNum } from "@/api";
|
||||||
|
import { graphic } from "echarts/core";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
const option = ref({});
|
||||||
|
const getData = () => {
|
||||||
|
return
|
||||||
|
alarmNum()
|
||||||
|
.then((res) => {
|
||||||
|
console.log("右上--报警次数 ", res);
|
||||||
|
if (res.success) {
|
||||||
|
setOption(res.data.dateList, res.data.numList, res.data.numList2);
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
message: res.msg,
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
ElMessage.error(err);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
|
||||||
|
option.value = {
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: xData,
|
||||||
|
boundaryGap: false, // 不留白，从原点开始
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(31,99,163,.2)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
// show:false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(31,99,163,.1)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#7EB7FD",
|
||||||
|
fontWeight: "500",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(31,99,163,.2)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(31,99,163,.1)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#7EB7FD",
|
||||||
|
fontWeight: "500",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "rgba(0,0,0,.6)",
|
||||||
|
borderColor: "rgba(147, 235, 248, .8)",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
//布局
|
||||||
|
show: true,
|
||||||
|
left: "10px",
|
||||||
|
right: "30px",
|
||||||
|
bottom: "10px",
|
||||||
|
top: "32px",
|
||||||
|
containLabel: true,
|
||||||
|
borderColor: "#1F63A3",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: yData,
|
||||||
|
type: "line",
|
||||||
|
smooth: true,
|
||||||
|
symbol: "none", //去除点
|
||||||
|
name: "报警1次数",
|
||||||
|
color: "rgba(252,144,16,.7)",
|
||||||
|
areaStyle: {
|
||||||
|
//右，下，左，上
|
||||||
|
color: new graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(252,144,16,.7)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(252,144,16,.0)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "最大值",
|
||||||
|
type: "max",
|
||||||
|
valueDim: "y",
|
||||||
|
symbol: "rect",
|
||||||
|
symbolSize: [60, 26],
|
||||||
|
symbolOffset: [0, -20],
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: "#FC9010",
|
||||||
|
backgroundColor: "rgba(252,144,16,0.1)",
|
||||||
|
borderRadius: 6,
|
||||||
|
padding: [7, 14],
|
||||||
|
borderWidth: 0.5,
|
||||||
|
borderColor: "rgba(252,144,16,.5)",
|
||||||
|
formatter: "报警1：{c}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "最大值",
|
||||||
|
type: "max",
|
||||||
|
valueDim: "y",
|
||||||
|
symbol: "circle",
|
||||||
|
symbolSize: 6,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#FC9010",
|
||||||
|
shadowColor: "#FC9010",
|
||||||
|
shadowBlur: 8,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: yData2,
|
||||||
|
type: "line",
|
||||||
|
smooth: true,
|
||||||
|
symbol: "none", //去除点
|
||||||
|
name: "报警2次数",
|
||||||
|
color: "rgba(9,202,243,.7)",
|
||||||
|
areaStyle: {
|
||||||
|
//右，下，左，上
|
||||||
|
color: new graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(9,202,243,.7)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "rgba(9,202,243,.0)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "最大值",
|
||||||
|
type: "max",
|
||||||
|
valueDim: "y",
|
||||||
|
symbol: "rect",
|
||||||
|
symbolSize: [60, 26],
|
||||||
|
symbolOffset: [0, -20],
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(0,0,0,0)",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: "#09CAF3",
|
||||||
|
backgroundColor: "rgba(9,202,243,0.1)",
|
||||||
|
|
||||||
|
borderRadius: 6,
|
||||||
|
borderColor: "rgba(9,202,243,.5)",
|
||||||
|
padding: [7, 14],
|
||||||
|
formatter: "报警2：{c}",
|
||||||
|
borderWidth: 0.5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "最大值",
|
||||||
|
type: "max",
|
||||||
|
valueDim: "y",
|
||||||
|
symbol: "circle",
|
||||||
|
symbolSize: 6,
|
||||||
|
itemStyle: {
|
||||||
|
color: "#09CAF3",
|
||||||
|
shadowColor: "#09CAF3",
|
||||||
|
shadowBlur: 8,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -3,7 +3,6 @@ import { ref, reactive, nextTick } from "vue";
|
||||||
import { centerMap, GETNOBASE } from "@/api";
|
import { centerMap, GETNOBASE } from "@/api";
|
||||||
import { registerMap, getMap } from "echarts/core";
|
import { registerMap, getMap } from "echarts/core";
|
||||||
import { optionHandle, regionCodes } from "./center.map";
|
import { optionHandle, regionCodes } from "./center.map";
|
||||||
import BorderBox13 from "@/components/datav/border-box-13";
|
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
import type { MapdataType } from "./center.map";
|
import type { MapdataType } from "./center.map";
|
||||||
|
|
@ -44,7 +43,7 @@ const dataSetHandle = async (regionCode: string, list: object[]) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const getData = async (regionCode: string) => {
|
const getData = async (regionCode: string) => {
|
||||||
return
|
return
|
||||||
centerMap({ regionCode: regionCode })
|
centerMap({ regionCode: regionCode })
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("中上--设备分布", res);
|
console.log("中上--设备分布", res);
|
||||||
|
|
@ -89,88 +88,37 @@ const mapClick = (params: any) => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="centermap">
|
<div class="mapwrap">
|
||||||
<div class="maptitle">
|
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
|
||||||
<div class="zuo"></div>
|
<v-chart class="chart" :option="option" ref="centerMapRef" @click="mapClick"
|
||||||
<span class="titletext">{{ title }}</span>
|
v-if="JSON.stringify(option) != '{}'" />
|
||||||
<div class="you"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mapwrap">
|
|
||||||
<BorderBox13>
|
|
||||||
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
|
|
||||||
<v-chart
|
|
||||||
class="chart"
|
|
||||||
:option="option"
|
|
||||||
ref="centerMapRef"
|
|
||||||
@click="mapClick"
|
|
||||||
v-if="JSON.stringify(option) != '{}'"
|
|
||||||
/>
|
|
||||||
</BorderBox13>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.centermap {
|
.mapwrap {
|
||||||
margin-bottom: 30px;
|
height: 780px;
|
||||||
|
width: 100%;
|
||||||
|
// padding: 0 0 10px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #f00;
|
||||||
|
|
||||||
.maptitle {
|
.quanguo {
|
||||||
height: 60px;
|
position: absolute;
|
||||||
display: flex;
|
right: 20px;
|
||||||
justify-content: center;
|
top: -46px;
|
||||||
padding-top: 10px;
|
width: 80px;
|
||||||
box-sizing: border-box;
|
height: 28px;
|
||||||
|
border: 1px solid #00eded;
|
||||||
.titletext {
|
border-radius: 10px;
|
||||||
font-size: 28px;
|
color: #00f7f6;
|
||||||
font-weight: 900;
|
text-align: center;
|
||||||
letter-spacing: 6px;
|
line-height: 26px;
|
||||||
background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
|
letter-spacing: 6px;
|
||||||
-webkit-background-clip: text;
|
cursor: pointer;
|
||||||
-webkit-text-fill-color: transparent;
|
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
|
||||||
margin: 0 10px;
|
z-index: 10;
|
||||||
}
|
|
||||||
|
|
||||||
.zuo,
|
|
||||||
.you {
|
|
||||||
background-size: 100% 100%;
|
|
||||||
width: 29px;
|
|
||||||
height: 20px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zuo {
|
|
||||||
background: url("@/assets/img/xiezuo.png") no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.you {
|
|
||||||
background: url("@/assets/img/xieyou.png") no-repeat;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mapwrap {
|
|
||||||
height: 580px;
|
|
||||||
width: 100%;
|
|
||||||
// padding: 0 0 10px 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.quanguo {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: -46px;
|
|
||||||
width: 80px;
|
|
||||||
height: 28px;
|
|
||||||
border: 1px solid #00eded;
|
|
||||||
border-radius: 10px;
|
|
||||||
color: #00f7f6;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 26px;
|
|
||||||
letter-spacing: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ItemWrap from "@/components/item-wrap";
|
import ItemWrap from "@/components/item-wrap";
|
||||||
|
import zkItem from "@/components/zk-item";
|
||||||
import LeftTop from "./left-top.vue";
|
import LeftTop from "./left-top.vue";
|
||||||
import LeftCenter from "./left-center.vue";
|
import LeftCenter from "./left-center.vue";
|
||||||
import LeftBottom from "./left-bottom.vue";
|
import LeftBottom from "./left-bottom.vue";
|
||||||
|
|
@ -13,44 +14,37 @@ import RightBottom from "./right-bottom.vue";
|
||||||
<template>
|
<template>
|
||||||
<div class="index-box">
|
<div class="index-box">
|
||||||
<div class="contetn_left">
|
<div class="contetn_left">
|
||||||
<!-- <div class="pagetab">
|
<zkItem class="contetn_left-top contetn_lr-item" title="迎新进度">
|
||||||
<div class="item">实时监测</div>
|
|
||||||
<div class="item">统计分析</div>
|
|
||||||
</div> -->
|
|
||||||
<ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">
|
|
||||||
<LeftTop />
|
<LeftTop />
|
||||||
</ItemWrap>
|
</zkItem>
|
||||||
<ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
|
<zkItem class="contetn_left-center contetn_lr-item" title="">
|
||||||
<LeftCenter />
|
<LeftCenter />
|
||||||
</ItemWrap>
|
</zkItem>
|
||||||
<ItemWrap
|
<zkItem
|
||||||
class="contetn_left-bottom contetn_lr-item"
|
class="contetn_left-bottom contetn_lr-item"
|
||||||
title="设备提醒"
|
title=""
|
||||||
style="padding: 0 10px 16px 10px"
|
style="padding: 0 10px 16px 10px"
|
||||||
>
|
>
|
||||||
<LeftBottom />
|
<LeftBottom />
|
||||||
</ItemWrap>
|
</zkItem>
|
||||||
</div>
|
</div>
|
||||||
<div class="contetn_center">
|
<div class="contetn_center">
|
||||||
<CenterMap class="contetn_center_top" title="设备分布图" />
|
<CenterMap class="contetn_center_top" title="全国地图" />
|
||||||
<ItemWrap class="contetn_center-bottom" title="安装计划">
|
|
||||||
<CenterBottom />
|
|
||||||
</ItemWrap>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="contetn_right">
|
<div class="contetn_right">
|
||||||
<ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">
|
<zkItem class="contetn_left-bottom contetn_lr-item" title="缴费人数">
|
||||||
<RightTop />
|
<RightTop />
|
||||||
</ItemWrap>
|
</zkItem>
|
||||||
<ItemWrap
|
<zkItem
|
||||||
class="contetn_left-bottom contetn_lr-item"
|
class="contetn_left-bottom contetn_lr-item"
|
||||||
title="报警排名(TOP8)"
|
title="当日缴费人数"
|
||||||
style="padding: 0 10px 16px 10px"
|
style="padding: 0 10px 16px 10px"
|
||||||
>
|
>
|
||||||
<RightCenter />
|
<RightCenter />
|
||||||
</ItemWrap>
|
</zkItem>
|
||||||
<ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">
|
<zkItem class="contetn_left-bottom contetn_lr-item" title="报道人数区域排名 ">
|
||||||
<RightBottom />
|
<RightBottom />
|
||||||
</ItemWrap>
|
</zkItem>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -72,16 +66,19 @@ import RightBottom from "./right-bottom.vue";
|
||||||
width: 540px;
|
width: 540px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-clip: padding-box, border-box;
|
||||||
|
background-origin: padding-box, border-box;
|
||||||
|
background-image: linear-gradient(to bottom, #003, #000), linear-gradient(0deg,rgba(43,74,158,0.18),#5999FC);
|
||||||
}
|
}
|
||||||
.contetn_center {
|
.contetn_center {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: 0 54px;
|
// margin: 0 54px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
.contetn_center-bottom {
|
|
||||||
height: 315px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contetn_lr-item {
|
.contetn_lr-item {
|
||||||
|
|
|
||||||
|
|
@ -1,130 +1,13 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref } from "vue";
|
|
||||||
import { countDeviceNum } from "@/api";
|
|
||||||
import CountUp from "@/components/count-up";
|
|
||||||
import {ElMessage} from "element-plus"
|
|
||||||
|
|
||||||
const duration = ref(2);
|
|
||||||
const state = reactive({
|
|
||||||
alarmNum: 0,
|
|
||||||
offlineNum: 0,
|
|
||||||
onlineNum: 0,
|
|
||||||
totalNum: 0,
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const getData = () => {
|
|
||||||
return
|
|
||||||
countDeviceNum().then((res) => {
|
|
||||||
console.log("左上--设备总览",res);
|
|
||||||
if (res.success) {
|
|
||||||
state.alarmNum = res.data.alarmNum;
|
|
||||||
state.offlineNum = res.data.offlineNum;
|
|
||||||
state.onlineNum = res.data.onlineNum;
|
|
||||||
state.totalNum = res.data.totalNum;
|
|
||||||
}else{
|
|
||||||
ElMessage.error(res.msg)
|
|
||||||
}
|
|
||||||
}).catch(err=>{
|
|
||||||
ElMessage.error(err)
|
|
||||||
});;
|
|
||||||
};
|
|
||||||
getData();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="user_Overview flex">
|
|
||||||
<li class="user_Overview-item" style="color: #00fdfa">
|
|
||||||
<div class="user_Overview_nums allnum">
|
|
||||||
<CountUp :endVal="state.totalNum" :duration="duration" />
|
|
||||||
</div>
|
|
||||||
<p>总设备数</p>
|
|
||||||
</li>
|
|
||||||
<li class="user_Overview-item" style="color: #07f7a8">
|
|
||||||
<div class="user_Overview_nums online">
|
|
||||||
<CountUp :endVal="state.onlineNum" :duration="duration" />
|
|
||||||
</div>
|
|
||||||
<p>在线数</p>
|
|
||||||
</li>
|
|
||||||
<li class="user_Overview-item" style="color: #e3b337">
|
|
||||||
<div class="user_Overview_nums offline">
|
|
||||||
<CountUp :endVal="state.offlineNum" :duration="duration" />
|
|
||||||
</div>
|
|
||||||
<p>掉线数</p>
|
|
||||||
</li>
|
|
||||||
<li class="user_Overview-item" style="color: #f5023d">
|
|
||||||
<div class="user_Overview_nums laramnum">
|
|
||||||
<CountUp :endVal="state.alarmNum" :duration="duration" />
|
|
||||||
</div>
|
|
||||||
<p>告警次数</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.left-top {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user_Overview {
|
|
||||||
li {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
height: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user_Overview_nums {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 100px;
|
|
||||||
font-size: 22px;
|
|
||||||
margin: 50px auto 30px;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bgdonghua::before {
|
|
||||||
animation: rotating 14s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.allnum {
|
|
||||||
&::before {
|
|
||||||
background-image: url("@/assets/img/left_top_lan.png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.online {
|
|
||||||
&::before {
|
|
||||||
background-image: url("@/assets/img/left_top_lv.png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.offline {
|
|
||||||
&::before {
|
|
||||||
background-image: url("@/assets/img/left_top_huang.png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.laramnum {
|
|
||||||
&::before {
|
|
||||||
background-image: url("@/assets/img/left_top_hong.png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue