zhangzhang
11 months ago
7 changed files with 623 additions and 83 deletions
@ -0,0 +1,83 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
export const StatChartOption = { |
|||
width: "100%", |
|||
height: "100%", |
|||
color: ["#2AD9FD"], |
|||
xAxis: { |
|||
name: "日", |
|||
type: "category", |
|||
// boundaryGap: ["15%", "15%"],
|
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
align: "right", |
|||
fontSize: 15, |
|||
padding: [0, -15, 0, 0], |
|||
}, |
|||
boundaryGap: false, |
|||
data: ["1", "5", "10", "15", "20", "25", "30"], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#668598", |
|||
}, |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: 50, |
|||
top: 10, |
|||
// bottom: 30,
|
|||
// right: 30,
|
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
valueFormatter: (value) => { |
|||
return value + "%"; |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
max: 100, |
|||
type: "value", |
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "rgba(255,255,255, .3)", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
formatter: "{value} %", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [0, 90, 65, 90, 45, 36, 27], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "rgb(90, 227, 255, .9)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
@ -0,0 +1,373 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="智能调度" style="width: 100%"> |
|||
<div class="StatsDetail"> |
|||
<el-form ref="form" :model="form"><el-form/> |
|||
<el-table :data="data"> |
|||
<el-table-column prop="organizationName" label="路管驻点" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="difference" label="距离" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.difference }}公里</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="shiftsMap" label="人员"> |
|||
<template slot-scope="scope"> </template> |
|||
</el-table-column> |
|||
<el-table-column prop="vehiclesMap" label="车辆"> </el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|||
import Table from "@screen/components/Table.vue"; |
|||
import { selectTollStation } from "@/api/event/governanceAnalysis"; |
|||
import request from "@/utils/request"; |
|||
export default { |
|||
name: "StatsDetail", |
|||
components: { |
|||
Dialog, |
|||
InputSearch, |
|||
Table, |
|||
}, |
|||
model: { |
|||
prop: "visible", |
|||
event: "update:value", |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
data: Array, |
|||
}, |
|||
data() { |
|||
return { |
|||
num: 0, |
|||
tableData: [], |
|||
weatherNum: [], |
|||
startTime: "", |
|||
endTime: "", |
|||
pickerOptions: { |
|||
disabledDate(time) { |
|||
return time.getTime() > Date.now(); |
|||
}, |
|||
}, |
|||
searchType: 1, |
|||
controlType: 1, |
|||
facilityIds: [], |
|||
facilityTableData: [], |
|||
searchFormList: [ |
|||
{ |
|||
label: "查询条件:", |
|||
key: "searchType", |
|||
required: true, |
|||
isAlone: true, |
|||
type: "RadioGroup", |
|||
default: 1, |
|||
options: { |
|||
type: "circle", |
|||
options: [ |
|||
{ |
|||
key: 1, |
|||
label: "站点", |
|||
}, |
|||
{ |
|||
key: 2, |
|||
label: "原因", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "事件类型:", |
|||
key: "controlType", |
|||
required: true, |
|||
isAlone: true, |
|||
type: "RadioGroup", |
|||
visible: (data) => { |
|||
if (data.searchType == 2) { |
|||
return true; |
|||
} |
|||
}, |
|||
default: 1, |
|||
options: { |
|||
type: "circle", |
|||
options: [ |
|||
{ |
|||
key: 1, |
|||
label: "收费站封闭", |
|||
}, |
|||
{ |
|||
key: 2, |
|||
label: "收费站限行", |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: "选择站点:", |
|||
key: "facilityId", |
|||
required: true, |
|||
type: "Select", |
|||
options: { |
|||
multiple: true, |
|||
options: [], |
|||
}, |
|||
default: [], |
|||
visible: (data) => { |
|||
if (data.searchType == 1) { |
|||
return true; |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
label: "日期:", |
|||
key: "date", |
|||
required: true, |
|||
type: "datePicker", |
|||
default: "", |
|||
options: { |
|||
pickerOptions: { |
|||
disabledDate(time) { |
|||
return time.getTime() > Date.now(); |
|||
}, |
|||
}, |
|||
valueFormat: "yyyy-MM-dd", |
|||
type: "daterange", |
|||
}, |
|||
}, |
|||
], |
|||
queryParams: {}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit("update:value", val); |
|||
}, |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
getFacilityList() { |
|||
Promise.allSettled([ |
|||
// 查询收费站 |
|||
request({ |
|||
url: `/business/facility/query`, |
|||
method: "get", |
|||
}), |
|||
]).then((res) => { |
|||
if (res[0].status === "fulfilled" && res[0].value.code == 200) { |
|||
// this.searchFormList[2].options.options = res[0].value.data.map( |
|||
// (item) => ({ |
|||
// key: item.id, |
|||
// label: item.facilityName, |
|||
// }) |
|||
// ); |
|||
let dataList = []; |
|||
res[0].value.data.forEach((item) => { |
|||
if (item.facilityType == 1) { |
|||
dataList.push({ |
|||
key: item.id, |
|||
label: item.facilityName, |
|||
}); |
|||
} |
|||
}); |
|||
this.searchFormList[2].options.options = dataList; |
|||
this.facilityIds = res[0].value.data.map((item) => item.id); |
|||
this.searchFormList[2].default = dataList.map((item) => item.key); |
|||
console.log(56, this.searchFormList[2].default); |
|||
let currentMonth = moment().format("YYYY-MM"); |
|||
let currentDate = moment().format("YYYY-MM-DD"); |
|||
this.queryParams = { |
|||
searchType: 1, |
|||
facilityId: this.facilityIds, |
|||
date: [currentMonth + "-01", currentDate], |
|||
}; |
|||
this.searchFormList[3].default = [currentMonth + "-01", currentDate]; |
|||
this.getSelectTollStation(this.queryParams); |
|||
} |
|||
}); |
|||
}, |
|||
// handleResetForm(data) { |
|||
// this.getSelectTollStation(data); |
|||
// }, |
|||
handleSearch(data, value) { |
|||
console.log(888, data, value); |
|||
if (value == "reset") { |
|||
data = this.queryParams; |
|||
} |
|||
this.getSelectTollStation(data); |
|||
}, |
|||
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
if (this.searchType == 2) { |
|||
if (!row.causeTypeName) { |
|||
if (columnIndex === 0) { |
|||
return [1, 2]; |
|||
} else if (columnIndex === 1) { |
|||
return [0, 0]; |
|||
} |
|||
} |
|||
if (row.controlCauseName === "恶劣天气") { |
|||
if (columnIndex === 0) { |
|||
console.log(this.weatherNum.length); |
|||
if (rowIndex === 0) { |
|||
return [this.weatherNum.length, 1]; |
|||
} else if (rowIndex <= this.weatherNum.length) { |
|||
return [0, 0]; |
|||
} |
|||
// if (rowIndex === 2) { |
|||
// return [7, 1]; |
|||
// } |
|||
// else if (rowIndex === 3) { |
|||
// return [0, 0]; |
|||
// } else if (rowIndex === 4) { |
|||
// return [0, 0]; |
|||
// } |
|||
// else if (rowIndex === 5) { |
|||
// return [0, 0]; |
|||
// } |
|||
// else if (rowIndex === 6) { |
|||
// return [0, 0]; |
|||
// } |
|||
// else if (rowIndex === 7) { |
|||
// return [0, 0]; |
|||
// } |
|||
// else if (rowIndex === 8) { |
|||
// return [0, 0]; |
|||
// } |
|||
} |
|||
// this.weatherNum = 0 |
|||
} |
|||
} |
|||
}, |
|||
getSelectTollStation(data) { |
|||
let startTime = ""; |
|||
let endTime = ""; |
|||
if (data) { |
|||
startTime = data.date[0] + " 00:00:00"; |
|||
endTime = data.date[1] + " 23:59:59"; |
|||
} else { |
|||
startTime = new Date("2024-01-01 11:12:21"); |
|||
startTime = new Date("2024-01-26 11:12:36"); |
|||
} |
|||
|
|||
var formData = new FormData(); |
|||
this.searchType = data.searchType; |
|||
this.controlType = data.controlType; |
|||
if (data.searchType == 1) { |
|||
formData.append("facilityId", data.facilityId); |
|||
} else { |
|||
formData.append("controlType", data.controlType); |
|||
} |
|||
formData.append("searchType", data.searchType); |
|||
formData.append("startTime", startTime); |
|||
formData.append("endTime", endTime); |
|||
let weatherData = []; |
|||
let otherData = []; |
|||
selectTollStation(formData).then((res) => { |
|||
if (data.searchType == 2) { |
|||
this.weatherNum = []; |
|||
res.data.forEach((item) => { |
|||
if (item.causeTypeName) { |
|||
this.weatherNum.push(item.causeTypeName); |
|||
weatherData.push(item); |
|||
} else { |
|||
otherData.push(item); |
|||
} |
|||
}); |
|||
this.tableData = weatherData.concat(otherData); |
|||
} else { |
|||
res.data.forEach((item) => { |
|||
item.total = |
|||
item.facilityClose + |
|||
item.facilityRestriction + |
|||
item.facilityInterval; |
|||
}); |
|||
this.facilityTableData = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getFacilityList(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dialog { |
|||
min-height: 800px; |
|||
} |
|||
|
|||
.search { |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
} |
|||
|
|||
::v-deep .is-scrolling-none { |
|||
background: #0b6581; |
|||
} |
|||
|
|||
::v-deep .el-table__empty-text { |
|||
color: #3ae0f8; |
|||
} |
|||
|
|||
.StatsDetail { |
|||
// height: 770px; |
|||
margin: 20px 0; |
|||
width: 100%; |
|||
display: flex; |
|||
gap: 5px; |
|||
} |
|||
|
|||
.el-table { |
|||
border: 1px solid #07aec6; |
|||
background: #0b6581; |
|||
} |
|||
|
|||
::v-deep .el-table .el-table__header-wrapper th, |
|||
.el-table .el-table__fixed-header-wrapper th { |
|||
background: #0b6581; |
|||
border: 1px solid #07aec6; |
|||
} |
|||
|
|||
::v-deep .el-table th.el-table__cell > .cell { |
|||
color: #3de8ff; |
|||
} |
|||
|
|||
::v-deep .el-table thead.is-group th.el-table__cell { |
|||
background: #0b6581; |
|||
border: 1px solid #07aec6; |
|||
} |
|||
|
|||
// ::v-deep .el-table th.el-table__cell.is-leaf, |
|||
::v-deep .el-table td.el-table__cell { |
|||
border: 1px solid #07aec6; |
|||
background: #1b586d; |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-table tr { |
|||
border: 1px solid #07aec6; |
|||
background-color: #0b6581; |
|||
} |
|||
|
|||
::v-deep |
|||
.el-table--enable-row-hover |
|||
.el-table__body |
|||
tr:hover |
|||
> td.el-table__cell { |
|||
background: #1b586d; |
|||
border: 1px solid #07aec6; |
|||
} |
|||
|
|||
::v-deep .el-table::before, |
|||
.el-table--group::after, |
|||
.el-table--border::after { |
|||
background: none; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue