diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js index d1af6aca..7c08946f 100644 --- a/ruoyi-ui/src/common/menuData.js +++ b/ruoyi-ui/src/common/menuData.js @@ -88,6 +88,12 @@ export default [ name: "commandDispatch", component: "control/event/commandDispatch/index.vue", }, + { + title: "管控事件分析", + path: "/control/event/governanceAnalysis", + name: "governanceAnalysis", + component: "control/event/governanceAnalysis/index.vue", + }, ], }, ], diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue index 3c8b85f7..2686b17e 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Descriptions.vue @@ -81,7 +81,7 @@ export default { if (templateResult && templateResult != item.key) return templateResult - return result + return result || item.text; }, getComponent(type) { return `Form${type.replace(/^[a-z]/, word => word.toUpperCase())}` diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue index e93ec547..07287a86 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue @@ -4,7 +4,8 @@ - + @@ -85,15 +86,27 @@ export default { return item => { const result = item.visible ? item.visible(this.formData) : true; - if (!result) { - delete this.formData[item.key]; - } + // if (!result) { + // delete this.formData[item.key]; + // } return result; } } }, methods: { + resolveListeners(callbacks) { + + if (!callbacks) return; + + const result = {}; + + for (const key in callbacks) { + result[key] = (...args) => callbacks[key](...args, this.formData, this) + } + + return result + }, reset() { return this.formData = reduceDefaultValue(this.formList); }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball.svg b/ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball.svg new file mode 100644 index 00000000..17e57887 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball_fault.svg b/ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball_fault.svg new file mode 100644 index 00000000..b575f454 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball_fault.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue index 8aa32fd7..54114e46 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue @@ -74,6 +74,22 @@ export default { key: "controlType", type: "RadioGroup", default: "manual", + ons: { + input: (value, data) => { + const oldFormData = this.oldFormData; + if (!oldFormData) return; + + switch (value) { + case "manual": + data.onWorkStatus = oldFormData.onWorkStatus; + data.inWorkStatus = oldFormData.inWorkStatus; + break; + case "automatic": + Array.isArray(oldFormData.displayTime) && (data.displayTime = [...oldFormData.displayTime]); + break; + } + }, + }, options: { type: 'circle', options: [ @@ -113,13 +129,13 @@ export default { { label: "选择时间:", key: "displayTime", - type: "datePicker", + type: "timePicker", required: true, visible: (data) => data.controlType == "automatic", options: { - type: "datetimerange", - angeSeparator: "至", - valueFormat: "yyyy-MM-dd HH:mm:ss", + isRange: true, + rangeSeparator: "至", + valueFormat: "HH:mm", startPlaceholder: "开始时间", endPlaceholder: "结束时间", }, @@ -143,56 +159,64 @@ export default { handler(bool) { if (!bool) return; - request.post(`business/device/functions/${this.deviceId}/${52}`, {}) - .then(async (result) => { - if (result.code != 200) return; + this.reDisplay(); + } + } + }, + methods: { + reDisplay() { + request.post(`business/device/functions/${this.deviceId}/${52}`, {}) + .then(async (result) => { + if (result.code != 200) return; - await delay(0); + await delay(0); - const formData = this.$refs.FormConfigRef?.formData; + const formData = this.$refs.FormConfigRef?.formData; - const data = result.data[0]; + const data = result.data[0]; + console.log("%c [ data ]-155-「DeviceControlDialog.vue」", "font-size:15px; background:#66352f; color:#aa7973;", data); - switch (data.mode) { - case "00": - formData.controlType = "manual"; + switch (data.mode) { + case "00": + formData.controlType = "manual"; - formData.onWorkStatus = data.onWorkStatus; - formData.inWorkStatus = data.inWorkStatus; - break; - case "01": - formData.controlType = "automatic"; + formData.onWorkStatus = data.onWorkStatus; + formData.inWorkStatus = data.inWorkStatus; + break; + case "01": + formData.controlType = "automatic"; - formData.datePicker = [data.startDisplay, data.endDisplay]; - break; - } - }) - } - } - }, - methods: { + formData.displayTime = [data.startDisplay, data.endDisplay]; + break; + } + + this.oldFormData = { ...formData }; + }) + + }, handleSubmit() { - const result = cloneDeep(this.$refs.FormConfigRef?.formData); + const result = {}, formData = this.$refs.FormConfigRef?.formData; let functionId = 51; - result.mode = result.controlType === 'manual' ? "00" : "01"; + result.mode = formData.controlType === 'manual' ? "00" : "01"; delete result.controlType; if (result.mode === '01') { - if (!result.displayTime?.length) return Message.error(`时间不能为空!`); - result.startDisplayTime = result.displayTime[0]; - result.endDisplayTime = result.displayTime[1]; + if (!formData.displayTime?.length) return Message.error(`时间不能为空!`); + result.startDisplayTime = formData.displayTime[0]; + result.endDisplayTime = formData.displayTime[1]; delete result.displayTime; } else { - if (!result.onWorkStatus || !result.inWorkStatus) return Message.error(`工作状态不能为空!`) + if (!formData.onWorkStatus || !formData.inWorkStatus) return Message.error(`工作状态不能为空!`); + + result.onWorkStatus = formData.onWorkStatus + result.inWorkStatus = formData.inWorkStatus } this.submitting = true; - console.log(result); - // this.submitting = false; // return; @@ -213,9 +237,7 @@ export default { }) .finally(() => { this.submitting = false; - console.log(this.submitting) }) - console.log(result) } }, } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js index d08b34ea..38a5c421 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js @@ -33,6 +33,9 @@ export const eventMap = { // status: "0", // }; + const ballFault = require("@screen/images/deviceType/ball_fault.svg"); + const ball = require("@screen/images/deviceType/ball.svg"); + const data = await getDeviceList(1); // const data = [ // { @@ -74,6 +77,18 @@ export const eventMap = { data: extData, }; } catch (error) {} + }, + null, + { + iconCallback(bool, item) { + const type = JSON.parse(item.otherConfig)?.ptzCtrl; + + switch (type) { + case "0": + case 0: + return bool ? ball : ballFault; + } + }, } ); }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js index c0bb0a45..8f5879f8 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js @@ -97,23 +97,33 @@ export async function setMarkerCluster(map, points, markerFun) { * @param {*} _markerClick marker 点击 * @returns */ -export async function setMarkToMap(item, data, _markerClick, content) { +export async function setMarkToMap( + item, + data, + _markerClick, + content, + { iconCallback } = {} +) { const { mapIns } = this.getMap(); if (!mapIns) return Message.error("地图加载失败!"); - const normal = require(`@screen/images/layer${item.id.replace( - /^\.|[^/]+(?=.svg$)/g, - (data) => (data === "." ? "" : `${data}_active`) - )}`); + const normal = + normal || + require(`@screen/images/layer${item.id.replace( + /^\.|[^/]+(?=.svg$)/g, + (data) => (data === "." ? "" : `${data}`) + )}`); - const fault = require(`@screen/images/layer${item.id.replace( - /^\.|[^/]+(?=.svg$)/g, - (data) => (data === "." ? "" : `${data}_fault`) - )}`); + const fault = + fault || + require(`@screen/images/layer${item.id.replace( + /^\.|[^/]+(?=.svg$)/g, + (data) => (data === "." ? "" : `${data}_fault`) + )}`); const faultBg = require(`@screen/images/mapBg/fault.svg`); - const normalBg = require(`@screen/images/mapBg/active.svg`); + const normalBg = require(`@screen/images/mapBg/normal.svg`); const markerClick = (e) => { const extData = e.target.getExtData(); @@ -124,6 +134,10 @@ export async function setMarkToMap(item, data, _markerClick, content) { const markerCluster = await setMarkerCluster( mapIns, data.map((item) => { + const deviceIcon = + iconCallback === "function" && + iconCallback(item.deviceState == 1, item); + return { weight: 1, lnglat: [item.longitude, item.latitude], @@ -132,9 +146,7 @@ export async function setMarkToMap(item, data, _markerClick, content) { content: content || `
+ " src='${ + deviceIcon ? deviceIcon : item.deviceState == 1 ? normal : fault + }'>
`, }; }), diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js new file mode 100644 index 00000000..ab52e40c --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js @@ -0,0 +1,391 @@ +var res = [ + { value: 50, name: '情报板发布' }, + { value: 1, name: '' }, + { value: 20, name: '微博发布' }, + { value: 1, name: '' }, + { value: 30, name: '服务网站' }, + { value: 1, name: '' }, + ]; + // var res = this.evaluatedCountList; + var data1 = [], data2 = [], data3 = [], legendData = []; + var curIndex = 0; + var index = 0; + let angle = 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: ['#5CC5FF', 'transparent', '#54EFD5', 'transparent', '#FD9666', 'transparent', '#5C8CFE', 'transparent', '#51D5AD', 'transparent'], + title: [ + { + text:'999', + top: '25%', + textAlign: 'center', + left: '50%', + textStyle: { + color: '#ffffff', + fontSize: 30, + fontFamily: 'SourceHanSansCN', + }, + }, + { + text: '总数', + top: '38%', + textAlign: 'center', + left: '50%', + textStyle: { + color: 'rgba(242, 252, 253, 0.84)', + fontSize: 16, + fontFamily: 'SourceHanSansCN', + }, + }, + ], + grid: { + top: '3%', + left: '6%', + right: '6%', + bottom: '3%', + containLabel: true + }, + tooltip: { + 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) { + if ( name == "" ) return ""; + 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: '40%', // 错位调整此处 + 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 } + }, + /** 绘制外部圆弧-2-开始圆点 */ + { + type: 'custom', + coordinateSystem: 'none', + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; + return { + type: 'circle', + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos((350 + -angle) * Math.PI / 180), + cy: y0 + r * Math.sin((350 + -angle) * Math.PI / 180), + r: 4 + }, + style: { + fill: '#5BC4FF', + stroke: '#5BC4FF' + }, + silent: true + } + }, + data: [0] + }, + { + type: 'custom', + coordinateSystem: 'none', + renderItem: (params, api) => { + return { + type: 'arc', + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, + startAngle: (350 + -angle) * Math.PI / 180, + endAngle: (120 + -angle) * Math.PI / 180 + }, + style: { + fill: 'transparent', + stroke: '#5BC4FF66', + lineWidth: 2.6 + }, + silent: true + } + }, + data: [0] + }, + { + type: 'custom', + coordinateSystem: 'none', + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50; + return { + type: 'circle', + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos((150 + -angle) * Math.PI / 180), + cy: y0 + r * Math.sin((150 + -angle) * Math.PI / 180), + r: 4 + }, + style: { + fill: '#5BC4FF', + stroke: '#5BC4FF' + }, + silent: true + } + }, + data: [0] + }, + { + type: 'custom', + coordinateSystem: 'none', + renderItem: (params, api) => { + return { + type: 'arc', + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.50, + startAngle: (150 + -angle) * Math.PI / 180, + endAngle: (-30 + -angle) * Math.PI / 180 + }, + style: { + fill: 'transparent', + stroke: '#5BC4FF66', + lineWidth: 2.6 + }, + silent: true + } + }, + data: [0] + }, + { + type: 'custom', + coordinateSystem: 'none', + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; + return { + type: 'circle', + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos((590 + -angle) * Math.PI / 180), + cy: y0 + r * Math.sin((590 + -angle) * Math.PI / 180), + r: 4 + }, + style: { + fill: '#5BC4FF', + stroke: '#5BC4FF' + }, + silent: true + } + }, + data: [0] + }, + { + type: 'custom', + coordinateSystem: 'none', + renderItem: (params, api) => { + return { + type: 'arc', + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, + startAngle: (590 + -angle) * Math.PI / 180, + endAngle: (350 + -angle) * Math.PI / 180 + }, + style: { + fill: 'transparent', + stroke: '#5BC4FF66', + lineWidth: 2.6 + }, + silent: true + } + }, + data: [0] + }, + { + type: 'custom', + coordinateSystem: 'none', + renderItem: (params, api) => { + let x0 = api.getWidth() / 2; + let y0 = api.getHeight() / 2 - 59; + let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56; + return { + type: 'circle', + shape: { + /** 角度175° 外弧2开始角度 */ + cx: x0 + r * Math.cos((90 + -angle) * Math.PI / 180), + cy: y0 + r * Math.sin((90 + -angle) * Math.PI / 180), + r: 4 + }, + style: { + fill: '#5BC4FF', + stroke: '#5BC4FF' + }, + silent: true + } + }, + data: [0] + }, + { + type: 'custom', + coordinateSystem: 'none', + renderItem: (params, api) => { + return { + type: 'arc', + shape: { + cx: api.getWidth() / 2, + cy: api.getHeight() / 2 - 59, + r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.56, + startAngle: (90 + -angle) * Math.PI / 180, + endAngle: (160 + -angle) * Math.PI / 180 + }, + style: { + fill: 'transparent', + stroke: '#5BC4FF66', + lineWidth: 2.6 + }, + silent: true + } + }, + data: [0] + }, + { + type: 'pie', + radius: ['45%', '39%'], + 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: data1, + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderWidth: 6, + shadowBlur: 10, + borderRadius: 50, // 圆角 + } + } + }, + { + type: 'pie', + radius: ['25%', '39%'], + center: ['50%', '35%'], + label: { + show: false, + }, + data: data2, + labelLine: { + show: false, + }, + itemStyle: { + normal: { + borderWidth: 6, + shadowBlur: 10, + borderRadius: 0, // 圆角 + } + } + }, + ], + + }; + + export default options \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue new file mode 100644 index 00000000..023484e6 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue @@ -0,0 +1,66 @@ + + + + + + \ No newline at end of file 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 new file mode 100644 index 00000000..fd4fab3a --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js @@ -0,0 +1,284 @@ +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: '' }, + ]; + 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: '50%', + textStyle: { + color: '#ffffff', + fontSize: 30, + fontFamily: 'SourceHanSansCN', + }, + }, + { + text: '总数', + top: '38%', + textAlign: 'center', + left: '50%', + textStyle: { + color: 'rgba(242, 252, 253, 0.84)', + fontSize: 16, + fontFamily: 'SourceHanSansCN', + }, + }, + ], + grid: { + top: '38%', + left: '6%', + right: '6%', + bottom: '3%', + containLabel: true + }, + tooltip: { + 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: data1, + 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 \ No newline at end of file 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 new file mode 100644 index 00000000..d3a60c57 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue @@ -0,0 +1,66 @@ + + + + + + \ No newline at end of file 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 new file mode 100644 index 00000000..fd4fab3a --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js @@ -0,0 +1,284 @@ +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: '' }, + ]; + 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: '50%', + textStyle: { + color: '#ffffff', + fontSize: 30, + fontFamily: 'SourceHanSansCN', + }, + }, + { + text: '总数', + top: '38%', + textAlign: 'center', + left: '50%', + textStyle: { + color: 'rgba(242, 252, 253, 0.84)', + fontSize: 16, + fontFamily: 'SourceHanSansCN', + }, + }, + ], + grid: { + top: '38%', + left: '6%', + right: '6%', + bottom: '3%', + containLabel: true + }, + tooltip: { + 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: data1, + 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 \ No newline at end of file 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 new file mode 100644 index 00000000..f83ed3af --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue @@ -0,0 +1,66 @@ + + + + + + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/assets/charts3.js new file mode 100644 index 00000000..44d47f95 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/assets/charts3.js @@ -0,0 +1,308 @@ +import * as echarts from "echarts"; + +let xData = [ + "1月", + "2月", + "3月", + "4月", + "5月", + "6月", + "7月", + "8月", + "9月", + "10月", + "11月", + "12月" + ]; + let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; + let data2= [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500]; + let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800]; + let options = { + tooltip: { + show:false, + trigger: "axis", + axisPointer: { + // 坐标轴指示器，坐标轴触发有效 + type: "shadow", // 默认为直线，可选为：'line' | 'shadow' + }, + textStyle: { + color: "#fff", + fontSize: 14, + }, + backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色 + borderColor: "rgba(3, 31, 71, .0)", + formatter: "健康监测
{b1}：{c1}人", + }, + grid: { + left: "2%", + right: "4%", + top: "20%", + bottom: "10%", + containLabel: true, + }, + xAxis: { + data: xData, + show: true, + axisTick: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + axisLine: { + lineStyle: { + color: "#1C82C5", + }, + }, + axisLabel: { + interval: 0, + align: "center", + rotate: "1", + margin: "20", + textStyle: { + fontSize: 12, + color: "#50A2C1", + }, + }, + }, + yAxis: [ + { + min: 0, + axisLine: { + lineStyle: { + color: "#1C82C5", + }, + }, + splitLine: { + show: true, + lineStyle: { + color: "rgba(28, 130, 197, .3)", + type: "solid", + }, + }, + axisLabel: { + color: "#DEEBFF", + textStyle: { + fontSize: 12, + }, + }, + axisTick: { + show: false, + }, + }, + ], + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 6, + itemWidth: 6, + top: "5%", + right: "10%", + textStyle: { + color: "#fff", + }, + + data:[ + { + name:"审核通过", + itemStyle:{ + color:'#00A3FF', + }, + }, + { + name:"待审核", + itemStyle:{ + color:'#51BFA4', + }, + }, + { + name:"审核不通过", + itemStyle:{ + color:'#E2BA74', + }, + } + ], + }, + series: [ + { + name: "审核通过", + type: "bar", + barWidth: "10px", + selectedMode:false, + select:{ + itemStyle:{ + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1AC5FD", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + }, + itemStyle: { + // lenged文本 + opacity: 0.6, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1AC5FD", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data2, + }, + // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%) + { + name: "待审核", + type: "bar", + barWidth: "10px", + barGap: "120%", + selectedMode:false, + select:{ + itemStyle:{ + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB53", // 0% 处的颜色 + }, + { + offset: 1, + color: "#00E4BB53", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + }, + itemStyle: { + // lenged文本 + opacity: 0.6, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB", // 0% 处的颜色 + }, + { + offset: 1, + color: "#00E4BB00", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data1, + }, + +{ + name: "审核不通过", + type: "bar", + barWidth: "10px", + selectedMode:false, + select:{ + itemStyle:{ + opacity: 1, + color: function (params) { + var a = params; + + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1AC5FD", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + }, + itemStyle: { + // lenged文本 + opacity: 0.6, + color: function (params) { + var a = params.name; + console.log("==========a=============",a); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#FCBE39", // 0% 处的颜色 + }, + { + offset: 1, + color: "#FCBE3900", // 100% 处的颜色 + }, + ], + false + ); + }, + }, + data: data2, +}, + ], + }; + + + export default options; \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/index.vue new file mode 100644 index 00000000..8ddc301c --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/nucleusThrough/index.vue @@ -0,0 +1,133 @@ + + + + + + \ No newline at end of file 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 new file mode 100644 index 00000000..a98339fc --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js @@ -0,0 +1,180 @@ + +/* 数据 */ +let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别 +let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 +var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] +/* 数据整合 */ +let dataList = []; +nameList.map((item, index) => { + if (index === 4) { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FFB904' // 0% 处的颜色 + }, { + offset: 1, color: '#FF6969' // 100% 处的颜色 + }], + global: false // 缺省为 false + }, + borderRadius: 6 + }, + label: { show: false } + }) + } else { + dataList.push({ + name: item, + value: valueList[index], + itemStyle:{ + borderRadius: 6 + } + }) + } +}) + +var options = { + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 8, + itemWidth: 8, + top: "5%", + x: "right", + textStyle: { + color: "#fff", + }, + }, + grid: { + top: '15%',//上边距 + right: '0',//右边距 + left: '0',//左边距 + bottom: "10%",//下边距 + containLabel: true, + }, + xAxis: { + type: 'category', + data: nameList, + axisTick: { + show: false //隐藏X轴刻度 + }, + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)" + } + }, + axisLabel: { + show: true, + color: '#B6E6FF', + fontSize:8, + fontFamily: 'Source Han Sans CN-Regular', + }, + }, + yAxis: [{ + type: 'value', + name: "", + max: 1200, + min:0, + splitNumber:5, + nameTextStyle: { + color: '#B6E6FF', + fontSize: 13, + fontFamily: 'Source Han Sans CN-Regular', + align: "left", + verticalAlign: "center", + }, + axisLabel: { + fontSize: 13, + color: '#B6E6FF', + fontFamily: 'HarmonyOS Sans-Regular', + // formatter:function(value,index){ + // return yList[index] + // } + }, + axisLine: { + show: false, + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: 'rgba(49, 217, 255, 0.5)', + } + }, + }], + series: [ + { + name: '情报板发布', + type: 'line', + symbol: 'circle', + symbolSize: 0, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#32BB8A99" }, + { offset: 1, color: "#32BB8A00" }, + ], + global: false, + }, + }, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: '#32BB8A90', + }, + lineStyle: { + width:2, + }, + + data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 + }, + { + name: '服务网站', + type: 'line', + symbol: 'circle', + symbolSize: 0, + + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: '#E2BA7490', + }, + lineStyle: { + width: 2, + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#E2BA7490" }, + { offset: 1, color: "#E2BA7400" }, + ], + global: false, + }, + }, + data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 + }, + ] +} + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/index.vue new file mode 100644 index 00000000..606d6f7e --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/index.vue @@ -0,0 +1,66 @@ + + + + + + \ No newline at end of file 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 new file mode 100644 index 00000000..c4411f48 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js @@ -0,0 +1,180 @@ + +/* 数据 */ +let nameList = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"]; // 类别 +let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数 +var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"] +/* 数据整合 */ +let dataList = []; +nameList.map((item, index) => { + if (index === 4) { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FFB904' // 0% 处的颜色 + }, { + offset: 1, color: '#FF6969' // 100% 处的颜色 + }], + global: false // 缺省为 false + }, + borderRadius: 6 + }, + label: { show: false } + }) + } else { + dataList.push({ + name: item, + value: valueList[index], + itemStyle:{ + borderRadius: 6 + } + }) + } +}) + +var options = { + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 8, + itemWidth: 8, + top: "5%", + x: "right", + textStyle: { + color: "#fff", + }, + }, + grid: { + top: '20%',//上边距 + right: '0',//右边距 + left: '0',//左边距 + bottom: "10%",//下边距 + containLabel: true, + }, + xAxis: { + type: 'category', + data: nameList, + axisTick: { + show: false //隐藏X轴刻度 + }, + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)" + } + }, + axisLabel: { + show: true, + color: '#B6E6FF', + fontSize:8, + fontFamily: 'Source Han Sans CN-Regular', + }, + }, + yAxis: [{ + type: 'value', + name: "", + max: 1000, + min:0, + splitNumber:5, + nameTextStyle: { + color: '#B6E6FF', + fontSize: 13, + fontFamily: 'Source Han Sans CN-Regular', + align: "left", + verticalAlign: "center", + }, + axisLabel: { + fontSize: 13, + color: '#B6E6FF', + fontFamily: 'HarmonyOS Sans-Regular', + // formatter:function(value,index){ + // return yList[index] + // } + }, + axisLine: { + show: false, + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: 'rgba(49, 217, 255, 0.5)', + } + }, + }], + series: [ + { + name: '感知事件', + type: 'line', + symbol: 'circle', + symbolSize: 0, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "#32BB8A99" }, + { offset: 1, color: "#32BB8A00" }, + ], + global: false, + }, + }, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: '#32BB8A', + }, + lineStyle: { + width:2, + }, + + data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 + }, + { + name: '交通事件', + type: 'line', + symbol: 'circle', + symbolSize: 0, + + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: '#E2BA74', + }, + lineStyle: { + width: 2, + }, + smooth: true, + areaStyle: { + width: 4, + opacity: 0.25, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0.389, color: "##E2BA7490" }, + { offset: 1, color: "##E2BA7400" }, + ], + global: false, + }, + }, + data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 + }, + ] +} + +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue new file mode 100644 index 00000000..be895be9 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue @@ -0,0 +1,134 @@ + + + + + + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通事故.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通事故.png new file mode 100644 index 00000000..ca288136 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通事故.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通拥堵.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通拥堵.png new file mode 100644 index 00000000..9ee3ddeb Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通拥堵.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通管制.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通管制.png new file mode 100644 index 00000000..baf87026 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/交通管制.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/其他事件.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/其他事件.png new file mode 100644 index 00000000..e3f3da33 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/其他事件.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/异常天气.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/异常天气.png new file mode 100644 index 00000000..a4f41870 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/异常天气.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/施工建设.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/施工建设.png new file mode 100644 index 00000000..d1042784 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/施工建设.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/服务区异常.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/服务区异常.png new file mode 100644 index 00000000..12d1c69f Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/服务区异常.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/路障清除.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/路障清除.png new file mode 100644 index 00000000..e7be2ee1 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/路障清除.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/车辆故障.png b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/车辆故障.png new file mode 100644 index 00000000..f002ed8c Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/assets/车辆故障.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue new file mode 100644 index 00000000..b778310b --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/topComponent/index.vue @@ -0,0 +1,256 @@ + + + + + + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/index.vue new file mode 100644 index 00000000..30cd160f --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/index.vue @@ -0,0 +1,178 @@ + + + + + + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js index cf0fac1d..d5fde08a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/RoadSectionTolls/assets/charts.js @@ -20,7 +20,7 @@ let options = { fontSize: 14, color: "#000", }, - formatter: "{a}
{b} :\n\n{c} 个", + formatter: "{a}
{b} :\n\n{c} ", }, legend: { top: 10, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js index 4b35b669..48948996 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/assets/charts.js @@ -50,7 +50,7 @@ let options = { series: [{ type: 'radar', data: [data], - name: '安全作业', + name: '设备在线率', label: { show: true, formatter: function (params) { @@ -80,7 +80,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100], ], @@ -100,7 +100,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80] ], @@ -120,7 +120,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60], ], @@ -140,7 +140,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40], ], @@ -159,7 +159,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20], ], diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js index dfd3d256..9204ae69 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/assets/charts.js @@ -50,7 +50,7 @@ let options = { series: [{ type: 'radar', data: [data], - name: '安全作业', + name: '设备在线率', label: { show: true, formatter: function (params) { @@ -80,7 +80,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100, 100, 100, 100, 100], ], @@ -100,7 +100,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [80, 80, 80, 80, 80, 80, 80, 80,80, 80, 80, 80, 80, 80, 80, 80] ], @@ -120,7 +120,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [60, 60, 60, 60, 60, 60, 60, 60,60, 60, 60, 60, 60, 60, 60, 60], ], @@ -140,7 +140,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [40, 40, 40, 40, 40, 40, 40, 40,40, 40, 40, 40, 40, 40, 40, 40], ], @@ -159,7 +159,7 @@ let options = { }, { type: 'radar', - name: '安全作业', + name: '设备在线率', data: [ [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20], ], diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue index a55e0448..0a17c933 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue @@ -246,9 +246,8 @@ border-radius: 0px 0px 0px 0px; opacity: 1; border-radius: 50%; - border: 2px solid; - border: rgba(23, 162, 255, 0.2); - + border: 0px solid; +// border-image: linear-gradient(33deg, rgba(23, 162, 255, 0.71), rgba(23, 162, 255, 0)) 2 2; > .round-num { width:100%; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js index 43de80f3..2ef9faf8 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/assets/charts.js @@ -1,6 +1,6 @@ let chartIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTEyLTI5VDEwOjQ2OjE3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZjE1ZWVkNDgtNDA3ZS00MDU0LTliNTMtYTllZmQ1ODE5YjVmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMTVlZWQ0OC00MDdlLTQwNTQtOWI1My1hOWVmZDU4MTliNWYiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6MTM6MTQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplYzhkN2NkNS01ZjdjLTQ5Y2ItOTgyMy1lOTM4ODViNjRjMmIiIHN0RXZ0OndoZW49IjIwMjMtMTItMjlUMTA6NDY6MTcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNC4wIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PibZhN0AAAHBSURBVDiNfdTtThNREAbgZ5sCrRTaRaBqQDTR6AXaq9grJEaiKCJWaAv9ENDUH2fWLkU8yeTkZGbe885nNp/PVU9vIMMGNtHGo1BNMQoZF7k7jlkVqDewji72sI5VrIT6F64xwRecFbnJPaDeQBsv8RSdCpsS6BYzDENOcVTkLv8CBZPX2McOdrEVITYC6BpjnKOP7zjG+yI3yd5dzLNg8jbY7MW9g+2lHJUgpzgJOcRRPX7dj3C6eIaDAO+iGUCzYPERWSXU5+jXIxct5MFgN0AOsLaoi9Ul0HHkaoBOLZg0IoQNPMaTJZAqWDfytylVtol2LdishNFaKBv/AClPI3waISto1UKZoRZ39h8QFZus8laTqvEbNyEzqdQPnZ/hcyMl/BbTmpSsacg43v0wXD43+BE2V+FzjWFdmp1ZKAZheByUt91tyD4+S/00wGWAjerxOJYS2JSSngX4lrsNeREfnUg9dRG+o3JEWniDF1Lpd6U2KEdkHoyuwvkM36TmPCxy4+rQdvDKoss7FhugzM8kIjiPED8UuSH310jLYkRaUl9V18gswD7ha5Ebl77ZA4utLY1MOT4sRmKI0fJi+wM9v6Q1QC+Y6wAAAABJRU5ErkJggg==`; let xdata = { - value: ['华山北枢纽-济南虚', '东客站虚-华山北枢纽', '小许家枢纽-东客站虚', '临沂枣园枢纽-临沂虚', '华山北枢纽-济南虚', '华山北枢纽-济南虚', '华山北枢纽-济南虚'] + value: ['平阴停车区', '孔村枢纽', '平阴南收费站', '东平湖枢纽', '沙河停车区', '梁山东收费站', '王官屯枢纽'] }; let sdata = { value: [32774, 30067, 28774, 30067, 30021, 30067, 32774] diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue index 5122d809..093607d5 100644 --- a/ruoyi-ui/src/views/login.vue +++ b/ruoyi-ui/src/views/login.vue @@ -1,77 +1,39 @@