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 d6bf0b22..f4775636 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,3 +1,5 @@ +import { options } from "runjs"; + export const source = { label: "来源:", key: "eventSource", @@ -178,11 +180,11 @@ export const startTime = { required: true, isAlone: true, type: "datePicker", - options:{ + options: { type: "datetime", - format: 'yyyy-MM-dd HH:mm:ss', - valueFormat: 'yyyy-MM-dd HH:mm:ss' - } + format: "yyyy-MM-dd HH:mm:ss", + valueFormat: "yyyy-MM-dd HH:mm:ss", + }, }; export const expectedEndTime = { @@ -190,11 +192,11 @@ export const expectedEndTime = { key: "estimatedEndTime", isAlone: true, type: "datePicker", - options:{ + options: { type: "datetime", - format: 'yyyy-MM-dd HH:mm:ss', - valueFormat: 'yyyy-MM-dd HH:mm:ss' - } + format: "yyyy-MM-dd HH:mm:ss", + valueFormat: "yyyy-MM-dd HH:mm:ss", + }, }; export const eventLevel = { @@ -202,31 +204,31 @@ export const eventLevel = { key: "eventLevel", required: true, type: "select", - options:{ - options:[ + options: { + options: [ { key: 1, - label: '一级' + label: "一级", }, { key: 2, - label: '二级' + label: "二级", }, { key: 3, - label: '三级' + label: "三级", }, { key: 4, - label: '四级' + label: "四级", }, { key: 5, - label: '五级' + label: "五级", }, ], - disabled: true - } + disabled: true, + }, }; export const laneOccupancy = { @@ -334,11 +336,11 @@ export const eventType = { key: "11", label: "其他事件", }, - ] - } + ], + }, }; -export const vehicleCondition = (keyPrefix = 'dcEventAccident') => ({ +export const vehicleCondition = (keyPrefix = "dcEventAccident") => ({ label: "车辆情况:", key: "key25", isAlone: true, @@ -389,7 +391,7 @@ export const vehicleCondition = (keyPrefix = 'dcEventAccident') => ({ }, }); -export const casualties = (keyPrefix = 'dcEventAccident') => ({ +export const casualties = (keyPrefix = "dcEventAccident") => ({ label: "伤亡情况:", key: "key0036", isAlone: true, @@ -485,7 +487,7 @@ export const isInTunnel = { }; export const freeway = { - label: "高速公路:", + label: "路线:", required: true, key: "roadId", type: "select", @@ -495,8 +497,8 @@ export const freeway = { // key: "1", // label: "济菏高速", // }, - ] - } + ], + }, }; export const weatherCondition = { @@ -717,49 +719,49 @@ export const eventHappenTime = { key: "startTime", required: true, type: "datePicker", - options:{ + options: { type: "datetime", - format: 'yyyy-MM-dd HH:mm:ss', - valueFormat: 'yyyy-MM-dd HH:mm:ss' - } + format: "yyyy-MM-dd HH:mm:ss", + valueFormat: "yyyy-MM-dd HH:mm:ss", + }, }; export const aEstimatedReleaseTime = { label: "预计解除时间:", key: "estimatedEndTime", type: "datePicker", - options:{ + options: { type: "datetime", - format: 'yyyy-MM-dd HH:mm:ss', - valueFormat: 'yyyy-MM-dd HH:mm:ss' - } + format: "yyyy-MM-dd HH:mm:ss", + valueFormat: "yyyy-MM-dd HH:mm:ss", + }, }; export const pressure = { label: "压车(公里):", key: "dcEventAccident.trafficJam", - type:"inputNumber", - options:{ - min: 0 + type: "inputNumber", + options: { + min: 0, }, - ons:{ - change(value, ...args){ + ons: { + change(value, ...args) { const { data } = args.slice(-1)[0]; let dj = 5; - if(value < 3){ - dj = 5 - } else if(value >= 3 && value < 6){ - dj = 4 - }else if(value >= 6 && value < 9){ - dj = 3 - }else if(value >= 9 && value < 11){ - dj = 2 - }else if(value >10){ - dj = 1 + if (value < 3) { + dj = 5; + } else if (value >= 3 && value < 6) { + dj = 4; + } else if (value >= 6 && value < 9) { + dj = 3; + } else if (value >= 9 && value < 11) { + dj = 2; + } else if (value > 10) { + dj = 1; } - data.eventLevel = dj - } - } + data.eventLevel = dj; + }, + }, }; export const isCongestionAhead = { @@ -902,6 +904,9 @@ export const ownerPhone = { label: "车主电话:", key: "dcEventAccident.vehicleOwnerPhone", isAlone: true, + options: { + placeholder: "车主电话（多个电话请以逗号分隔，不超过10个）", + }, }; export const emptyLine = { 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 ac01b9df..095d0d97 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 @@ -1,262 +1,270 @@ import * as echarts from "echarts"; -var xData = ['梁山东', '安城', '梁山', '孝里', '平阴北', '长青','东平','平阴南','嘉祥西'] -let eventWarning = [55, 50, 46, 46, 55, 45,33,62,30] -let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200,1200,1900] -let legend = ['通行量', '收费金额'] +var xData = [ + "梁山东", + "安城", + "梁山", + "孝里", + "平阴北", + "长青", + "东平", + "平阴南", + "嘉祥西", +]; +let eventWarning = [55, 50, 46, 46, 55, 45, 33, 62, 30]; +let eventHandling = [2000, 1700, 1600, 1450, 2100, 1500, 1200, 1200, 1900]; +let legend = ["通行量", "收费金额"]; let options = { - color: ['#2CF1FF', '#3456FF'], - timeline: { + color: ["#2CF1FF", "#3456FF"], + timeline: { + show: false, + }, + tooltip: { + trigger: "axis", + // axisPointer: { + // type: "shadow", + // }, + // backgroundColor: "rgba(255,255,255,0.75)", + // extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);", + // textStyle: { + // fontSize: 14, + // color: "#000", + // }, + // formatter: "{a}
{b} :\n\n{c} ", + }, + legend: { + top: 10, + right: "center", + itemWidth: 10, + itemHeight: 6, + itemGap: 20, + icon: "roundRect", + orient: "horizontal", + itemStyle: { + borderRadius: 18, + }, + textStyle: { + color: "#ffffff", + fontSize: 13, + }, + data: legend, + }, + grid: [ + // 左边 + { show: false, - }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow", + left: "5%", + top: "15%", + bottom: "10%", + containLabel: true, + width: "40%", + }, + // 中间 + { + show: false, + left: "51%", + top: "15%", + bottom: "15%", + width: "0%", + }, + // 右边 + { + show: false, + right: "5%", + top: "15%", + bottom: "10%", + containLabel: true, + width: "40%", + }, + ], + xAxis: [ + { + type: "value", + inverse: true, + axisTick: { + show: false, }, - backgroundColor: "rgba(255,255,255,0.75)", - extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);", - textStyle: { - fontSize: 14, - color: "#000", + axisLabel: { + show: false, }, - formatter: "{a}
{b} :\n\n{c} ", - }, - legend: { - top: 10, - right: "center", - itemWidth: 10, - itemHeight: 6, - itemGap: 20, - icon:"roundRect", - orient: "horizontal", - itemStyle:{ - borderRadius:18, + axisLabel: { + show: true, + verticalAlign: "middle", + textStyle: { + color: "rgba(255, 255, 255, 0.7)", + fontSize: 12, + }, }, - textStyle: { - color: "#ffffff", - fontSize: 16, + splitLine: { + show: false, + }, + }, + { + gridIndex: 1, + show: false, + }, + { + gridIndex: 2, + axisLine: { + show: false, }, - data: legend, - }, - grid: [ - // 左边 - { - show: false, - left: "5%", - top: "15%", - bottom: "10%", - containLabel: true, - width: "40%", + axisTick: { + show: false, }, - // 中间 - { - show: false, - left: "51%", - top: "15%", - bottom: "15%", - width: "0%", + axisLabel: { + show: true, + verticalAlign: "middle", + textStyle: { + color: "rgba(255, 255, 255, 0.7)", + fontSize: 12, + }, }, - // 右边 - { - show: false, - right: "5%", - top: "15%", - bottom: "10%", - containLabel: true, - width: "40%", + splitLine: { + show: false, }, - ], - xAxis: [ - { - type: "value", - inverse: true, - axisTick: { - show: false, - }, - axisLabel: { - show: false, - }, - axisLabel: { - show: true, - verticalAlign: 'middle', - textStyle: { - color: 'rgba(255, 255, 255, 0.7)', - fontSize: 12, - }, - }, - splitLine: { - show: false, - }, + }, + ], + yAxis: [ + { + type: "category", + inverse: true, + position: "right", + axisLine: { + show: false, }, - { - gridIndex: 1, - show: false, + axisTick: { + show: false, }, - { - gridIndex: 2, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLabel: { - show: true, - verticalAlign: 'middle', - textStyle: { - color: 'rgba(255, 255, 255, 0.7)', - fontSize: 12, - }, - }, - splitLine: { - show: false, - }, + axisLabel: { + show: false, }, - ], - yAxis: [ - { - type: "category", - inverse: true, - position: "right", - axisLine: { - show: false - }, - axisTick: { - show: false, - }, - axisLabel: { - show: false, - }, - data: xData, + data: xData, + }, + { + gridIndex: 1, + type: "category", + inverse: true, + position: "left", + axisLine: { + show: false, }, - { - gridIndex: 1, - type: "category", - inverse: true, - position: "left", - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLabel: { - show: true, - color: "rgba(255, 255, 255, 1)", - fontSize: 12, + axisTick: { + show: false, + }, + axisLabel: { + show: true, + color: "rgba(255, 255, 255, 1)", + fontSize: 12, + align: "center", + }, + data: xData.map(function (value) { + return { + value: value, + textStyle: { align: "center", - }, - data: xData.map(function (value) { - return { - value: value, - textStyle: { - align: "center", - }, - }; - }), + }, + }; + }), + }, + { + gridIndex: 2, + type: "category", + inverse: true, + position: "left", + axisLine: { + show: false, }, - { - gridIndex: 2, - type: "category", - inverse: true, - position: "left", - axisLine: { - show: false - }, - axisTick: { - show: false, - }, - axisLabel: { - show: false, - }, - data: xData, + axisTick: { + show: false, }, - ], - series: [ - { - name: legend[0], - type: "bar", - barWidth: 10, - stack: "1", - label: { - normal: { - show: true, - position: "left", - z:"100", - valueAnimation: true, - textStyle: { - color: "#F5F5F5", - fontSize: 10, - }, - formatter: '{c}' - }, - }, - itemStyle: { - borderRadius:9, - //Y轴数字显示部分 - - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "#167145", - }, - { - offset: 1, - color: "#01EAC1", - }, - ]), - }, - data: eventWarning, - animationEasing: "elasticOut", - showBackground: true, - backgroundStyle: { - color: 'rgba(180, 180, 180, 0.2)' - } + axisLabel: { + show: false, }, - { - name: legend[1], - type: "bar", - stack: "2", - barWidth: 10, - xAxisIndex: 2, - yAxisIndex: 2, - label: { - normal: { - show: true, - position: "right", - z:"100", - valueAnimation: true, - textStyle: { - color: "#F5F5F5", - fontSize: 10, - }, - formatter: '{c}' - }, - }, - itemStyle: { - borderRadius:9, - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "#F89336", - }, - { - offset: 1, - color: "#D2BCA7", - }, - ]), - }, - data: eventHandling, - animationEasing: "elasticOut", - showBackground: true, - backgroundStyle: { - color: 'rgba(180, 180, 180, 0.2)' - } + data: xData, + }, + ], + series: [ + { + name: legend[0], + type: "bar", + barWidth: 10, + stack: "1", + label: { + normal: { + show: true, + position: "left", + z: "100", + valueAnimation: true, + textStyle: { + color: "#F5F5F5", + fontSize: 10, + }, + formatter: "{c}", + }, }, - ], -}; - + itemStyle: { + borderRadius: 9, + //Y轴数字显示部分 + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "#167145", + }, + { + offset: 1, + color: "#01EAC1", + }, + ]), + }, + data: eventWarning, + animationEasing: "elasticOut", + showBackground: true, + backgroundStyle: { + color: "rgba(180, 180, 180, 0.2)", + }, + }, + { + name: legend[1], + type: "bar", + stack: "2", + barWidth: 10, + xAxisIndex: 2, + yAxisIndex: 2, + label: { + normal: { + show: true, + position: "right", + z: "100", + valueAnimation: true, + textStyle: { + color: "#F5F5F5", + fontSize: 10, + }, + formatter: "{c}", + }, + }, + itemStyle: { + borderRadius: 9, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "#F89336", + }, + { + offset: 1, + color: "#D2BCA7", + }, + ]), + }, + data: eventHandling, + animationEasing: "elasticOut", + showBackground: true, + backgroundStyle: { + color: "rgba(180, 180, 180, 0.2)", + }, + }, + ], +}; - export default options \ No newline at end of file +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/assets/charts.js index 9c4ff8fe..14c97212 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/daylyAnalysis/assets/charts.js @@ -1,43 +1,56 @@ import * as echarts from "echarts"; -var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15] -var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15] +var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15]; +var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15]; var options = { tooltip: { - trigger: 'axis', - backgroundColor: 'rgba(17,95,182,0.5)', - textStyle: { - color: "#fff" - }, - formatter: function (params) { - return params[1].marker + '' + params[1].name + '\n' + - "
" + - "" + - " " + params[1].seriesName + ': ' + params[1].value + "\n" + ' ' + - "
" + - "" + - '' + " " + params[3].seriesName + ': ' + params[3].value; - } + // trigger: "axis", + // backgroundColor: 'rgba(17,95,182,0.5)', + // textStyle: { + // color: "#fff" + // }, + // formatter: function (params) { + // return params[1].marker + '' + params[1].name + '\n' + + // "
" + + // "" + + // " " + params[1].seriesName + ': ' + params[1].value + "\n" + ' ' + + // "
" + + // "" + + // '' + " " + params[3].seriesName + ': ' + params[3].value; + // } }, grid: { - left: '5%', - right: '5%', - top: '25%', - bottom: '12%' + left: "5%", + right: "5%", + top: "25%", + bottom: "12%", }, xAxis: { - data: ['01日', '02日', '03日', '04日', '05日', '06日','07日', '08日', '09日', '10日', '11日', '12日'], + data: [ + "01日", + "02日", + "03日", + "04日", + "05日", + "06日", + "07日", + "08日", + "09日", + "10日", + "11日", + "12日", + ], show: true, axisTick: { - show: false + show: false, }, axisLine: { show: true, lineStyle: { - type: 'solid', - color: '#2D4377', - opacity: 1 - } + type: "solid", + color: "#2D4377", + opacity: 1, + }, }, // lineStyle: { // show: true, @@ -46,229 +59,267 @@ var options = { axisLabel: { interval: 0, textStyle: { - color: 'rgba(255,255,255,0.8)', - fontSize: 14 + color: "rgba(255,255,255,0.8)", + fontSize: 12, }, - margin: 12 // 刻度标签与轴线之间的距离。 - } - - }, - yAxis: [{ - min: 0, - max: 18, - type: 'value', - minInterval:3, - maxInterval:3, - name: '(单位：万)', - nameTextStyle: { - align: 'left', - color: 'rgba(255,255,255,0.8)', - padding: [0, 0, 0, -20], - fontSize: 14 - }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#2D4377', - opacity: 0.5 - } + margin: 12, // 刻度标签与轴线之间的距离。 }, - axisTick: { - show: false + }, + yAxis: [ + { + min: 0, + max: 18, + type: "value", + minInterval: 3, + maxInterval: 3, + name: "(单位：万)", + nameTextStyle: { + align: "left", + color: "rgba(255,255,255,0.8)", + padding: [0, 0, 0, -20], + fontSize: 14, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + color: "#2D4377", + opacity: 0.5, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#2D4377", + }, + }, + axisLabel: { + textStyle: { + color: "rgba(255,255,255,0.8)", + fontSize: 12, + }, + }, + data: ["0", "3", "6", "9", "12", "15", "18"], }, - axisLine: { + { show: true, - lineStyle: { - color: '#2D4377', - } - }, - axisLabel: { - textStyle: { - color: 'rgba(255,255,255,0.8)', - fontSize: 14 - } - }, - data:[ - '0','3','6','9','12','15','18' - ], - }, { - show: true, - name: '', - min: 0, - max: 18, - type: 'value', - minInterval:3, - maxInterval:3, - splitNumber:3, - formatter:function(e){ - console.log("---------------",e); - }, - nameTextStyle: { - align: 'left', - color: 'rgba(255,255,255,0.8)', - padding: [0, 0, 0, 10], - fontSize: 14 - }, - splitLine: { show: false }, - axisLine: { show: true }, - axisTick: { show: false }, - axisLabel: { - textStyle: { fontSize: 14, color: 'rgba(255,255,255,0.8)' } + name: "", + min: 0, + max: 18, + type: "value", + minInterval: 3, + maxInterval: 3, + splitNumber: 3, + formatter: function (e) { + console.log("---------------", e); + }, + nameTextStyle: { + align: "left", + color: "rgba(255,255,255,0.8)", + padding: [0, 0, 0, 10], + fontSize: 14, + }, + splitLine: { show: false }, + axisLine: { show: true }, + axisTick: { show: false }, + axisLabel: { + textStyle: { fontSize: 12, color: "rgba(255,255,255,0.8)" }, + }, + data: ["0%", "3%", "6%", "9%", "12%", "15%", "18%"], }, - data:[ - '0%','3%','6%','9%','12%','15%','18%' - ], - }], + ], legend: { - icon: 'rect', + icon: "rect", itemWidth: 25, itemHeight: 10, - top: '5%', - right: '5%', + top: "5%", + right: "5%", textStyle: { - color: '#fff', - fontSize: 14 + color: "#fff", + fontSize: 12, }, - lineStyle:{ - show:false, + lineStyle: { + show: false, }, itemGap: 12, // 设置间距 - data:[{ - name:'增收金额', - itemStyle:{ - color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#1CE8E8' // 0% 处的颜色 - }, { - offset: 1, - color: '#2CAEE3' // 100% 处的颜色 - }], false) + data: [ + { + name: "增收金额", + itemStyle: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1CE8E8", // 0% 处的颜色 + }, + { + offset: 1, + color: "#2CAEE3", // 100% 处的颜色 + }, + ], + false + ), + }, }, - }, - { - name:'增涨率', - itemStyle:{ - color:"#006AA6" - } - }], + { + name: "增涨率", + itemStyle: { + color: "#006AA6", + }, + }, + ], }, series: [ - - // 下半截柱状图 + // 下半截柱状图 { - name: '增收金额', - type: 'bar', + name: "增收金额", + type: "bar", barWidth: 12, - barGap: '-100%', - borderCap:"round", - itemStyle: { // lenged文本 + barGap: "-100%", + borderCap: "round", + itemStyle: { + // lenged文本 opacity: 1, - borderCap:"round", + borderCap: "round", color: function (params) { - var a = params.name.slice(0, 2) - return new echarts.graphic.LinearGradient(1, 0, 0, 1, [{ - offset: 0, - color: '#1CE8E8' // 0% 处的颜色 - }, { - offset: 1, - color: '#2CAEE3' // 100% 处的颜色 - }], false) - } + var a = params.name.slice(0, 2); + return new echarts.graphic.LinearGradient( + 1, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#1CE8E8", // 0% 处的颜色 + }, + { + offset: 1, + color: "#2CAEE3", // 100% 处的颜色 + }, + ], + false + ); + }, }, - data: data1 + data: data1, }, - { - 'name': '', - 'type': 'pictorialBar', - 'symbolSize': [12, 12], - 'symbolOffset': [0, -4], - 'z': 5, + name: "", + type: "pictorialBar", + symbolSize: [12, 12], + symbolOffset: [0, -4], + z: 5, itemStyle: { opacity: 1, - borderCap:"round", + borderCap: "round", color: function (params) { - var a = params.name.slice(0, 2) + var a = params.name.slice(0, 2); - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#0BA7DA' // 0% 处的颜色 - }, { - offset: 1, - color: '#0BA7DA30' // 100% 处的颜色 - }], false) - } + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#0BA7DA", // 0% 处的颜色 + }, + { + offset: 1, + color: "#0BA7DA30", // 100% 处的颜色 + }, + ], + false + ); + }, }, - 'symbolPosition': 'end', - 'data': data1 + symbolPosition: "end", + data: data1, }, { - name: '增涨率', - 'z': 9, + name: "增涨率", + z: 9, yAxisIndex: 1, - type: 'line', + type: "line", data: data2, symbol: - "image://data:image/png;base64,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", - symbolSize: [20, 20], - symbolOffset:['0',0], + "image://data:image/png;base64,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", + symbolSize: [20, 20], + symbolOffset: ["0", 0], lineStyle: { normal: { width: 3, - color: '#006AA6' // 线条颜色 + color: "#006AA6", // 线条颜色 }, - borderWidth:5, - borderColor: '#006AA6' + borderWidth: 5, + borderColor: "#006AA6", }, - itemStyle:{ - color:"#006AA6", + itemStyle: { + color: "#006AA6", }, - }, { - name: '', - type: 'bar', + name: "", + type: "bar", barWidth: 12, - barGap: '-100%', + barGap: "-100%", z: 0, itemStyle: { - borderCap:"round", - color: '#163F7A', - opacity: .7, + borderCap: "round", + color: "#163F7A", + opacity: 0.7, }, - data: [18, 18, 18, 18, 18, 18,18, 18, 18, 18, 18, 18] + data: [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18], }, { - 'name': '', - 'type': 'pictorialBar', - 'symbolSize': [12, 12], - 'symbolOffset': [0, -5], - 'z': 5, + name: "", + type: "pictorialBar", + symbolSize: [12, 12], + symbolOffset: [0, -5], + z: 5, itemStyle: { barBorderRadius: [13, 13, 13, 13], opacity: 1, - borderCap:"round", + borderCap: "round", color: function (params) { - var a = params.name.slice(0, 2) + var a = params.name.slice(0, 2); - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#2CAEE3' // 0% 处的颜色 - }, { - offset: 1, - color: '#2CAEE3' // 100% 处的颜色 - }], false) - } + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#2CAEE3", // 0% 处的颜色 + }, + { + offset: 1, + color: "#2CAEE3", // 100% 处的颜色 + }, + ], + false + ); + }, }, - 'symbolPosition': 'end', - data: [0, 0, 0, 0, 0, 0,0, 0, 0,0, 0, 0] - } - ] -} + symbolPosition: "end", + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + }, + ], +}; // option && myChart3.setOption(option); // if (option && typeof option === "object") { @@ -290,4 +341,4 @@ var options = { // }, 2600); // } -export default options; \ No newline at end of file +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/assets/charts.js index 1492a683..2b30e267 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/chargeableOperations/components/monthlyAnalysis/assets/charts.js @@ -1,43 +1,56 @@ import * as echarts from "echarts"; -var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15] -var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15] +var data1 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15]; +var data2 = [5, 12, 4, 6, 7, 9, 10, 15, 3, 5, 6, 15]; var options = { tooltip: { - trigger: 'axis', - backgroundColor: 'rgba(17,95,182,0.5)', - textStyle: { - color: "#fff" - }, - formatter: function (params) { - return params[1].marker + '' + params[1].name + '\n' + - "
" + - "" + - " " + params[1].seriesName + ': ' + params[1].value + "\n" + ' ' + - "
" + - "" + - '' + " " + params[3].seriesName + ': ' + params[3].value; - } + // trigger: "axis", + // backgroundColor: 'rgba(17,95,182,0.5)', + // textStyle: { + // color: "#fff" + // }, + // formatter: function (params) { + // return params[1].marker + '' + params[1].name + '\n' + + // "
" + + // "" + + // " " + params[1].seriesName + ': ' + params[1].value + "\n" + ' ' + + // "
" + + // "" + + // '' + " " + params[3].seriesName + ': ' + params[3].value; + // } }, grid: { - left: '5%', - right: '5%', - top: '25%', - bottom: '12%' + left: "5%", + right: "5%", + top: "25%", + bottom: "12%", }, xAxis: { - data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'], + data: [ + "1月", + "2月", + "3月", + "4月", + "5月", + "6月", + "7月", + "8月", + "9月", + "10月", + "11月", + "12月", + ], show: true, axisTick: { - show: false + show: false, }, axisLine: { show: true, lineStyle: { - type: 'solid', - color: '#2D4377', - opacity: 1 - } + type: "solid", + color: "#2D4377", + opacity: 1, + }, }, // lineStyle: { // show: true, @@ -46,190 +59,219 @@ var options = { axisLabel: { interval: 0, textStyle: { - color: 'rgba(255,255,255,0.8)', - fontSize: 14 + color: "rgba(255,255,255,0.8)", + fontSize: 12, }, - margin: 12 // 刻度标签与轴线之间的距离。 - } - - }, - yAxis: [{ - min: 0, - max: 18, - minInterval:1, - maxInterval:1, - name: '(单位：万)', - nameTextStyle: { - align: 'left', - color: 'rgba(255,255,255,0.8)', - padding: [0, 0, 0, -20], - fontSize: 14 - }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#2D4377', - opacity: 0.5 - } + margin: 12, // 刻度标签与轴线之间的距离。 }, - axisTick: { - show: false + }, + yAxis: [ + { + min: 0, + max: 18, + minInterval: 1, + maxInterval: 1, + name: "(单位：万)", + nameTextStyle: { + align: "left", + color: "rgba(255,255,255,0.8)", + padding: [0, 0, 0, -20], + fontSize: 14, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + color: "#2D4377", + opacity: 0.5, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#2D4377", + }, + }, + axisLabel: { + textStyle: { + color: "rgba(255,255,255,0.8)", + fontSize: 12, + }, + }, + data: ["0", "3", "6", "9", "12", "15", "18"], }, - axisLine: { + { show: true, - lineStyle: { - color: '#2D4377', - } - }, - axisLabel: { - textStyle: { - color: 'rgba(255,255,255,0.8)', - fontSize: 14 - } - }, - data:[ - '0','3','6','9','12','15','18' - ], - }, { - show: true, - name: '', - min: 0, - max: 18, - splitNumber:3, - nameTextStyle: { - align: 'left', - color: 'rgba(255,255,255,0.8)', - padding: [0, 0, 0, 10], - fontSize: 14 - }, - splitLine: { show: false }, - axisLine: { show: true }, - axisTick: { show: false }, - axisLabel: { - textStyle: { fontSize: 14, color: 'rgba(255,255,255,0.8)' } + name: "", + min: 0, + max: 18, + splitNumber: 3, + nameTextStyle: { + align: "left", + color: "rgba(255,255,255,0.8)", + padding: [0, 0, 0, 10], + fontSize: 14, + }, + splitLine: { show: false }, + axisLine: { show: true }, + axisTick: { show: false }, + axisLabel: { + textStyle: { fontSize: 12, color: "rgba(255,255,255,0.8)" }, + }, + data: ["0%", "3%", "6%", "9%", "12%", "15%", "18%"], }, - data:[ - '0%','3%','6%','9%','12%','15%','18%' - ], - }], + ], legend: { - top: '5%', - right: '5%', - icon: 'rect', + top: "5%", + right: "5%", + icon: "rect", itemWidth: 25, itemHeight: 10, textStyle: { - color: '#fff', - fontSize: 14 + color: "#fff", + fontSize: 12, }, - lineStyle:{ - show:false, - color:"#00E4BB", + lineStyle: { + show: false, + color: "#00E4BB", }, - data:[{ - name:'增收金额', - itemStyle:{ - color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#00E4BB' // 0% 处的颜色 - }, { - offset: 1, - color: '#003B4E' // 100% 处的颜色 - }], false) + data: [ + { + name: "增收金额", + itemStyle: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ), + }, }, - }, - { - name:'增涨率', - itemStyle:{ - color:"#755400" - } - }], - itemGap: 12 // 设置间距 + { + name: "增涨率", + itemStyle: { + color: "#755400", + }, + }, + ], + itemGap: 12, // 设置间距 }, series: [ - - // 下半截柱状图 + // 下半截柱状图 { - name: '增收金额', - type: 'bar', + name: "增收金额", + type: "bar", barWidth: 12, - barGap: '-100%', - itemStyle: { // lenged文本 + barGap: "-100%", + itemStyle: { + // lenged文本 opacity: 1, barBorderRadius: [13, 13, 13, 13], color: function (params) { - var a = params.name.slice(0, 2) - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#00E4BB' // 0% 处的颜色 - }, { - offset: 1, - color: '#003B4E' // 100% 处的颜色 - }], false) - } + var a = params.name.slice(0, 2); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ); + }, }, - data: data1 + data: data1, }, - { - 'name': '', - 'type': 'pictorialBar', - 'symbolSize': [12, 12], - 'symbolOffset': [0, -4], - 'z': 5, + name: "", + type: "pictorialBar", + symbolSize: [12, 12], + symbolOffset: [0, -4], + z: 5, itemStyle: { opacity: 1, color: function (params) { - var a = params.name.slice(0, 2) + var a = params.name.slice(0, 2); - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#00E4BB' // 0% 处的颜色 - }, { - offset: 1, - color: '#00E4BB30' // 100% 处的颜色 - }], false) - } + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB", // 0% 处的颜色 + }, + { + offset: 1, + color: "#00E4BB30", // 100% 处的颜色 + }, + ], + false + ); + }, }, - 'symbolPosition': 'end', - 'data': data1 + symbolPosition: "end", + data: data1, }, { - name: '增涨率', - 'z': 9, + name: "增涨率", + z: 9, yAxisIndex: 1, - type: 'line', + type: "line", data: data2, - symbol:"image://data:image/png;base64,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", - symbolSize: [20, 20], - symbolOffset:['0',0], + symbol: + "image://data:image/png;base64,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", + symbolSize: [20, 20], + symbolOffset: ["0", 0], lineStyle: { normal: { width: 3, - color: '#FF9B61' // 线条颜色 + color: "#FF9B61", // 线条颜色 }, - borderColor: '#FF9B61' + borderColor: "#FF9B61", }, - }, { - name: '', - type: 'bar', + name: "", + type: "bar", barWidth: 12, - barGap: '-100%', + barGap: "-100%", z: 0, itemStyle: { - color: '#163F7A', - opacity: .7, + color: "#163F7A", + opacity: 0.7, }, - data: [18, 18, 18, 18, 18, 18,18, 18, 18, 18, 18, 18] - } - ] -} + data: [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18], + }, + ], +}; // option && myChart3.setOption(option); // if (option && typeof option === "object") { @@ -251,4 +293,4 @@ var options = { // }, 2600); // } -export default options; \ No newline at end of file +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js index 417577a6..238132ac 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js @@ -2,34 +2,36 @@ import * as echarts from "echarts"; let options = { tooltip: { - trigger: 'axis', - backgroundColor: 'rgba(17,95,182,0.5)', + trigger: "axis", + backgroundColor: "rgba(17,95,182,0.5)", textStyle: { - color: "#fff" + color: "#fff", }, formatter: function (params) { - return params[0].name + params[0].seriesName + ': ' + params[0].value + '%' - } + return ( + params[0].name + params[0].seriesName + ": " + params[0].value + "%" + ); + }, }, grid: { - left: '2%', - right: '2%', - top: '15%', - bottom: '12%' + left: "2%", + right: "0%", + top: "15%", + bottom: "12%", }, xAxis: { data: [], show: true, axisTick: { - show: false + show: false, }, axisLine: { show: true, lineStyle: { - type: 'solid', - color: '#2D4377', - opacity: 1 - } + type: "solid", + color: "#2D4377", + opacity: 1, + }, }, // lineStyle: { // show: true, @@ -38,126 +40,147 @@ let options = { axisLabel: { interval: 0, textStyle: { - color: 'rgba(255,255,255,0.8)', - fontSize: 14 + color: "rgba(255,255,255,0.8)", + fontSize: 14, }, - margin: 12 // 刻度标签与轴线之间的距离。 - } - - }, - yAxis: [{ - min: 0, - max: 100, - type: 'value', - minInterval: 20, - maxInterval: 20, - name: "", - nameTextStyle: { - align: 'left', - color: 'rgba(255,255,255,0.8)', - padding: [0, 0, 0, -20], - fontSize: 14 - }, - splitLine: { - show: true, - lineStyle: { - type: 'dashed', - color: '#2D4377', - opacity: 0.5 - } + margin: 12, // 刻度标签与轴线之间的距离。 }, - axisTick: { - show: false - }, - axisLine: { - show: true, - lineStyle: { - color: '#2D4377', - } - }, - axisLabel: { - textStyle: { - color: 'rgba(255,255,255,0.8)', - fontSize: 14 - } + }, + yAxis: [ + { + min: 0, + max: 100, + type: "value", + minInterval: 20, + maxInterval: 20, + name: "", + nameTextStyle: { + align: "left", + color: "rgba(255,255,255,0.8)", + padding: [0, 0, 0, -20], + fontSize: 14, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + color: "#2D4377", + opacity: 0.5, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#2D4377", + }, + }, + axisLabel: { + textStyle: { + color: "rgba(255,255,255,0.8)", + fontSize: 14, + }, + }, + data: ["0", "3", "6", "9", "12", "15", "18"], }, - data: [ - '0', '3', '6', '9', '12', '15', '18' - ], - }], + ], legend: { - top: '5%', - right: '5%', - icon: 'rect', + top: "5%", + right: "5%", + icon: "rect", itemWidth: 25, itemHeight: 10, textStyle: { - color: '#fff', - fontSize: 14 + color: "#fff", + fontSize: 14, }, lineStyle: { show: false, color: "#00E4BB", }, - data: [{ - name: '高清网络球型摄像机', - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#00E4BB' // 0% 处的颜色 - }, { - offset: 1, - color: '#003B4E' // 100% 处的颜色 - }], false) + data: [ + { + name: "高清网络球型摄像机", + itemStyle: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ), + }, }, - }, - { - name: '增涨率', - itemStyle: { - color: "#755400" - } - }], - itemGap: 12 // 设置间距 + { + name: "增涨率", + itemStyle: { + color: "#755400", + }, + }, + ], + itemGap: 12, // 设置间距 }, series: [ - // 下半截柱状图 { - name: '', - type: 'bar', + name: "", + type: "bar", barWidth: 12, - barGap: '-100%', - itemStyle: { // lenged文本 + barGap: "-100%", + itemStyle: { + // lenged文本 opacity: 1, barBorderRadius: [13, 13, 13, 13], color: function (params) { - var a = params.name.slice(0, 2) - return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#00E4BB' // 0% 处的颜色 - }, { - offset: 1, - color: '#003B4E' // 100% 处的颜色 - }], false) - } + var a = params.name.slice(0, 2); + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00E4BB", // 0% 处的颜色 + }, + { + offset: 1, + color: "#003B4E", // 100% 处的颜色 + }, + ], + false + ); + }, }, - data: [] + data: [], }, { - name: '', - type: 'bar', + name: "", + type: "bar", barWidth: 12, - barGap: '-100%', + barGap: "-100%", z: 0, itemStyle: { - color: '#0BA7DA', - opacity: .1, + color: "#0BA7DA", + opacity: 0.1, }, - data: [] - } - ] -} + data: [], + }, + ], +}; // option && myChart3.setOption(option); // if (option && typeof option === "object") { @@ -179,4 +202,4 @@ let options = { // }, 2600); // } -export default options; \ No newline at end of file +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue index 811c9f73..250e7a5b 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue @@ -17,9 +17,9 @@ @click="SystemStatusExport">导出Excel
- +
- +
@@ -109,10 +109,10 @@ export default { }, data() { return { - searchText:"请设置查询条件", - isEmpty01:true, - emptyText01:"请输入参数查询...", - isEmpty02:true, + searchText: "请设置查询条件", + isEmpty01: true, + emptyText01: "请输入参数查询...", + isEmpty02: true, emptyText02: "请输入参数查询...", startTime: "", time: "", @@ -180,11 +180,11 @@ export default { return year + "-" + m + "-" + day + " 00:00:00"; }, - onRefreshData(){ - if(!this.typeQuery || !this.startTime){ + onRefreshData() { + if (!this.typeQuery || !this.startTime) { this.$message({ - message : "请先设置查询条件！", - type : "warning" + message: "请先设置查询条件！", + type: "warning" }) return } @@ -195,7 +195,7 @@ export default { this.typeQuery = data.type; this.startTime = this.formatDate(data.time[0]); this.time = this.formatDate(data.time[1]); - let typeText = this.searchFormList[1].options.options[this.typeQuery-1].label; + let typeText = this.searchFormList[1].options.options[this.typeQuery - 1].label; this.searchText = `${moment(this.startTime).format("YYYY年MM月DD日")}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`; this.initQueryChart(); this.initQueryTable(1); @@ -271,16 +271,16 @@ export default { }) }, - setStatus(id,status){ - if(status == "doing"){ - this["isEmpty" + id] = true - this["emptyText" + id] = "数据查询中..." - }else if(status == "empty"){ - this["isEmpty" + id] = true - this["emptyText" + id] = "暂无数据..." - } else if (status == "finish") { - this["isEmpty" + id] = false - this["emptyText" + id] = "" + setStatus(id, status) { + if (status == "doing") { + this["isEmpty" + id] = true + this["emptyText" + id] = "数据查询中..." + } else if (status == "empty") { + this["isEmpty" + id] = true + this["emptyText" + id] = "暂无数据..." + } else if (status == "finish") { + this["isEmpty" + id] = false + this["emptyText" + id] = "" } }, initQueryChart() { @@ -294,12 +294,12 @@ export default { }).then((res) => { if (res.code == 200) { - if (res.data && Object.keys(res.data).length>0) { - + if (res.data && Object.keys(res.data).length > 0) { + this.setStatus("01", "finish"); let origin = res.data; - + let startStamp = +moment(this.startTime).startOf('day').format("x"); let endStamp = +moment(this.time).endOf('day').format("x"); let oneDay = 86400000; @@ -320,15 +320,15 @@ export default { chartsStatistics.series[0].data = data0; chartsStatistics.series[1].data = data1; chartsStatistics.yAxis[0].name = "在线率(%)"; - + this.$nextTick(() => { this.queryChart.setOption(chartsStatistics); }); - }else{ + } else { this.setStatus("01", "empty"); - + } @@ -346,17 +346,17 @@ export default { pageSize: pageSize, }).then((res) => { if (res.code == 200) { - if(res.rows && res.rows.length>0){ - this.setStatus("02", "finish"); - this.pageIndex = pageIndex; - this.pageSize = pageSize; - this.pageTotal = res.total; - this.tableData = res.rows; - this.tableData.forEach((it, index) => { - it.order = (pageIndex - 1) * (pageSize) + index + 1; - }) - }else{ - this.setStatus("02", "empty"); + if (res.rows && res.rows.length > 0) { + this.setStatus("02", "finish"); + this.pageIndex = pageIndex; + this.pageSize = pageSize; + this.pageTotal = res.total; + this.tableData = res.rows; + this.tableData.forEach((it, index) => { + it.order = (pageIndex - 1) * (pageSize) + index + 1; + }) + } else { + this.setStatus("02", "empty"); } } }) @@ -371,12 +371,14 @@ export default { +} + +.charts { + height: 180px; + width: 100%; +} + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue index 77e2c3fe..daa74c2f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue @@ -1,382 +1,366 @@ +
+ - - - + + .weaterTitle::before { + content: ""; + position: absolute; + top: 38px; + left: 0px; + width: 100%; + height: 2px; + background: linear-gradient(90deg, rgba(189, 255, 246, 0) 0%, #BDFFF6 52%, rgba(189, 255, 246, 0) 100%); + border-radius: 0px 0px 0px 0px; + opacity: 1; + } + + .weaterTitle { + position: relative; + display: inline-flex; + width: 277px; + height: 38px; + background: linear-gradient(269deg, rgba(55, 231, 255, 0) 6%, rgba(55, 231, 255, 0.6) 50%, rgba(55, 231, 255, 0) 92%); + border-radius: 0px 0px 0px 0px; + opacity: 1; + justify-content: center; + align-items: center; + + >span.text { + display: inline-flex; + font-size: 16px; + font-family: PangMenZhengDao; + font-weight: 400; + color: #FFFFFF; + } + + + .num { + display: inline-flex; + justify-content: center; + align-items: center; + font-size: 22px; + font-family: PangMenZhengDao; + font-weight: 400; + color: #D9001B; + } + } + } + + } +} + +.charts { + height: 180px; + width: 100%; +} + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js index d4c4876d..924ab111 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js @@ -94,8 +94,8 @@ let options = { legend: { // orient: 'vertical', icon: "circle", - itemHeight: 6, - itemWidth: 6, + itemHeight: 8, + itemWidth: 8, top: "0%", x: "80%", textStyle: { @@ -106,7 +106,7 @@ let options = { { name: "交通特征", itemStyle: { - color: "#51BFA4", + color: "#01DDB7", }, }, { @@ -118,7 +118,7 @@ let options = { { name: "拥挤度", itemStyle: { - color: "#E2BA74", + color: "#EAB63B", }, }, ], @@ -147,7 +147,7 @@ let options = { }, { offset: 1, - color: "#003B4E", // 100% 处的颜色 + color: "#34CCF2", // 100% 处的颜色 }, ], false @@ -230,7 +230,7 @@ let options = { }, { offset: 1, - color: "#00E4BB53", // 100% 处的颜色 + color: "#01DBB6", // 100% 处的颜色 }, ], false @@ -312,7 +312,7 @@ let options = { }, { offset: 1, - color: "#003B4E", // 100% 处的颜色 + color: "#EAB63B", // 100% 处的颜色 }, ], false 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 e43bf4ec..5f5c64f8 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 @@ -356,7 +356,7 @@ export default { display: inline-flex; width: 100%; height: 30px; - font-size: 16px; + font-size: 14px; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #30BFEC;