fix：大屏巡查里程新增时间维度，首页增加时间维度
This commit is contained in:
parent
55a7b3ad6d
commit
423f2ff262
@ -32,20 +32,32 @@
|
||||
@close="screenCancel"
|
||||
>
|
||||
<div class="patrol-content">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
@change="changeSelect"
|
||||
clearable
|
||||
placeholder="请选择分公司"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="patrol-select">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
@change="changeSelect"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
<el-radio-group
|
||||
v-model="checkCycle"
|
||||
class="screen-checkBox"
|
||||
size="mini"
|
||||
@change="changCycle"
|
||||
>
|
||||
<el-radio-button label="day">今日</el-radio-button>
|
||||
<el-radio-button label="nouth">本月</el-radio-button>
|
||||
<el-radio-button label="year">本年</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div ref="patrolChart" class="dialog-div"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@ -59,6 +71,8 @@ export default {
|
||||
name: "PatrolOrder",
|
||||
data() {
|
||||
return {
|
||||
// 时间选择
|
||||
checkCycle: "day",
|
||||
// 累计里程数据
|
||||
patrolObject: {},
|
||||
// 弹窗显隐控制
|
||||
@ -75,7 +89,11 @@ export default {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取巡查里程数据 */
|
||||
/**
|
||||
* @description: 获取巡查里程数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getData() {
|
||||
getMileage().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -84,7 +102,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 累计里程修改 */
|
||||
/**
|
||||
* @description: 累计里程修改
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
formatNumber(num) {
|
||||
if (num >= 100000000) {
|
||||
// 超过1亿显示 x.xx亿
|
||||
@ -98,7 +120,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 累计时长修改 */
|
||||
/**
|
||||
* @description: 累计时长修改
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
formatTime(num) {
|
||||
if (num >= 100000000) {
|
||||
// 超过1亿显示 x.xx亿
|
||||
@ -112,13 +138,21 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 打开弹窗方法 */
|
||||
/**
|
||||
* @description: 打开弹窗方法
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
showDetail() {
|
||||
this.showDialogVisible = true;
|
||||
this.getChartData();
|
||||
},
|
||||
|
||||
/* 选择框绑定值修改 */
|
||||
/**
|
||||
* @description: 选择框绑定值修改
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
changeSelect(value) {
|
||||
this.echartData = this.echartList.filter((item) => {
|
||||
if (value) {
|
||||
@ -131,9 +165,22 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
/**
|
||||
* @description: 时间选择修改
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
changCycle() {
|
||||
this.getChartData();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 请求弹窗数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getChartData() {
|
||||
getMileageDetail().then(({ code, data }) => {
|
||||
getMileageDetail({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.companyList = data.map((item, index) => {
|
||||
return {
|
||||
@ -150,7 +197,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制echart图 */
|
||||
/**
|
||||
* @description: 绘制echart图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawChart() {
|
||||
if (this.$refs.patrolChart) {
|
||||
const xData = this.echartData.map((item) => {
|
||||
@ -313,7 +364,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 弹窗关闭 */
|
||||
/**
|
||||
* @description: 弹窗关闭
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
screenCancel() {
|
||||
this.showDialogVisible = false;
|
||||
},
|
||||
@ -357,54 +412,73 @@ export default {
|
||||
height: 30rem;
|
||||
padding: 0 2rem;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 12rem;
|
||||
.patrol-select {
|
||||
width: 100%;
|
||||
height: 7%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-input .el-select__caret {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
::v-deep .el-select {
|
||||
width: 12rem;
|
||||
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
.el-input .el-select__caret {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item {
|
||||
color: #aaabb8;
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item {
|
||||
color: #aaabb8;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
.el-select-dropdown__list {
|
||||
background-color: #102649;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
background-color: #102649;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .screen-checkBox {
|
||||
.el-radio-button__inner {
|
||||
background-color: transparent;
|
||||
padding: 0.3rem;
|
||||
border-color: #1cb6ff;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
color: #1cb6ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 93%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,14 @@
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">日常巡查</div>
|
||||
<div class="title">
|
||||
<span>日常巡查</span>
|
||||
<el-radio-group v-model="checkCycle" size="mini" @change="getData">
|
||||
<el-radio-button label="day">今日</el-radio-button>
|
||||
<el-radio-button label="nouth">本月</el-radio-button>
|
||||
<el-radio-button label="year">本年</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="daily-content">
|
||||
<div class="left">
|
||||
<div class="left-div">
|
||||
@ -43,6 +50,8 @@ export default {
|
||||
name: "DailyIndex",
|
||||
data() {
|
||||
return {
|
||||
// 巡查周期
|
||||
checkCycle: "day",
|
||||
// 巡查里程
|
||||
mileage: 0,
|
||||
// 覆盖道路数
|
||||
@ -55,7 +64,11 @@ export default {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 处理数据 */
|
||||
/**
|
||||
* @description: 处理数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
formatNumber(num) {
|
||||
if (num >= 100000000) {
|
||||
// 超过1亿显示 x.xx亿
|
||||
@ -69,16 +82,19 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取数据 */
|
||||
/**
|
||||
* @description: 获取数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getData() {
|
||||
getTaskToday().then(({ code, data }) => {
|
||||
getTaskToday({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mileage = data.xclc;
|
||||
this.roadNum = data.fgdlts;
|
||||
this.diseaseChart = data.xclcbhqs;
|
||||
this.roadChart = data.dlxzbhfb;
|
||||
this.$nextTick(() => {
|
||||
// this.drawLeftChart();
|
||||
this.drawTrendChart();
|
||||
this.drawDistributionChart();
|
||||
});
|
||||
@ -86,7 +102,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制病害趋势柱状图 */
|
||||
/**
|
||||
* @description: 绘制病害趋势柱状图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawTrendChart() {
|
||||
const xData = this.diseaseChart.map((item) => {
|
||||
return item.label;
|
||||
@ -246,7 +266,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制病害分布柱状图 */
|
||||
/**
|
||||
* @description: 绘制病害分布柱状图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawDistributionChart() {
|
||||
const xData = this.roadChart.map((item) => {
|
||||
return item.label;
|
||||
@ -402,87 +426,6 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制覆盖率饼图 */
|
||||
drawLeftChart() {
|
||||
if (this.$refs.rateChart) {
|
||||
const chart = echarts.init(this.$refs.rateChart);
|
||||
const current = 45;
|
||||
chart.setOption({
|
||||
// color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "80%",
|
||||
x: "center",
|
||||
y: "52%",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#444",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "覆盖率",
|
||||
x: "center",
|
||||
y: "10%",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
center: ["50%", "60%"],
|
||||
radius: ["40%", "58%"],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: "category",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [80],
|
||||
name: "",
|
||||
type: "bar",
|
||||
roundCap: true,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "#BDD5F4",
|
||||
},
|
||||
coordinateSystem: "polar",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#005DCF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00CCFF",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -498,11 +441,15 @@ export default {
|
||||
height: 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 3rem;
|
||||
font-family: "DouYu";
|
||||
background: url("../../assets/index/div-title.png") no-repeat;
|
||||
background-size: 5%;
|
||||
background-position: 0 30%;
|
||||
|
||||
span {
|
||||
font-family: "DouYu";
|
||||
}
|
||||
}
|
||||
|
||||
.daily-content {
|
||||
|
||||
@ -9,7 +9,14 @@
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">病害识别</div>
|
||||
<div class="title">
|
||||
<span>病害识别</span>
|
||||
<el-radio-group v-model="checkCycle" size="mini" @change="changCycle">
|
||||
<el-radio-button label="day">今日</el-radio-button>
|
||||
<el-radio-button label="nouth">本月</el-radio-button>
|
||||
<el-radio-button label="year">本年</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="disease-content">
|
||||
<div class="left">
|
||||
<div>
|
||||
@ -67,10 +74,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 下拉框数据绑定
|
||||
diseaseType: "",
|
||||
// 下拉框数据
|
||||
diseaseOptions: [],
|
||||
// 巡查周期
|
||||
checkCycle: "day",
|
||||
// 病害总数
|
||||
total: 0,
|
||||
// 新增病害数
|
||||
@ -114,18 +119,27 @@ export default {
|
||||
this.getBottomData();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 切换巡查周期事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
changCycle() {
|
||||
this.getChartData();
|
||||
this.getBottomData();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取上部分echart图数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getChartData() {
|
||||
getDefectLog().then(({ code, data }) => {
|
||||
getDefectLog({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.statisticsData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawStatisticsChart();
|
||||
// this.drawDistributionChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -137,7 +151,7 @@ export default {
|
||||
* @return {*}
|
||||
*/
|
||||
getBottomData() {
|
||||
getTotalList().then(({ code, data }) => {
|
||||
getTotalList({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.total = data.total;
|
||||
this.newTotal = data.today;
|
||||
@ -403,11 +417,15 @@ export default {
|
||||
height: 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 3rem;
|
||||
font-family: "DouYu";
|
||||
background: url("../../assets/index/div-title.png") no-repeat;
|
||||
background-size: 5%;
|
||||
background-position: 0 30%;
|
||||
|
||||
span {
|
||||
font-family: "DouYu";
|
||||
}
|
||||
}
|
||||
|
||||
.disease-content {
|
||||
|
||||
@ -10,7 +10,14 @@
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">公路资产</div>
|
||||
<div class="title">
|
||||
<span>公路资产</span>
|
||||
<el-radio-group v-model="checkCycle" size="mini" @change="changCycle">
|
||||
<el-radio-button label="day">今日</el-radio-button>
|
||||
<el-radio-button label="nouth">本月</el-radio-button>
|
||||
<el-radio-button label="year">本年</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="top-div">
|
||||
<a>累计公路资产总数</a>
|
||||
<span v-for="(item, index) in roadNum" :key="`top-span-${index}`">{{
|
||||
@ -45,6 +52,8 @@ export default {
|
||||
name: "RoadIndex",
|
||||
data() {
|
||||
return {
|
||||
// 巡查周期
|
||||
checkCycle: "day",
|
||||
// 累计公路资产总数
|
||||
roadNum: [],
|
||||
// 中间循环数据
|
||||
@ -58,9 +67,23 @@ export default {
|
||||
this.getBottomData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取顶端数据 */
|
||||
/**
|
||||
* @description: 切换巡查周期事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
changCycle() {
|
||||
this.getTopData();
|
||||
this.getBottomData();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取顶端数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getTopData() {
|
||||
getEquipment().then(({ code, data }) => {
|
||||
getEquipment({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadNum = String(data.count).split("");
|
||||
this.middleList = data.sacle;
|
||||
@ -68,9 +91,13 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取底部echart数据 */
|
||||
/**
|
||||
* @description: 获取底部echart数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getBottomData() {
|
||||
getEquipmentLog().then(({ code, data }) => {
|
||||
getEquipmentLog({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadChartData = data;
|
||||
this.$nextTick(() => {
|
||||
@ -80,7 +107,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制echart图 */
|
||||
/**
|
||||
* @description: 绘制echart图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawRoadChart() {
|
||||
if (this.$refs.roadChart) {
|
||||
const xData = this.roadChartData.map((item) => {
|
||||
@ -247,10 +278,14 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 3rem;
|
||||
font-family: "DouYu";
|
||||
justify-content: space-between;
|
||||
background: url("../../assets/index/div-title.png") no-repeat;
|
||||
background-size: 5%;
|
||||
background-position: 0 30%;
|
||||
|
||||
span {
|
||||
font-family: "DouYu";
|
||||
}
|
||||
}
|
||||
|
||||
.top-div {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
* @Description: 系统首页
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container" v-loading="loading">
|
||||
<fssm-scroll :showBar="false">
|
||||
<div class="top-content">
|
||||
<div
|
||||
@ -64,6 +64,8 @@ export default {
|
||||
return {
|
||||
// 顶栏循环数据
|
||||
topList: [],
|
||||
// 加载状态
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -72,6 +74,7 @@ export default {
|
||||
methods: {
|
||||
/* 获取顶栏数据 */
|
||||
getTopData() {
|
||||
this.loading = true;
|
||||
getTotalCount().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.topList = [
|
||||
@ -81,6 +84,8 @@ export default {
|
||||
{ name: "绿化待处理问题数", value: data.green, unit: "个" },
|
||||
];
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user