diff --git a/ruoyi-ui/README.md b/ruoyi-ui/README.md index 559cb4f1..43915e09 100644 --- a/ruoyi-ui/README.md +++ b/ruoyi-ui/README.md @@ -74,3 +74,107 @@ 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, + }, +}; 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/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/perception/eventDetection/components/eventQuery/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js index 4f5f83cb..c08c28e5 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js @@ -1,130 +1,155 @@ - /* 数据 */ -let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别 -let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903]; // 人数 +let nameList = [ + "1月", + "2月", + "3月", + "4月", + "5月", + "6月", + "7月", + "8月", + "9月", + "10月", + "11月", + "12月", +]; // 类别 +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 + 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% 处的颜色 }, - borderRadius: 6 - }, - label: { show: false } - }) - } else { - dataList.push({ - name: item, - value: valueList[index], - itemStyle: { - borderRadius: 6 - } - }) - } -}) - -var options = { - grid: { - top: '7%',//上边距 - right: '0',//右边距 - left: '0',//左边距 - bottom: "2%",//下边距 - containLabel: true, - }, - tooltip: { - - }, - xAxis: { - type: 'category', - data: nameList, - axisTick: { - show: false //隐藏X轴刻度 + { + offset: 1, + color: "#FF6969", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + borderRadius: 6, }, - axisLine: { - lineStyle: { - color: "rgba(49, 217, 255, 0.8)" - } + label: { show: false }, + }); + } else { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + borderRadius: 6, }, - axisLabel: { - show: true, - color: '#B6E6FF', - fontSize: 8, - fontFamily: 'Source Han Sans CN-Regular', + }); + } +}); + +var options = { + grid: { + top: "7%", //上边距 + right: "0", //右边距 + left: "0", //左边距 + bottom: "2%", //下边距 + containLabel: true, + }, + tooltip: {}, + xAxis: { + type: "category", + data: [], + axisTick: { + show: false, //隐藏X轴刻度 + }, + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", }, - }, - yAxis: [{ - type: 'value', + }, + axisLabel: { + show: true, + color: "#fff", + fontSize: "10px", + fontFamily: "Source Han Sans CN-Regular", + }, + }, + yAxis: [ + { + type: "value", name: "", splitNumber: 5, nameTextStyle: { - color: '#B6E6FF', - fontSize: 13, - fontFamily: 'Source Han Sans CN-Regular', - align: "left", - verticalAlign: "center", + color: "#B6E6FF", + fontSize: 10, + 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] - // } + fontSize: "10px", + color: "#fff", + fontFamily: "HarmonyOS Sans-Regular", + // formatter:function(value,index){ + // return yList[index] + // } }, axisLine: { - show: false, + show: false, }, axisTick: { - show: false + show: false, }, splitLine: { - lineStyle: { - color: 'rgba(49, 217, 255, 0.5)', - } + lineStyle: { + color: "rgba(49, 217, 255, 0.5)", + }, }, - }], - series: [{ - type: 'bar', - data: dataList, + }, + ], + series: [ + { + type: "bar", + data: [], z: 4, itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#06D7B1' // 0% 处的颜色 - }, { - offset: 1, color: '#80F1BB' // 100% 处的颜色 - }], - global: false // 缺省为 false - }, - borderRadius: [4, 4, 0, 0] + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#06D7B1", // 0% 处的颜色 + }, + { + offset: 1, + color: "#80F1BB", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + borderRadius: [4, 4, 0, 0], }, barWidth: 10, label: { - show: false, - } - }, - ] -} + show: false, + }, + }, + ], +}; export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js index 2547cc56..221623b2 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js @@ -105,8 +105,8 @@ var options = { }, title: { //圆环中间内容 - text: "{zb|12}", - subtext: "类型分析", + text: "{zb|0}", + subtext: " 类型分析", left: "17.5%", top: "40%", textStyle: { @@ -114,18 +114,20 @@ var options = { zb: { width: 70, color: "#fff", - fontSize: 26, + fontSize: 30, align: "center", + fontFamily: "PangMenZhengDao", }, }, }, subtextStyle: { - fontSize: 18, + fontSize: 16, fontWeight: "400", - top: -8, - + width: 200, + // top: -18, + // marginLeft: 50, align: "center", - color: "#fff", + color: "#74868D", }, }, color: colorList, @@ -208,7 +210,7 @@ var options = { length2: 80, }, }, - data: pieData1, + data: [], label: { show: false, formatter: function (params) {}, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js index b4c3416c..e1183d2a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js @@ -20,12 +20,12 @@ let options = { grid: { left: "2%", right: "4%", - top: "5%", + top: "30px", bottom: "5%", containLabel: true, }, xAxis: { - data: xData, + data: [], show: true, axisTick: { show: false, @@ -44,13 +44,18 @@ let options = { rotate: "1", margin: "20", textStyle: { - fontSize: 12, - color: "#50A2C1", + fontSize: 10, + color: "#fff", }, }, }, yAxis: [ { + name: "(起) ", + nameTextStyle: { + color: "#E5E7E8", + fomtSize: 10, + }, min: 0, axisLine: { lineStyle: { @@ -67,7 +72,7 @@ let options = { axisLabel: { color: "#DEEBFF", textStyle: { - fontSize: 12, + fontSize: 10, }, }, axisTick: { @@ -162,7 +167,7 @@ let options = { ); }, }, - data: data1, + data: [], }, // 进度条的小圆圈 { @@ -183,7 +188,7 @@ let options = { }, z: 2, zlevel: 10, - data: data1, + data: [], animationDelay: 500, }, ], diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue index 0f313649..415d5b0b 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue @@ -9,11 +9,13 @@ - + + :type="type == 'date' ? 'date' : type == 'month' ? 'month' : type == 'year' ? 'year' : ''" placeholder="请选择" + :clearable="false" /> 查询 重置 @@ -23,16 +25,19 @@
-
+ +
+
+
@@ -119,6 +124,9 @@ export default { selectIndex: 3, selectId: 3, type: "year", + chart1List: [], + chart2List: [], + chart3List: [], list: [ { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, @@ -175,6 +183,7 @@ export default { "quarter": this.quarter }).then(res => { if (res.code == 200) { + this.chart1List = res.data let data = res.data; chart1.series[0].data = []; chart1.xAxis.data = []; @@ -247,7 +256,7 @@ export default { if (res.code == 200) { let types = []; let numbers = []; - + this.chart2List = res.data let data = res.data.warningTypeList; let total = res.data.total; @@ -308,22 +317,22 @@ export default { chart2.series[0].data = numbers; // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形 - this.myChart2.on('mouseover', (params) => { - if (params.componentType == 'graphic') { - return - } - // console.log(params); - chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`; - chart2.title.subtext = params.data.name; - this.myChart2.setOption(chart2); - }) + // this.myChart2.on('mouseover', (params) => { + // if (params.componentType == 'graphic') { + // return + // } + // // console.log(params); + // chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`; + // chart2.title.subtext = params.data.name; + // this.myChart2.setOption(chart2); + // }) // 用户鼠标移出时，重新开始自动切换 - this.myChart2.on('mouseout', (params) => { - chart2.title.text = `{zb|${total}}`; - chart2.title.subtext = "类型分析"; - this.myChart2.setOption(chart2); - }) + // this.myChart2.on('mouseout', (params) => { + // chart2.title.text = `{zb|${total}}`; + // chart2.title.subtext = "类型分析"; + // this.myChart2.setOption(chart2); + // }) } this.myChart2.setOption(chart2); @@ -340,6 +349,7 @@ export default { chart3.series[1].data = []; chart3.xAxis.data = []; if (res.code == 200 && res.data.length > 0) { + this.chart3List = res.data let data = res.data; const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev)); let zhs = []; @@ -563,7 +573,7 @@ export default { justify-content: space-between; align-items: center; flex-direction: column; - + --keep-ratio: scaleX(1); .searchPanel { display: flex; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js index cabe3b62..14e3cc68 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js @@ -10,7 +10,7 @@ var options = { grid: { left: "0%", right: "5%", - bottom: "10%", + bottom: "30px", top: "30px", containLabel: true, }, @@ -22,7 +22,7 @@ var options = { startValue: 0, endValue: 7, filterMode: "filter", - height: 14, + height: 10, bottom: 5, handleSize: "200%", handleIcon: @@ -106,12 +106,12 @@ var options = { axisLine: { lineStyle: { color: "#BDD8FB", - fontSize: 12, + fontSize: 10, }, }, axisLabel: { // interval:0, - color: "#BDD8FB", + color: "#fff", fontSize: 12, }, axisTick: { @@ -145,14 +145,14 @@ var options = { ], }, yAxis: { + name: "(件) ", + nameTextStyle: { + color: "#fff", + fomtSize: 10, + }, type: "value", min: 0, minInterval: 1, - nameTextStyle: { - fontSize: 12, - color: "#BDD8FB", - align: "center", - }, splitLine: { lineStyle: { color: "rgba(255, 255, 255, 0.15)", @@ -169,7 +169,7 @@ var options = { axisLabel: { fontSize: 12, fontFamily: "Bebas", - color: "#BDD8FB", + color: "#fff", }, }, series: [ @@ -178,11 +178,8 @@ var options = { // symbol: "none", showSymbol: false, smooth: true, // 是否曲线 - name: "", // 图例对应类别 - data: [ - 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, - 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, - ], // 纵坐标数据 + // name: "", // 图例对应类别 + data: [], // 纵坐标数据 lineStyle: { color: "#39B1FF", }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue index ba9ca455..c4379cb6 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue @@ -10,7 +10,7 @@
-
+
@@ -128,5 +128,6 @@ export default { width: 493px; } } -} +} + \ No newline at end of file