From e3d9fce6783fe44cded77528d9190b96c15775f6 Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Tue, 6 Feb 2024 16:47:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=BA=8B=E4=BB=B6=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E5=88=86=E6=9E=90bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/control/event/dispatch/data.js | 106 +-- .../StatsDialogVisible/index.vue | 83 ++- .../channelAnalytics/assets/charts copy.js | 339 ++++++++++ .../channelAnalytics/assets/charts.js | 176 ++--- .../components/channelAnalytics/index.vue | 7 +- .../eventTypeAnalysis/assets/charts.js | 227 ++----- .../components/eventTypeAnalysis/index.vue | 6 +- .../components/postTrendsDay/assets/charts.js | 40 +- .../postTrendsMonth/assets/charts.js | 33 +- .../postTrendsMonth/assets/charts2.js | 76 +-- .../postTrendsMonth/assets/charts3.js | 35 +- .../components/trafficIndicators/index.vue | 608 +++++++++--------- .../views/JiHeExpressway/scss/el-reset.scss | 8 + 13 files changed, 994 insertions(+), 750 deletions(-) create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts copy.js diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/data.js index f20165c4..d9eeb945 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/data.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/data.js @@ -1,7 +1,8 @@ import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; import { merge, cloneDeep } from "lodash"; -export const searchFormList = [{ +export const searchFormList = [ + { label: "事件状态:", key: "eventState", type: "RadioGroup", @@ -22,58 +23,57 @@ export const searchFormList = [{ ], }, }, - PresetFormItems.eventSources, - PresetFormItems.eventType, - { - label: "方向:", - key: "direction", - type: "RadioGroup", - options: { - options: [ - { - key: "济南方向", - label: "济南方向", - }, - { - key: "菏泽方向", - label: "菏泽方向", - }, - { - key: "双向", - label: "双向", - }, - ], - }, + PresetFormItems.eventSources, + PresetFormItems.eventType, + { + label: "方向:", + key: "direction", + type: "RadioGroup", + options: { + options: [ + { + key: "济南方向", + label: "济南方向", + }, + { + key: "菏泽方向", + label: "菏泽方向", + }, + { + key: "双向", + label: "双向", + }, + ], }, - { - label: "时间范围:", - key: "daterange", - required: false, - type: "datePicker", - options: { - type: "daterange", - format: 'yyyy-MM-dd HH:mm:ss', - valueFormat: 'yyyy-MM-dd HH:mm:ss' - }, + }, + { + label: "时间范围:", + key: "daterange", + required: false, + type: "datePicker", + options: { + type: "daterange", + format: "yyyy-MM-dd HH:mm:ss", + valueFormat: "yyyy-MM-dd HH:mm:ss", }, - { - ...PresetFormItems.station, - label: "开始桩号:", - required: false, + }, + { + ...PresetFormItems.station, + label: "开始桩号:", + required: false, + }, + merge(cloneDeep(PresetFormItems.station), { + options: { + options: [ + { + key: "endStakeMark[0]", + }, + { + key: "endStakeMark[1]", + }, + ], }, - merge(cloneDeep(PresetFormItems.station), { - options: { - options: [ - { - key: "endStakeMark[0]", - }, - { - key: "endStakeMark[1]", - }, - ], - }, - label: "结束桩号:", - required: false, - } - ) - ]; \ No newline at end of file + label: "结束桩号:", + required: false, + }), +]; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue index 5d558a9e..cc9567f7 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue @@ -51,6 +51,7 @@ 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 options from "../assets/charts"; export default { name: 'StatsDetail', components: { @@ -67,17 +68,82 @@ export default { }, data() { return { + num: 0, tableData: [], weatherNum: [], startTime: "", endTime: "", + pickerOptions: { + disabledDate(time) { + return time.getTime() > Date.now(); + }, + }, searchFormList: [ + { + label: "查询条件:", + key: "a", + required: true, + isAlone: true, + type: "RadioGroup", + options: { + type: 'circle', + options: [ + { + key: "0", + label: "站点", + }, + { + key: "1", + label: "原因", + } + ], + } + }, + { + label: "事件类型:", + key: "b", + required: true, + type: "RadioGroup", + options: { + type: 'circle', + options: [{ + key: 1, + label: "收费站封闭", + }, + { + key: 2, + label: "收费站限行", + }] + } + }, + { + label: "选择站点:", + key: "c", + required: true, + type: "RadioGroup", + options: { + type: 'circle', + options: [{ + key: 1, + label: "收费站封闭", + }, + { + key: 2, + label: "收费站限行", + }] + } + }, { label: "日期:", key: "date", required: true, type: "datePicker", options: { + pickerOptions: { + disabledDate(time) { + return time.getTime() > Date.now(); + }, + }, valueFormat: "yyyy-MM-dd", type: "daterange" } @@ -99,11 +165,15 @@ export default { methods: { handleSearch(data) { + console.log("data", data) this.getSelectTollStation(data) }, arraySpanMethod({ row, column, rowIndex, columnIndex }) { - // console.log("+++++++", row, column, rowIndex, columnIndex) + console.log("+++++++", row, column, rowIndex, columnIndex) + + if (!row.causeTypeName) { + console.log("11111111111") if (columnIndex === 0) { return [1, 2]; } @@ -112,6 +182,7 @@ export default { } }; if (row.controlCauseName === '恶劣天气') { + console.log("222222222222") if (columnIndex === 0) { console.log(this.weatherNum.length) if (rowIndex === 0) { @@ -141,9 +212,10 @@ export default { // } } - + // this.weatherNum = 0 } + }, getSelectTollStation(data) { console.log(45, data) @@ -164,6 +236,7 @@ export default { let weatherData = [] let otherData = [] selectTollStation(formData).then((res) => { + this.weatherNum = [] res.data.forEach(item => { if (item.causeTypeName) { this.weatherNum.push(item.causeTypeName) @@ -178,7 +251,11 @@ export default { } }, mounted() { - this.getSelectTollStation() + let date = moment().format('YYYY-MM-DD') + let data = { + date: [date + " 00:00:00", date + " 23:59:59"] + } + this.getSelectTollStation(data) } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts copy.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts copy.js new file mode 100644 index 00000000..a37e9059 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts copy.js @@ -0,0 +1,339 @@ +var res = [ + { value: 20, name: "交通事故" }, + { value: 1, name: "" }, + { value: 20, name: "车辆故障" }, + { value: 1, name: "" }, + { value: 15, name: "路障清除" }, + { value: 1, name: "" }, + { value: 10, name: "交通管制" }, + { value: 1, name: "" }, + { value: 5, name: "道路拥堵" }, + { value: 1, name: "" }, + { value: 5, name: "异常天气" }, +]; +let angle = 0; //角度，用来做简单的动画效果的 + +//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) +function getCirlPoint(x0, y0, r, angle) { + let x1 = x0 + r * Math.cos((angle * Math.PI) / 180); + let y1 = y0 + r * Math.sin((angle * Math.PI) / 180); + return { + x: x1, + y: y1, + }; +} + +let color = [ + "#4278F8F9", + "transparent", + "#5372C4", + "transparent", + "#0046FFF9", + "transparent", + "#FB9434F9", + "transparent", + "#854101F9", + "transparent", + "#05E599F9", + "transparent", + "#219F73F9", + "transparent", + "#7CEDD5F9", + "transparent", +]; +let colorend = [ + "#4278F800", + "transparent", + "#5372C400", + "transparent", + "#0046FF00", + "transparent", + "#FB943400", + "transparent", + "#85410100", + "transparent", + "#05E59900", + "transparent", + "#219F7300", + "transparent", + "#7CEDD500", + "transparent", +]; + +// var res = this.evaluatedCountList; +var data1 = [], + data2 = [], + data3 = [], + legendData = []; +var curIndex = 0; +var index = 0; + +for (var i = 0; i < res.length; i++) { + // data1.push({ + // value: res[i].value, + // name: res[i].name, + // }); + // data2.push({ + // value: res[i].value, + // name: res[i].name, + // itemStyle: { + // opacity: 0.4, + // }, + // }); + + // data3.push({ + // value: res[i].value, + // name: res[i].name, + // itemStyle: { + // opacity: 0.1, + // }, + // }); + if (res[i].name != "") legendData.push(res[i].name); +} + +var options = { + color: [ + "#2867FF", + "transparent", + "#58C3FF", + "transparent", + "#FF6A3B", + "transparent", + "#FDA474", + "transparent", + "#FEE58F", + "transparent", + "#8DFEBF", + "transparent", + "#66F4DC", + "transparent", + "#33E27D", + "transparent", + "#5D8CFE", + "transparent", + ], + title: [ + { + text: "999", + top: "25%", + textAlign: "center", + left: "48%", + textStyle: { + color: "#ffffff", + fontSize: 30, + fontFamily: "SourceHanSansCN", + }, + }, + { + text: "总数", + top: "38%", + textAlign: "center", + left: "48%", + 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: false, + trigger: "item", + formatter: "{b} : {c}:{d}", + }, + legend: { + orient: "", + left: "10%", + top: "68%", + itemWidth: 10, + itemHeight: 10, + icon: "circle", + textStyle: { + color: "#ffffff", + fontSize: 14, + lineHeight: 22, + rich: { + text: { + marginLeft: 32, + fontSize: 14, + }, + number: { + fontSize: 14, + color: "#37E7FF", + marginLeft: 32, + fontWeight: "bold", + }, + unit: { + fontSize: 14, + }, + }, + }, + data: legendData, + // formatter(name) { + // const newData = res; + // let tarValue = 0; + // let total = 0; + // for (let i = 0; i < newData.length; i++) { + // total += newData[i].value; + // if (newData[i].name === name) { + // tarValue = newData[i].value; + // } + // } + // var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); + // const arr = name + " " + tarValue; + // return `{text|${name}} {number|${percert}%}`; + // }, + }, + series: [ + /** 饼图上刻度 */ + { + type: "gauge", + center: ["50%", "35%"], + radius: "46%", // 错位调整此处 + 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: "中心效果圆", + type: "gauge", + radius: "30%", + center: ["50%", "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, + }, + ], + }, + { + type: "pie", + radius: ["50%", "40%"], + center: ["50%", "35%"], + z: 10, + label: { + show: false, + position: "center", + formatter: (params) => { + return params.name + "\r\n" + params.value; + }, + rich: { + total: { + fontSize: 16, + color: "#04F5FE", + }, + efficiency: { + fontSize: 12, + color: "#00FD6D", + }, + }, + color: "#FFFFFF", + fontSize: 12, + lineHeight: 16, + }, + data: res, + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 0, + 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: color[params.dataIndex], // 0% 处的颜色 + }, + { + offset: 1, + color: colorend[params.dataIndex], // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }; + }, + }, + }, + }, + ], +}; + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js index a37e9059..ea9dad7b 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js @@ -1,116 +1,36 @@ -var res = [ - { value: 20, name: "交通事故" }, - { value: 1, name: "" }, - { value: 20, name: "车辆故障" }, - { value: 1, name: "" }, - { value: 15, name: "路障清除" }, - { value: 1, name: "" }, - { value: 10, name: "交通管制" }, - { value: 1, name: "" }, - { value: 5, name: "道路拥堵" }, - { value: 1, name: "" }, - { value: 5, name: "异常天气" }, -]; -let angle = 0; //角度，用来做简单的动画效果的 - -//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) -function getCirlPoint(x0, y0, r, angle) { - let x1 = x0 + r * Math.cos((angle * Math.PI) / 180); - let y1 = y0 + r * Math.sin((angle * Math.PI) / 180); - return { - x: x1, - y: y1, - }; -} - -let color = [ - "#4278F8F9", - "transparent", - "#5372C4", - "transparent", - "#0046FFF9", - "transparent", - "#FB9434F9", - "transparent", - "#854101F9", - "transparent", - "#05E599F9", - "transparent", - "#219F73F9", - "transparent", - "#7CEDD5F9", - "transparent", +let colors = [ + "#68F4DD", + "#1785C0", + "#476DBC", + "#B55233", + "#B0862C", + "#35AD6B", + "#219F73", + "#7CEDD5", ]; let colorend = [ - "#4278F800", - "transparent", - "#5372C400", - "transparent", - "#0046FF00", - "transparent", - "#FB943400", - "transparent", - "#85410100", - "transparent", - "#05E59900", - "transparent", - "#219F7300", - "transparent", - "#7CEDD500", - "transparent", + "#4278F8", + "#5372C4", + "#0046FF", + "#FB9434", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", ]; - -// var res = this.evaluatedCountList; -var data1 = [], - data2 = [], - data3 = [], - legendData = []; -var curIndex = 0; -var index = 0; - -for (var i = 0; i < res.length; i++) { - // data1.push({ - // value: res[i].value, - // name: res[i].name, - // }); - // data2.push({ - // value: res[i].value, - // name: res[i].name, - // itemStyle: { - // opacity: 0.4, - // }, - // }); - - // data3.push({ - // value: res[i].value, - // name: res[i].name, - // itemStyle: { - // opacity: 0.1, - // }, - // }); - if (res[i].name != "") legendData.push(res[i].name); -} +var legendData = []; var options = { color: [ "#2867FF", - "transparent", "#58C3FF", - "transparent", "#FF6A3B", - "transparent", "#FDA474", - "transparent", "#FEE58F", - "transparent", "#8DFEBF", - "transparent", "#66F4DC", - "transparent", "#33E27D", - "transparent", "#5D8CFE", - "transparent", ], title: [ { @@ -144,23 +64,24 @@ var options = { containLabel: true, }, tooltip: { - show: false, + show: true, trigger: "item", - formatter: "{b} : {c}:{d}", + // formatter: "{b} : {c}", }, legend: { - orient: "", - left: "10%", - top: "68%", + width: "300px", + height: "120px", + orient: "vertical", + top: "60%", itemWidth: 10, itemHeight: 10, - icon: "circle", textStyle: { color: "#ffffff", fontSize: 14, lineHeight: 22, rich: { text: { + width: 100, marginLeft: 32, fontSize: 14, }, @@ -176,20 +97,13 @@ var options = { }, }, data: legendData, - // formatter(name) { - // const newData = res; - // let tarValue = 0; - // let total = 0; - // for (let i = 0; i < newData.length; i++) { - // total += newData[i].value; - // if (newData[i].name === name) { - // tarValue = newData[i].value; - // } - // } - // var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); - // const arr = name + " " + tarValue; - // return `{text|${name}} {number|${percert}%}`; - // }, + pageIconColor: "#fff", + pageIconSize: 10, + pageTextStyle: { + color: "#fff", + }, + type: "scroll", + pageButtonPosition: "end", }, series: [ /** 饼图上刻度 */ @@ -213,7 +127,7 @@ var options = { axisLabel: { show: false }, }, { - name: "中心效果圆", + name: "总数", type: "gauge", radius: "30%", center: ["50%", "35%"], @@ -271,6 +185,7 @@ var options = { value: 100, }, ], + // tooltip: false, }, { type: "pie", @@ -279,25 +194,8 @@ var options = { z: 10, label: { show: false, - position: "center", - formatter: (params) => { - return params.name + "\r\n" + params.value; - }, - rich: { - total: { - fontSize: 16, - color: "#04F5FE", - }, - efficiency: { - fontSize: 12, - color: "#00FD6D", - }, - }, - color: "#FFFFFF", - fontSize: 12, - lineHeight: 16, }, - data: res, + data: [], labelLine: { show: false, }, @@ -320,11 +218,11 @@ var options = { colorStops: [ { offset: 0, - color: color[params.dataIndex], // 0% 处的颜色 + color: "transparent", // 0% 处的颜色 }, { offset: 1, - color: colorend[params.dataIndex], // 100% 处的颜色 + color: colors[params.dataIndex], // 100% 处的颜色 }, ], globalCoord: false, // 缺省为 false diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue index dba247d0..691b709a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue @@ -43,9 +43,9 @@ export default { } console.log("total", total) for (let i = 0; i < data.length; i++) { - if (i % 2 === 0) { - data.splice(i + 1, 0, newObj) - } + // if (i % 2 === 0) { + // data.splice(i + 1, 0, newObj) + // } if (data[i].name != "") { nameData.push(data[i].name) } @@ -63,6 +63,7 @@ export default { }; chartsStatistics.legend.data = nameData; chartsStatistics.title[0].text = total; + // chartsStatistics.series[1].data[0].value = total; chartsStatistics.series[2].data = data; }) } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js index 1d2fd244..2ba09d97 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js @@ -1,146 +1,52 @@ -var res = [ - { value: 20, name: "交通事故" }, - { value: 1, name: "" }, - { value: 20, name: "车辆故障" }, - { value: 1, name: "" }, - { value: 15, name: "路障清除" }, - { value: 1, name: "" }, - { value: 10, name: "交通管制" }, - { value: 1, name: "" }, - { value: 5, name: "道路拥堵" }, - { value: 1, name: "" }, - { value: 5, name: "异常天气" }, - { value: 1, name: "" }, - { value: 20, name: "交通事故2" }, - { value: 1, name: "" }, - { value: 20, name: "车辆故障2" }, - { value: 1, name: "" }, - { value: 15, name: "路障清除2" }, - { value: 1, name: "" }, - { value: 10, name: "交通管制2" }, - { value: 1, name: "" }, - { value: 5, name: "道路拥堵2" }, - { value: 1, name: "" }, - { value: 5, name: "异常天气2" }, - { value: 1, name: "" }, -]; -let angle = 0; //角度，用来做简单的动画效果的 - -//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度) -function getCirlPoint(x0, y0, r, angle) { - let x1 = x0 + r * Math.cos((angle * Math.PI) / 180); - let y1 = y0 + r * Math.sin((angle * Math.PI) / 180); - return { - x: x1, - y: y1, - }; -} - -let color = [ - "#4278F8F9", - "transparent", +let colors = [ + "#4278F8", "#5372C4", - "transparent", - "#0046FFF9", - "transparent", - "#FB9434F9", - "transparent", - "#854101F9", - "transparent", - "#05E599F9", - "transparent", - "#219F73F9", - "transparent", - "#7CEDD5F9", - "transparent", - "#854101F9", - "transparent", - "#05E599F9", - "transparent", - "#219F73F9", - "transparent", - "#7CEDD5F9", - "transparent", + "#0046FF", + "#FB9434", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", ]; let colorend = [ - "#4278F800", - "transparent", - "#5372C400", - "transparent", - "#0046FF00", - "transparent", - "#FB943400", - "transparent", - "#85410100", - "transparent", - "#05E59900", - "transparent", - "#219F7300", - "transparent", - "#7CEDD500", - "transparent", - "#854101F9", - "transparent", - "#05E599F9", - "transparent", - "#219F73F9", - "transparent", - "#7CEDD5F9", - "transparent", + "#4278F8", + "#5372C4", + "#0046FF", + "#FB9434", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", + "#854101", + "#05E599", + "#219F73", + "#7CEDD5", ]; -// var res = this.evaluatedCountList; -var data1 = [], - data2 = [], - data3 = [], - legendData = []; -var curIndex = 0; -var index = 0; - -for (var i = 0; i < res.length; i++) { - data1.push({ - value: res[i].value, - name: res[i].name, - }); - // data2.push({ - // value: res[i].value, - // name: res[i].name, - // itemStyle: { - // opacity: 0.4, - // }, - // }) - - // data3.push({ - // value: res[i].value, - // name: res[i].name, - // itemStyle: { - // opacity: 0.1, - // }, - // }) - if (res[i].name != "") legendData.push(res[i].name); -} +let legendData = []; var options = { - color: [ - "#2867FF", - "transparent", - "#58C3FF", - "transparent", - "#FF6A3B", - "transparent", - "#FDA474", - "transparent", - "#FEE58F", - "transparent", - "#8DFEBF", - "transparent", - "#66F4DC", - "transparent", - "#33E27D", - "transparent", - "#5D8CFE", - "transparent", - ], + // color: [ + // "#2867FF", + // "#58C3FF", + // "#FF6A3B", + // "#FDA474", + // "#FEE58F", + // "#8DFEBF", + // "#66F4DC", + // "#33E27D", + // "#5D8CFE", + // "#FDA474", + // "#FEE58F", + // "#8DFEBF", + // "#66F4DC", + // "#33E27D", + // "#5D8CFE", + // ], title: [ { text: "999", @@ -173,28 +79,24 @@ var options = { containLabel: true, }, tooltip: { - show: false, + show: true, trigger: "item", - formatter: "{b} : {c}:{d}", + // formatter: "{b} : {c}:{d}", }, legend: { - type: "scroll", - show: true, - // width: 200, - orient: "", - left: "10%", - top: "68%", - // right: "30%", + width: "300px", + height: "120px", + orient: "vertical", + top: "60%", itemWidth: 10, itemHeight: 10, - icon: "circle", textStyle: { color: "#ffffff", fontSize: 14, lineHeight: 22, - overflow: "auto", rich: { text: { + width: 100, marginLeft: 32, fontSize: 14, }, @@ -210,7 +112,13 @@ var options = { }, }, data: legendData, - formatter(params) {}, + pageIconColor: "#fff", + pageIconSize: 10, + pageTextStyle: { + color: "#fff", + }, + type: "scroll", + pageButtonPosition: "end", }, series: [ /** 饼图上刻度 */ @@ -300,25 +208,8 @@ var options = { z: 10, label: { show: false, - position: "center", - formatter: (params) => { - return params.name + "\r\n" + params.value; - }, - rich: { - total: { - fontSize: 16, - color: "#04F5FE", - }, - efficiency: { - fontSize: 12, - color: "#00FD6D", - }, - }, - color: "#FFFFFF", - fontSize: 12, - lineHeight: 16, }, - data: res, + data: [], labelLine: { show: false, }, @@ -341,11 +232,11 @@ var options = { colorStops: [ { offset: 0, - color: color[params.dataIndex], // 0% 处的颜色 + color: "transparent", // 0% 处的颜色 }, { offset: 1, - color: colorend[params.dataIndex], // 100% 处的颜色 + color: colors[params.dataIndex], // 100% 处的颜色 }, ], globalCoord: false, // 缺省为 false 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 8e9a8c1d..1e9dc408 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 @@ -43,9 +43,9 @@ export default { } console.log("total88", total) for (let i = 0; i < data.length; i++) { - if (i % 2 === 0) { - data.splice(i + 1, 0, newObj) - } + // if (i % 2 === 0) { + // data.splice(i + 1, 0, newObj) + // } if (data[i].name != "") { nameData.push(data[i].name) } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js index b36caa20..44e0963a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js @@ -1,7 +1,15 @@ /* 数据 */ var options = { + tooltip: { + show: true, + trigger: "axis", + textStyle: { + // color: "#fff", + fontSize: 10, + }, + // formatter: "{b}：{c}人", + }, legend: { - // orient: 'vertical', icon: "circle", itemHeight: 8, itemWidth: 8, @@ -16,7 +24,7 @@ var options = { grid: { top: "15%", //上边距 right: "0", //右边距 - left: "0", //左边距 + left: "1px", //左边距 bottom: "10%", //下边距 containLabel: true, }, @@ -28,7 +36,7 @@ var options = { }, axisLine: { lineStyle: { - color: "rgba(49, 217, 255, 0.8)", + color: "#2A6278", }, }, axisLabel: { @@ -41,17 +49,19 @@ var options = { yAxis: [ { type: "value", - name: "", - max: 1200, - min: 0, - splitNumber: 5, + name: "（件）", nameTextStyle: { - color: "#BDC4C7", - fontSize: 10, - fontFamily: "Source Han Sans CN-Regular", - align: "left", - verticalAlign: "center", + color: "#E5E7E8", + fomtSize: 10, }, + // splitNumber: 5, + // nameTextStyle: { + // color: "#BDC4C7", + // fontSize: 10, + // fontFamily: "Source Han Sans CN-Regular", + // align: "left", + // verticalAlign: "center", + // }, axisLabel: { fontSize: 10, color: "#E5E7E8", @@ -65,7 +75,7 @@ var options = { }, splitLine: { lineStyle: { - color: "rgba(49, 217, 255, 0.5)", + color: "#2A6278", }, }, }, @@ -101,7 +111,7 @@ var options = { width: 2, }, - data: [], // 折线图的数据 + data: [5, 20, 40, 15, 20], // 折线图的数据 }, { name: "交通事件", @@ -133,7 +143,7 @@ var options = { global: false, }, }, - data: [], // 折线图的数据 + data: [5, 20, 30, 15, 20], // 折线图的数据 }, ], }; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js index 4d63e316..7abcecd8 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js @@ -17,19 +17,19 @@ let data2 = [120, 340, 750, 600, 400, 700, 900, 200]; let data3 = [200, 530, 920, 400, 600, 700, 300, 800]; let options = { tooltip: { - show: false, + show: true, trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, textStyle: { - color: "#fff", - fontSize: 12, + // color: "#fff", + fontSize: 10, }, - backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 - borderColor: "rgba(3, 31, 71, .0)", - formatter: "健康监测
{b1}：{c1}人", + // backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 + // borderColor: "rgba(3, 31, 71, .0)", + // formatter: "健康监测
{b}：{c}人", }, grid: { left: "0", @@ -65,9 +65,9 @@ let options = { }, yAxis: [ { - max: 900, - min: 0, - interval: 100, + // max: 900, + // min: 0, + // interval: 100, axisLine: { lineStyle: { color: "#1C82C5", @@ -91,16 +91,17 @@ let options = { }, }, { - max: 90, - min: 0, - interval: 10, + // max: 90, + // min: 60, + // interval: 10, axisLine: { - lineStyle: { - color: "#1C82C5", - }, + show: false, + // lineStyle: { + // color: "#1C82C5", + // }, }, splitLine: { - show: true, + show: false, lineStyle: { color: "#2A6278", type: "solid", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js index 157adb35..c2cb0821 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js @@ -3,13 +3,13 @@ let lc = [450, 500, 250, 340, 450, 500]; let lc2 = [400, 550, 200, 140, 400, 550]; let options = { tooltip: { - show: false, + show: true, trigger: "axis", - backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色 + // backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色 textStyle: { - color: "#fff", + // color: "#fff", + fontSize: 10, }, - fontSize: 12, // formatter: "{b}：{c}人", }, grid: { @@ -22,7 +22,7 @@ let options = { xAxis: { type: "category", boundaryGap: true, - data: [], + data: zData, axisLabel: { interval: 0, textStyle: { @@ -48,16 +48,12 @@ let options = { yAxis: [ { type: "value", - // splitNumber: 6, name: "(起) ", nameTextStyle: { color: "#E5E7E8", left: 10, fomtSize: 10, }, - min: 0, - max: 900, - interval: 100, axisLabel: { show: true, textStyle: { @@ -80,21 +76,17 @@ let options = { }, { type: "value", - // splitNumber: 6, name: " (分钟)", nameTextStyle: { color: "#E5E7E8", fomtSize: 10, }, - min: 0, - max: 90, - interval: 10, axisLabel: { show: true, textStyle: { color: "#fff", fontSize: 10, - formatter: "{value} °C", + // formatter: "{value} °C", }, }, // axisLine: { @@ -104,7 +96,7 @@ let options = { // show: false, // }, splitLine: { - show: true, + show: false, lineStyle: { color: "#2A6278", }, @@ -155,16 +147,16 @@ let options = { name: "事件数量", type: "pictorialBar", stack: "数量", - label: { - normal: { - show: false, - position: "top", - textStyle: { - color: "#FFFFFF", - fontSize: 16, - }, - }, - }, + // label: { + // normal: { + // show: false, + // position: "top", + // textStyle: { + // color: "#FFFFFF", + // fontSize: 16, + // }, + // }, + // }, itemStyle: { normal: { color: { @@ -189,7 +181,7 @@ let options = { }, symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z", - data: [], + data: lc, }, { name: "去年同期数量", @@ -197,16 +189,16 @@ let options = { stack: "else", barGap: "10%", boundaryGap: "100%", - label: { - normal: { - show: false, - position: "top", - textStyle: { - color: "#FFFFFF", - fontSize: 16, - }, - }, - }, + // label: { + // normal: { + // show: false, + // position: "top", + // textStyle: { + // color: "#FFFFFF", + // fontSize: 16, + // }, + // }, + // }, itemStyle: { normal: { color: { @@ -231,18 +223,19 @@ let options = { }, symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z", - data: [], + data: lc2, }, { name: "平均处置时长", yAxisIndex: 1, - data: [], + data: lc2, type: "line", symbol: "none", symbolSize: 20, smooth: true, + color: "#E2BA74", lineStyle: { - color: "#FB6D07", + color: "#E2BA74", width: 1, type: "dashed", // dashOffset:50 @@ -251,13 +244,14 @@ let options = { { name: "去年同期平均处置时长", yAxisIndex: 1, - data: [], + data: lc, type: "line", symbol: "none", symbolSize: 20, smooth: true, + color: "#FB6D07", lineStyle: { - color: "#E2BA74", + color: "#FB6D07", width: 1, type: "dashed", // dashOffset:50 diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js index a7ddfb83..ed1b34c5 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js @@ -1,5 +1,5 @@ -// const sxnja = [400, 400, 400]; -// const sxnja2 = [700, 700, 700]; +const sxnja = [400, 400, 400]; +const sxnja2 = [700, 700, 700]; // const minNumber = 90; // const minArray = []; @@ -22,10 +22,15 @@ var options = { }, }, tooltip: { - valueFormatter: function (value) { - return value; - // return (value + minNumber).toFixed(2) + " %"; + show: true, + textStyle: { + // color: "#fff", + fontSize: 10, }, + // valueFormatter: function (value) { + // return value; + // // return (value + minNumber).toFixed(2) + " %"; + // }, }, legend: { // orient: 'vertical', @@ -68,11 +73,6 @@ var options = { yAxis: [ { type: "value", - min: 0, - max: 900, - interval: 100, - splitNumber: 9, - // max: yAxisMax, axisLine: { show: false, lineStyle: { @@ -101,21 +101,12 @@ var options = { }, }, { - // type: 'value', - // min: function (value) { - // return value.min*0.9; - // }, type: "value", - min: 0, - max: 90, - interval: 10, - splitNumber: 9, - // max: yAxisMax, axisLine: { show: false, }, splitLine: { - show: true, + show: false, lineStyle: { color: "#2A6278", opacity: 0.3, @@ -138,7 +129,7 @@ var options = { series: [ { name: "事件数量（起）", - data: [], + data: sxnja2, type: "pictorialBar", symbol: "roundRect", symbolRepeat: true, @@ -153,7 +144,7 @@ var options = { barGap: "10%", name: "平均处置时长（分钟）", yAxisIndex: 1, - data: [], + data: sxnja, type: "pictorialBar", symbol: "roundRect", symbolRepeat: true, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue index a9d7fb67..0e86d8aa 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue @@ -1,8 +1,8 @@ - - + }); + }, +} + - +} + +.charts { + height: 100px; + width: 100%; +} + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss index 326da612..02407bd0 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss +++ b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss @@ -167,6 +167,14 @@ div.el-date-editor { div.el-popover:has(> .el-date-picker), div.el-picker-panel.el-date-picker.el-popper, div.el-picker-panel.el-date-range-picker.el-popper { + .disabled{ + div{ + span{ + color: #5E8998!important; + }background: #1B586D; + } + + } .next-month, .prev-month { span {