You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1604 lines
45 KiB
1604 lines
45 KiB
<template> |
|
<div class="container_box"> |
|
<div class="top_con"> |
|
<div class="left_con"> |
|
<div class="left_txt"> |
|
<div class="time_text">{{ time }}</div> |
|
<div class="bittom_left"> |
|
<div class="week_txt"> |
|
<span>{{ date }}</span |
|
><span style="margin-left: 0.1rem">{{ week }}</span> |
|
</div> |
|
<div class="uodate_time">数据更新时间:<span class="time_txt">2023/01/17</span></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="center_con"> |
|
<div class="con_title">莒县物流服务中心</div> |
|
</div> |
|
<div class="right_con"> |
|
<div class="right_txt"> |
|
<div class="left"> |
|
<img src="~@/assets/img/pos.png" alt="" /> |
|
<div class="pos_text">日照市莒县</div> |
|
</div> |
|
<div class="bottom_right"> |
|
<img src="~@/assets/img/weather.png" alt="" /> |
|
<div> |
|
<span>{{ temp }}℃</span> |
|
<span>{{ weather }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="left_box"> |
|
<div class="left_top"> |
|
<div class="top_title"> |
|
<div class="left_tit"> |
|
<span class="txt_name">{{ activeName }}</span> |
|
<span class="name">{{ acctiEng }}</span> |
|
</div> |
|
<div class="right_tit"> |
|
<div class="title_txt" :class="isActive == 1 ? 'active' : ''" @click="changeBtn(1)"> |
|
收 |
|
</div> |
|
<div class="title_txt" :class="isActive == 2 ? 'active' : ''" @click="changeBtn(2)"> |
|
发 |
|
</div> |
|
<div class="title_txt" :class="isActive == 3 ? 'active' : ''" @click="changeBtn(3)"> |
|
到 |
|
</div> |
|
<div class="title_txt" :class="isActive == 4 ? 'active' : ''" @click="changeBtn(4)"> |
|
派 |
|
</div> |
|
<div class="title_txt" :class="isActive == 5 ? 'active' : ''" @click="changeBtn(5)"> |
|
签 |
|
</div> |
|
</div> |
|
</div> |
|
<div class="cen_con"> |
|
<div class="table_line1"> |
|
<div class="table_item">排名</div> |
|
<div class="table_item">乡镇</div> |
|
<div class="table_item">运单量</div> |
|
</div> |
|
<div class="swiper-container swiper1"> |
|
<div class="swiper-wrapper"> |
|
<div class="swiper-slide" v-for="(item, index) in slideList" :key="index"> |
|
<div class="table_con"> |
|
<div |
|
class="table_line" |
|
v-for="item1 in item.arr" |
|
:key="item1.no" |
|
:class="item1.no <= 3 ? 'ac_no' : ''" |
|
> |
|
<div class="table_item">{{ item1.no }}</div> |
|
<div class="table_item">{{ item1.name }}</div> |
|
<div class="table_item">{{ item1.count }}</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="left_bottom"> |
|
<div class="top_title"> |
|
<div class="left_tit"> |
|
<span class="txt_name">村点信息</span> |
|
<span class="name">VILLAGE INFORMATION</span> |
|
</div> |
|
</div> |
|
<div class="table_box"> |
|
<div class="table_line1"> |
|
<div class="table_item">站点名称</div> |
|
<div class="table_item"> |
|
<span>上行</span> |
|
<img src="~@/assets/img/up.png" alt="" /> |
|
</div> |
|
<div class="table_item"> |
|
<span>下行</span> |
|
<img src="~@/assets/img/down.png" alt="" /> |
|
</div> |
|
</div> |
|
<div class="swiper-container swiper2"> |
|
<div class="swiper-wrapper"> |
|
<div class="swiper-slide" v-for="(item, index) in villList" :key="index"> |
|
<div class="table_con" :class="item.arr.length < 5 ? 'tab_con' : ''"> |
|
<div class="table_line" v-for="item1 in item.arr" :key="item1.name"> |
|
<div class="table_item">{{ item1.name }}</div> |
|
<div class="table_item">{{ item1.upData }}</div> |
|
<div class="table_item">{{ item1.downData }}</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="center_top"> |
|
<div class="cen_left"> |
|
<div class="data_box" v-for="item in totalData" :key="item.name"> |
|
<div class="data_txt" style="font-family: 'ALHY'">{{ item.name }}</div> |
|
<div class="data_txt data_text">{{ item.data }}</div> |
|
<div class="data_txt"> |
|
<span class="hb_txt">环比</span> |
|
<span class="hb_data">{{ item.huanbi }}</span> |
|
<img |
|
v-show="item.name == '收件量' && item.huanbi > 0" |
|
src="~@/assets/img/up1.png" |
|
alt="" |
|
/> |
|
<img |
|
v-show="item.name == '收件量' && item.huanbi < 0" |
|
src="~@/assets/img/down1.png" |
|
alt="" |
|
/> |
|
<img |
|
v-show="item.name == '发件量' && item.huanbi > 0" |
|
src="~@/assets/img/up2.png" |
|
alt="" |
|
/> |
|
<img |
|
v-show="item.name == '发件量' && item.huanbi < 0" |
|
src="~@/assets/img/down2.png" |
|
alt="" |
|
/> |
|
<img |
|
v-show="item.name !== '收件量' && item.name !== '发件量' && item.huanbi > 0" |
|
src="~@/assets/img/up3.png" |
|
alt="" |
|
/> |
|
<img |
|
v-show="item.name !== '收件量' && item.name !== '发件量' && item.huanbi < 0" |
|
src="~@/assets/img/down3.png" |
|
alt="" |
|
/> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="cen_right"> |
|
<div class="btn_box" :class="active == 1 ? 'active' : ''" @click="changeData(1)">日</div> |
|
<div class="btn_box" :class="active == 2 ? 'active' : ''" @click="changeData(2)">月</div> |
|
</div> |
|
</div> |
|
<div class="center_bottom"> |
|
<div class="charts_box"></div> |
|
<div class="charts_box"> |
|
<div id="trendChart" class="trend_box"></div> |
|
</div> |
|
</div> |
|
<div class="map_wrap"> |
|
<a |
|
@click="backMap" |
|
href="javascript:;" |
|
style=" |
|
position: absolute; |
|
right: 10px; |
|
top: 10px; |
|
color: #fff; |
|
font-size: 0.16rem; |
|
z-index: 99; |
|
" |
|
>回到原点</a |
|
> |
|
<PathMap ref="pathMap"></PathMap> |
|
</div> |
|
<div class="right_box"> |
|
<div class="right_top"> |
|
<div class="top_title"> |
|
<div class="left_tit"> |
|
<span class="txt_name">派件入库量占比</span> |
|
<span class="name">PROPORTION</span> |
|
</div> |
|
</div> |
|
<div class="pie_box" id="pieChart"></div> |
|
<!-- <div class="pie_bg"></div> --> |
|
</div> |
|
<div class="right_cen"> |
|
<div class="top_title"> |
|
<div class="left_tit"> |
|
<span class="txt_name">车辆行驶里程</span> |
|
<span class="name">VEHICLE MILEAGE</span> |
|
</div> |
|
</div> |
|
<CarMile @doMap="doMap"></CarMile> |
|
</div> |
|
<div class="right_bottom"> |
|
<div class="top_title"> |
|
<div class="left_tit"> |
|
<span class="txt_name">车辆报警</span> |
|
<span class="name">VEHICLE ALARM</span> |
|
</div> |
|
</div> |
|
<CarWarn></CarWarn> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import 'echarts-gl' |
|
import axios from "axios"; |
|
import * as XLSX from "xlsx/xlsx.mjs"; |
|
import Swiper from "swiper"; |
|
import "swiper/css/swiper.min.css"; |
|
import { queryWeath } from "@/api/base"; |
|
import PathMap from "../components/pathMap"; |
|
import CarMile from "../components/carMile"; |
|
import CarWarn from "../components/carWarn"; |
|
export default { |
|
components: { |
|
PathMap, |
|
CarMile, |
|
CarWarn, |
|
}, |
|
data() { |
|
return { |
|
timer: null, |
|
day: "", |
|
time: "", |
|
date: "", |
|
week: "", |
|
isFullFlag: false, |
|
isSupport: false, |
|
dayData: [], |
|
monthData: [], |
|
totalData: [], |
|
active: 1, |
|
xData: [], |
|
yData1: [], |
|
yData2: [], |
|
villageData: [], |
|
villList: [], |
|
mySwiper: null, |
|
temp: "", |
|
weather: "", |
|
slideList: [ |
|
{ |
|
arr: [], |
|
}, |
|
{ |
|
arr: [], |
|
}, |
|
], |
|
shouData: [], |
|
faData: [], |
|
daoData: [], |
|
paiData: [], |
|
qianData: [], |
|
isActive: 1, |
|
activeName: "收件量", |
|
acctiEng: "RECEIVING", |
|
dateTime: "", |
|
// isSlide:false |
|
pieChart: null, |
|
trendCharts: null, |
|
chartData: [], |
|
pieData: [], |
|
RealData: [], |
|
borderData: [], |
|
startColor: [ |
|
"#0e94eb", |
|
"#c440ef", |
|
"#efb013", |
|
"#2fda07", |
|
"#d8ef13", |
|
"#2e4af8", |
|
"#0eebc4", |
|
"#f129b1", |
|
"#17defc", |
|
"#f86363", |
|
], |
|
borderStartColor: [ |
|
"#0077c5", |
|
"#a819d7", |
|
"#c99002", |
|
"#24bc00", |
|
"#b6cb04", |
|
"#112ee2", |
|
"#00bd9c", |
|
"#ce078f", |
|
"#00b2cd", |
|
"#ec3c3c", |
|
], |
|
mapData: [], |
|
datas: [], |
|
geoCoordMap: { |
|
棋山镇: [118.895378, 35.877537], |
|
东莞镇: [118.972146, 35.991826], |
|
安庄镇: [118.815076, 35.812024], |
|
果庄乡: [118.769212, 35.77904], //果庄乡 |
|
洛河镇: [118.833803, 35.753576], //洛河镇 |
|
库山乡: [118.979909, 35.92304], //库山乡 |
|
招贤镇: [118.929219, 35.723248], //招贤镇 |
|
桑园镇: [119.046012, 35.678553], //桑园镇 |
|
阎庄镇: [118.834585, 35.670621], //阎庄镇 |
|
莒县电子商务公共服务中心: [118.901658, 35.60688], |
|
店子集镇: [118.914151, 35.5844], |
|
城阳街道: [118.82472, 35.583488], //城阳街道 |
|
峤山镇: [118.946005, 35.657339], //峤山镇 |
|
龙山镇: [119.003747, 35.515955], |
|
陵阳镇: [118.890825, 35.545056], |
|
寨里河镇: [118.931584, 35.469982], |
|
莒县经济开发区: [118.851312, 35.626514], |
|
浮来山镇: [118.744789, 35.596051], |
|
刘官庄镇: [118.801123, 35.522202], |
|
长岭镇: [118.844125, 35.484677], |
|
小店镇: [118.81007, 35.422484], |
|
夏庄镇: [118.700674, 35.419525], |
|
}, |
|
}; |
|
}, |
|
created() { |
|
this.getTime(); |
|
}, |
|
mounted() { |
|
this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx"); |
|
queryWeath().then((res) => { |
|
this.temp = res.result.now.temp; |
|
this.weather = res.result.now.text; |
|
}); |
|
this.$nextTick(() =>{ |
|
this.createPieChart() |
|
|
|
}) |
|
}, |
|
methods: { |
|
backMap() { |
|
this.$refs.pathMap.backMap(); |
|
}, |
|
//触发定位地图 |
|
doMap(item) { |
|
this.$refs.pathMap.queryDingwei(item.deviceId); |
|
}, |
|
readExcelFile(url) { |
|
axios |
|
.get(url, { |
|
responseType: "arraybuffer", |
|
}) |
|
.then((res) => { |
|
// console.log(res); |
|
let data = new Uint8Array(res); |
|
// console.log(data); |
|
let wb = XLSX.read(data, { |
|
type: "array", |
|
}); |
|
// console.log(wb); |
|
let sheets = wb.Sheets; // 获取文档数据 |
|
// console.log(sheets); |
|
this.content = this.transformSheets(sheets); |
|
// this.$message('读取成功'); |
|
}) |
|
.catch((err) => { |
|
this.$message.error(err); |
|
}); |
|
}, |
|
transformSheets(sheets) { |
|
const content1 = []; |
|
for (const key in sheets) { |
|
content1.push(XLSX.utils.sheet_to_json(sheets[key])); |
|
} |
|
console.log(content1); |
|
this.dayData.push( |
|
{ name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 }, |
|
{ name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 }, |
|
{ name: "到件量", data: content1[0][0].日总到件量, huanbi: content1[0][0].到件量日总环比 }, |
|
{ name: "派件量", data: content1[0][0].日总派件量, huanbi: content1[0][0].派件量日总环比 }, |
|
{ name: "签件量", data: content1[0][0].日总签件量, huanbi: content1[0][0].签件量日总环比 } |
|
); |
|
|
|
this.monthData.push( |
|
{ name: "收件量", data: content1[0][0].月总收件量, huanbi: content1[0][0].收件量月总环比 }, |
|
{ name: "发件量", data: content1[0][0].月总发件量, huanbi: content1[0][0].发件量月总环比 }, |
|
{ name: "到件量", data: content1[0][0].月总到件量, huanbi: content1[0][0].到件量月总环比 }, |
|
{ name: "派件量", data: content1[0][0].月总派件量, huanbi: content1[0][0].派件量月总环比 }, |
|
{ name: "签件量", data: content1[0][0].月总签件量, huanbi: content1[0][0].签件量月总环比 } |
|
); |
|
this.totalData = this.dayData; |
|
content1[1].map((item) => { |
|
this.xData.unshift(item.日期.substring(item.日期.length - 5).replace(".", "-")); |
|
this.yData1.push(item.到件量); |
|
this.yData2.push(item.派件量); |
|
}); |
|
// this.dateTime = content1[0][0].日期.replaceAll(".", "/"); |
|
this.dateTime = content1[0][0].日期.replace(/\D/g, "/"); |
|
// this.$message.success(content1[0][0].日期); |
|
content1[3].map((item) => { |
|
this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 }); |
|
}); |
|
for (var i = 0, len = this.villageData.length; i < len; i += 7) { |
|
this.villList.push({ arr: this.villageData.slice(i, i + 7) }); |
|
} |
|
content1[2].map((item, index) => { |
|
this.mapData.push({ name: item.名称, value: item.收件量 }); |
|
this.datas.push([ |
|
{ name: item.名称, value: item.收件量 }, |
|
{ name: "莒县电子商务公共服务中心" }, |
|
]); |
|
this.shouData.push({ name: item.名称, count: item.收件量 }); |
|
this.shouData = this.shouData.sort(function (a, b) { |
|
return b.count - a.count; |
|
}); |
|
this.faData.push({ name: item.名称, count: item.发件量 }); |
|
this.faData = this.faData.sort(function (a, b) { |
|
return b.count - a.count; |
|
}); |
|
this.daoData.push({ name: item.名称, count: item.到件量 }); |
|
this.daoData = this.daoData.sort(function (a, b) { |
|
return b.count - a.count; |
|
}); |
|
this.paiData.push({ name: item.名称, count: item.派件量 }); |
|
this.paiData = this.paiData.sort(function (a, b) { |
|
return b.count - a.count; |
|
}); |
|
this.qianData.push({ name: item.名称, count: item.签件量 }); |
|
this.qianData = this.qianData.sort(function (a, b) { |
|
return b.count - a.count; |
|
}); |
|
}); |
|
content1[0].map((item) => { |
|
this.pieData.push({ |
|
name: item.快递名称, |
|
value: item.收件量, |
|
percent: (item.收件量 / content1[0][0].日总收件量).toFixed(4) * 100, |
|
}); |
|
}); |
|
console.log(this.pieData); |
|
this.shouData.map((item, index) => { |
|
if (index <= 10) { |
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} else { |
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} |
|
}); |
|
this.$nextTick(() => { |
|
this.createChart(); |
|
// this.createCharts(); |
|
// this.createCharts1(); |
|
this.run(); |
|
this.run1(); |
|
}); |
|
}, |
|
|
|
createChart() { |
|
this.trendCharts = this.$echarts.init(document.getElementById("trendChart")); |
|
window.addEventListener("resize", () => { |
|
this.trendCharts.resize(); |
|
}); |
|
var option = { |
|
color: ["#115fff", "#1dd58e"], |
|
title: { |
|
text: "仓库收件量趋势", |
|
textStyle: { |
|
fontSize: 15, |
|
color: "#fff", |
|
}, |
|
top: 12, |
|
}, |
|
legend: { |
|
data: ["到件量", "派件量"], |
|
textStyle: { |
|
color: "#fff", |
|
}, |
|
top: 12, |
|
right: 10, |
|
itemHeight: 8, |
|
}, |
|
tooltip: { |
|
trigger: "axis", |
|
}, |
|
grid: { |
|
left: "3%", |
|
right: "4%", |
|
bottom: "3%", |
|
top: "18%", |
|
containLabel: true, |
|
}, |
|
xAxis: { |
|
type: "category", |
|
boundaryGap: false, |
|
data: this.xData, |
|
axisLine: { |
|
lineStyle: { |
|
color: "rgba(255, 255, 255, .1)", |
|
}, |
|
}, |
|
axisTick: { |
|
show: false, |
|
}, |
|
axisLabel: { |
|
color: "rgba(255, 255, 255, .7)", |
|
}, |
|
}, |
|
yAxis: { |
|
type: "value", |
|
axisLabel: { |
|
show: true, |
|
color: "#fff", |
|
}, |
|
splitLine: { |
|
lineStyle: { |
|
color: "rgba(255, 255, 255, .1)", |
|
}, |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "到件量", |
|
type: "line", |
|
smooth: true, |
|
data: this.yData1, |
|
}, |
|
{ |
|
name: "派件量", |
|
type: "line", |
|
smooth: true, |
|
data: this.yData2, |
|
}, |
|
], |
|
}; |
|
this.trendCharts.setOption(option); |
|
}, |
|
|
|
createPieChart() { |
|
this.pieChart = this.$echarts.init(document.getElementById("pieChart")); |
|
window.addEventListener("resize", () => { |
|
this.pieChart.resize(); |
|
}); |
|
var data = [ |
|
{ |
|
name: "不满意", |
|
value: 30, |
|
itemStyle: { color: "#00bfff" }, |
|
startRatio: 0, |
|
endRatio: 0.7, |
|
}, |
|
{ |
|
name: "非常满意", |
|
value: 45, |
|
itemStyle: { color: "#48f5c0" }, |
|
startRatio: 0.7, |
|
endRatio: 1, |
|
}, |
|
{ name: "满意", value: 6, itemStyle: { color: "#00dced" }, startRatio: 0.7, endRatio: 1 }, |
|
]; |
|
var optionConfig = {}; |
|
|
|
const getPie3D = (pieData, internalDiameterRatio) => { |
|
//internalDiameterRatio:透明的空心占比 |
|
let series = []; |
|
let sumValue = 0; |
|
let startValue = 0; |
|
let endValue = 0; |
|
let k = 1; |
|
pieData.sort((a, b) => { |
|
return b.value - a.value; |
|
}); |
|
// 为每一个饼图数据，生成一个 series-surface 配置 |
|
for (let i = 0; i < pieData.length; i++) { |
|
sumValue += pieData[i].value; |
|
let seriesItem = { |
|
name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name, |
|
type: "surface", |
|
parametric: true, |
|
wireframe: { |
|
show: false, |
|
}, |
|
pieData: pieData[i], |
|
pieStatus: { |
|
selected: false, |
|
hovered: false, |
|
k: k, |
|
}, |
|
radius: "50%", |
|
center: ["10%", "10%"], |
|
}; |
|
|
|
if (typeof pieData[i].itemStyle != "undefined") { |
|
let itemStyle = {}; |
|
typeof pieData[i].itemStyle.color != "undefined" |
|
? (itemStyle.color = pieData[i].itemStyle.color) |
|
: null; |
|
typeof pieData[i].itemStyle.opacity != "undefined" |
|
? (itemStyle.opacity = pieData[i].itemStyle.opacity) |
|
: null; |
|
seriesItem.itemStyle = itemStyle; |
|
} |
|
series.push(seriesItem); |
|
} |
|
|
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， |
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 |
|
|
|
for (let i = 0; i < series.length; i++) { |
|
endValue = startValue + series[i].pieData.value; |
|
series[i].pieData.startRatio = startValue / sumValue; |
|
series[i].pieData.endRatio = endValue / sumValue; |
|
series[i].parametricEquation = this.getParametricEquation( |
|
series[i].pieData.startRatio, |
|
series[i].pieData.endRatio, |
|
false, |
|
false, |
|
k, |
|
series[i].pieData.value |
|
); |
|
|
|
startValue = endValue; |
|
} |
|
// console.log(getParametricEquation) |
|
let boxHeight = this.getHeight3D(series, 25); //通过传参设定3d饼/环的高度，26代表26px |
|
// 准备待返回的配置项，把准备好的 legendData、series 传入。 |
|
let option = { |
|
// backgroundColor: "#203598", |
|
labelLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#404772", |
|
}, |
|
}, |
|
label: { |
|
show: false, |
|
position: "outside", |
|
rich: { |
|
b: { |
|
fontSize: 24, |
|
lineHeight: 30, |
|
fontWeight: "bold", |
|
color: "#fff", |
|
}, |
|
c: { |
|
fontSize: 18, |
|
color: "#fff", |
|
}, |
|
}, |
|
formatter: "{b|{b}}\n{c|{c}%}", |
|
}, |
|
tooltip: { |
|
backgroundColor: "#053A8D", |
|
formatter: (params) => { |
|
if (params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") { |
|
let bfb = ( |
|
(option.series[params.seriesIndex].pieData.endRatio - |
|
option.series[params.seriesIndex].pieData.startRatio) * |
|
100 |
|
).toFixed(2); |
|
return ( |
|
`${params.seriesName}<br/>` + |
|
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + |
|
`${bfb}%` |
|
); |
|
} |
|
}, |
|
}, |
|
xAxis3D: { |
|
min: -1, |
|
max: 1, |
|
}, |
|
yAxis3D: { |
|
min: -1, |
|
max: 1, |
|
}, |
|
zAxis3D: { |
|
min: -1, |
|
max: 1, |
|
}, |
|
grid3D: { |
|
show: false, |
|
boxHeight: boxHeight, //圆环的高度 |
|
left: 0, |
|
top: 0, //3d饼图的位置 |
|
viewControl: { |
|
//3d效果可以放大、旋转等，请自己去查看官方配置 |
|
alpha: 20, //角度 |
|
distance: 250, //调整视角到主体的距离，类似调整zoom |
|
rotateSensitivity: 0, //设置为0无法旋转 |
|
zoomSensitivity: 0, //设置为0无法缩放 |
|
panSensitivity: 0, //设置为0无法平移 |
|
autoRotate: false, //自动旋转 |
|
}, |
|
}, |
|
series: series, |
|
}; |
|
return option; |
|
}; |
|
|
|
|
|
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation |
|
|
|
|
|
var option = getPie3D(data, 0.8); |
|
console.log(option); |
|
//是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption |
|
this.pieChart.setOption(option); |
|
}, |
|
|
|
//获取3d丙图的最高扇区的高度 |
|
getHeight3D(series, height){ |
|
series.sort((a, b) => { |
|
return b.pieData.value - a.pieData.value; |
|
}); |
|
return (height * 25) / series[0].pieData.value; |
|
}, |
|
|
|
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { |
|
// 计算 |
|
let midRatio = (startRatio + endRatio) / 2; |
|
let startRadian = startRatio * Math.PI * 2; |
|
let endRadian = endRatio * Math.PI * 2; |
|
let midRadian = midRatio * Math.PI * 2; |
|
// 如果只有一个扇形，则不实现选中效果。 |
|
if (startRatio === 0 && endRatio === 1) { |
|
isSelected = true; |
|
} |
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） |
|
k = typeof k !== "undefined" ? k : 1 / 3; |
|
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） |
|
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; |
|
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; |
|
// 计算高亮效果的放大比例（未高亮，则比例为 1） |
|
let hoverRate = isHovered ? 1.05 : 1; |
|
// 返回曲面参数方程 |
|
return { |
|
u: { |
|
min: -Math.PI, |
|
max: Math.PI * 3, |
|
step: Math.PI / 32, |
|
}, |
|
v: { |
|
min: 0, |
|
max: Math.PI * 2, |
|
step: Math.PI / 20, |
|
}, |
|
x: (u, v) => { |
|
if (u < startRadian) { |
|
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate; |
|
} |
|
if (u > endRadian) { |
|
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate; |
|
} |
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; |
|
}, |
|
y: (u, v)=> { |
|
if (u < startRadian) { |
|
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate; |
|
} |
|
if (u > endRadian) { |
|
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate; |
|
} |
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; |
|
}, |
|
z: (u, v)=> { |
|
if (u < -Math.PI * 0.5) { |
|
return Math.sin(u); |
|
} |
|
if (u > Math.PI * 2.5) { |
|
return Math.sin(u) * h * 0.1; |
|
} |
|
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; |
|
}, |
|
}; |
|
}, |
|
// 按照日月更换数据 |
|
changeData(val) { |
|
this.active = val; |
|
if (val == 1) { |
|
this.totalData = this.dayData; |
|
} else if (val == 2) { |
|
this.totalData = this.monthData; |
|
} |
|
}, |
|
|
|
run() { |
|
this.mySwiper = new Swiper(".swiper1", { |
|
loop: true, // 循环模式选项 |
|
autoplay: { |
|
delay: 10000, //10秒切换一次 |
|
disableOnInteraction: false, |
|
}, |
|
}); |
|
}, |
|
|
|
run1() { |
|
this.mySwiper = new Swiper(".swiper2", { |
|
loop: true, // 循环模式选项 |
|
// autoplay: true, //可选选项，自动滑动 |
|
autoplay: { |
|
delay: 10000, //10秒切换一次 |
|
disableOnInteraction: false, |
|
}, |
|
}); |
|
}, |
|
|
|
changeBtn(val) { |
|
this.isActive = val; |
|
this.slideList = [{ arr: [] }, { arr: [] }]; |
|
this.isSlide = false; |
|
if (val == 1) { |
|
this.activeName = "收件量"; |
|
this.acctiEng = "RECEIVING"; |
|
this.shouData.map((item, index) => { |
|
if (index <= 10) { |
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} else { |
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} |
|
}); |
|
} else if (val == 2) { |
|
this.activeName = "发件量"; |
|
this.acctiEng = "SENDING"; |
|
this.faData.map((item, index) => { |
|
if (index <= 10) { |
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} else { |
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} |
|
}); |
|
} else if (val == 3) { |
|
this.activeName = "到件量"; |
|
this.acctiEng = "ARRIVING"; |
|
this.daoData.map((item, index) => { |
|
if (index <= 10) { |
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} else { |
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} |
|
}); |
|
} else if (val == 4) { |
|
this.acctiEng = "ASSIGNING"; |
|
this.activeName = "派件量"; |
|
this.paiData.map((item, index) => { |
|
if (index <= 10) { |
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} else { |
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} |
|
}); |
|
} else if (val == 5) { |
|
this.activeName = "签件量"; |
|
this.acctiEng = "RECEIVING"; |
|
this.qianData.map((item, index) => { |
|
if (index <= 10) { |
|
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} else { |
|
this.slideList[1].arr.push({ no: index + 1, name: item.name, count: item.count }); |
|
} |
|
}); |
|
} |
|
// if(this.slideList){ |
|
// this.isSlide = true; |
|
// } |
|
this.$nextTick(() => { |
|
// console.log(this.slideList) |
|
this.mySwiper.destroy(); |
|
|
|
this.run(); |
|
}); |
|
}, |
|
fn(str) { |
|
let num = null; |
|
str >= 10 ? (num = str) : (num = "0" + str); |
|
return num; |
|
}, |
|
getWeek(e) { |
|
let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; |
|
this.week = arr[e]; |
|
}, |
|
getTime() { |
|
//获取当前时间 |
|
this.timer = setInterval(() => { |
|
var date = new Date(); |
|
var year = date.getFullYear(); //当前年份 |
|
var month = date.getMonth(); //当前月份 |
|
var data = date.getDate(); //天 |
|
var hours = date.getHours(); //小时 |
|
var minute = date.getMinutes(); //分 |
|
var second = date.getSeconds(); //秒 |
|
this.day = date.getDay(); //获取当前星期几 |
|
this.getWeek(this.day); |
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second); |
|
this.date = year + "/" + (month + 1) + "/" + data; |
|
}, 1000); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "~@/assets/font/font.css"; |
|
.container_box { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
background: url(~@/assets/img/background.jpg); |
|
background-size: 100% 100%; |
|
position: relative; |
|
z-index: 9; |
|
|
|
.top_con { |
|
width: 100%; |
|
height: 10%; |
|
display: flex; |
|
align-items: center; |
|
position: absolute; |
|
top: 0; |
|
|
|
.left_con { |
|
width: 20%; |
|
display: flex; |
|
justify-content: space-between; |
|
height: 100%; |
|
align-items: center; |
|
|
|
.left_txt { |
|
display: flex; |
|
width: 100%; |
|
flex-direction: column; |
|
height: 55%; |
|
justify-content: space-between; |
|
|
|
.time_text { |
|
display: flex; |
|
margin-left: 0.38rem; |
|
font-size: 0.34rem; |
|
font-family: "04B"; |
|
color: #ffffff; |
|
box-shadow: -4px 5px 10px 0px rgb(64 49 49 / 56%); |
|
} |
|
|
|
.bittom_left { |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.week_txt { |
|
font-size: 0.14rem; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
margin-left: 0.38rem; |
|
} |
|
|
|
.uodate_time { |
|
font-family: "FZSK"; |
|
font-size: 0.14rem; |
|
font-weight: normal; |
|
font-stretch: normal; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
box-shadow: -1px 2px 3px 0px rgb(64 49 49 / 60%); |
|
opacity: 0.8; |
|
color: #fff; |
|
.time_txt { |
|
font-size: 0.16rem; |
|
font-family: "04B"; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.center_con { |
|
width: 60%; |
|
height: 80%; |
|
text-align: center; |
|
|
|
.con_title { |
|
font-family: "FZSK"; |
|
font-size: 0.44rem; |
|
font-weight: normal; |
|
font-style: italic; |
|
font-stretch: normal; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
// box-shadow: -0.04rem 0.05rem 0.1rem 0px |
|
// rgba(64, 49, 49, 0.56); |
|
} |
|
} |
|
|
|
.right_con { |
|
width: 17%; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
margin-left: 3%; |
|
|
|
.right_txt { |
|
width: 100%; |
|
height: 53%; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.left { |
|
display: flex; |
|
align-items: flex-end; |
|
img { |
|
width: 0.13rem; |
|
height: 0.16rem; |
|
margin-right: 0.1rem; |
|
} |
|
|
|
.pos_text { |
|
font-family: "FZSK"; |
|
font-size: 0.16rem; |
|
color: #ddecff; |
|
} |
|
} |
|
|
|
.bottom_right { |
|
display: flex; |
|
align-items: center; |
|
margin-right: 0.38rem; |
|
img { |
|
width: 0.8rem; |
|
height: 0.8rem; |
|
} |
|
div { |
|
height: 100%; |
|
font-family: "FZSK"; |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
} |
|
} |
|
} |
|
div { |
|
font-size: 0.16rem; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
|
|
.left_box { |
|
width: 24%; |
|
height: 80%; |
|
position: absolute; |
|
top: 14%; |
|
left: 3%; |
|
|
|
.top_title { |
|
width: 100%; |
|
height: 0.38rem; |
|
background: url(~@/assets/img/tit_bag.png); |
|
background-size: 100% 100%; |
|
display: flex; |
|
|
|
.left_tit { |
|
width: 100%; |
|
height: 100%; |
|
font-size: 0.1rem; |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
|
|
.txt_name { |
|
margin: 0 0.1rem 0 0.6rem; |
|
font-family: "FZSK"; |
|
font-size: 0.22rem; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
} |
|
|
|
.name { |
|
font-family: "FZSK"; |
|
color: #ffffff; |
|
box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81); |
|
opacity: 0.6; |
|
margin-bottom: 0.1rem; |
|
} |
|
} |
|
|
|
.right_tit { |
|
display: flex; |
|
align-items: center; |
|
margin-right: 0.18rem; |
|
position: relative; |
|
|
|
.title_txt { |
|
width: 0.42rem; |
|
height: 0.32rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background: url(~@/assets/img/bg.png); |
|
background-size: 100% 100%; |
|
cursor: pointer; |
|
|
|
&.active { |
|
background: url(~@/assets/img/active_bg.png); |
|
background-size: 100% 100%; |
|
} |
|
} |
|
|
|
div { |
|
font-size: 0.18rem; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
|
|
.left_top { |
|
width: 100%; |
|
height: 57%; |
|
|
|
.top_title { |
|
.left_tit { |
|
width: 50%; |
|
height: 100%; |
|
font-size: 0.1rem; |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
|
|
.txt_name { |
|
margin: 0 0.1rem 0 0.6rem; |
|
font-family: "FZSK"; |
|
font-size: 0.22rem; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
} |
|
|
|
.name { |
|
font-family: "FZSK"; |
|
color: #ffffff; |
|
box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81); |
|
opacity: 0.6; |
|
margin-bottom: 0.1rem; |
|
} |
|
} |
|
} |
|
|
|
.cen_con { |
|
width: 100%; |
|
height: 89%; |
|
margin-top: 0.18rem; |
|
|
|
.table_line1 { |
|
width: 100%; |
|
height: 0.38rem; |
|
display: flex; |
|
align-items: center; |
|
background: url(~@/assets/img/tab_bg.png); |
|
background-size: 100% 100%; |
|
|
|
.table_item { |
|
width: 33%; |
|
height: 100%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
color: #fff; |
|
font-family: "FZSK"; |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
} |
|
} |
|
|
|
.swiper-container { |
|
width: 100%; |
|
height: 88%; |
|
} |
|
|
|
.table_con { |
|
height: 100%; |
|
} |
|
.table_line { |
|
width: 100%; |
|
height: 8.6%; |
|
display: flex; |
|
align-items: center; |
|
|
|
&.ac_no { |
|
height: 10%; |
|
background: url(~@/assets/img/tab1.png); |
|
background-size: 100% 100%; |
|
|
|
div { |
|
font-family: "FZSK"; |
|
font-size: 0.18rem; |
|
letter-spacing: 0px; |
|
background-image: linear-gradient( |
|
to bottom, |
|
#fceece, |
|
#e39054 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
|
|
&:nth-child(2) { |
|
background: url(~@/assets/img/tab2.png); |
|
background-size: 100% 100%; |
|
div { |
|
background-image: linear-gradient( |
|
to bottom, |
|
#cefce7, |
|
#16da85 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
} |
|
|
|
&:nth-child(3) { |
|
background: url(~@/assets/img/tab3.png); |
|
background-size: 100% 100%; |
|
div { |
|
background-image: linear-gradient( |
|
to bottom, |
|
#cef6fc, |
|
#1ca4f2 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
} |
|
} |
|
|
|
.table_item { |
|
width: 33%; |
|
height: 100%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
color: #fff; |
|
font-size: 0.14rem; |
|
} |
|
} |
|
|
|
// div{ |
|
// font-size: 0.18rem; |
|
// color: #fff; |
|
// } |
|
} |
|
} |
|
.left_bottom { |
|
width: 100%; |
|
height: 38%; |
|
margin-top: 2%; |
|
|
|
.table_box { |
|
width: 100%; |
|
height: 88%; |
|
margin-top: 0.15rem; |
|
// overflow-y: auto; |
|
|
|
.swiper2 { |
|
width: 100%; |
|
height: 92%; |
|
|
|
.swiper-wrapper { |
|
width: 100%; |
|
height: 100%; |
|
|
|
.swiper-slide { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
.table_con { |
|
width: 100%; |
|
height: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.tab_con { |
|
height: 55%; |
|
} |
|
.table_line1 { |
|
width: 100%; |
|
height: 0.38rem; |
|
display: flex; |
|
align-items: center; |
|
background: url(~@/assets/img/tab_bg.png); |
|
background-size: 100% 100%; |
|
|
|
.table_item { |
|
width: 33%; |
|
height: 100%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
font-family: "FZSK"; |
|
font-size: 0.16rem; |
|
color: #ffffff; |
|
|
|
img { |
|
width: 0.18rem; |
|
height: 0.16rem; |
|
} |
|
} |
|
} |
|
|
|
.table_line { |
|
width: 100%; |
|
height: 0.4rem; |
|
display: flex; |
|
align-items: center; |
|
|
|
.table_item { |
|
width: 33%; |
|
height: 100%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
} |
|
|
|
div { |
|
font-size: 0.14rem; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.center_top { |
|
width: 46%; |
|
height: 12%; |
|
background: url(~@/assets/img/data_bg.png); |
|
background-size: 100% 100%; |
|
position: absolute; |
|
left: 28%; |
|
top: 15%; |
|
display: flex; |
|
|
|
.cen_left { |
|
width: 86%; |
|
height: 100%; |
|
display: flex; |
|
|
|
.data_box { |
|
width: 20%; |
|
height: 100%; |
|
|
|
&:first-child { |
|
.data_text { |
|
background-image: linear-gradient( |
|
to bottom, |
|
#fceece, |
|
#e39054 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
|
|
.data_txt { |
|
.hb_data { |
|
background-image: linear-gradient( |
|
to bottom, |
|
#fceece, |
|
#e39054 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
} |
|
} |
|
|
|
&:nth-child(2) { |
|
.data_text { |
|
background-image: linear-gradient( |
|
to bottom, |
|
#cefce7, |
|
#16da85 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
|
|
.data_txt { |
|
.hb_data { |
|
background-image: linear-gradient( |
|
to bottom, |
|
#cefce7, |
|
#16da85 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
} |
|
} |
|
|
|
.data_txt { |
|
font-size: 0.16rem; |
|
color: #fff; |
|
color: #ffffff; |
|
.hb_txt { |
|
font-size: 0.14rem; |
|
color: #ffffff; |
|
opacity: 0.7; |
|
} |
|
|
|
.hb_data { |
|
margin-left: 0.1rem; |
|
font-size: 0.14rem; |
|
background-image: linear-gradient( |
|
to bottom, |
|
#76e4ff, |
|
#1c77f2 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
} |
|
|
|
.data_text { |
|
font-family: "ALHY"; |
|
font-size: 0.26rem; |
|
line-height: 0.5rem; |
|
|
|
background-image: linear-gradient( |
|
to bottom, |
|
#76e4ff, |
|
#1c77f2 |
|
); /* 线性渐变背景，方向向上 */ |
|
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */ |
|
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */ |
|
} |
|
} |
|
} |
|
|
|
.cen_right { |
|
width: 8%; |
|
height: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
|
|
.btn_box { |
|
font-size: 0.18rem; |
|
color: #fff; |
|
width: 0.46rem; |
|
height: 0.35rem; |
|
background: url(~@/assets/img/bg.png); |
|
background-size: 100% 100%; |
|
margin-bottom: 0.03rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-family: "FZSK"; |
|
font-size: 0.22erm; |
|
color: #ffffff; |
|
cursor: pointer; |
|
|
|
&:first-child { |
|
margin-left: 0.13rem; |
|
} |
|
} |
|
|
|
.active { |
|
background: url(~@/assets/img/active_bg.png); |
|
background-size: 100% 100%; |
|
} |
|
} |
|
} |
|
|
|
.center_bottom { |
|
width: 44%; |
|
height: 25%; |
|
position: absolute; |
|
left: 28%; |
|
bottom: 2%; |
|
z-index: 11; |
|
display: flex; |
|
|
|
.charts_box { |
|
width: 50%; |
|
height: 100%; |
|
|
|
.trend_box { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
.right_box { |
|
width: 24%; |
|
height: 80%; |
|
position: absolute; |
|
top: 14%; |
|
right: 2%; |
|
|
|
.top_title { |
|
width: 100%; |
|
height: 0.38rem; |
|
background: url(~@/assets/img/tit_bag.png); |
|
background-size: 100% 100%; |
|
display: flex; |
|
|
|
.left_tit { |
|
width: 100%; |
|
height: 100%; |
|
font-size: 0.1rem; |
|
color: #fff; |
|
display: flex; |
|
align-items: center; |
|
|
|
.txt_name { |
|
margin: 0 0.1rem 0 0.6rem; |
|
font-family: "FZSK"; |
|
font-size: 0.22rem; |
|
letter-spacing: 0px; |
|
color: #ffffff; |
|
} |
|
|
|
.name { |
|
font-family: "FZSK"; |
|
color: #ffffff; |
|
box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81); |
|
opacity: 0.6; |
|
margin-bottom: 0.1rem; |
|
} |
|
} |
|
|
|
.right_tit { |
|
display: flex; |
|
align-items: center; |
|
margin-right: 0.18rem; |
|
position: relative; |
|
|
|
.title_txt { |
|
width: 0.42rem; |
|
height: 0.32rem; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background: url(~@/assets/img/bg.png); |
|
background-size: 100% 100%; |
|
cursor: pointer; |
|
|
|
&.active { |
|
background: url(~@/assets/img/active_bg.png); |
|
background-size: 100% 100%; |
|
} |
|
} |
|
|
|
div { |
|
font-size: 0.18rem; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
|
|
.right_top { |
|
width: 100%; |
|
height: 34%; |
|
|
|
.pie_box { |
|
height: 83%; |
|
width: 50%; |
|
background: url(~@/assets/img/pie_bg.png); |
|
background-size: 100% 100%; |
|
background-position: 0% 10%; |
|
} |
|
|
|
} |
|
|
|
.right_cen { |
|
width: 100%; |
|
height: 33%; |
|
} |
|
.right_bottom { |
|
width: 100%; |
|
height: 33%; |
|
} |
|
} |
|
|
|
.map_wrap { |
|
position: absolute; |
|
left: 5.2rem; |
|
top: 28%; |
|
width: 8.82rem; |
|
height: 4.2rem; |
|
} |
|
} |
|
</style>
|
|
|