|
|
@@ -10,6 +10,7 @@
|
|
|
:width="662"
|
|
|
:height="400"
|
|
|
:name="item.name"
|
|
|
+ style="position: relative;"
|
|
|
>
|
|
|
<div
|
|
|
v-if="item.icon"
|
|
|
@@ -17,7 +18,7 @@
|
|
|
>
|
|
|
<Icon
|
|
|
:name="item.icon"
|
|
|
- :size="96"
|
|
|
+ :size="81"
|
|
|
style="margin-right: 20px;"
|
|
|
/>
|
|
|
<div
|
|
|
@@ -26,9 +27,25 @@
|
|
|
>
|
|
|
{{ itm }}
|
|
|
</div>
|
|
|
- 辆
|
|
|
+ <div>辆</div>
|
|
|
</div>
|
|
|
- <!-- <Echart v-else :option="item.option" /> -->
|
|
|
+ <div
|
|
|
+ v-if="item.btns"
|
|
|
+ class="dateChange"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(itm, index) in item.btns"
|
|
|
+ :key="index"
|
|
|
+ :class="{ active: index === item.checkId }"
|
|
|
+ @click="changeFn(index, item)"
|
|
|
+ >
|
|
|
+ {{ itm }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Echart
|
|
|
+ v-if="item.option"
|
|
|
+ :option="item.option"
|
|
|
+ />
|
|
|
</Box>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -42,7 +59,18 @@
|
|
|
:columns="leftContent.bottom.head"
|
|
|
:data="leftContent.bottom.body"
|
|
|
:bordered="false"
|
|
|
+ single-column
|
|
|
+ striped
|
|
|
+ size="large"
|
|
|
/>
|
|
|
+ <div class="left-bottom">
|
|
|
+ <n-pagination
|
|
|
+ v-model:page="leftContent.bottom.page.num"
|
|
|
+ :page-size="leftContent.bottom.page.size"
|
|
|
+ :item-count="leftContent.bottom.page.total"
|
|
|
+ size="large"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</Box>
|
|
|
</template>
|
|
|
<template #right>
|
|
|
@@ -93,6 +121,7 @@
|
|
|
import Layout from '@/components/layout.vue'
|
|
|
import Box from '@/components/box.vue'
|
|
|
import { ref } from 'vue'
|
|
|
+import Echart from '@/components/chart.vue'
|
|
|
|
|
|
const leftContent = ref({
|
|
|
top: [
|
|
|
@@ -103,15 +132,215 @@ const leftContent = ref({
|
|
|
},
|
|
|
{
|
|
|
name: '维修保养统计',
|
|
|
- option: ''
|
|
|
+ option: {
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ right: 30,
|
|
|
+ left: 50,
|
|
|
+ bottom: '25%',
|
|
|
+ top: '20%'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ left: 'center',
|
|
|
+ bottom: 30,
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#646464',
|
|
|
+ fontSize: 18
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [ {
|
|
|
+ name: '日期',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: 'white',
|
|
|
+ padding: [ 20, 0 ]
|
|
|
+ },
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ // formatter: (value: number) => format( 1'时')
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: true,
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ data: [ '3月26日', '3月27日', '3月28日', '3月29日', '3月30日', '4月1日' ]
|
|
|
+ } ],
|
|
|
+ yAxis: [ {
|
|
|
+ name: '维保量/台',
|
|
|
+ nameLocation: 'center',
|
|
|
+ nameGap: 50,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 18
|
|
|
+ },
|
|
|
+ padding: 5,
|
|
|
+ // max: 1000,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#A1A7B3'
|
|
|
+ // type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '维保车辆',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: '#4293FD',
|
|
|
+ lineStyle: {
|
|
|
+ // color: '#4293FD',
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [ 120, 132, 101, 134, 90, 230 ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataZoom: {
|
|
|
+ type: 'slider',
|
|
|
+ height: 20,
|
|
|
+ bottom: 8,
|
|
|
+ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
|
|
+ handleSize: '100%',
|
|
|
+ handleStyle: {
|
|
|
+ color: '#409eff'
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#666'
|
|
|
+ },
|
|
|
+ fillerColor: 'rgba(255,255,255,0.2)',
|
|
|
+ borderColor: 'rgba(64,158,225,0.3)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ btns: [ '总', '年', '月' ],
|
|
|
+ checkId: 0
|
|
|
},
|
|
|
{
|
|
|
name: '车辆运营状态分布',
|
|
|
- option: ''
|
|
|
+ option: {
|
|
|
+ title: {
|
|
|
+ text: '总166', // 图标内容文本
|
|
|
+ left: 'center', // 图标内容水平居中
|
|
|
+ top: 'center', // 图标内容垂直居中
|
|
|
+ // 文本样式
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff', // 图标内容文字颜色
|
|
|
+ fontSize: '18px', // 图标内容文字大小
|
|
|
+ fontWeight: 'normal'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ // 图表图例
|
|
|
+ legend: {
|
|
|
+ type: 'scroll',
|
|
|
+ orient: 'horizontal', // 图例排列方向
|
|
|
+ icon: 'circle', // 图例样式为圆形
|
|
|
+ itemWidth: 10, // 图例图形的宽度
|
|
|
+ itemHeight: 16, // 图例图形的高度
|
|
|
+ itemGap: 10, // 图例项之间的间隔
|
|
|
+ left: 'center', // 图例距离容器右侧的距离
|
|
|
+ bottom: 0, // 图例垂直居中
|
|
|
+ textStyle: {
|
|
|
+ color: 'white', // 图例文字颜色
|
|
|
+ fontSize: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie', // 图表类型为饼图
|
|
|
+ radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
|
|
|
+ avoidLabelOverlap: true, // 是否启用防止标签重叠策略
|
|
|
+ showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
|
|
|
+ label: {
|
|
|
+ formatter: '{b}\n{d}%',
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { name: '运营中', value: 30619 },
|
|
|
+ { name: '维保中', value: 5921 },
|
|
|
+ { name: '报废', value: 1153 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
name: '车辆维保状态分别',
|
|
|
- option: ''
|
|
|
+ option: {
|
|
|
+ title: {
|
|
|
+ text: '总166', // 图标内容文本
|
|
|
+ left: 'center', // 图标内容水平居中
|
|
|
+ top: 'center', // 图标内容垂直居中
|
|
|
+ // 文本样式
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff', // 图标内容文字颜色
|
|
|
+ fontSize: '18px', // 图标内容文字大小
|
|
|
+ fontWeight: 'normal'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ // 图表图例
|
|
|
+ legend: {
|
|
|
+ type: 'scroll',
|
|
|
+ orient: 'horizontal', // 图例排列方向
|
|
|
+ icon: 'circle', // 图例样式为圆形
|
|
|
+ itemWidth: 10, // 图例图形的宽度
|
|
|
+ itemHeight: 16, // 图例图形的高度
|
|
|
+ itemGap: 10, // 图例项之间的间隔
|
|
|
+ left: 'center', // 图例距离容器右侧的距离
|
|
|
+ bottom: 0, // 图例垂直居中
|
|
|
+ textStyle: {
|
|
|
+ color: 'white', // 图例文字颜色
|
|
|
+ fontSize: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie', // 图表类型为饼图
|
|
|
+ radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
|
|
|
+ avoidLabelOverlap: true, // 是否启用防止标签重叠策略
|
|
|
+ showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
|
|
|
+ label: {
|
|
|
+ formatter: '{b}\n{d}%',
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { name: '隔日留交车辆', value: 30619 },
|
|
|
+ { name: '保养中车辆', value: 5921 },
|
|
|
+ { name: '维修中车辆', value: 1153 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
],
|
|
|
bottom: {
|
|
|
@@ -143,7 +372,12 @@ const leftContent = ref({
|
|
|
{
|
|
|
num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ page: {
|
|
|
+ size: 5,
|
|
|
+ total: 10,
|
|
|
+ num: 1
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@@ -158,16 +392,86 @@ const rightContent = ref({
|
|
|
{ name: '维保执行情况', option: '' }
|
|
|
]
|
|
|
})
|
|
|
+
|
|
|
+function changeFn(id: number, item: any) {
|
|
|
+ item.checkId = id
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.left-top {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &-count {
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
+ font-family: 'Impact Normal', 'Impact', sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ font-style: normal;
|
|
|
+ text-align: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &>div:not(:last-child) {
|
|
|
+ width: 84px;
|
|
|
+ height: 110px;
|
|
|
+ background-color: rgba(33, 133, 232, 0.298039215686275);
|
|
|
+ border: solid 2px rgba(33, 133, 232, 1);
|
|
|
+ border-radius: 10px;
|
|
|
+ line-height: 110px;
|
|
|
+ font-size: 70px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &>div:last-child {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #80FFFF;
|
|
|
+ height: 110px;
|
|
|
+ line-height: 145px;
|
|
|
+ }
|
|
|
}
|
|
|
- .right-bottom,
|
|
|
-.right-top{
|
|
|
+
|
|
|
+ .dateChange {
|
|
|
+ position: absolute;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 30px;
|
|
|
+ border: solid 1px #2185E8;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ top: 50px;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &>div {
|
|
|
+ width: 90px;
|
|
|
+ color: white;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 30px;
|
|
|
+
|
|
|
+ &:not(:first-child) {
|
|
|
+ border-left: solid 1px #2185E8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: #2185e860;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.left-bottom{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.right-bottom,
|
|
|
+.right-top {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
