mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

wangqin
qingzhengli 1 year ago
parent
ec4fde8ec0 067ad2db33
commit
8cc82c76ab
11 changed files with 637 additions and 409 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 817
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue
  2. 137
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue
  3. 1
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
  4. 1
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
  5. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
  6. 8
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
  7. 20
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
  8. 5
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
  9. 10
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
  10. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
  11. 23
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js

817
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue
View File

@ -1,393 +1,552 @@
<template> <template>
<Dialog v-model="modelVisible" title="收费站管制统计" style="width: 100%;"> <Dialog v-model="modelVisible" title="收费站管制统计" style="width: 100%">
<div class="search"> <div class="search">
<InputSearch :formList="searchFormList" @handleSearch="handleSearch" style="width: 502px;" /> <InputSearch
</div> :formList="searchFormList"
@handleSearch="handleSearch"
<div class="StatsDetail"> style="width: 502px"
<el-table key="table1" v-if="searchType == 2" :data="tableData" style="width: 100%" />
:span-method="arraySpanMethod"> </div>
<el-table-column prop="controlCauseName" label="封闭原因" width="150" align="center">
</el-table-column> <div class="StatsDetail">
<el-table-column prop="causeTypeName" label="" align="center"> <el-table
</el-table-column> key="table1"
<el-table-column label="封闭站次" align="center"> v-if="searchType == 2 && controlType == 1"
<el-table-column label="目标时段" width="120" align="center"> :data="tableData"
<el-table-column prop="num" label="站次" width="120" align="center"> style="width: 100%"
</el-table-column> :span-method="arraySpanMethod"
<el-table-column prop="numRatio" label="占比（%）" width="120" align="center"> >
</el-table-column> <el-table-column
</el-table-column> prop="controlCauseName"
<el-table-column label="去年同期时间段" align="center"> label="封闭原因"
<el-table-column prop="lastYearNum" label="站次" width="120" align="center"> width="150"
</el-table-column> align="center"
<el-table-column prop="lastYearNumRatio" label="占比（%）" width="120" align="center"> >
</el-table-column> </el-table-column>
</el-table-column> <el-table-column prop="causeTypeName" label="" align="center">
<el-table-column prop="yearNumRatio" label="同比（%）" align="center"></el-table-column> </el-table-column>
</el-table-column> <el-table-column label="封闭站次" align="center">
<el-table-column label="封闭时长" align="center"> <el-table-column label="目标时段" width="120" align="center">
<el-table-column label="目标时段" width="120" align="center"> <el-table-column prop="num" label="站次" width="120" align="center">
<el-table-column prop="minuteTime" label="时长（分钟）" width="120" align="center"> </el-table-column>
</el-table-column> <el-table-column
<el-table-column prop="timeRatio" label="占比（%）" width="120" align="center"> prop="numRatio"
</el-table-column> label="占比（%）"
</el-table-column> width="120"
<el-table-column label="去年同期时间段" align="center"> align="center"
<el-table-column prop="lastYearTime" label="时长（分钟）" width="120" align="center"> >
</el-table-column> </el-table-column>
<el-table-column prop="lastYearTimeRatio" label="占比（%）" width="120" align="center"> </el-table-column>
</el-table-column> <el-table-column label="去年同期时间段" align="center">
</el-table-column> <el-table-column
<el-table-column prop="yearTimeRatio" label="同比（%）" align="center"></el-table-column> prop="lastYearNum"
</el-table-column> label="站次"
</el-table> width="120"
<el-table key="table2" v-else :data="facilityTableData" style="width: 100%"> align="center"
<el-table-column prop="facilityName" label="" width="150" align="center"> >
</el-table-column> </el-table-column>
<el-table-column prop="facilityClose" label="封闭" align="center"> <el-table-column
</el-table-column> prop="lastYearNumRatio"
<el-table-column prop="facilityRestriction" label="限行" align="center"> label="占比（%）"
</el-table-column> width="120"
<el-table-column prop="facilityInterval" label="间隔放行" align="center"> align="center"
</el-table-column> >
<el-table-column prop="total" label="合计" align="center"> </el-table-column>
</el-table-column> </el-table-column>
</el-table> <el-table-column
prop="yearNumRatio"
</div> label="同比（%）"
</Dialog> align="center"
></el-table-column>
</el-table-column>
<el-table-column label="封闭时长" align="center">
<el-table-column label="目标时段" width="120" align="center">
<el-table-column
prop="minuteTime"
label="时长（分钟）"
width="120"
align="center"
>
</el-table-column>
<el-table-column
prop="timeRatio"
label="占比（%）"
width="120"
align="center"
>
</el-table-column>
</el-table-column>
<el-table-column label="去年同期时间段" align="center">
<el-table-column
prop="lastYearTime"
label="时长（分钟）"
width="120"
align="center"
>
</el-table-column>
<el-table-column
prop="lastYearTimeRatio"
label="占比（%）"
width="120"
align="center"
>
</el-table-column>
</el-table-column>
<el-table-column
prop="yearTimeRatio"
label="同比（%）"
align="center"
></el-table-column>
</el-table-column>
</el-table>
<el-table
key="table2"
v-else-if="searchType == 2 && controlType == 2"
:data="tableData"
style="width: 100%"
:span-method="arraySpanMethod"
>
<el-table-column
prop="controlCauseName"
label="限行原因"
width="150"
align="center"
>
</el-table-column>
<el-table-column prop="causeTypeName" label="" align="center">
</el-table-column>
<el-table-column label="限行站次" align="center">
<el-table-column label="目标时段" width="120" align="center">
<el-table-column prop="num" label="站次" width="120" align="center">
</el-table-column>
<el-table-column
prop="numRatio"
label="占比（%）"
width="120"
align="center"
>
</el-table-column>
</el-table-column>
<el-table-column label="去年同期时间段" align="center">
<el-table-column
prop="lastYearNum"
label="站次"
width="120"
align="center"
>
</el-table-column>
<el-table-column
prop="lastYearNumRatio"
label="占比（%）"
width="120"
align="center"
>
</el-table-column>
</el-table-column>
<el-table-column
prop="yearNumRatio"
label="同比（%）"
align="center"
></el-table-column>
</el-table-column>
<el-table-column label="限行时长" align="center">
<el-table-column label="目标时段" width="120" align="center">
<el-table-column
prop="minuteTime"
label="时长（分钟）"
width="120"
align="center"
>
</el-table-column>
<el-table-column
prop="timeRatio"
label="占比（%）"
width="120"
align="center"
>
</el-table-column>
</el-table-column>
<el-table-column label="去年同期时间段" align="center">
<el-table-column
prop="lastYearTime"
label="时长（分钟）"
width="120"
align="center"
>
</el-table-column>
<el-table-column
prop="lastYearTimeRatio"
label="占比（%）"
width="120"
align="center"
>
</el-table-column>
</el-table-column>
<el-table-column
prop="yearTimeRatio"
label="同比（%）"
align="center"
></el-table-column>
</el-table-column>
</el-table>
<el-table
key="table3"
v-else
show-summary
:data="facilityTableData"
style="width: 100%"
>
<el-table-column
prop="facilityName"
label=""
width="150"
align="center"
>
</el-table-column>
<el-table-column prop="facilityClose" label="封闭" align="center">
</el-table-column>
<el-table-column prop="facilityRestriction" label="限行" align="center">
</el-table-column>
<el-table-column
prop="facilityInterval"
label="间隔放行"
align="center"
>
</el-table-column>
<el-table-column prop="total" label="合计" align="center">
</el-table-column>
</el-table>
</div>
</Dialog>
</template> </template>
<script> <script>
import Dialog from "@screen/components/Dialog/index"; import Dialog from "@screen/components/Dialog/index";
import InputSearch from '@screen/components/InputSearch/index.vue'; import InputSearch from "@screen/components/InputSearch/index.vue";
import Table from "@screen/components/Table.vue"; import Table from "@screen/components/Table.vue";
import { selectTollStation } from "@/api/event/governanceAnalysis" import { selectTollStation } from "@/api/event/governanceAnalysis";
import options from "../assets/charts"; import options from "../assets/charts";
import request from "@/utils/request"; import request from "@/utils/request";
export default { export default {
name: 'StatsDetail', name: "StatsDetail",
components: { components: {
Dialog, Dialog,
InputSearch, InputSearch,
Table Table,
}, },
model: { model: {
prop: 'visible', prop: "visible",
event: 'update:value' event: "update:value",
}, },
props: { props: {
visible: Boolean visible: Boolean,
}, },
data() { data() {
return { return {
num: 0, num: 0,
tableData: [], tableData: [],
weatherNum: [], weatherNum: [],
startTime: "", startTime: "",
endTime: "", 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: [],
},
visible: (data) => {
if (data.searchType == 1) {
return true;
}
},
},
{
label: "日期:",
key: "date",
required: true,
type: "datePicker",
options: {
pickerOptions: { pickerOptions: {
disabledDate(time) { disabledDate(time) {
return time.getTime() > Date.now(); return time.getTime() > Date.now();
}, },
}, },
valueFormat: "yyyy-MM-dd",
type: "daterange",
},
},
],
};
},
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,
})
);
this.facilityIds = res[0].value.data.map((item) => item.id);
// this.searchFormList[2].default = res[0].value.data.map(item => item.id)
let currentMonth = moment().format("YYYY-MM");
let currentDate = moment().format("YYYY-MM-DD");
let data = {
searchType: 1, searchType: 1,
facilityIds: [], facilityId: this.facilityIds,
facilityTableData: [], date: [currentMonth + "-01", currentDate],
searchFormList: [ };
{ this.getSelectTollStation(data);
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: []
},
visible: data => {
if (data.searchType == 1) {
return true
}
},
},
{
label: "日期:",
key: "date",
required: true,
type: "datePicker",
options: {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
valueFormat: "yyyy-MM-dd",
type: "daterange"
}
},
],
} }
});
}, },
computed: { handleSearch(data) {
modelVisible: { this.getSelectTollStation(data);
get() { },
return this.visible; arraySpanMethod({ row, column, rowIndex, columnIndex }) {
}, if (this.searchType == 2) {
set(val) { if (!row.causeTypeName) {
this.$emit('update:value', val) 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) {
methods: { let startTime = "";
getFacilityList() { let endTime = "";
Promise.allSettled([ if (data) {
// 查询收费站 startTime = data.date[0] + " 00:00:00";
request({ endTime = data.date[1] + " 23:59:59";
url: `/business/facility/query`, } else {
method: "get", startTime = new Date("2024-01-01 11:12:21");
}), startTime = new Date("2024-01-26 11:12:36");
]) }
.then((res) => {
if (res[0].status === 'fulfilled' && res[0].value.code == 200) { var formData = new FormData();
this.searchFormList[2].options.options = res[0].value.data.map(item => ({ this.searchType = data.searchType;
key: item.id, this.controlType = data.controlType;
label: item.facilityName, if (data.searchType == 1) {
})) formData.append("facilityId", data.facilityId);
this.facilityIds = res[0].value.data.map(item => item.id) } else {
// this.searchFormList[2].default = res[0].value.data.map(item => item.id) formData.append("controlType", data.controlType);
}
let date = moment().format('YYYY-MM-DD') formData.append("searchType", data.searchType);
let data = { formData.append("startTime", startTime);
searchType: 1, formData.append("endTime", endTime);
facilityId: this.facilityIds, let weatherData = [];
date: [date + " 00:00:00", date + " 23:59:59"] let otherData = [];
} selectTollStation(formData).then((res) => {
this.getSelectTollStation(data) if (data.searchType == 2) {
} this.weatherNum = [];
}) res.data.forEach((item) => {
if (item.causeTypeName) {
}, this.weatherNum.push(item.causeTypeName);
handleSearch(data) { weatherData.push(item);
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 { } else {
startTime = new Date("2024-01-01 11:12:21") otherData.push(item);
startTime = new Date("2024-01-26 11:12:36")
} }
});
var formData = new FormData(); this.tableData = weatherData.concat(otherData);
this.searchType = data.searchType } else {
if (data.searchType == 1) { res.data.forEach((item) => {
formData.append("facilityId", data.facilityId); item.total =
} else { item.facilityClose +
formData.append("controlType", data.controlType); item.facilityRestriction +
} item.facilityInterval;
formData.append("searchType", data.searchType); });
formData.append("startTime", startTime); this.facilityTableData = res.data;
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() mounted() {
this.getFacilityList();
},
} };
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dialog { .dialog {
min-height: 800px; min-height: 800px;
} }
.search { .search {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
::v-deep .is-scrolling-none { ::v-deep .is-scrolling-none {
background: #0B6581; background: #0b6581;
} }
::v-deep .el-table__empty-text { ::v-deep .el-table__empty-text {
color: #3AE0F8; color: #3ae0f8;
} }
.StatsDetail { .StatsDetail {
// height: 770px; // height: 770px;
margin: 20px 0; margin: 20px 0;
width: 100%; width: 100%;
display: flex; display: flex;
gap: 5px; gap: 5px;
} }
.el-table { .el-table {
border: 1px solid #07AEC6; border: 1px solid #07aec6;
background: #0B6581; background: #0b6581;
} }
::v-deep .el-table .el-table__header-wrapper th, ::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th { .el-table .el-table__fixed-header-wrapper th {
background: #0B6581; background: #0b6581;
border: 1px solid #07AEC6; border: 1px solid #07aec6;
} }
::v-deep .el-table th.el-table__cell>.cell { ::v-deep .el-table th.el-table__cell > .cell {
color: #3DE8FF; color: #3de8ff;
} }
::v-deep .el-table thead.is-group th.el-table__cell { ::v-deep .el-table thead.is-group th.el-table__cell {
background: #0B6581; background: #0b6581;
border: 1px solid #07AEC6; border: 1px solid #07aec6;
} }
// ::v-deep .el-table th.el-table__cell.is-leaf, // ::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table td.el-table__cell { ::v-deep .el-table td.el-table__cell {
border: 1px solid #07AEC6; border: 1px solid #07aec6;
background: #1B586D; background: #1b586d;
color: #fff; color: #fff;
} }
::v-deep .el-table tr { ::v-deep .el-table tr {
border: 1px solid #07AEC6; border: 1px solid #07aec6;
background-color: #0B6581; background-color: #0b6581;
} }
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { ::v-deep
background: #1B586D; .el-table--enable-row-hover
border: 1px solid #07AEC6; .el-table__body
tr:hover
> td.el-table__cell {
background: #1b586d;
border: 1px solid #07aec6;
} }
::v-deep .el-table::before, ::v-deep .el-table::before,
.el-table--group::after, .el-table--group::after,
.el-table--border::after { .el-table--border::after {
background: none; background: none;
} }
</style> </style>

137
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class='congestion'> <div class="congestion">
<WgtTitle :title="'收费站管制分析'"> <WgtTitle :title="'收费站管制分析'">
<ButtonGradient class="title-button" @click.native="handleStats"> <ButtonGradient class="title-button" @click.native="handleStats">
统计 统计
@ -10,39 +10,50 @@
<div class="title-top"> <div class="title-top">
<div class="close">收费站封闭（次）</div> <div class="close">收费站封闭（次）</div>
<div class="traffic">收费站限行（次）</div> <div class="traffic">收费站限行（次）</div>
</div> </div>
<div class="content"> <div class="content">
<div class="content-item" v-for="item in tollBoothsData" :key="item.facilityName"> <div
class="content-item"
v-for="item in tollBoothsData"
:key="item.facilityName"
>
<div class="content-item-left"> <div class="content-item-left">
<span class="name">{{ item.facilityName }}</span> <span class="name">{{ item.facilityName }}</span>
<img class="icon" src="./assets/icon.svg" /> <img class="icon" src="./assets/icon.svg" />
</div> </div>
<div class="content-item-right" :style="{ <div class="content-item-right">
'--width': (item.trafficClose / maxCloseNum) * 100 + '%' <div
}"> class="box-item"
<div class="box-item"> :style="{
<span class="num">{{ item.trafficClose }}次</span> '--width':
</div> (item.trafficRestriction / maxRestrictionNum) * 100 + '%',
<div class="box-item" :style="{ }"
'--width': (item.trafficRestriction / maxRestrictionNum) * 100 + '%' >
}">
<span class="num">{{ item.trafficRestriction }}次</span> <span class="num">{{ item.trafficRestriction }}次</span>
</div> </div>
<div
class="box-item"
:style="{
'--width': (item.trafficClose / maxCloseNum) * 100 + '%',
}"
>
<span class="num">{{ item.trafficClose }}次</span>
</div>
<!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> --> <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress> -->
<!-- <el-progress :width="600"></el-progress> <!-- <el-progress :width="600"></el-progress>
<el-progress :percentage="50"></el-progress> --> <el-progress :percentage="50"></el-progress> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="board"> <!-- <div class="board">
<div class="charts keep-ratio " id="auditAnalytics"></div> <div class="charts keep-ratio " id="auditAnalytics"></div>
</div> --> </div> -->
<StatsDialogVisible :visible="statsDialogVisible" @update:value="handleClose" /> <StatsDialogVisible
:visible="statsDialogVisible"
@update:value="handleClose"
/>
</div> </div>
</template> </template>
@ -51,42 +62,50 @@ import WgtTitle from "@screen/pages/perception/widgets/title";
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import chartsStatistics from "./assets/charts"; import chartsStatistics from "./assets/charts";
import { tollStationAnalysis } from "@/api/event/governanceAnalysis" import { tollStationAnalysis } from "@/api/event/governanceAnalysis";
import StatsDialogVisible from "./StatsDialogVisible/index.vue" import StatsDialogVisible from "./StatsDialogVisible/index.vue";
import icon from "./assets/icon.svg"; import icon from "./assets/icon.svg";
export default { export default {
name: 'RailWayDay', name: "RailWayDay",
components: { components: {
WgtTitle, WgtTitle,
ButtonGradient, ButtonGradient,
StatsDialogVisible StatsDialogVisible,
}, },
data() { data() {
return { return {
statsDialogVisible: false, statsDialogVisible: false,
tollBoothsData: [], tollBoothsData: [],
maxRestrictionNum: null, maxRestrictionNum: null,
maxCloseNum: null maxCloseNum: null,
} };
}, },
created() { created() {},
},
methods: { methods: {
handleStats() { handleStats() {
this.statsDialogVisible = true this.statsDialogVisible = true;
}, },
handleClose() { handleClose() {
this.statsDialogVisible = false this.statsDialogVisible = false;
}, },
getTollStationAnalysis() { getTollStationAnalysis() {
return tollStationAnalysis().then((response) => { return tollStationAnalysis().then((response) => {
this.tollBoothsData = response.data this.tollBoothsData = response.data;
this.maxRestrictionNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction })) this.maxRestrictionNum = Math.max.apply(
this.maxCloseNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction })) Math,
console.log("response", this.maxRestrictionNum, this.maxCloseNum) this.tollBoothsData.map((item) => {
return item.trafficRestriction;
})
);
this.maxCloseNum = Math.max.apply(
Math,
this.tollBoothsData.map((item) => {
return item.trafficRestriction;
})
);
console.log("response", this.maxRestrictionNum, this.maxCloseNum);
// let facilityName = [] // let facilityName = []
// let trafficRestriction = [] // let trafficRestriction = []
// let trafficClose = [] // let trafficClose = []
@ -109,20 +128,18 @@ export default {
// chartsStatistics.yAxis[0].data = facilityName; // chartsStatistics.yAxis[0].data = facilityName;
// chartsStatistics.series[0].data = trafficClose; // chartsStatistics.series[0].data = trafficClose;
// chartsStatistics.series[1].data = trafficRestriction; // chartsStatistics.series[1].data = trafficRestriction;
});
}) },
}
}, },
async mounted() { async mounted() {
await this.getTollStationAnalysis() await this.getTollStationAnalysis();
// const myChart = echarts.init(document.getElementById('auditAnalytics')); // const myChart = echarts.init(document.getElementById('auditAnalytics'));
// myChart.setOption(chartsStatistics); // myChart.setOption(chartsStatistics);
}, },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.congestion { .congestion {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@ -135,11 +152,15 @@ export default {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.title-button { .title-button {
@ -164,7 +185,12 @@ export default {
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
border: 1px solid; border: 1px solid;
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; border-image: linear-gradient(
360deg,
rgba(55, 231, 255, 0.3),
rgba(55, 231, 255, 0)
)
1 1;
// display: flex; // display: flex;
// justify-content: space-between; // justify-content: space-between;
// align-items: center; // align-items: center;
@ -182,27 +208,27 @@ export default {
} }
.traffic:before { .traffic:before {
content: ''; content: "";
display: block; display: block;
position: relative; position: relative;
top: 13px; top: 13px;
left: -15px; left: -15px;
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #5FD7FE; background: #5fd7fe;
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
} }
.close:before { .close:before {
content: ''; content: "";
display: block; display: block;
position: relative; position: relative;
top: 13px; top: 13px;
left: -15px; left: -15px;
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #FC6A67; background: #fc6a67;
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
} }
@ -231,18 +257,21 @@ export default {
height: 27px; height: 27px;
margin-right: 5px; margin-right: 5px;
} }
} }
.content-item-right {} .content-item-right {
}
} }
.box-item { .box-item {
position: relative; position: relative;
height: 8px; height: 8px;
width: 289px; width: 289px;
background: linear-gradient(180deg, rgba(11, 167, 218, 0.1) 0%, rgba(79, 211, 255, 0.1) 100%); background: linear-gradient(
180deg,
rgba(11, 167, 218, 0.1) 0%,
rgba(79, 211, 255, 0.1) 100%
);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
} }
@ -256,7 +285,11 @@ export default {
top: 0; top: 0;
height: 8px; height: 8px;
width: var(--width); width: var(--width);
background: linear-gradient(90deg, rgba(97, 216, 255, 0) 0%, #60D7FF 100%); background: linear-gradient(
90deg,
rgba(97, 216, 255, 0) 0%,
#60d7ff 100%
);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
} }
@ -267,7 +300,11 @@ export default {
top: 0; top: 0;
height: 8px; height: 8px;
width: var(--width); width: var(--width);
background: linear-gradient(90deg, rgba(255, 185, 4, 0) 0%, rgba(255, 105, 105, 1) 100%); background: linear-gradient(
90deg,
rgba(255, 185, 4, 0) 0%,
rgba(255, 105, 105, 1) 100%
);
border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;
opacity: 1; opacity: 1;
} }

1
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js
View File

@ -72,6 +72,7 @@ var options = {
width: "300px", width: "300px",
height: "120px", height: "120px",
orient: "vertical", orient: "vertical",
icon: "circle",
top: "60%", top: "60%",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,

1
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js
View File

@ -87,6 +87,7 @@ var options = {
width: "300px", width: "300px",
height: "120px", height: "120px",
orient: "vertical", orient: "vertical",
icon: "circle",
top: "60%", top: "60%",
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,

12
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js
View File

@ -28,7 +28,7 @@ var options = {
ast: { ast: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
width: 35, width: 50,
}, },
bst: { bst: {
align: "left", align: "left",
@ -36,6 +36,12 @@ var options = {
marginLeft: 10, marginLeft: 10,
color: "#37E7FF", color: "#37E7FF",
}, },
cst: {
align: "left",
fontSize: 12,
marginLeft: 10,
color: "#37E7FF",
},
}, },
}, },
formatter: (params) => { formatter: (params) => {
@ -47,9 +53,9 @@ var options = {
let obj = echartsData.filter((it) => { let obj = echartsData.filter((it) => {
return it.name == params; return it.name == params;
}); });
return `{ast|${obj[0].name}} {bst|${Math.round( return `{ast|${obj[0].name}} {bst|${Math.round(
(obj[0].value / count) * 100 (obj[0].value / count) * 100
)}%}`; )}%} {cst|${obj[0].value}件}`;
}, },
data: echartsData?.map((x) => x), data: echartsData?.map((x) => x),
}, },

8
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
View File

@ -141,10 +141,10 @@ export default {
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度
// 绘制圆角矩形 // 绘制圆角矩形
drawRoundRect(context, 270, 36, 120, 24, 12, gr) drawRoundRect(context, 242, 36, 180, 24, 12, gr)
drawRoundRect(context, 270, 63, 120, 24, 12, gr) drawRoundRect(context, 242, 63, 180, 24, 12, gr)
drawRoundRect(context, 270, 90, 120, 24, 12, gr) drawRoundRect(context, 242, 90, 180, 24, 12, gr)
drawRoundRect(context, 270, 117, 120, 24, 12, gr) drawRoundRect(context, 242, 117, 180, 24, 12, gr)
}); });
}); });
}, },

20
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
View File

@ -132,26 +132,34 @@ var options = {
}, },
color: colorList, color: colorList,
legend: { legend: {
top: "15%", top: 10,
right: -5, right: 0,
orient: "vertical", //改变排列方式 orient: "vertical", //改变排列方式
icon: "circle", //改变legend小图标形状 icon: "circle", //改变legend小图标形状
itemGap: 20, // 设置legend的间距 itemGap: 20, // 设置legend的间距
itemWidth: 10, // 设置宽度 itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度 itemHeight: 10, // 设置高度
textStyle: { textStyle: {
right: -19, right: 50,
fontSize: 30, fontSize: 12,
color: "#fff", color: "#fff",
rich: { rich: {
a: { a: {
align: "left",
width: 45, width: 45,
fontSize: 12, fontSize: 12,
}, },
b: { b: {
fontSize: 14, align: "left",
fontSize: 12,
color: "#37E7FF",
marginLeft: 0,
},
c: {
align: "left",
fontSize: 12,
color: "#37E7FF", color: "#37E7FF",
marginLeft: -0, marginLeft: 0,
}, },
}, },
}, },

5
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
View File

@ -306,9 +306,10 @@ export default {
} }
var arr = [ var arr = [
'{a|' + name + '}', '{a|' + name + '}',
'{b|' + ((target / total) * 100).toFixed(2) + '%}', '{b|' + ((target / total) * 100).toFixed(2) + '%} ',
"{c|" + target + "件}",
] ]
return arr.join(' ') return arr.join(' ')
}; };
chart2.title.text = `{zb|${total}}`; chart2.title.text = `{zb|${total}}`;

10
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js
View File

@ -134,7 +134,8 @@ var options = {
} }
var arr = [ var arr = [
"{ast|" + name + "}", "{ast|" + name + "}",
"{bst|" + (target * 100).toFixed(0) + "%}", "{bst|" + (target * 100).toFixed(0) + "% }",
"{cst|" + target+ "件}",
]; ];
return arr.join(" "); return arr.join(" ");
}, },
@ -153,6 +154,13 @@ var options = {
marginLeft: 20, marginLeft: 20,
color: "#37E7FF", color: "#37E7FF",
}, },
cst: {
align: "left",
fontSize: 12,
marginLeft: 30,
width: 60,
color: "#37E7FF",
},
}, },
}, },
}, },

12
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
View File

@ -175,12 +175,12 @@ export default {
let gr = context.createLinearGradient(230, 0, 360, 0); let gr = context.createLinearGradient(230, 0, 360, 0);
gr.addColorStop(1, 'rgba(92,197,255,0)'); gr.addColorStop(1, 'rgba(92,197,255,0)');
gr.addColorStop(0, 'rgba(92,197,255,0.3)'); gr.addColorStop(0, 'rgba(92,197,255,0.3)');
drawRoundRect(context, 248, 15, 134, 21, 12, gr); drawRoundRect(context, 214, 15, 134, 21, 12, gr);
drawRoundRect(context, 248, 42, 134, 21, 12, gr); drawRoundRect(context, 214, 42, 134, 21, 12, gr);
drawRoundRect(context, 248, 69, 134, 21, 12, gr); drawRoundRect(context, 214, 69, 134, 21, 12, gr);
drawRoundRect(context, 248, 96, 134, 21, 12, gr); drawRoundRect(context, 214, 96, 134, 21, 12, gr);
drawRoundRect(context, 248, 123, 134, 21, 12, gr); drawRoundRect(context, 214, 123, 134, 21, 12, gr);
drawRoundRect(context, 248, 150, 134, 21, 12, gr); drawRoundRect(context, 214, 150, 134, 21, 12, gr);
context.lineWidth = 1; // 设置线段宽度 context.lineWidth = 1; // 设置线段宽度

23
ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js
View File

@ -24,7 +24,7 @@ var options = {
orient: "vertical", orient: "vertical",
top: "10", top: "10",
icon: "circle", icon: "circle",
right: 40, right: 0,
itemGap: 16, itemGap: 16,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
@ -33,14 +33,21 @@ var options = {
fontSize: 12, fontSize: 12,
rich: { rich: {
ast: { ast: {
align: "left", marginLeft: 0,
fontSize: 12, fontSize: 12,
width: 30, width: 40,
}, },
bst: { bst: {
align: "left", align: "left",
fontSize: 12, fontSize: 12,
marginLeft: 20, color: "#37E7FF",
width: 30,
},
cst: {
align: "right",
fontSize: 12,
width: 40,
// marginLeft: 20,
color: "#37E7FF", color: "#37E7FF",
}, },
}, },
@ -54,9 +61,9 @@ var options = {
return it.name == params; return it.name == params;
}); });
// console.log(obj); // console.log(obj);
return `{ast|${obj[0].name}} {bst|${ return `{ast|${obj[0].name}} {bst|${
Math.round((obj[0].value / count) * 100) || 0 Math.round((obj[0].value / count) * 100) || 0
}%}`; }%} {cst|${obj[0].value}件}`;
}, },
// data: typeAnalysisData?.map(x => x.name), // data: typeAnalysisData?.map(x => x.name),
}, },
@ -70,7 +77,7 @@ var options = {
radius: "70%", radius: "70%",
center: ["30%", "50%"], center: ["30%", "50%"],
clockwise: false, clockwise: false,
roseType: "radius", // roseType: "area",
startAngle1: 180, startAngle1: 180,
label: { label: {
show: false, show: false,
@ -114,7 +121,7 @@ var options = {
emphasis: { scale: false }, emphasis: { scale: false },
clockwise: false, clockwise: false,
center: ["30%", "50%"], center: ["30%", "50%"],
roseType: "radius", // roseType: "area",
label: { label: {
show: false, show: false,
position: "outside", position: "outside",

Write Preview
Loading…
Cancel
Save