feat：对接消息相关接口
This commit is contained in:
zjc
@@ -26,11 +26,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="item-li" v-for="item in 4">
|
||||
<div class="title-3"><span>拥堵频次占比</span></div>
|
||||
<div class="chart-box">
|
||||
<v-chart class="chart" :option="option1" autoresize />
|
||||
<div class="chart">
|
||||
<div class="chart-item" v-for="item in 4" :key="item">
|
||||
<Title3 title="拥堵频次占比" />
|
||||
<div class="chart__inner">
|
||||
<spotRate :dataList="spotRateData" :total="8888" />
|
||||
<ul class="chart__legend">
|
||||
<li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
|
||||
<p class="dot" :style="{ background: colors[index] }" />
|
||||
<p class="name">{{ item.name }}</p>
|
||||
<p class="value">{{ item.value }}%</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,204 +45,87 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import spotRate from './spotRate.vue'
|
||||
import countup from 'vue-countup-v3'
|
||||
import * as echarts from 'echarts'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import Map from '@/components/Map/marker.vue'
|
||||
import VChart, { THEME_KEY } from 'vue-echarts'
|
||||
import { ref, provide } from 'vue'
|
||||
import { getSpotRateApi } from '@/api/workOrder.js'
|
||||
|
||||
provide(THEME_KEY, 'dark')
|
||||
const option1 = ref({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: fitChartSize(10),
|
||||
top: fitChartSize(70),
|
||||
bottom: fitChartSize(20),
|
||||
itemWidth: 5,
|
||||
itemHeight: 5,
|
||||
padding: [20, 10, 20, 10],
|
||||
// itemGap:15,
|
||||
show: true,
|
||||
lineStyle: {
|
||||
borderColor: '#fff',
|
||||
width: 5
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(16),
|
||||
lineHeight: 16,
|
||||
rich: {
|
||||
d: {
|
||||
width: '100%',
|
||||
borderWidth: 0.5,
|
||||
height: 5,
|
||||
backgroundColor: '1'
|
||||
},
|
||||
a: {
|
||||
width: fitChartSize(75),
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(16)
|
||||
// backgroundColor:'1'
|
||||
// color:'1',
|
||||
// borderColor:'#eee',
|
||||
// borderWidth:2
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (e) => {
|
||||
let ratio = 0
|
||||
let value = 0
|
||||
if (option1.value.series[0].data.length > 0) {
|
||||
option1.value.series[0].data.forEach((item) => {
|
||||
if (e == item.name) {
|
||||
ratio = ((item.value * 100) / 3799).toFixed(0)
|
||||
value = item.value
|
||||
}
|
||||
})
|
||||
}
|
||||
// return `${e} ${ratio}%
|
||||
let arr = ['{a|' + e + '}', '{b|' + ratio + '%}']
|
||||
return arr.join('')
|
||||
},
|
||||
itemStyle: {
|
||||
// color:'#fff'
|
||||
},
|
||||
backgroundColor: 'rgba(0,77,136,0.6)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
left: fitChartSize(-50),
|
||||
top: fitChartSize(40),
|
||||
width: fitChartSize(350),
|
||||
height: fitChartSize(350),
|
||||
// width:200,
|
||||
// height:200,
|
||||
radius: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
fontWeight: 'bold'
|
||||
// formatter: function (o) {
|
||||
// let data = o.data.value
|
||||
// return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
// },
|
||||
// rich: {
|
||||
|
||||
// value: {
|
||||
// color: '#fff',
|
||||
// fontSize: fitChartSize(24),
|
||||
// fontWeight: 'bold',
|
||||
// padding: [0, 0, 5, 0]
|
||||
// },
|
||||
// name: {
|
||||
// color: '#7894A8',
|
||||
// fontSize: fitChartSize(12)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: fitChartSize(16),
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
let data = o.data.value
|
||||
return `{value|${data}}` + '\n' + `{name|整改率}`
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#7894A8',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 200, name: '异常状况1' },
|
||||
{ value: 500, name: '异常状况2' },
|
||||
{ value: 234, name: '异常状况3' },
|
||||
{ value: 135, name: '异常状况4' },
|
||||
{ value: 100, name: '异常状况5' },
|
||||
{ value: 777, name: '异常状况6' },
|
||||
{ value: 888, name: '其他' }
|
||||
]
|
||||
}
|
||||
]
|
||||
const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
|
||||
let spotRateData = ref([])
|
||||
const getSpotRate = async () => {
|
||||
let res = await getSpotRateApi()
|
||||
spotRateData.value = res.data.data
|
||||
}
|
||||
onMounted(() => {
|
||||
getSpotRate()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.traffic-box-1 {
|
||||
width: vw(815);
|
||||
height: vh(975);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
margin-top: vh(100);
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
.list-item {
|
||||
.chart {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: vw(8);
|
||||
padding: vw(8);
|
||||
|
||||
&-item {
|
||||
width: vw(444);
|
||||
height: vh(420);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 vw(10);
|
||||
.item-li {
|
||||
width: vw(388);
|
||||
height: vh(420);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-3 {
|
||||
margin-left: vw(10);
|
||||
position: relative;
|
||||
width: vw(344);
|
||||
height: vh(12);
|
||||
margin-top: vh(20);
|
||||
background-image: url('@/assets/images/title-6.png');
|
||||
background-size: 100% 100%;
|
||||
&__legend {
|
||||
flex: 1;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
bottom: vh(4);
|
||||
left: vw(20);
|
||||
font-size: vw(15);
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
|
||||
color: transparent; /* 兼容其他浏览器 */
|
||||
}
|
||||
&-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: vh(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: vh(8);
|
||||
background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: vw(4);
|
||||
height: vh(40);
|
||||
background-color: #0096ff;
|
||||
}
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: vh(370);
|
||||
|
||||
.dot {
|
||||
width: vw(4);
|
||||
height: vw(4);
|
||||
margin: 0 vw(16);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
color: #ffffff;
|
||||
width: vw(130);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: vw(15);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-box-1 {
|
||||
position: relative;
|
||||
margin-top: vh(120);
|
||||
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
|
||||
|
||||
.title-num {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user