Compare commits
12 Commits
3e7dfd3306
...
d58b95e1f5
| Author | SHA1 | Date | |
|---|---|---|---|
| d58b95e1f5 | |||
| 133e129f34 | |||
| 0e7f73f254 | |||
| 75dd0a758e | |||
| 9c8cc6bc71 | |||
| 09c304fa7a | |||
| d39becc206 | |||
| 8e14aff70d | |||
| 8bb086a400 | |||
| 76eb430ea5 | |||
| 30c7419943 | |||
| f8c2c678f7 |
@ -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-18 11:54:18
|
* @LastEditTime: 2024-11-29 11:57:57
|
||||||
* @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,6 +20,9 @@ module.exports = {
|
|||||||
ecmaVersion: 2020,
|
ecmaVersion: 2020,
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
// 自定义规则
|
'vue/max-attributes-per-line': ['error', {
|
||||||
|
'singleline': 3
|
||||||
|
}],
|
||||||
|
'@typescript-eslint/no-explicit-any': 'off',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
19
index.html
@ -1,28 +1,21 @@
|
|||||||
<!--
|
|
||||||
* @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>地图测试</title>
|
<title>AI全景图</title>
|
||||||
<base href="/map/">
|
<base href="/"> <!-- 确保这里匹配你的部署路径 -->
|
||||||
</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;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
4909
package-lock.json
generated
@ -12,7 +12,9 @@
|
|||||||
"@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,11 +1,3 @@
|
|||||||
<!--
|
|
||||||
* @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>
|
||||||
@ -19,7 +11,7 @@ import { useRouter } from "vue-router";
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
router.push("/map");
|
// router.push("/map/:id");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
BIN
src/assets/ai/businessTrade.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
src/assets/ai/busyIcon.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/ai/clearIcon.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/ai/comeForm.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/assets/ai/defaultIcon.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/ai/deleteIcon.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/ai/dropDown.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/ai/earlyWarning.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/ai/filterIcon.png
Normal file
|
After Width: | Height: | Size: 768 B |
BIN
src/assets/ai/heat.png
Normal file
|
After Width: | Height: | Size: 6.5 KiB |
BIN
src/assets/ai/proportion.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/ai/pullUp.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/ai/retract.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/ai/revenue.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/ai/selectBusinessTrade.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
BIN
src/assets/ai/selectBusy.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/ai/selectComeForm.png
Normal file
|
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/ai/selectDeleteIcon.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/ai/selectEarlyWarning.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/ai/selectHeat.png
Normal file
|
After Width: | Height: | Size: 6.4 KiB |
BIN
src/assets/ai/selectTraffic.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/assets/ai/selectWeather.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/ai/stopIcon.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/ai/traffic.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/ai/weather.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/ai/whiteBack.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/servicePart/ES.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/servicePart/accumulate.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/servicePart/area.png
Normal file
|
After Width: | Height: | Size: 469 B |
BIN
src/assets/servicePart/averageOrder.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/assets/servicePart/baby.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/servicePart/badWater.png
Normal file
|
After Width: | Height: | Size: 486 B |
BIN
src/assets/servicePart/buildArea.png
Normal file
|
After Width: | Height: | Size: 305 B |
BIN
src/assets/servicePart/bus.png
Normal file
|
After Width: | Height: | Size: 456 B |
BIN
src/assets/servicePart/car.png
Normal file
|
After Width: | Height: | Size: 613 B |
BIN
src/assets/servicePart/carService.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/servicePart/charge.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/servicePart/chemicals.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/servicePart/crossFlow.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/servicePart/customerRevenue.png
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
src/assets/servicePart/date.png
Normal file
|
After Width: | Height: | Size: 247 B |
BIN
src/assets/servicePart/descIcon.png
Normal file
|
After Width: | Height: | Size: 211 B |
BIN
src/assets/servicePart/enterCar.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
src/assets/servicePart/fixed.png
Normal file
|
After Width: | Height: | Size: 950 B |
BIN
src/assets/servicePart/food.png
Normal file
|
After Width: | Height: | Size: 601 B |
BIN
src/assets/servicePart/fun.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/servicePart/funBg1.png
Normal file
|
After Width: | Height: | Size: 105 KiB |
BIN
src/assets/servicePart/funBg2.png
Normal file
|
After Width: | Height: | Size: 104 KiB |
BIN
src/assets/servicePart/funBg3.png
Normal file
|
After Width: | Height: | Size: 103 KiB |
BIN
src/assets/servicePart/headerTop.png
Normal file
|
After Width: | Height: | Size: 100 KiB |
BIN
src/assets/servicePart/hotal.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/servicePart/maintenance.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/servicePart/manWC.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/servicePart/managerUnit.png
Normal file
|
After Width: | Height: | Size: 542 B |
BIN
src/assets/servicePart/meetingContent.png
Normal file
|
After Width: | Height: | Size: 286 B |
BIN
src/assets/servicePart/minimart.png
Normal file
|
After Width: | Height: | Size: 551 B |
BIN
src/assets/servicePart/moneyBack.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/servicePart/operate.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/servicePart/orderBusiness.png
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/servicePart/ownerSelf.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/servicePart/pageIcon.png
Normal file
|
After Width: | Height: | Size: 259 B |
BIN
src/assets/servicePart/person.png
Normal file
|
After Width: | Height: | Size: 833 B |
BIN
src/assets/servicePart/proportion.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
BIN
src/assets/servicePart/propryRight.png
Normal file
|
After Width: | Height: | Size: 332 B |
BIN
src/assets/servicePart/rage.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/servicePart/revenceBack.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/servicePart/revenceSome.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/servicePart/revenue.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/servicePart/room.png
Normal file
|
After Width: | Height: | Size: 518 B |
BIN
src/assets/servicePart/serviceIcon.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/servicePart/shop.png
Normal file
|
After Width: | Height: | Size: 559 B |
BIN
src/assets/servicePart/stopArea.png
Normal file
|
After Width: | Height: | Size: 753 B |
BIN
src/assets/servicePart/store.png
Normal file
|
After Width: | Height: | Size: 320 B |
BIN
src/assets/servicePart/thirdToilets.png
Normal file
|
After Width: | Height: | Size: 902 B |
BIN
src/assets/servicePart/tidalSpace.png
Normal file
|
After Width: | Height: | Size: 316 B |
BIN
src/assets/servicePart/trainCar.png
Normal file
|
After Width: | Height: | Size: 669 B |
BIN
src/assets/servicePart/treeTop.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/servicePart/uploadStore.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/servicePart/vehicleRefueling.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/servicePart/water.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/servicePart/waterBoiler.png
Normal file
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/servicePart/womenWC.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
54
src/components/map/component/BusyRanking.less
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
104
src/components/map/component/BusyRanking.vue
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<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: 650px;
|
width: 90%;
|
||||||
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,6 +64,105 @@
|
|||||||
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{
|
||||||
@ -76,25 +175,66 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
}
|
}
|
||||||
@ -104,8 +244,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;
|
||||||
}
|
}
|
||||||
@ -115,8 +255,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;
|
||||||
}
|
}
|
||||||
@ -126,8 +266,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;
|
||||||
}
|
}
|
||||||
@ -142,6 +282,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.loadingBox{
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
.userIcon{
|
.userIcon{
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
@ -150,6 +294,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dialogContent::-webkit-scrollbar {
|
||||||
|
width: 0px; /* 隐藏水平滚动条 */
|
||||||
|
height: 0px; /* 隐藏垂直滚动条 */
|
||||||
|
}
|
||||||
|
|
||||||
.inputBox{
|
.inputBox{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -172,5 +321,59 @@
|
|||||||
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
20792
src/components/map/component/detailText.js
Normal file
7669
src/components/map/component/map.js
Normal file
88
src/components/map/component/realBox.less
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
272
src/components/map/component/realBox.vue
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
<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>
|
||||||
12
src/components/map/component/revenueRate.less
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
124
src/components/map/component/revenueRate.vue
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<!-- 区域营收占比 -->
|
||||||
|
<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>
|
||||||
460
src/components/map/component/rightDetail.less
Normal file
@ -0,0 +1,460 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||