diff --git a/ruoyi-ui/README.md b/ruoyi-ui/README.md index 559cb4f1..8f09f38e 100644 --- a/ruoyi-ui/README.md +++ b/ruoyi-ui/README.md @@ -74,3 +74,112 @@ npm install video-flash --save npm install file-saver --save ``` + +## 开发教程 + +### Element Form 封装 + +PresetFormItems.js 里面封装了一些可以复用的表单项 +data.js 表单封装,里面会使用PresetFormItems的一些FormItem. + +Form表单属性介绍: + + { + key: "ServiceAreaAbnormal", //唯一标识 一般tabs才需要 + label: "服务区异常",//表单标题 + formConfig: { + formOptions: {//element中表单配置参数 + column: 2, + }, + list: [//FormItem定义 + { + label: "异常分类:", + key: "eventSubclass", + type: "RadioGroup", + isAlone: true, + required: true, + options: { + activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", + options: [ + { + key: "8-1", + label: "封闭、暂停营业", + }, + { + key: "8-2", + label: "重要设施停用", + }, + { + key: "8-3", + label: "其他异常", + }, + ], + }, + }, + PresetFormItems.freeway, + PresetFormItems.direction, + { + label: "服务区:", + key: "dcEventServiceArea.facilityId", + type: "select", + isAlone: true, + required: true, + options: { + options: [ + { + value: "选项1", + label: "黄金糕", + }, + ], + }, + }, + { + label: "出入口:", + key: "dcEventServiceArea.exitsInlets", + type: "RadioGroup", + isAlone: true, + required: true, + options: { + activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", + options: [ + { + key: "1", + label: "出口", + }, + { + key: "2", + label: "入口", + }, + ], + }, + }, + PresetFormItems.startTime, + PresetFormItems.expectedEndTime, + PresetFormItems.remark, + PresetFormItems.source, + ], + }, + } + +FormItem属性介绍: + +export const additionalNotes = { + label: "补充说明:", // 标题 + key: "eventSourceTips", //数据存储字段 + isAlone: true, // 独立 + required: true, //必填 + default: 5, //默认值 + type: "input", //组件类型(el-input 去掉el-即可) 不填默认为input + options: { //element原生formItem属性 + type: "textarea", + autosize: true, + maxlength: 150, + autosize: { minRows: 6, maxRows: 6 }, + showWordLimit: true, + }, + visible: data => { //现隐控制 + if (data.searchType == 1) { + return true + } + }, +}; diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/Frame.svg b/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/Frame.svg new file mode 100644 index 00000000..d5326211 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/Frame.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.jpg b/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.jpg new file mode 100644 index 00000000..67814fe5 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/home-Frame/logoMean.jpg differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue index 760e2c83..d2dc382d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue @@ -30,6 +30,7 @@ import Button from '@screen/components/Buttons/Button.vue'; import Form from '@screen/components/FormConfig'; import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; import { merge, cloneDeep } from "lodash" +import request from "@/utils/request"; export default { name: 'HomeFilter', @@ -109,6 +110,19 @@ export default { ], }, }), + { + label: "设备类型:", + key: "deviceType", + type: "select", + options: { + options: [] + }, + // visible: data => { + // if (data.searchType == 1) { + // return true + // } + // }, + }, ] } }, @@ -132,7 +146,20 @@ export default { if (!data.endStakeMark[0] || !data.endStakeMark[1]) delete data.endStakeMark; this.filterEnd(data) + }, + async getDeviceTypeOptions() { + // try { + // await request({ + // url: `/business/employees/organization`, + // method: "POST", + // data: {}, + // }); + // } catch (e) { console.error(e); } + // return ; } + }, + async created() { + // await this.getDeviceTypeOptions(); } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue new file mode 100644 index 00000000..28a546e3 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue @@ -0,0 +1,94 @@ + + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue index 8e380825..2e0435c8 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue @@ -13,7 +13,10 @@
- +
+ + +
@@ -37,6 +40,7 @@ import ConditionStatistics from "./components/ConditionStatistics/index.vue"; import RoadAndEvents from "./components/RoadAndEvents/index.vue"; import AMapContainer from "./components/AMapContainer/index.vue"; import HomeFilter from "./components/HomeFilter/index.vue"; +import HomeFrame from "./components/HomeFrame/index.vue"; import Button from '@screen/components/Buttons/Button.vue'; // import InfoBoard from "./components/InfoBoard" @@ -50,7 +54,8 @@ export default { RoadAndEvents, AMapContainer, Button, - HomeFilter + HomeFilter, + HomeFrame, // InfoBoard }, data() { @@ -138,11 +143,22 @@ export default { display: flex; gap: 9px; - .filter { + .home-icons { display: flex; + gap: 0px; flex-direction: column; - gap: 9px; - padding-top: 15px; + + .filter { + display: flex; + gap: 9px; + padding-top: 15px; + } + + .Frame { + display: flex; + gap: 9px; + padding-top: 15px; + } } .right { 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 56f21616..80c6e030 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 @@ -97,6 +97,12 @@ export const station = { }, ], }, + visible: (data) => { + if (data?.dcEventAccident?.locationType != 1) { + return false; + } + return true; + }, }; export const startEndStation = { @@ -234,7 +240,7 @@ export const eventLevel = { export const laneOccupancy = { label: "车道占用:", - key: "dcEventAccident.laneOccupancy", + key: "lang", type: "CheckboxGroup", isAlone: true, default: [], @@ -655,23 +661,23 @@ export const trafficAccidentType = { options: { options: [ { - value: "1-1", + value: "1", label: "追尾", }, { - value: "1-2", + value: "2", label: "侧翻", }, { - value: "1-3", + value: "3", label: "撞护栏", }, { - value: "1-4", + value: "4", label: "自然", }, { - value: "1-5", + value: "5", label: "其他事故", }, ], @@ -698,6 +704,7 @@ export const locationMode = { key: "dcEventAccident.locationType", required: true, type: "select", + default: "1", options: { options: [ { key: "1", label: "高速主线" }, @@ -1083,4 +1090,58 @@ export const congestionCause = { }, ], }, + ons: { + input(value, ...args) { + console.log(value); + const { formList } = args.slice(-1)[0]; + const config = formList.find((it) => it.key == "xxyy"); + let ad = { + 1: [ + { + key: "1", + label: "收费站广场拥堵导致出口压车", + }, + { + key: "2", + label: "收费站设备故障", + }, + { + key: "3", + label: "地方道路原因", + }, + { + key: "4", + label: "省内非集团所辖高速原因", + }, + { + key: "5", + label: "集团所辖道路拥堵", + }, + { + key: "6", + label: "集团所辖枢纽立交异常导致主线压车", + }, + { + key: "7", + label: "路侧起火", + }, + { + key: "8", + label: "备注项添加", + }, + ], + 2 : [ + { + key: "1", + label: "主线车流量大", + }, + { + key: "2", + label: "收费站出口车流量大导致主线压车", + }, + ] + } + config.options.options = (value != 1 ? ad[1] : ad[2]); + }, + }, }; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js index 929d287b..1342fd92 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js @@ -12,6 +12,114 @@ export const tabConfigList = [ PresetFormItems.eventLevel, { ...PresetFormItems.locationMode, key: 'dcEventAccident.locationType' }, PresetFormItems.freeway, + { + label: "服务区:", + key: "dcEventAccident.facilityId", + type: "select", + isAlone: false, + required: true, + options: { + options: [ + { + value: "选项1", + label: "黄金糕", + }, + ], + }, + visible:(data) => { + if(data?.dcEventAccident?.locationType == 2){ + return true; + } + return false; + } + }, + { + label: "地点:", + key: "dcEventAccident.dd", + isAlone: false, + required: true, + options: { + placeholder: "服务区地点", + }, + visible:(data) => { + if(data?.dcEventAccident?.locationType == 2){ + return true; + } + return false; + } + }, + { + label: "立交桥:", + key: "dcEventAccident.facilityId", + type: "select", + isAlone: false, + required: true, + options: { + options: [ + { + value: "选项1", + label: "黄金糕", + }, + ], + }, + visible:(data) => { + if(data?.dcEventAccident?.locationType == 3){ + return true; + } + return false; + } + }, + { + label: "匝道:", + key: "dcEventAccident.dd", + isAlone: false, + required: true, + options: { + placeholder: "服务区地点", + }, + visible:(data) => { + if(data?.dcEventAccident?.locationType == 3){ + return true; + } + return false; + } + }, + { + label: "收费站:", + key: "dcEventAccident.facilityId", + type: "select", + isAlone: false, + required: true, + options: { + options: [ + { + value: "选项1", + label: "黄金糕", + }, + ], + }, + visible:(data) => { + if(data?.dcEventAccident?.locationType == 4){ + return true; + } + return false; + } + }, + { + label: "地点:", + key: "dcEventAccident.dd", + isAlone: false, + required: true, + options: { + placeholder: "服务区地点", + }, + visible:(data) => { + if(data?.dcEventAccident?.locationType == 4){ + return true; + } + return false; + } + }, PresetFormItems.direction, PresetFormItems.station, PresetFormItems.eventHappenTime, @@ -29,7 +137,7 @@ export const tabConfigList = [ { ...PresetFormItems.isInTunnel, key: 'dcEventAccident.inTunnel' }, { ...PresetFormItems.spillName, key: 'dcEventAccident.spillageItem' }, { ...PresetFormItems.ownerPhone, key: 'dcEventAccident.vehicleOwnerPhone' }, - { ...PresetFormItems.laneOccupancy, key: 'dcEventAccident.laneOccupancy' }, + PresetFormItems.laneOccupancy, PresetFormItems.vehicleCondition('dcEventAccident'), PresetFormItems.casualties('dcEventAccident'), PresetFormItems.eventTitle, @@ -60,7 +168,7 @@ export const tabConfigList = [ { ...PresetFormItems.isForkRoad, key: 'dcEventVehicleAccident.atIntersection' }, { ...PresetFormItems.isCurveRoad, key: 'dcEventVehicleAccident.onCurve' }, { ...PresetFormItems.isInTunnel, key: 'dcEventVehicleAccident.inTunnel' }, - { ...PresetFormItems.laneOccupancy, key: 'dcEventVehicleAccident.laneOccupancy' }, + PresetFormItems.laneOccupancy, PresetFormItems.vehicleCondition('dcEventVehicleAccident'), PresetFormItems.casualties('dcEventVehicleAccident'), PresetFormItems.eventTitle, @@ -304,6 +412,7 @@ export const tabConfigList = [ type: "RadioGroup", isAlone: true, required: true, + default: "4-1", options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ @@ -327,7 +436,166 @@ export const tabConfigList = [ }, }, { ...PresetFormItems.congestionCause, key: 'dcEventTrafficCongestion.congestionCause' }, + { + label: "详细原因:", + key: "xxyy", + type: "RadioGroup", + isAlone: true, + required: true, + // default: "1", + options: { + activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", + options: [ + { + key: "1", + label: "收费站广场拥堵导致出口压车", + }, + { + key: "2", + label: "收费站设备故障", + }, + { + key: "3", + label: "地方道路原因", + }, + { + key: "4", + label: "省内非集团所辖高速原因", + }, + { + key: "5", + label: "集团所辖道路拥堵", + }, + { + key: "6", + label: "集团所辖枢纽立交异常导致主线压车", + }, + { + key: "7", + label: "路侧起火", + }, + { + key: "8", + label: "备注项添加", + }, + ], + }, + visible:(data) => { + if(data?.dcEventTrafficCongestion?.congestionCause == 1 || data?.dcEventTrafficCongestion?.congestionCause == 6){ + return true; + } + return false; + }, + }, { ...PresetFormItems.isInTunnel, isAlone: true }, + { + label: "地点类型:", + key: "locationType", + type: "RadioGroup", + isAlone: true, + required: true, + default: "1", + options: { + activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", + options: [ + { + key: "1", + label: "单点", + }, + { + key: "2", + label: "多点", + }, + ], + }, + }, + { + label: "桩号:", + key: "stakeMark", + required: true, + type: "MultipleLabelItem", + options: { + options: [ + { + prefix: { + text: "K", + style: { + color: "#3DE8FF", + }, + }, + key: "stakeMark[0]", + }, + { + prefix: { + text: "+", + style: { + color: "#3DE8FF", + }, + }, + key: "stakeMark[1]", + }, + ], + }, + visible:(data) => { + if(data?.locationType != 1){ + return false; + } + return true; + } + }, + { + label: "起止桩号:", + key: "stakeMark", + required: true, + isAlone: true, + type: "MultipleLabelItem", + options: { + options: [ + { + prefix: { + text: "K", + style: { + color: "#3DE8FF", + }, + }, + key: "stakeMark[0]", + }, + { + prefix: { + text: "+", + style: { + color: "#3DE8FF", + }, + }, + key: "stakeMark[1]", + }, + { + prefix: { + text: "至K", + style: { + color: "#3DE8FF", + }, + }, + key: "endStakeMark[0]", + }, + { + prefix: { + text: "+", + style: { + color: "#3DE8FF", + }, + }, + key: "endStakeMark[1]", + }, + ], + }, + visible:(data) => { + if(data?.locationType == 2){ + return true; + } + return false; + } + }, { label: "拥堵里程:", key: "dcEventTrafficCongestion.congestionMileage", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue index 5038ce60..8176fa4f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/index.vue @@ -108,7 +108,7 @@ export default { this.index = index; let formConfig = tabConfigList[index].formConfig; - if (index == 7) { + if (index == 0 || index == 1 || index == 7) { let fwq = []; request({ @@ -125,7 +125,7 @@ export default { }); formConfig.list.forEach(it => { - if (it.key === 'dcEventServiceArea.facilityId') { + if (it.key === 'dcEventServiceArea.facilityId' || it.key === 'dcEventAccident.facilityId') { it.options.options = fwq; } }) @@ -148,15 +148,13 @@ export default { this.$refs.FormConfigRef.validate().then((formData) => { this.submitting = true; - if (this.index == 0) { - formData.dcEventAccident.laneOccupancy = formData.dcEventAccident.laneOccupancy.join(',') + if (this.index == 0 || this.index == 1) { + formData.lang = formData.lang.join(',') } - if (this.index == 1) { - formData.dcEventVehicleAccident.laneOccupancy = formData.dcEventVehicleAccident.laneOccupancy.join(',') - } - if (this.index == 8) { + if (this.index == 9) { let endStakeMark = formData.endStakeMark; formData.dcEventAbnormalWeather.endStakeMark = (endStakeMark && endStakeMark.length > 0) ? ('K' + endStakeMark[0] + '+' + endStakeMark[1]) : ''; + formData.endStakeMark = ''; } // console.log('formData',formData) // return; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue index 001d3809..99ecaa4b 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue @@ -1,393 +1,552 @@ \ 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 index bfd838ec..8949a01d 100644 --- 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 @@ -1,5 +1,5 @@ @@ -51,42 +62,50 @@ import WgtTitle from "@screen/pages/perception/widgets/title"; import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; import * as echarts from "echarts"; import chartsStatistics from "./assets/charts"; -import { tollStationAnalysis } from "@/api/event/governanceAnalysis" -import StatsDialogVisible from "./StatsDialogVisible/index.vue" +import { tollStationAnalysis } from "@/api/event/governanceAnalysis"; +import StatsDialogVisible from "./StatsDialogVisible/index.vue"; import icon from "./assets/icon.svg"; export default { - name: 'RailWayDay', + name: "RailWayDay", components: { WgtTitle, ButtonGradient, - StatsDialogVisible + StatsDialogVisible, }, data() { return { statsDialogVisible: false, tollBoothsData: [], maxRestrictionNum: null, - maxCloseNum: null - } + maxCloseNum: null, + }; }, - created() { - - }, + created() {}, methods: { handleStats() { - this.statsDialogVisible = true + this.statsDialogVisible = true; }, handleClose() { - this.statsDialogVisible = false + this.statsDialogVisible = false; }, getTollStationAnalysis() { return tollStationAnalysis().then((response) => { - this.tollBoothsData = response.data - this.maxRestrictionNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction })) - this.maxCloseNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction })) - console.log("response", this.maxRestrictionNum, this.maxCloseNum) + this.tollBoothsData = response.data; + this.maxRestrictionNum = Math.max.apply( + Math, + this.tollBoothsData.map((item) => { + return item.trafficRestriction; + }) + ); + this.maxCloseNum = Math.max.apply( + Math, + this.tollBoothsData.map((item) => { + return item.trafficRestriction; + }) + ); + console.log("response", this.maxRestrictionNum, this.maxCloseNum); // let facilityName = [] // let trafficRestriction = [] // let trafficClose = [] @@ -109,20 +128,18 @@ export default { // chartsStatistics.yAxis[0].data = facilityName; // chartsStatistics.series[0].data = trafficClose; // chartsStatistics.series[1].data = trafficRestriction; - - }) - } + }); + }, }, async mounted() { - await this.getTollStationAnalysis() + await this.getTollStationAnalysis(); // const myChart = echarts.init(document.getElementById('auditAnalytics')); // myChart.setOption(chartsStatistics); - }, -} +}; - +} + \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js index 02ba49b5..a5b3aa1a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js @@ -1,203 +1,225 @@ - import * as echarts from "echarts"; -let color = ['#4278F8F9', 'transparent','#5372C4F9', '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',]; +let color = [ + "#4278F8F9", + "#5372C4F9", + "#0046FFF9", + "#FB9434F9", + "#854101F9", + "#05E599F9", + "#219F73F9", + "#7CEDD5F9", +]; +let colorend = [ + "#4278F800", + "#5372C400", + "#0046FF00", + "#FB943400", + "#85410100", + "#05E59900", + "#219F7300", + "#7CEDD500", +]; const datas = [ - { - name: '客1', - // num:'' - value: 13456, - }, - { - name: '客2', - value: 13456, - }, - { - name: '客3', - value: 13456, - }, - { - name: '专1', - // num:'' - value: 13456, - }, - { - name: '专2', - value: 13456, - }, - { - name: '专3', - value: 13456, - }, - { - name: '货1', - value: 13456, - }, - { - name: '货2', - value: 13456, - }, - ]; + { + name: "客1", + // num:'' + value: 13456, + }, + { + name: "客2", + value: 13456, + }, + { + name: "客3", + value: 13456, + }, + { + name: "专1", + // num:'' + value: 13456, + }, + { + name: "专2", + value: 13456, + }, + { + name: "专3", + value: 13456, + }, + { + name: "货1", + value: 13456, + }, + { + name: "货2", + value: 13456, + }, +]; - let sum = 0; +let sum = 0; for (var i of datas) { - sum += i.value; + sum += i.value; } var options = { - tooltip: { - show:true, - trigger: 'item', - formatter: '{a}
{b}: {c} ({d}%)', - backgroundColor:"#ffffff", - textStyle:{ - color:"#666" - } + tooltip: { + show: true, + // trigger: "item", + // formatter: "{a}
{b}: {c} ({d}%)", + // backgroundColor: "#ffffff", + // textStyle: { + // color: "#666", + // }, + }, + legend: { + orient: "vertical", + right: 40, + top: 50, + formatter: (name) => { + let res = datas.filter((v) => v.name === name); + let str = ""; + str = + "{name1|" + + res[0].name + + "}{name2|" + + res[0].value + + "}辆" + + "{name2|" + + (res[0].value / sum) * 100 + + "}%"; + return str; }, - legend: { - orient: 'vertical', - right: 40, - top:50, - formatter:(name)=>{ - let res = datas.filter(v => v.name === name); - let str = '' - str = '{name1|' + res[0].name + '}{name2|' + res[0].value + '}辆'+ '{name2|' + res[0].value/sum * 100 + '}%' - return str + icon: "circle", + itemWidth: 10, + itemHeight: 10, + itemGap: 20, + borderRadius: 50, + itemStyle: {}, + textStyle: { + rich: { + background: { + background: "#DEDEDE", + fontSize: 14, + align: "left", + padding: [0, 10, 20, 0], }, - icon: 'circle', - itemWidth:10, - itemHeight:10, - itemGap: 20, - borderRadius:50, - itemStyle:{ - + name1: { + color: "#fff", + fontSize: 14, + Width: 12, + align: "left", + padding: [0, 0, 0, 10], }, - textStyle:{ - rich:{ - background: { - background: '#DEDEDE', - fontSize: 14, - align: 'left', - padding: [0, 10, 20, 0], - }, - name1: { - color: '#fff', - fontSize: 14, - Width: 12, - align: 'left', - padding: [0, 0, 0, 10], - }, - name2: { - color: '#37E7FF', - fontSize: 14, - align: 'left', - padding: [0, 0, 0, 10], - }, - value: { - color: '#ccc', - fontSize: 14, - align: 'left', - }, - title: { - // color: '#fff', - color: "#C60020", - fontWeight:'bold', - fontSize: 40, - } - }, - color:"#fff", + name2: { + color: "#37E7FF", + fontSize: 14, + align: "left", + padding: [0, 0, 0, 10], + }, + value: { + color: "#ccc", + fontSize: 14, + align: "left", + }, + title: { + // color: '#fff', + color: "#C60020", + fontWeight: "bold", + fontSize: 40, }, - data: [ - { - name:'客1', - backgroundColor:'#5CC5FF', - }, '客2', '客3', '货1', - '货2', '专1', '专2', '专3'] + }, + color: "#fff", }, - series: [ - { - name: '', - type: 'pie', - selectedMode: 'single', - radius: [0, '50%'], - center:['25%','50%'], - label: { - normal: { - position: 'inner', - show: true, - color:'#fff', - fontSize:14, - formatter: '{b}\n{c}辆', - } - }, - data: [ - {value: 2290, name: '客车\n'}, - {value: 1020, name: '货车\n'}, - {value: 3000, name: '专项车\n'}, - ], - color:['#708FFF','#FB9434','#219F73'] + data: [ + { + name: "客1", + backgroundColor: "#5CC5FF", + }, + "客2", + "客3", + "货1", + "货2", + "专1", + "专2", + "专3", + ], + }, + series: [ + { + name: "", + type: "pie", + selectedMode: "single", + radius: [0, "50%"], + center: ["25%", "50%"], + label: { + normal: { + position: "inner", + show: true, + color: "#fff", + fontSize: 14, + formatter: "{b}\n{c}辆", }, - { - name: '', - type: 'pie', - radius: ['60%', '70%'], - center:['25%','50%'], - label: { - position: 'inner', - show: false - }, - data: [ - {value: 13456, name: '客1'}, - {value: 2000, name: ''}, - {value: 13456, name: '客2'}, - {value: 2000, name: ''}, - {value: 13456, name: '客3'}, - {value: 2000, name: ''}, - {value: 13456, name: '货1'}, - {value: 2000, name: ''}, - {value: 13456, name: '货2'}, - {value: 2000, name: ''}, - {value: 13456, name: '专1'}, - {value: 2000, name: ''}, - {value: 13456, name: '专2'}, - {value: 2000, name: ''}, - {value: 13456, name: '专3'}, - {value: 2000, name: ''}, - ], - 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 - } - } + }, + data: [ + { value: 2290, name: "客车\n" }, + { value: 1020, name: "货车\n" }, + { value: 3000, name: "专项车\n" }, + ], + color: ["#708FFF", "#FB9434", "#219F73"], + }, + { + name: "", + type: "pie", + radius: ["60%", "70%"], + center: ["25%", "50%"], + label: { + position: "inner", + show: false, + }, + data: [ + { value: 13456, name: "客1" }, + { value: 13456, name: "客2" }, + { value: 13456, name: "客3" }, + { value: 13456, name: "货1" }, + { value: 13456, name: "货2" }, + { value: 13456, name: "专1" }, + { value: 13456, name: "专2" }, + { value: 13456, name: "专3" }, + ], + itemStyle: { + normal: { + borderRadius: "5", + borderWidth: 2, + borderType: "solid", + borderCap: "round", + borderJoin: "round", + borderColor: "#064258", + borderMiterLimit: "20", + color: function (params) { + return { + type: "linear", + x: 0, + y: 0, + x2: 1, + y2: 1, + colorStops: [ + { + offset: 0, + color: color[params.dataIndex], // 0% 处的颜色 }, - }, - color:['#009688','#63BA79','#FFB800','#F7ED46','#666666'] - } - ] -} - + { + offset: 1, + color: colorend[params.dataIndex], // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }; + }, + }, + }, + // color: ["#009688", "#63BA79", "#FFB800", "#F7ED46", "#666666"], + }, + ], +}; export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js index d7c486c9..46e65aa3 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js @@ -75,8 +75,8 @@ var options = { }, axisLabel: { show: true, - color: "#B6E6FF", - fontSize: 13, + color: "#fff", + fontSize: 12, fontFamily: "Source Han Sans CN-Regular", }, }, @@ -88,15 +88,15 @@ var options = { min: 0, splitNumber: 4, nameTextStyle: { - color: "#B6E6FF", - fontSize: 13, + color: "#fff", + fontSize: 12, fontFamily: "Source Han Sans CN-Regular", align: "left", verticalAlign: "center", }, axisLabel: { - fontSize: 13, - color: "#B6E6FF", + fontSize: 12, + color: "#fff", fontFamily: "HarmonyOS Sans-Regular", formatter: function (value, index) { return yList[index]; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue index b9fa03dc..387c2a8c 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue @@ -1,188 +1,256 @@ - diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js index 90565066..30676b00 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/assets/charts.js @@ -1,125 +1,137 @@ 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: [ + "大学城-长清", + "长清-孝里", + "孝里-平阴北", + "平阴北-平阴", + "平阴-东平", + "东平-梁山东", + "梁山东-嘉祥", + "平阴2-东平", + "东平2-梁山东", + "梁山东2-嘉祥", + ], }; +let ind = -30; let sdata = { - value: [32774, 30067, 28774, 30067, 30021, 30067, 32774] -} + value: [32774, 30067, 28774, 30067, 30021, 30067, 32774, 30021, 30067, 32774], +}; let dataZoomMove = { - start: 0, - end: 4 -} + start: 0, + end: 4, +}; var options = { - - grid: { - containLabel: true, - // 边距自行修改 - bottom: '0%', - left: '0%', - top: '20%', - right: '10%', + grid: { + containLabel: true, + // 边距自行修改 + bottom: "0%", + left: "0%", + top: "8%", + right: "10%", + }, + xAxis: { + type: "value", + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + }, + yAxis: [ + { + type: "category", + data: xdata.value, + inverse: true, + axisLabel: { + fontSize: "14px", + inside: true, + verticalAlign: "bottom", + color: "#fff", + padding: 10, + margin: -5, + formatter: function (value) { + let index = xdata.value.indexOf(value); + return `{a|Top${(ind += 1)}} {b|${value}}`; + }, + rich: { + a: { + fontSize: "10px", + }, + + b: { + fontSize: "12px", + padding: [0, 0, 0, 70], + }, + }, + }, + axisLine: { + show: false, }, - xAxis: { - type: 'value', - axisLabel: { - show: false - }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, + axisTick: { + show: false, }, - yAxis: [ - { - type: 'category', - data: xdata.value, - inverse: true, - axisLabel: { - fontSize: '14px', - inside: true, - verticalAlign: 'bottom', - color:'#fff', - padding:10, - margin:-5, - formatter: function (value) { - let index = xdata.value.indexOf(value); - return `{a|Top${index+1}} {b|${value}}` - }, - rich: { - a: { - fontSize: '14px', - }, - - b: { - fontSize: '14px', - padding: [0, 0, 0, 70], - } - }, + }, + ], + series: [ + { + realtimeSort: true, + data: sdata.value, + type: "bar", + barWidth: 8, + itemStyle: { + borderRadius: 40, + color: { + type: "linear", + x: 0, + y: 0, + x2: 1, + y2: 0, + colorStops: [ + { + offset: 0, + color: "#1cd0f000", // 0% 处的颜色 }, - axisLine: { - show: false, + { + offset: 1, + color: "#1cd0f0", // 100% 处的颜色 }, - axisTick: { - show: false, - } - } - ], - series: [ - { - data: sdata.value, - type: 'bar', - barWidth: 8, - itemStyle: { - borderRadius: 40, - color: { - type: 'linear', - x: 0, - y: 0, - x2: 1, - y2: 0, - colorStops: [ - { - offset: 0, - color: '#1cd0f000', // 0% 处的颜色 - }, - { - offset: 1, - color: '#1cd0f0', // 100% 处的颜色 - }, - ], - global: false, // 缺省为 false - } + ], + global: false, // 缺省为 false + }, + }, + label: { + show: true, + position: "right", + distance: -10, + data: sdata, + color: "#fff", + formatter: (c) => { + return `{a|}{b|${c.value}辆}`; + }, + rich: { + a: { + widht: 20, + height: 20, + backgroundColor: { + image: chartIcon, }, - label: { - show: true, - position: 'right', - distance: -10, - data: sdata, - color:'#fff', - formatter: (c) => { - return `{a|}{b|${c.value}辆}` - }, - rich: { - a: { - widht: 20, - height: 20, - backgroundColor: { - image: chartIcon - }, - }, - b:{ - padding:[0,0,0,10] - } - } - } - } - ] -} + }, + b: { + padding: [0, 0, 0, 10], + }, + }, + }, + }, + ], +}; export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue index 86816291..0a55d39a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue @@ -1,87 +1,98 @@ -