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
|
||||
* @Date: 2024-11-18 11:54:00
|
||||
* @LastEditors: cclu 1106109051@qq.com
|
||||
* @LastEditTime: 2024-11-18 11:54:18
|
||||
* @LastEditTime: 2024-11-29 11:57:57
|
||||
* @FilePath: \aiRobot\eslint.config.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
@ -20,6 +20,9 @@ module.exports = {
|
||||
ecmaVersion: 2020,
|
||||
},
|
||||
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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>地图测试</title>
|
||||
<base href="/map/">
|
||||
<title>AI全景图</title>
|
||||
<base href="/"> <!-- 确保这里匹配你的部署路径 -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<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>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
||||
4909
package-lock.json
generated
@ -12,7 +12,9 @@
|
||||
"@antv/l7": "^2.22.3",
|
||||
"@antv/l7-maps": "^2.22.3",
|
||||
"axios": "^1.7.7",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.8.8",
|
||||
"marked": "^15.0.6",
|
||||
"moment": "^2.30.1",
|
||||
"pinia": "^2.2.6",
|
||||
"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>
|
||||
<div>
|
||||
<router-view></router-view>
|
||||
@ -19,7 +11,7 @@ import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
onMounted(() => {
|
||||
router.push("/map");
|
||||
// router.push("/map/:id");
|
||||
});
|
||||
</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{
|
||||
padding: 12px;
|
||||
color: #fff;
|
||||
width: 650px;
|
||||
width: 90%;
|
||||
max-height: calc(100vh - 140px);
|
||||
white-space: pre-wrap;
|
||||
background: rgba(56, 56, 56, 0.51);
|
||||
@ -64,6 +64,105 @@
|
||||
background: rgba(27, 27, 27, 0.51);
|
||||
border-radius: 4px;
|
||||
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{
|
||||
background-color: transparent!important;
|
||||
.el-loading-spinner{
|
||||
@ -76,25 +175,66 @@
|
||||
}
|
||||
|
||||
.elTable{
|
||||
background-color: transparent !important;
|
||||
|
||||
.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-scrollbar{
|
||||
.el-scrollbar__wrap{
|
||||
.el-scrollbar__view{
|
||||
.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__cell{
|
||||
.cell{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
.el-table__expand-icon{
|
||||
.el-icon{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__row--level-1{
|
||||
.el-table__cell{
|
||||
.cell{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
.el-table__indent{
|
||||
padding-left: 0!important;
|
||||
}
|
||||
@ -104,8 +244,8 @@
|
||||
.el-table__row--level-2{
|
||||
.el-table__cell{
|
||||
.cell{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
.el-table__indent{
|
||||
padding-left: 0!important;
|
||||
}
|
||||
@ -115,8 +255,8 @@
|
||||
.el-table__row--level-3{
|
||||
.el-table__cell{
|
||||
.cell{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
.el-table__indent{
|
||||
padding-left: 0!important;
|
||||
}
|
||||
@ -126,8 +266,8 @@
|
||||
.el-table__row--level-4{
|
||||
.el-table__cell{
|
||||
.cell{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
.el-table__indent{
|
||||
padding-left: 0!important;
|
||||
}
|
||||
@ -142,6 +282,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.loadingBox{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.userIcon{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@ -150,6 +294,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dialogContent::-webkit-scrollbar {
|
||||
width: 0px; /* 隐藏水平滚动条 */
|
||||
height: 0px; /* 隐藏垂直滚动条 */
|
||||
}
|
||||
|
||||
.inputBox{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -172,5 +321,59 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||