Compare commits
No commits in common. "d58b95e1f51882c651b86012bd28c9a3e8f15bec" and "3e7dfd33062f28ecfacd853cf869666b8e800183" have entirely different histories.
d58b95e1f5
...
3e7dfd3306
@ -2,7 +2,7 @@
|
|||||||
* @Author: cclu 1106109051@qq.com
|
* @Author: cclu 1106109051@qq.com
|
||||||
* @Date: 2024-11-18 11:54:00
|
* @Date: 2024-11-18 11:54:00
|
||||||
* @LastEditors: cclu 1106109051@qq.com
|
* @LastEditors: cclu 1106109051@qq.com
|
||||||
* @LastEditTime: 2024-11-29 11:57:57
|
* @LastEditTime: 2024-11-18 11:54:18
|
||||||
* @FilePath: \aiRobot\eslint.config.js
|
* @FilePath: \aiRobot\eslint.config.js
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
*/
|
*/
|
||||||
@ -20,9 +20,6 @@ module.exports = {
|
|||||||
ecmaVersion: 2020,
|
ecmaVersion: 2020,
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
'vue/max-attributes-per-line': ['error', {
|
// 自定义规则
|
||||||
'singleline': 3
|
|
||||||
}],
|
|
||||||
'@typescript-eslint/no-explicit-any': 'off',
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
13
index.html
@ -1,17 +1,24 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: cclu 1106109051@qq.com
|
||||||
|
* @Date: 2024-11-18 11:40:21
|
||||||
|
* @LastEditors: cclu 1106109051@qq.com
|
||||||
|
* @LastEditTime: 2024-11-19 09:33:22
|
||||||
|
* @FilePath: \aiRobot\index.html
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
-->
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>AI全景图</title>
|
<title>地图测试</title>
|
||||||
<base href="/"> <!-- 确保这里匹配你的部署路径 -->
|
<base href="/map/">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
</body>
|
</body>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
|
|
||||||
<style>
|
<style>
|
||||||
*{
|
*{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
4913
package-lock.json
generated
@ -12,9 +12,7 @@
|
|||||||
"@antv/l7": "^2.22.3",
|
"@antv/l7": "^2.22.3",
|
||||||
"@antv/l7-maps": "^2.22.3",
|
"@antv/l7-maps": "^2.22.3",
|
||||||
"axios": "^1.7.7",
|
"axios": "^1.7.7",
|
||||||
"echarts": "^5.5.1",
|
|
||||||
"element-plus": "^2.8.8",
|
"element-plus": "^2.8.8",
|
||||||
"marked": "^15.0.6",
|
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"pinia": "^2.2.6",
|
"pinia": "^2.2.6",
|
||||||
"rollup": "^4.27.3",
|
"rollup": "^4.27.3",
|
||||||
|
|||||||
10
src/App.vue
@ -1,3 +1,11 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: cclu 1106109051@qq.com
|
||||||
|
* @Date: 2024-11-19 17:27:17
|
||||||
|
* @LastEditors: cclu 1106109051@qq.com
|
||||||
|
* @LastEditTime: 2024-11-19 17:29:28
|
||||||
|
* @FilePath: \aiMap\src\App.vue
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
@ -11,7 +19,7 @@ import { useRouter } from "vue-router";
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// router.push("/map/:id");
|
router.push("/map");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 768 B |
|
Before Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 469 B |
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 486 B |
|
Before Width: | Height: | Size: 305 B |
|
Before Width: | Height: | Size: 456 B |
|
Before Width: | Height: | Size: 613 B |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 247 B |
|
Before Width: | Height: | Size: 211 B |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 950 B |
|
Before Width: | Height: | Size: 601 B |
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 103 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 542 B |
|
Before Width: | Height: | Size: 286 B |
|
Before Width: | Height: | Size: 551 B |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 259 B |
|
Before Width: | Height: | Size: 833 B |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 332 B |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 518 B |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 559 B |
|
Before Width: | Height: | Size: 753 B |
|
Before Width: | Height: | Size: 320 B |
|
Before Width: | Height: | Size: 902 B |
|
Before Width: | Height: | Size: 316 B |
|
Before Width: | Height: | Size: 669 B |
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,54 +0,0 @@
|
|||||||
.BusyRankingContent{
|
|
||||||
.pageTitle{
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
line-height: 26px;
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
.busyList{
|
|
||||||
width: 100%;
|
|
||||||
height: 326px;
|
|
||||||
margin-top: 12px;
|
|
||||||
overflow-y: auto;
|
|
||||||
.busyItem{
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 2px 0;
|
|
||||||
.left{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.indexBox{
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
float: left;
|
|
||||||
text-align: center;
|
|
||||||
border: 2px solid #d56a40;
|
|
||||||
color: #d56a40;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
margin-top: 0.05rem;
|
|
||||||
}
|
|
||||||
.name{
|
|
||||||
width: 120px;
|
|
||||||
color: #fff;
|
|
||||||
margin-left: 4px;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.busyList::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import "./BusyRanking.less";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import moment from "moment";
|
|
||||||
import { onMounted, reactive, ref, watch } from "vue";
|
|
||||||
import { handlegetServerConnec } from "../../newService";
|
|
||||||
import { nextTick } from "process";
|
|
||||||
|
|
||||||
// 繁忙度排行
|
|
||||||
let busyList = ref<any>([]);
|
|
||||||
// 省份信息
|
|
||||||
const baseInfoObj = ref<any>();
|
|
||||||
|
|
||||||
onMounted(async () => {});
|
|
||||||
|
|
||||||
// 获得繁忙度排行的数据
|
|
||||||
const handleGetBusyRank = async () => {
|
|
||||||
let saveData = localStorage.getItem("baseInfoObj");
|
|
||||||
if (saveData) {
|
|
||||||
baseInfoObj.value = JSON.parse(saveData);
|
|
||||||
}
|
|
||||||
const req: any = {
|
|
||||||
action_type: "getCurHalfCollect",
|
|
||||||
province_code: baseInfoObj.value.ProvinceId || "3544",
|
|
||||||
};
|
|
||||||
const data = await handlegetServerConnec(req);
|
|
||||||
console.log("BusyRankingContent", data);
|
|
||||||
let list: any = data.CollectionObject;
|
|
||||||
busyList.value = list;
|
|
||||||
|
|
||||||
emit("handleServiceBusy");
|
|
||||||
return list;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 传入的数据
|
|
||||||
const props = defineProps<{
|
|
||||||
show: any;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.show,
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
console.log("realboxnewVal", newVal);
|
|
||||||
if (newVal) {
|
|
||||||
handleGetBusyRank();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
handleGetBusyRank: handleGetBusyRank,
|
|
||||||
busyList: busyList,
|
|
||||||
});
|
|
||||||
// 传入的方法
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: "handleServiceBusy"): void; // 高亮查到的图层
|
|
||||||
}>();
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="BusyRankingContent"
|
|
||||||
id="BusyRankingContent"
|
|
||||||
style="width: 100%; height: 100%"
|
|
||||||
>
|
|
||||||
<div class="pageTitle">服务区繁忙排行</div>
|
|
||||||
|
|
||||||
<div class="busyList">
|
|
||||||
<div
|
|
||||||
class="busyItem"
|
|
||||||
v-for="(item, index) in busyList.slice(0, 10)"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="left">
|
|
||||||
<!-- <div class="indexBox"></div> -->
|
|
||||||
<div style="color: #fff">{{ index + 1 }}、</div>
|
|
||||||
<div class="name">{{ item.SERVERPART_NAME || "-" }}</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="right"
|
|
||||||
:style="{
|
|
||||||
color:
|
|
||||||
item.AVR_TICKET >= 30
|
|
||||||
? '#E64218'
|
|
||||||
: item.AVR_TICKET >= 15 && item.AVR_TICKET < 30
|
|
||||||
? '#EFE271'
|
|
||||||
: '#1BAAE6',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<span style="display: inline-block; width: 50px; text-align: right">
|
|
||||||
{{ item.AVR_TICKET ? item.AVR_TICKET + "%" : "-%" }}
|
|
||||||
</span>
|
|
||||||
{{
|
|
||||||
item.AVR_TICKET >= 30
|
|
||||||
? "繁忙"
|
|
||||||
: item.AVR_TICKET >= 15 && item.AVR_TICKET < 30
|
|
||||||
? "良好"
|
|
||||||
: "空闲"
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -31,7 +31,7 @@
|
|||||||
.dialogBox{
|
.dialogBox{
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 90%;
|
width: 650px;
|
||||||
max-height: calc(100vh - 140px);
|
max-height: calc(100vh - 140px);
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
background: rgba(56, 56, 56, 0.51);
|
background: rgba(56, 56, 56, 0.51);
|
||||||
@ -64,105 +64,6 @@
|
|||||||
background: rgba(27, 27, 27, 0.51);
|
background: rgba(27, 27, 27, 0.51);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
|
|
||||||
.deepseekContent{
|
|
||||||
div {
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #2c3e50;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
strong{
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.firstClickTab{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.clickItem{
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #1890ff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.selctClickItem{
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 4px 6px;
|
|
||||||
background-color: #1890ff;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.clearClick{
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.moreOption{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 16px;
|
|
||||||
.optionItem{
|
|
||||||
color: #1890ff!important;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.style1{
|
|
||||||
color: #6590f5!important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.style2{
|
|
||||||
color: #FE7628!important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.style3{
|
|
||||||
color: #98aac9!important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.style4{
|
|
||||||
display: block;
|
|
||||||
text-indent: 2rem;
|
|
||||||
}
|
|
||||||
.style5{
|
|
||||||
display: block;
|
|
||||||
text-indent: 4rem;
|
|
||||||
}
|
|
||||||
.operateBox{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.operateItem{
|
|
||||||
display: block;
|
|
||||||
width: 160px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-loading-mask{
|
.el-loading-mask{
|
||||||
background-color: transparent!important;
|
background-color: transparent!important;
|
||||||
.el-loading-spinner{
|
.el-loading-spinner{
|
||||||
@ -175,66 +76,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.elTable{
|
.elTable{
|
||||||
background-color: transparent !important;
|
|
||||||
|
|
||||||
.el-table__inner-wrapper{
|
.el-table__inner-wrapper{
|
||||||
.el-table__header-wrapper{
|
|
||||||
.el-table__header{
|
|
||||||
thead{
|
|
||||||
tr{
|
|
||||||
background: transparent !important;
|
|
||||||
th{
|
|
||||||
background: transparent !important;
|
|
||||||
.cell{
|
|
||||||
color: #fff!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.el-table__body-wrapper{
|
.el-table__body-wrapper{
|
||||||
.el-scrollbar{
|
.el-scrollbar{
|
||||||
.el-scrollbar__wrap{
|
.el-scrollbar__wrap{
|
||||||
.el-scrollbar__view{
|
.el-scrollbar__view{
|
||||||
.el-table__body{
|
.el-table__body{
|
||||||
|
|
||||||
.el-table__row{
|
|
||||||
background: transparent !important;
|
|
||||||
color: #fff!important;
|
|
||||||
}
|
|
||||||
tr:hover>td.el-table__cell{
|
|
||||||
background: transparent !important;
|
|
||||||
color: #fff!important;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table__row--level-0{
|
.el-table__row--level-0{
|
||||||
.el-table__cell{
|
.el-table__cell{
|
||||||
.cell{
|
.cell{
|
||||||
// display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
.el-table__expand-icon{
|
|
||||||
.el-icon{
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-table__row--level-1{
|
.el-table__row--level-1{
|
||||||
.el-table__cell{
|
.el-table__cell{
|
||||||
.cell{
|
.cell{
|
||||||
// display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
.el-table__indent{
|
.el-table__indent{
|
||||||
padding-left: 0!important;
|
padding-left: 0!important;
|
||||||
}
|
}
|
||||||
@ -244,8 +104,8 @@
|
|||||||
.el-table__row--level-2{
|
.el-table__row--level-2{
|
||||||
.el-table__cell{
|
.el-table__cell{
|
||||||
.cell{
|
.cell{
|
||||||
// display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
.el-table__indent{
|
.el-table__indent{
|
||||||
padding-left: 0!important;
|
padding-left: 0!important;
|
||||||
}
|
}
|
||||||
@ -255,8 +115,8 @@
|
|||||||
.el-table__row--level-3{
|
.el-table__row--level-3{
|
||||||
.el-table__cell{
|
.el-table__cell{
|
||||||
.cell{
|
.cell{
|
||||||
// display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
.el-table__indent{
|
.el-table__indent{
|
||||||
padding-left: 0!important;
|
padding-left: 0!important;
|
||||||
}
|
}
|
||||||
@ -266,8 +126,8 @@
|
|||||||
.el-table__row--level-4{
|
.el-table__row--level-4{
|
||||||
.el-table__cell{
|
.el-table__cell{
|
||||||
.cell{
|
.cell{
|
||||||
// display: flex;
|
display: flex;
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
.el-table__indent{
|
.el-table__indent{
|
||||||
padding-left: 0!important;
|
padding-left: 0!important;
|
||||||
}
|
}
|
||||||
@ -282,10 +142,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.loadingBox{
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
.userIcon{
|
.userIcon{
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
@ -294,11 +150,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogContent::-webkit-scrollbar {
|
|
||||||
width: 0px; /* 隐藏水平滚动条 */
|
|
||||||
height: 0px; /* 隐藏垂直滚动条 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputBox{
|
.inputBox{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -321,59 +172,5 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.moreSelect{
|
|
||||||
width: 100%;
|
|
||||||
.filterFixed{
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
.filterIcon{
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.filterBox{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
.filterList{
|
|
||||||
width: calc(100% - 28px);
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.filterItem{
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 6px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 14px;
|
|
||||||
border: 1px solid rgb(90, 90, 90);
|
|
||||||
font-family: PingFangSC, "PingFang SC";
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
line-height: 20px;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.selectFilterItem{
|
|
||||||
color: #1890ff !important;
|
|
||||||
border-color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.filterIcon{
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,88 +0,0 @@
|
|||||||
.realBoxContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 16px;
|
|
||||||
border:1px solid #5F5F5F;
|
|
||||||
border-radius: 8px;
|
|
||||||
.leftBox{
|
|
||||||
width: 25%;
|
|
||||||
.realTime{
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.leftOther{
|
|
||||||
margin-top: 4px;
|
|
||||||
.label{
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.value{
|
|
||||||
color: #d1ab61;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
display: inline-block;
|
|
||||||
width: 50px;
|
|
||||||
margin-right: 8px;
|
|
||||||
text-align: right;
|
|
||||||
transition: transform 0.3s ease-out;
|
|
||||||
}
|
|
||||||
.unit{
|
|
||||||
color: #d1ab61;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.middleBox{
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
.realText{
|
|
||||||
font-size: 2rem;
|
|
||||||
color: #45aaf1;
|
|
||||||
.unit{
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.yearRevenue{
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
margin-top: 2px;
|
|
||||||
.value{
|
|
||||||
color: #45aaf1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightBox{
|
|
||||||
width: 25%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
.rightItem{
|
|
||||||
.label{
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
.value{
|
|
||||||
color: #d1ab61;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
display: inline-block;
|
|
||||||
width: 50px;
|
|
||||||
margin-right: 8px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.unit{
|
|
||||||
color: #d1ab61;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,272 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import "./realBox.less";
|
|
||||||
import moment from "moment";
|
|
||||||
import { nextTick, onMounted, reactive, ref, watch } from "vue";
|
|
||||||
import { formatNumberData, formatNumberTo } from "../../../options/serveice";
|
|
||||||
import { handlegetServerConnec } from "../../newService";
|
|
||||||
|
|
||||||
// 省份信息
|
|
||||||
const baseInfoObj = ref<any>();
|
|
||||||
|
|
||||||
// 实时钱的数据对象
|
|
||||||
let realMoney = reactive<any>({});
|
|
||||||
// 定时器 ID，用于清除定时器
|
|
||||||
let timer;
|
|
||||||
// 时间变动的定时器
|
|
||||||
const startTimer = () => {
|
|
||||||
timer = setInterval(() => {
|
|
||||||
realMoney.realTime = moment().format("YYYY-MM-DD HH:mm:ss"); // 每秒更新一次
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 拿到实时营收 和 年度的营收 并开启定时器
|
|
||||||
const handleGetRealMoney = async (province_code: any) => {
|
|
||||||
let req = {
|
|
||||||
action_type: "getServerConnect",
|
|
||||||
province_code: province_code,
|
|
||||||
};
|
|
||||||
if (!req.province_code) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = await handlegetServerConnec(req);
|
|
||||||
let obj = data.CurrentData[0];
|
|
||||||
console.log("data321321", obj);
|
|
||||||
|
|
||||||
let yearReq = {
|
|
||||||
action_type: "getYearRevenue",
|
|
||||||
province_code: province_code,
|
|
||||||
};
|
|
||||||
if (!yearReq.province_code) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const yearData = await handlegetServerConnec(yearReq);
|
|
||||||
|
|
||||||
obj = {
|
|
||||||
...obj,
|
|
||||||
YEAR_REVENUE: yearData.YEAR_REVENUE,
|
|
||||||
};
|
|
||||||
|
|
||||||
nextTick(() => {
|
|
||||||
// 实际时间
|
|
||||||
realMoney.realTime = moment().format("YYYY-MM-DD HH:mm:ss");
|
|
||||||
// 赋值完开始启动定时器
|
|
||||||
startTimer();
|
|
||||||
|
|
||||||
updateValues(obj, true);
|
|
||||||
|
|
||||||
// 定时变值
|
|
||||||
startChangeValue();
|
|
||||||
|
|
||||||
// 接口取的 实际需要动态变化的值
|
|
||||||
// 实际营收
|
|
||||||
// realMoney.TOTALPRICE = formatNumberTo(obj.TOTALPRICE);
|
|
||||||
// // 人数
|
|
||||||
// realMoney.TOTALTICKET = formatNumber(obj.TOTALTICKET);
|
|
||||||
// // 已售商品
|
|
||||||
// realMoney.CURSELLCOUNT = formatNumber(obj.CURSELLCOUNT);
|
|
||||||
|
|
||||||
// // 根据上面的值 算出来的数据
|
|
||||||
// // 人均消费
|
|
||||||
// realMoney.personAvg = formatNumberTo(obj.TOTALPRICE / obj.TOTALTICKET);
|
|
||||||
// // 商品均价
|
|
||||||
// realMoney.AvgPrice = formatNumberTo(obj.TOTALPRICE / obj.CURSELLCOUNT);
|
|
||||||
// startChangeValue();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 定时器 ID，用于清除定时器
|
|
||||||
let valueTimer;
|
|
||||||
// 其他数据的定时变动
|
|
||||||
const startChangeValue = () => {
|
|
||||||
valueTimer = setInterval(() => {
|
|
||||||
updateValues(realMoney, false);
|
|
||||||
}, 10000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAnimateValue = (
|
|
||||||
start: any,
|
|
||||||
end: any,
|
|
||||||
element: any,
|
|
||||||
duration = 3000
|
|
||||||
) => {
|
|
||||||
start = Number(start);
|
|
||||||
end = Number(end);
|
|
||||||
|
|
||||||
// 检查 element 是否为 null 或 undefined
|
|
||||||
if (!element) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let startTime: number | null = null;
|
|
||||||
|
|
||||||
const step = (timestamp: number) => {
|
|
||||||
if (!startTime) startTime = timestamp;
|
|
||||||
const progress: number = Math.min((timestamp - startTime) / duration, 1);
|
|
||||||
// 计算过渡的数字值，并格式化为两位小数
|
|
||||||
const value = start + (end - start) * progress;
|
|
||||||
// 判断是否有小数
|
|
||||||
const isInteger = value % 1 === 0;
|
|
||||||
// 更新 DOM 元素的文本内容
|
|
||||||
if (isInteger) {
|
|
||||||
element.textContent = formatNumberData(value);
|
|
||||||
} else {
|
|
||||||
element.textContent = formatNumberTo(value);
|
|
||||||
}
|
|
||||||
if (progress < 1) {
|
|
||||||
requestAnimationFrame(step);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
requestAnimationFrame(step);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateValues = (obj?: any, haveObj?: boolean) => {
|
|
||||||
let newObj: any = {};
|
|
||||||
if (haveObj) {
|
|
||||||
newObj = obj;
|
|
||||||
newObj.personAvg = obj.TOTALPRICE / obj.TOTALTICKET;
|
|
||||||
newObj.AvgPrice = obj.TOTALPRICE / obj.CURSELLCOUNT;
|
|
||||||
} else {
|
|
||||||
let oldObj: any = JSON.parse(JSON.stringify(realMoney));
|
|
||||||
let num_1: number = Math.floor(Math.random() * 14) + 1; //人
|
|
||||||
let num_2: number = Math.floor(Math.random() * 21) + 1; //商品
|
|
||||||
let num_3: number = Math.random() * 462 + 1; //钱
|
|
||||||
newObj.TOTALTICKET = oldObj.TOTALTICKET + num_1;
|
|
||||||
newObj.TOTALPRICE = oldObj.TOTALPRICE + num_3;
|
|
||||||
newObj.YEAR_REVENUE = oldObj.YEAR_REVENUE + num_3;
|
|
||||||
newObj.CURSELLCOUNT = oldObj.CURSELLCOUNT + num_2;
|
|
||||||
newObj.personAvg =
|
|
||||||
(oldObj.TOTALPRICE + num_3) / (oldObj.TOTALTICKET + num_1);
|
|
||||||
newObj.AvgPrice =
|
|
||||||
(oldObj.TOTALPRICE + num_3) / (oldObj.CURSELLCOUNT + num_2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 动画更新
|
|
||||||
// 人数
|
|
||||||
const TOTALTICKETElement = document.querySelector(".TOTALTICKET");
|
|
||||||
// 实际营收
|
|
||||||
const TOTALPRICEElement = document.querySelector(" .TOTALPRICE");
|
|
||||||
// 本年度累计营收额
|
|
||||||
const YEAR_REVENUEElement = document.querySelector(".YEAR_REVENUE");
|
|
||||||
// 人均消费
|
|
||||||
const personAvgElement = document.querySelector(".personAvg");
|
|
||||||
// 已售商品
|
|
||||||
const CURSELLCOUNTElement = document.querySelector(".CURSELLCOUNT");
|
|
||||||
// 商品均价
|
|
||||||
const AvgPriceElement = document.querySelector(".AvgPrice");
|
|
||||||
|
|
||||||
handleAnimateValue(
|
|
||||||
realMoney.TOTALTICKET || 0,
|
|
||||||
newObj?.TOTALTICKET || 0,
|
|
||||||
TOTALTICKETElement
|
|
||||||
);
|
|
||||||
handleAnimateValue(
|
|
||||||
realMoney.TOTALPRICE || 0,
|
|
||||||
newObj?.TOTALPRICE || 0,
|
|
||||||
TOTALPRICEElement
|
|
||||||
);
|
|
||||||
handleAnimateValue(
|
|
||||||
realMoney.YEAR_REVENUE || 0,
|
|
||||||
newObj?.YEAR_REVENUE || 0,
|
|
||||||
YEAR_REVENUEElement
|
|
||||||
);
|
|
||||||
handleAnimateValue(
|
|
||||||
realMoney.CURSELLCOUNT || 0,
|
|
||||||
newObj?.CURSELLCOUNT || 0,
|
|
||||||
CURSELLCOUNTElement
|
|
||||||
);
|
|
||||||
|
|
||||||
handleAnimateValue(
|
|
||||||
realMoney.personAvg || 0,
|
|
||||||
newObj.personAvg || 0,
|
|
||||||
personAvgElement
|
|
||||||
);
|
|
||||||
handleAnimateValue(
|
|
||||||
realMoney.AvgPrice || 0,
|
|
||||||
newObj.AvgPrice || 0,
|
|
||||||
AvgPriceElement
|
|
||||||
);
|
|
||||||
// 更新计算后的值
|
|
||||||
// 人数
|
|
||||||
realMoney.TOTALTICKET = newObj.TOTALTICKET;
|
|
||||||
// 实际营收
|
|
||||||
realMoney.TOTALPRICE = newObj.TOTALPRICE;
|
|
||||||
// 年度总营收
|
|
||||||
realMoney.YEAR_REVENUE = newObj.YEAR_REVENUE;
|
|
||||||
// 人均消费
|
|
||||||
realMoney.personAvg = newObj.personAvg;
|
|
||||||
// 已售商品
|
|
||||||
realMoney.CURSELLCOUNT = newObj.CURSELLCOUNT;
|
|
||||||
// 商品均价
|
|
||||||
realMoney.AvgPrice = newObj.AvgPrice;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 传入的数据
|
|
||||||
const props = defineProps<{
|
|
||||||
show: any;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.show,
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
console.log("realboxnewVal", newVal);
|
|
||||||
if (newVal) {
|
|
||||||
let saveData = localStorage.getItem("baseInfoObj");
|
|
||||||
if (saveData) {
|
|
||||||
baseInfoObj.value = JSON.parse(saveData);
|
|
||||||
}
|
|
||||||
handleGetRealMoney(baseInfoObj.value.ProvinceId);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
handleGetRealMoney: handleGetRealMoney,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="realBoxContent">
|
|
||||||
<div class="leftBox">
|
|
||||||
<div class="realTime">{{ realMoney.realTime || "-" }}</div>
|
|
||||||
<div class="leftOther">
|
|
||||||
<span class="label">服务司乘：</span>
|
|
||||||
<span class="value TOTALTICKET">{{
|
|
||||||
realMoney.TOTALTICKET || "-"
|
|
||||||
}}</span>
|
|
||||||
<span class="unit">人</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="middleBox">
|
|
||||||
<div class="realText TOTALPRICE">
|
|
||||||
{{ realMoney.TOTALPRICE || "-" }}<span class="unit">元</span>
|
|
||||||
</div>
|
|
||||||
<div class="yearRevenue">
|
|
||||||
<span class="label">本年度累计营收额为：</span>
|
|
||||||
<span class="value YEAR_REVENUE"
|
|
||||||
>{{ realMoney.YEAR_REVENUE || "-" }}<span class="unit">元</span></span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rightBox">
|
|
||||||
<div class="rightItem">
|
|
||||||
<span class="label">人均消费：</span>
|
|
||||||
<span class="value personAvg">{{ realMoney.personAvg || "-" }}</span>
|
|
||||||
<span class="unit">元</span>
|
|
||||||
</div>
|
|
||||||
<div class="rightItem">
|
|
||||||
<span class="label">已售商品：</span>
|
|
||||||
<span class="value CURSELLCOUNT">{{
|
|
||||||
realMoney.CURSELLCOUNT || "-"
|
|
||||||
}}</span>
|
|
||||||
<span class="unit">件</span>
|
|
||||||
</div>
|
|
||||||
<div class="rightItem">
|
|
||||||
<span class="label">商品均价：</span>
|
|
||||||
<span class="value AvgPrice">{{ realMoney.AvgPrice || "-" }}</span>
|
|
||||||
<span class="unit">元</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
.revenueRateMain{
|
|
||||||
.pageTitle{
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
line-height: 26px;
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,124 +0,0 @@
|
|||||||
<!-- 区域营收占比 -->
|
|
||||||
<script setup lang="ts">
|
|
||||||
import "./revenueRate.less";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import { onMounted, ref, watch } from "vue";
|
|
||||||
import { handlegetServerConnec } from "../../newService";
|
|
||||||
|
|
||||||
let myChart = ref<any>();
|
|
||||||
// 省份信息
|
|
||||||
const baseInfoObj = ref<any>();
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
myChart.value = echarts.init(document.getElementById("revenueRateContent"));
|
|
||||||
});
|
|
||||||
|
|
||||||
// 拿到数据
|
|
||||||
const handleGetData = async () => {
|
|
||||||
const req: any = {
|
|
||||||
action_type: "GetCurrentAmountByRegion",
|
|
||||||
province_code: baseInfoObj.value.ProvinceId || "3544",
|
|
||||||
};
|
|
||||||
const data = await handlegetServerConnec(req);
|
|
||||||
console.log("revenueRateContent", data);
|
|
||||||
console.log("props.SPREGIONTYPECOLOR", props.SPREGIONTYPECOLOR);
|
|
||||||
let list: any = data.CurrentData;
|
|
||||||
let res: any = [];
|
|
||||||
if (list && list.length > 0) {
|
|
||||||
let totalRevenue: number = 0;
|
|
||||||
list.forEach((item: any) => {
|
|
||||||
totalRevenue += item.TOTALPRICE;
|
|
||||||
});
|
|
||||||
list.forEach((item: any) => {
|
|
||||||
res.push({
|
|
||||||
value: Number(((item.TOTALPRICE / totalRevenue) * 100).toFixed(2)),
|
|
||||||
name: item.TYPE_NAME,
|
|
||||||
itemStyle: { color: props.SPREGIONTYPECOLOR[item.REGION_ID] },
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log("res", res);
|
|
||||||
|
|
||||||
myChart.value.setOption({
|
|
||||||
title: {
|
|
||||||
// text: "区域营收占比",
|
|
||||||
left: "center",
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff", // 设置标题主文字颜色
|
|
||||||
fontSize: 24, // 设置标题字体大小
|
|
||||||
fontWeight: "bold", // 设置标题字体粗细
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: "item",
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: "vertical",
|
|
||||||
right: 1,
|
|
||||||
padding: [120, 0, 0, 0],
|
|
||||||
textStyle: {
|
|
||||||
color: "#ffffff", // 设置图例文字颜色
|
|
||||||
fontSize: 14, // 设置字体大小
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "",
|
|
||||||
type: "pie",
|
|
||||||
radius: "50%",
|
|
||||||
center: ["30%", "50%"],
|
|
||||||
data: res,
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true, // 显示标签
|
|
||||||
position: "inside", // 将标签显示在饼图内部
|
|
||||||
color: "#fff", // 设置字体颜色
|
|
||||||
formatter: "{c}%", // 显示数值，即每个扇区的值
|
|
||||||
},
|
|
||||||
labelLine: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 传入的数据
|
|
||||||
const props = defineProps<{
|
|
||||||
SPREGIONTYPECOLOR: any;
|
|
||||||
show: any;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.show,
|
|
||||||
(newVal, oldVal) => {
|
|
||||||
console.log("realboxnewVal", newVal);
|
|
||||||
if (newVal) {
|
|
||||||
let saveData = localStorage.getItem("baseInfoObj");
|
|
||||||
if (saveData) {
|
|
||||||
baseInfoObj.value = JSON.parse(saveData);
|
|
||||||
}
|
|
||||||
handleGetData();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
handleGetData: handleGetData,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="revenueRateMain">
|
|
||||||
<div class="pageTitle">区域营收占比</div>
|
|
||||||
<div
|
|
||||||
class="revenueRateContent"
|
|
||||||
id="revenueRateContent"
|
|
||||||
style="width: 360px; height: 360px"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,460 +0,0 @@
|
|||||||
.rightDetailBox{
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100vh - 20px);
|
|
||||||
.tabTop{
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.tabBox{
|
|
||||||
width: calc(100% - 56px);
|
|
||||||
}
|
|
||||||
.noTab{
|
|
||||||
.noTabIcon{
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.closeIcon{
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.detailContent{
|
|
||||||
width: 100%;
|
|
||||||
max-height: calc(100vh - 70px);
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 16px 0 0;
|
|
||||||
.projectBox{
|
|
||||||
width: 100%;
|
|
||||||
max-height: calc(100vh - 70px);
|
|
||||||
.projectTab{
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
.el-radio-group{
|
|
||||||
margin-bottom: 0!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.projectList{
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100vh - 140px);
|
|
||||||
overflow-y: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
.projectItem{
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fff;
|
|
||||||
padding: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
.projectItemLeft{
|
|
||||||
width: 88px;
|
|
||||||
.leftBrandIcon{
|
|
||||||
width: 100%;
|
|
||||||
height: 88px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.projectItemRight{
|
|
||||||
margin-left: 12px;
|
|
||||||
width: calc(100% - 100px);
|
|
||||||
.rightTitle{
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.typeLists{
|
|
||||||
display: flex;
|
|
||||||
margin-top: 4px;
|
|
||||||
.typeItem{
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1px 8px;
|
|
||||||
border-radius: 2px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 22px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.topRight{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
.dailyItem{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.itemIcon{
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
.itemLabel{
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(0,0,0,0.45);
|
|
||||||
}
|
|
||||||
.itemValue{
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: DINAlternate-Bold, DINAlternate;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgba(0,0,0,0.85);
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.selectProjectItem{
|
|
||||||
background: linear-gradient(45deg, #c6e8fc 0%, #bac4ff 100%)!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailServerPart{
|
|
||||||
width: 100%;
|
|
||||||
max-height: calc(100vh - 70px);
|
|
||||||
overflow-y: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
.serverPartImg{
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
.serverImg{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.defaultImg{
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.serviceTypeTabs{
|
|
||||||
width: 100%;
|
|
||||||
height: 86px;
|
|
||||||
background: #F7FAFF;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
.serviceTypeItem{
|
|
||||||
width: 25%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.itemIcon{
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.itemText{
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(0,0,0,0.65);
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.detailList{
|
|
||||||
margin-top: 16px;
|
|
||||||
.detailItem{
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
.detailItemLeft{
|
|
||||||
width: 100px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.itemLeftIcon{
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
.itemLeftLabel{
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.detailItemRight{
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.areaList{
|
|
||||||
width: 100%;
|
|
||||||
.areaItem{
|
|
||||||
.areaItemTop{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.itemTopIcon{
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
.itemTitle{
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
.typeItem{
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 18px;
|
|
||||||
padding: 0 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.itemList{
|
|
||||||
margin-top: 12px;
|
|
||||||
.contentItem{
|
|
||||||
width: 33.3%;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
.contentItemBox{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
.contentItemIcon{
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
.contentItemText{
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 18px;
|
|
||||||
.number{
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 18px;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.noContentItemBox{
|
|
||||||
opacity: 0.4!important;
|
|
||||||
.contentItemText{
|
|
||||||
text-decoration: line-through!important;
|
|
||||||
color: #f3f3f3!important;
|
|
||||||
.number{
|
|
||||||
color: #f3f3f3!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.detailTop{
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
.backIconBox{
|
|
||||||
width: 25px;
|
|
||||||
.backIcon{
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.currentItem{
|
|
||||||
width: calc(100% - 40px);
|
|
||||||
margin-left: 15px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: linear-gradient(45deg, #F7FCFF 0%, #F8F9FF 100%);
|
|
||||||
padding: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: flex;
|
|
||||||
.projectItemLeft{
|
|
||||||
width: 88px;
|
|
||||||
.leftBrandIcon{
|
|
||||||
width: 100%;
|
|
||||||
height: 88px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.projectItemRight{
|
|
||||||
margin-left: 12px;
|
|
||||||
width: calc(100% - 100px);
|
|
||||||
.rightTitle{
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.typeLists{
|
|
||||||
display: flex;
|
|
||||||
margin-top: 4px;
|
|
||||||
.typeItem{
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1px 8px;
|
|
||||||
border-radius: 2px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 22px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.topRight{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
.dailyItem{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.itemIcon{
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
.itemLabel{
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(0,0,0,0.45);
|
|
||||||
}
|
|
||||||
.itemValue{
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: DINAlternate-Bold, DINAlternate;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgba(0,0,0,0.85);
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loadingBox{
|
|
||||||
.el-loading-mask{
|
|
||||||
background-color: transparent!important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightDetailPrintWordBox{
|
|
||||||
width: 100%;
|
|
||||||
max-height: calc(100vh - 200px);
|
|
||||||
overflow-y: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
color: #fff;
|
|
||||||
.title{
|
|
||||||
display: block;
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.div{
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
.bigDiv{
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.style1{
|
|
||||||
display: inline-block;
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #1A5D2B;
|
|
||||||
line-height: 22px;
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
background: #E1F3E6;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.style2{
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #2F6DFF;
|
|
||||||
line-height: 22px;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.style3{
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #FE7628;
|
|
||||||
line-height: 22px;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.style4{
|
|
||||||
font-family: DINAlternate, DINAlternate;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #2f66c5;
|
|
||||||
line-height: 28px;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.style5{
|
|
||||||
font-family: PingFangSC, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #788395;
|
|
||||||
line-height: 22px;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs{
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-top: 8px;
|
|
||||||
.el-tabs__header{
|
|
||||||
.el-tabs__item{
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.is-active{
|
|
||||||
color: #409eff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||