From 68aaaa6d697da50586691d50b81a657126ccd28c Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Fri, 22 Mar 2024 21:44:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/api/manualWarning/index.js | 8 +- .../components/ManualWarningCard/index.vue | 2 +- .../event/event/FormEvent/PresetFormItems.js | 103 +++++-- .../components/eventTypeAnalysis/index.vue | 6 +- .../pages/control/manual/events/data.js | 109 +++---- .../pages/control/manual/events/index.vue | 59 ++-- .../components/Eventfiltering/index.vue | 94 +++--- .../Eventfiltering/trafficIncidentsCharts.js | 2 +- .../trafficIncidentsChartsPie.js | 40 +-- .../components/Sitefiltering/index.vue | 288 ++++++++++++++++-- .../Sitefiltering/trafficIncidentsCharts.js | 95 ++++++ .../trafficIncidentsChartsPie.js | 232 ++++++++++++++ .../components/Timefiltering/index.vue | 221 ++++++++++++-- .../Timefiltering/trafficIncidentsCharts.js | 95 ++++++ .../pages/control/manual/statistic/index.vue | 15 +- .../src/views/JiHeExpressway/utils/enum.js | 59 ++++ 16 files changed, 1176 insertions(+), 252 deletions(-) create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsCharts.js create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsChartsPie.js create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/trafficIncidentsCharts.js diff --git a/ruoyi-ui/src/api/manualWarning/index.js b/ruoyi-ui/src/api/manualWarning/index.js index 59e8dc4c..89864030 100644 --- a/ruoyi-ui/src/api/manualWarning/index.js +++ b/ruoyi-ui/src/api/manualWarning/index.js @@ -1,9 +1,13 @@ import request from "@/utils/request"; // 查询非机预警列表 -export function perceivedEventsList(data) { +export function perceivedEventsList(data, pageNum, pageSize) { return request({ - url: "/perceivedEvents/warning/perceivedEventsList", + url: + "/perceivedEvents/warning/nonAutomaticWarningList?pageNum=" + + pageNum + + "&pageSize=" + + pageSize, method: "post", data, }); diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/ManualWarningCard/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/ManualWarningCard/index.vue index 6932bc15..1fa4b120 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/ManualWarningCard/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/ManualWarningCard/index.vue @@ -89,7 +89,7 @@ export default { type: Array, default: () => [ { - key: "warningType", + key: "warningTypeName", label: "类型", }, // { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js index 28279874..d37da901 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js @@ -1,4 +1,4 @@ -import request from '@/utils/request' +import request from "@/utils/request"; import { Message } from "element-ui"; import moment from "moment"; @@ -8,7 +8,7 @@ export const source = { type: "RadioGroup", isAlone: true, required: true, - default: '1', + default: "1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -50,7 +50,7 @@ export const illegalTriggeringType = { type: "RadioGroup", isAlone: true, required: true, - default: '5-1', + default: "5-1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -299,6 +299,45 @@ export const eventSources = { }, }; +export const warningType = { + label: "事件源:", + key: "warningType", + type: "select", + options: { + clearable: true, + options: [ + { + key: "1", + label: "交通拥堵", + }, + { + key: "2", + label: "行人", + }, + { + key: "4", + label: "停车", + }, + { + key: "5", + label: "违规驾驶", + }, + { + key: "6", + label: "路障", + }, + { + key: "7", + label: "道路施工", + }, + { + key: "99", + label: "其他", + }, + ], + }, +}; + export const eventType = { label: "事件类型:", key: "eventType", @@ -495,7 +534,7 @@ export const isInTunnel = { key: "inTunnel", // isAlone: true, required: true, - default: '0', + default: "0", type: "RadioGroup", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", @@ -596,12 +635,15 @@ export const weatherSituation = { ], }, visible: (data) => { - if (data?.eventSubclass == '10-1' || data?.eventSubclass == '10-2' || data?.eventSubclass == '10-3') { + if ( + data?.eventSubclass == "10-1" || + data?.eventSubclass == "10-2" || + data?.eventSubclass == "10-3" + ) { return true; } return false; }, - }; export const additionalNotes = { @@ -698,10 +740,10 @@ export const locationMode = { ons: { change(value, ...args) { const { data, formList } = args.slice(-1)[0]; - if(data.dcEventAccident) { + if (data.dcEventAccident) { data.dcEventAccident.facilityId = null; } - if(data.dcEventVehicleAccident) { + if (data.dcEventVehicleAccident) { data.dcEventVehicleAccident.facilityId = null; } @@ -713,28 +755,33 @@ export const locationMode = { } else if (value == 4) { facilityType = 1; } - if(value && value != 1){ + if (value && value != 1) { //路网设施 1 收费站 2 桥梁 3 互通立交 4 枢纽立交 5 隧道 6 服务区 request({ url: `/business/facility/query?facilityType=${facilityType}`, - method: "get" - }).then((result) => { - if (result.code != 200) return Message.error(result?.msg); - let lwss = []; - result.data.forEach(it => lwss.push({ key: it.id, label: it.facilityName})) + method: "get", + }) + .then((result) => { + if (result.code != 200) return Message.error(result?.msg); + let lwss = []; + result.data.forEach((it) => + lwss.push({ key: it.id, label: it.facilityName }) + ); - formList.forEach((it) => { - if(it.key == "dcEventAccident.facilityId" || it.key == "dcEventVehicleAccident.facilityId"){ - it.options.options = lwss; - } + formList.forEach((it) => { + if ( + it.key == "dcEventAccident.facilityId" || + it.key == "dcEventVehicleAccident.facilityId" + ) { + it.options.options = lwss; + } + }); + }) + .catch((err) => { + console.log("err", err); + Message.error("查询失败1", err); }); - - }).catch((err) => { - console.log('err',err) - Message.error("查询失败1", err); - }) } - }, }, }; @@ -953,7 +1000,7 @@ export const constructionMeasurement = { type: "RadioGroup", isAlone: true, required: true, - default:'0', + default: "0", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -983,7 +1030,7 @@ export const locationType = { type: "RadioGroup", isAlone: true, required: true, - default: '1', + default: "1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1005,7 +1052,7 @@ export const specialConstruction = { type: "RadioGroup", isAlone: true, required: true, - default: '1', + default: "1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -1173,7 +1220,7 @@ export const congestionCause = { }, }, visible: (data) => { - if (data?.eventSubclass != '4-1') { + if (data?.eventSubclass != "4-1") { return false; } return true; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue index 7018f8f7..dbb9a877 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue @@ -25,7 +25,6 @@ export default { methods: { getAllEventNum() { return allEventNum().then((response) => { - console.log("response", response); let data = []; let total = null; let nameData = []; @@ -37,7 +36,6 @@ export default { }); total += response.data[i].num; } - console.log("total88", total); for (let i = 0; i < data.length; i++) { // if (i % 2 === 0) { // data.splice(i + 1, 0, newObj) @@ -47,6 +45,10 @@ export default { } } chartsStatistics.legend.data = nameData; + console.log( + "chartsStatistics.legend.data", + chartsStatistics.legend.data + ); chartsStatistics.legend.formatter = function (name) { let tarValue = 0; for (let i = 0; i < response.data.length; i++) { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/data.js index b558a4ca..20a58b78 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/data.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/data.js @@ -1,53 +1,30 @@ import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; -import { merge, cloneDeep } from "lodash"; +import { warningType } from "@screen/utils/enum.js"; export const searchFormList = [ - { - label: "事件状态:", - key: "eventState", - type: "RadioGroup", - default: "0", - options: { - options: [ - { - key: "0", - label: "未解决", - }, - { - key: "1", - label: "已解决", - }, - { - key: "2", - label: "已关闭", - }, - ], - }, - }, - PresetFormItems.eventSources, - PresetFormItems.eventType, - { - label: "方向:", - key: "direction", - type: "RadioGroup", - default: "1", - options: { - options: [ - { - key: "1", - label: "菏泽方向", - }, - { - key: "2", - label: "双向", - }, - { - key: "3", - label: "济南方向", - }, - ], - }, - }, + PresetFormItems.warningType, + // { + // label: "方向:", + // key: "direction", + // type: "RadioGroup", + // default: "1", + // options: { + // options: [ + // { + // key: "1", + // label: "菏泽方向", + // }, + // { + // key: "2", + // label: "双向", + // }, + // { + // key: "3", + // label: "济南方向", + // }, + // ], + // }, + // }, { label: "时间范围:", key: "warningTime", @@ -59,23 +36,23 @@ export const searchFormList = [ valueFormat: "yyyy-MM-dd HH:mm:ss", }, }, - { - ...PresetFormItems.station, - label: "开始桩号:", - required: false, - }, - merge(cloneDeep(PresetFormItems.station), { - options: { - options: [ - { - key: "endStakeMark[0]", - }, - { - key: "endStakeMark[1]", - }, - ], - }, - label: "结束桩号:", - required: false, - }), + // { + // ...PresetFormItems.station, + // label: "开始桩号:", + // required: false, + // }, + // merge(cloneDeep(PresetFormItems.station), { + // options: { + // options: [ + // { + // key: "endStakeMark[0]", + // }, + // { + // key: "endStakeMark[1]", + // }, + // ], + // }, + // label: "结束桩号:", + // required: false, + // }), ]; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue index 16b9f38e..ac816b3e 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue @@ -41,8 +41,8 @@ @size-change="onSizeChange" width="'100%'" :page-sizes="[12, 16, 20, 30, 50]" - :page-size="searchData.pageSize" - :current-page.sync="searchData.pageNum" + :page-size="pageSize" + :current-page.sync="pageNum" layout="total, sizes, prev, pager, next" :total="total" > @@ -60,6 +60,7 @@ import { perceivedEventsList } from "@/api/manualWarning/index.js"; // import EventDispatchDialog from "./EventDispatchDialog/index"; import { searchFormList } from "./data"; import request from "@/utils/request"; +import { WarningType, WarningSubclass } from "@screen/utils/enum.js"; const directionMapping = { 1: "菏泽方向", @@ -78,14 +79,15 @@ export default { }, data() { return { + WarningSubclass, searchFormList, detailDialogFormData: {}, total: 0, data: [], eventId: "0", + pageSize: 16, + pageNum: 1, searchData: { - pageSize: 16, - pageNum: 1, warningSource: "6", }, }; @@ -101,17 +103,28 @@ export default { // 刷新 onRefresh() {}, initData() { - perceivedEventsList(this.searchData).then((res) => { - if (res.code != 200) return Message.error(res?.msg); - this.total = res.total; - res.rows.forEach((it) => { - it.source = "非机预警"; - it.stringDirection = directionMapping[it.direction] || it.direction; - it.otherConfig = JSON.parse(it.otherConfig); - }); - this.data = res.rows; - console.log("darta", this.data); - }); + perceivedEventsList(this.searchData, this.pageNum, this.pageSize).then( + (res) => { + if (res.code != 200) return Message.error(res?.msg); + this.total = res.total; + res.rows.forEach((it) => { + it.source = "非机预警"; + it.stringDirection = directionMapping[it.direction] || it.direction; + it.otherConfig = JSON.parse(it.otherConfig); + if (it.warningSubclass) { + let i = it.warningType; + let r = it.warningSubclass; + it.warningTypeName = + WarningType[i] + + (WarningSubclass[i][r] + ? "(" + WarningSubclass[i][r] + ")" + : ""); + } + }); + this.data = res.rows; + console.log("darta", this.data); + } + ); // request({ // // url: `/dc/system/event/dispatchEventList`, // url: "/dc/system/event/list", @@ -126,11 +139,23 @@ export default { // this.data = result.rows; // }); }, - onSizeChange(pageSize) {}, + onSizeChange(pageSize) { + this.pageSize = pageSize; + this.initData(); + }, getStateCardBind(item) {}, firstBtnClick(id) {}, - handleSearch(data) {}, + handleSearch(data) { + console.log("data", data); + this.searchData = { + ...this.searchData, + warningType: data.warningType, + startTime: data.warningTime[0], + completeTime: data.warningTime[1], + }; + this.initData(); + }, }, }; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue index 69eeab38..be56081a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/index.vue @@ -6,8 +6,8 @@ @handleSearch="handleSearch" />
-
-
+
+
@@ -58,6 +58,8 @@ export default { type: "day", warningTime: "", }, + trafficIncidents: null, + trafficIncidentsPie: null, searchFormList: [ { label: "事件类型:", @@ -130,27 +132,54 @@ export default { }; }, async mounted() { - (this.formData.warningTime = - moment(new Date()).format("YYYY-MM-DD") + " 00:00:01"), - await this.getNonAutomaticWarningType(this.formData); - var trafficIncidents = echarts.init( - document.getElementById("trafficIncidents") - ); - trafficIncidents.setOption(trafficIncidentsCharts); - var trafficIncidentsPie = echarts.init( - document.getElementById("trafficIncidentsPie") - ); - trafficIncidentsPie.setOption(trafficIncidentsChartsPie); + setTimeout(() => { + this.$nextTick(async () => { + (this.formData.warningTime = + moment(new Date()).format("YYYY-MM-DD") + " 00:00:01"), + (this.trafficIncidents = echarts.init(this.$refs.trafficIncidents)); + this.trafficIncidents.setOption(trafficIncidentsCharts); + this.trafficIncidentsPie = echarts.init(this.$refs.trafficIncidentsPie); + this.trafficIncidentsPie.setOption(trafficIncidentsChartsPie); + + const domMap = this.$refs.trafficIncidentsPie; + let parentDiv = domMap.firstElementChild; + // // 创建canvas; + let canvas = document.createElement("canvas"); + canvas.width = parentDiv.offsetWidth; + canvas.height = parentDiv.offsetHeight; + parentDiv.appendChild(canvas); + const context = canvas.getContext("2d"); + + // // 填充渐变颜色 + let gr = context.createLinearGradient(280, 0, 580, 0); + gr.addColorStop(1, "rgba(92,197,255,0)"); + gr.addColorStop(0, "rgba(92,197,255,0.5)"); + context.lineWidth = 1; // 设置线段宽度 + drawRoundRect(context, 430, 134, 280, 24, 12, gr); + drawRoundRect(context, 430, 168, 280, 24, 10, gr); + drawRoundRect(context, 430, 202, 280, 24, 10, gr); + drawRoundRect(context, 430, 236, 280, 24, 10, gr); + drawRoundRect(context, 430, 270, 280, 24, 10, gr); + drawRoundRect(context, 430, 304, 280, 24, 10, gr); + drawRoundRect(context, 430, 338, 280, 24, 10, gr); + drawRoundRect(context, 430, 372, 280, 24, 10, gr); + drawRoundRect(context, 430, 406, 280, 24, 10, gr); + drawRoundRect(context, 430, 440, 280, 24, 10, gr); + drawRoundRect(context, 430, 474, 280, 24, 10, gr); + await this.getNonAutomaticWarningType(this.formData); + // drawRoundRect(context, 430, 508, 280, 24, 10, gr); + }); + }); }, methods: { getNonAutomaticWarningType(data) { + let that = this; return nonAutomaticWarningType(data).then((res) => { let newData = res.data; let seriesData = []; let xData = []; let pieData = []; let total = null; - console.log("++++++++++++", newData); newData.forEach((item) => { seriesData.push(item.number); xData.push(item.subclass); @@ -162,7 +191,7 @@ export default { }); trafficIncidentsCharts.series[0].data = seriesData; trafficIncidentsCharts.xAxis.data = xData; - + trafficIncidentsChartsPie.legend.data = xData; trafficIncidentsChartsPie.legend.formatter = function (name) { let tarValue = 0; for (let i = 0; i < newData.length; i++) { @@ -173,34 +202,10 @@ export default { var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); return `{text|${name}} {number|${tarValue} 起 } {number|${percert}%}`; }; - trafficIncidentsChartsPie.legend.data = xData; trafficIncidentsChartsPie.title[0].text = total; - trafficIncidentsChartsPie.series[2].data = seriesData; - - // const domMap = document.getElementById("trafficIncidentsPie"); - // let parentDiv = domMap.firstChild; - // console.log("parentDiv", parentDiv); - // // 创建canvas; - // let canvas = document.createElement("canvas"); - // canvas.width = parentDiv.offsetWidth; - // canvas.height = parentDiv.offsetHeight; - // parentDiv.appendChild(canvas); - // const context = canvas.getContext("2d"); - - // // 填充渐变颜色 - // let gr = context.createLinearGradient(240, 0, 450, 0); - // gr.addColorStop(1, "rgba(92,197,255,0)"); - // gr.addColorStop(0, "rgba(92,197,255,0.5)"); - // context.lineWidth = 1; // 设置线段宽度 - // drawRoundRect(context, 100, 8, 280, 50, 12, gr); - // drawRoundRect(context, 202, 32, 280, 20, 10, gr); - // drawRoundRect(context, 202, 56, 280, 20, 10, gr); - // drawRoundRect(context, 202, 80, 280, 20, 10, gr); - // drawRoundRect(context, 202, 104, 280, 20, 10, gr); - // drawRoundRect(context, 202, 128, 280, 20, 10, gr); - // drawRoundRect(context, 202, 152, 280, 20, 10, gr); - - // this.myChart = myChart; + trafficIncidentsChartsPie.series[2].data = pieData; + that.trafficIncidents.setOption(trafficIncidentsCharts); + that.trafficIncidentsPie.setOption(trafficIncidentsChartsPie); }); }, handleSearch(value) { @@ -221,6 +226,7 @@ export default { .search-box { width: 402px !important; float: right; + overflow: hidden; } .Eventfiltering-content { @@ -230,12 +236,12 @@ export default { justify-content: space-between; .Eventfiltering-left { - width: 65%; + width: 63%; height: 100%; } .Eventfiltering-right { - width: 32%; + width: 34%; height: 100%; } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js index 215c85d8..f8c4fe7f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsCharts.js @@ -16,7 +16,7 @@ var options = { }, }, grid: { - left: "30px", + left: "50px", right: "0%", top: "50px", bottom: "5%", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js index 6e352490..1cf10bef 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Eventfiltering/trafficIncidentsChartsPie.js @@ -18,9 +18,9 @@ var options = { title: [ { text: "999", - top: "25%", + top: "36%", textAlign: "center", - left: "48%", + left: "29%", textStyle: { color: "#ffffff", fontSize: 30, @@ -29,9 +29,9 @@ var options = { }, { text: "总数", - top: "38%", + top: "32%", textAlign: "center", - left: "48%", + left: "29%", textStyle: { color: "rgba(242, 252, 253, 0.84)", fontSize: 16, @@ -53,20 +53,22 @@ var options = { }, }, legend: { + show: true, width: "300px", - height: "120px", + height: "520px", orient: "vertical", icon: "circle", - top: "60%", + top: "15%", + left: "70%", itemWidth: 10, itemHeight: 10, textStyle: { color: "#ffffff", fontSize: 14, - lineHeight: 22, + lineHeight: 24, rich: { text: { - width: 100, + width: 50, marginLeft: 32, fontSize: 14, }, @@ -82,20 +84,20 @@ var options = { }, }, data: legendData, - pageIconColor: "#fff", - pageIconSize: 10, - pageTextStyle: { - color: "#fff", - }, - type: "scroll", - pageButtonPosition: "end", + // pageIconColor: "#fff", + // pageIconSize: 10, + // pageTextStyle: { + // color: "#fff", + // }, + // type: "scroll", + // pageButtonPosition: "end", }, series: [ /** 饼图上刻度 */ { type: "gauge", - center: ["50%", "35%"], - radius: "46%", // 错位调整此处 + center: ["30%", "35%"], + radius: "43%", // 错位调整此处 startAngle: 0, endAngle: 360, splitNumber: 52, @@ -116,7 +118,7 @@ var options = { tooltip: false, type: "gauge", radius: "30%", - center: ["50%", "35%"], + center: ["30%", "35%"], startAngle: 0, endAngle: 360, axisLine: { @@ -183,7 +185,7 @@ var options = { { type: "pie", radius: ["40%", "50%"], - center: ["50%", "35%"], + center: ["30%", "35%"], z: 10, label: { show: false, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue index 0a48f804..cd1b7a93 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/index.vue @@ -1,46 +1,270 @@ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsCharts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsCharts.js new file mode 100644 index 00000000..f8c4fe7f --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsCharts.js @@ -0,0 +1,95 @@ +var options = { + title: { + // text: '单位/%', + top: "0%", + left: "0%", + textStyle: { + fontSize: "10px", + fontWeight: 300, + color: "#B5C5D4", + opacity: 0.8, + }, + }, + tooltip: { + valueFormatter: function (value) { + return value + " 起"; + }, + }, + grid: { + left: "50px", + right: "0%", + top: "50px", + bottom: "5%", + containLabel: true, + }, + xAxis: { + type: "category", + data: [], + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: "18px", + }, + }, + yAxis: [ + { + // type: 'value', + // min: function (value) { + // return value.min*0.9; + // }, + name: "交通事件（起）", + nameTextStyle: { + color: "#fff", + fontSize: 18, + align: "center", + }, + type: "value", + axisLine: { + show: false, + lineStyle: { + width: 1, + color: "#545454", + }, + }, + splitLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.5)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: "18px", + formatter: (value) => { + return value; + }, + }, + }, + ], + series: [ + { + // name: '审限内结案率', + data: [5, 10, 20, 30], + type: "pictorialBar", + symbol: "roundRect", + symbolRepeat: true, + symbolSize: [13, 4], + // symbolOffset: symbolOffset, + // barWidth:'40%', + itemStyle: { + color: "#20E7FF", + }, + }, + ], +}; + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsChartsPie.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsChartsPie.js new file mode 100644 index 00000000..43a2118d --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Sitefiltering/trafficIncidentsChartsPie.js @@ -0,0 +1,232 @@ +let colors = [ + "#4278F8", + "#5372C4", + "#0046FF", + "#FB9434", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", +]; +var legendData = []; + +var options = { + title: [ + { + text: "999", + top: "36%", + textAlign: "center", + left: "29%", + textStyle: { + color: "#ffffff", + fontSize: 30, + fontFamily: "SourceHanSansCN", + }, + }, + { + text: "总数", + top: "32%", + textAlign: "center", + left: "29%", + textStyle: { + color: "rgba(242, 252, 253, 0.84)", + fontSize: 16, + fontFamily: "SourceHanSansCN", + }, + }, + ], + grid: { + top: "38%", + left: "6%", + right: "6%", + bottom: "3%", + containLabel: true, + }, + tooltip: { + show: true, + valueFormatter: function (value) { + return value + " 起"; + }, + }, + legend: { + show: true, + width: "300px", + height: "520px", + orient: "vertical", + icon: "circle", + top: "15%", + left: "70%", + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: "#ffffff", + fontSize: 14, + lineHeight: 24, + rich: { + text: { + width: 100, + marginLeft: 32, + fontSize: 14, + }, + number: { + fontSize: 14, + color: "#37E7FF", + marginLeft: 32, + fontWeight: "bold", + }, + unit: { + fontSize: 14, + }, + }, + }, + data: legendData, + // pageIconColor: "#fff", + // pageIconSize: 10, + // pageTextStyle: { + // color: "#fff", + // }, + // type: "scroll", + // pageButtonPosition: "end", + }, + series: [ + /** 饼图上刻度 */ + { + type: "gauge", + center: ["30%", "35%"], + radius: "43%", // 错位调整此处 + startAngle: 0, + endAngle: 360, + splitNumber: 52, + axisLine: { show: false }, + splitLine: { + // length: 39, + length: "2", + lineStyle: { + width: 5, + color: "#5CC5FF", + }, + }, + axisTick: { show: false }, + axisLabel: { show: false }, + }, + { + name: "总数", + tooltip: false, + type: "gauge", + radius: "30%", + center: ["30%", "35%"], + startAngle: 0, + endAngle: 360, + axisLine: { + lineStyle: { + color: [[1, "#0AFFE950"]], + width: 1, + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + detail: { + show: false, + }, + pointer: { + show: false, + }, + progress: { + show: true, + width: 80, + itemStyle: { + color: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.5, + colorStops: [ + { + offset: 0, + color: "rgb(0, 224, 205, 0)", + }, + { + offset: 0.7, + color: "rgba(0, 224, 205, 0)", + }, + { + offset: 1, + color: "rgba(10, 255, 233, 0.5)", + }, + ], + }, + }, + }, + data: [ + { + value: 100, + }, + ], + tooltip: { + backgroundColor: "rgba(50,50,50,0)", + formatter: " ", + borderWidth: 0, + textStyle: { + textShadowColor: "rgba(50,50,50,0)", + }, + }, + }, + { + type: "pie", + radius: ["40%", "50%"], + center: ["30%", "35%"], + z: 10, + label: { + show: false, + }, + data: [], + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 2, + borderType: "solid", + borderCap: "round", + borderJoin: "round", + borderColor: "#064258", + borderMiterLimit: "20", + color: function (params) { + return { + type: "linear", + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: [ + { + offset: 0, + color: colors[params.dataIndex], // 0% 处的颜色 + }, + { + offset: 1, + color: colors[params.dataIndex], // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }; + }, + }, + }, + }, + ], +}; + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue index 0a48f804..9c44505e 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/index.vue @@ -1,46 +1,203 @@ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/trafficIncidentsCharts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/trafficIncidentsCharts.js new file mode 100644 index 00000000..f8c4fe7f --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/components/Timefiltering/trafficIncidentsCharts.js @@ -0,0 +1,95 @@ +var options = { + title: { + // text: '单位/%', + top: "0%", + left: "0%", + textStyle: { + fontSize: "10px", + fontWeight: 300, + color: "#B5C5D4", + opacity: 0.8, + }, + }, + tooltip: { + valueFormatter: function (value) { + return value + " 起"; + }, + }, + grid: { + left: "50px", + right: "0%", + top: "50px", + bottom: "5%", + containLabel: true, + }, + xAxis: { + type: "category", + data: [], + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: "18px", + }, + }, + yAxis: [ + { + // type: 'value', + // min: function (value) { + // return value.min*0.9; + // }, + name: "交通事件（起）", + nameTextStyle: { + color: "#fff", + fontSize: 18, + align: "center", + }, + type: "value", + axisLine: { + show: false, + lineStyle: { + width: 1, + color: "#545454", + }, + }, + splitLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.5)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: "18px", + formatter: (value) => { + return value; + }, + }, + }, + ], + series: [ + { + // name: '审限内结案率', + data: [5, 10, 20, 30], + type: "pictorialBar", + symbol: "roundRect", + symbolRepeat: true, + symbolSize: [13, 4], + // symbolOffset: symbolOffset, + // barWidth:'40%', + itemStyle: { + color: "#20E7FF", + }, + }, + ], +}; + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue index 6ac52b5e..371b7c72 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/statistic/index.vue @@ -1,14 +1,14 @@