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 3524a3d5..d4c4876d 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 @@ -34,9 +34,9 @@ let options = { formatter: "健康监测<br>{b1}:{c1}人", }, grid: { - left: "2%", - right: "4%", - top: "5%", + left: 0, + right: 0, + top: "13%", bottom: "5%", containLabel: true, }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue index 1c9afe02..cf26e2f9 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue @@ -1,183 +1,182 @@ <template> - <div class='congestion'> - <WgtTitle :title="'指标变化情况'"></WgtTitle> - <div class="board"> - <div id="ChangesIndictors" class="keep-ratio" > + <div class='congestion'> + <WgtTitle :title="'指标变化情况'"></WgtTitle> + <div class="board"> + <div id="ChangesIndictors" class="keep-ratio"> - </div> - </div> + </div> </div> - </template> + </div> +</template> - <script> - import WgtTitle from '../../../../../widgets/title' - import * as echarts from "echarts"; - import chartsStatistics from './assets/charts3'; - - export default { - name: 'ChangesIndictors', - components: { - WgtTitle - }, - data() { - return { - tableData: [{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - }, - ] - } - }, - - created() { - - }, - methods: { - selectItem(index){ - this.selectIndex = index; +<script> +import WgtTitle from '../../../../../widgets/title' +import * as echarts from "echarts"; +import chartsStatistics from './assets/charts3'; + +export default { + name: 'ChangesIndictors', + components: { + WgtTitle + }, + data() { + return { + tableData: [{ + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' }, + ] + } + }, + + created() { + + }, + methods: { + selectItem(index) { + this.selectIndex = index; }, - mounted() { - - setTimeout(() => { - this.$nextTick(() => { - var myChart = echarts.init(document.getElementById('ChangesIndictors')); - myChart.setOption(chartsStatistics); - }); + }, + mounted() { + + setTimeout(() => { + this.$nextTick(() => { + var myChart = echarts.init(document.getElementById('ChangesIndictors')); + myChart.setOption(chartsStatistics); }); - }, - } - </script> + }); + }, +} +</script> - <style lang='scss' scoped> +<style lang='scss' scoped> +.showClass { + color: #00EBC1; +} - .showClass { - color:#00EBC1; - } +::v-deep .el-table .cell { + padding-left: 0px !important; +} - ::v-deep .el-table .cell { - padding-left:0px !important; - } +::v-deep .el-table .el-table__header-wrapper th { + background-color: #064258 !important; + color: #00D1FF; + border-color: #064258 !important; + border: 0px !important; + font-size: 12px !important; +} - ::v-deep .el-table .el-table__header-wrapper th { - background-color: #064258 !important; - color:#00D1FF; - border-color: #064258 !important; - border:0px !important; - font-size:12px !important; - } +::v-deep .el-table { + border: 0px !important; + background-color: transparent; + font-size: 12px !important; +} - ::v-deep .el-table { - border:0px !important; - background-color: transparent; - font-size:12px !important; - } +::v-deep .el-table__body-wrapper { + background-color: #064258; + color: #fff; +} - ::v-deep .el-table__body-wrapper { - background-color: #064258; - color: #fff; - } +::v-deep .el-table tr:hover td { + background: #1b2528 !important; + color: #00D1FF; +} - ::v-deep .el-table tr:hover td { - background: #1b2528 !important; - color:#00D1FF; - } +::v-deep .el-table tr:nth-child(odd) td { + background-color: #13272F; + border: 0px !important; +} - ::v-deep .el-table tr:nth-child(odd) td{ - background-color: #13272F ; - border:0px !important; - } - ::v-deep .el-table tr:nth-child(even) td{ - border:0px !important; - } +::v-deep .el-table tr:nth-child(even) td { + border: 0px !important; +} - ::v-deep .el-table tr { - background-color: #133242 !important; - border-collapse:0; - border:0px !important; - background-color: transparent !important; - } +::v-deep .el-table tr { + background-color: #133242 !important; + border-collapse: 0; + border: 0px !important; + background-color: transparent !important; +} + +.congestion { + display: inline-flex; + width: 100%; + height: 310px; + flex-direction: column; + --keep-ratio: scaleX(1); - .congestion { - display: inline-flex; + .board { + height: 300px; width: 100%; - height: 310px; - flex-direction: column; + padding: 0px 20px; + border-radius: 5px 5px 5px 5px; + opacity: 1; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%); - .board{ - height: 280px; + #ChangesIndictors { + display: inline-flex; + height: 240px; width: 100%; - padding: 0px 0px; - border-radius: 5px 5px 5px 5px; - opacity: 1; - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: row; - margin-top:20px; - - background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%); - - #ChangesIndictors { - display: inline-flex; - height: 240px; - width: 100%; - } } } - .charts { - height:180px; - width: 100%; - } - - </style> +} + +.charts { + height: 180px; + width: 100%; +} +</style> \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue index 43026c0f..4b5734b7 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue @@ -1,277 +1,277 @@ <template> - <div class='congestion '> - <WgtTitle :title="'指标变化情况'"></WgtTitle> - <div class="board "> - <div class="textStr" > - <div class="textbar action" > - 拥挤度 - </div> - <div class="textbar" > - 饱和度 - </div> - <div class="textbar" > - 交通组成特征指数 - </div> - </div> - <div class="bodySort" > - <div v-for="(it,index) in tableData" class="sortItem" > - <span class="barTitle"> - TOP{{ index + 1 }} - </span> - <div class="text" > - {{ it.name }} - </div> - <div class="lineHight" > - <div class="inner" :style="{width:it.num/count * 100 + '%'}" > + <div class='congestion '> + <WgtTitle :title="'指标变化情况'"></WgtTitle> + <div class="board "> + <div class="textStr"> + <div class="textbar action"> + 拥挤度 + </div> + <div class="textbar"> + 饱和度 + </div> + <div class="textbar"> + 交通组成特征指数 + </div> + </div> + <div class="bodySort"> + <div v-for="(it, index) in tableData" class="sortItem"> + <span class="barTitle"> + TOP{{ index + 1 }} + </span> + <div class="text"> + {{ it.name }} + </div> + <div class="lineHight"> + <div class="inner" :style="{ width: it.num / count * 100 + '%' }"> - </div> - </div> - <span class="num"> - {{ it.num }} - </span> - </div> - </div> - </div> + </div> + </div> + <span class="num"> + {{ it.num }} + </span> + </div> + </div> </div> - </template> + </div> +</template> - <script> - import WgtTitle from '../../../../../widgets/title' - import * as echarts from "echarts"; +<script> +import WgtTitle from '../../../../../widgets/title' +import * as echarts from "echarts"; - export default { - name: 'CongestionIndicator', - components: { - WgtTitle - }, - data() { - return { - count:2000, - tableData: [{ - name:"大学城-长清", - num:1036, - },{ - name:"大学城-长清", - num:1036, - }, - { - name:"大学城-长清", - num:1036, - }, - { - name:"大学城-长清", - num:1036, - }, - { - name:"大学城-长清", - num:1036, - }, - { - name:"大学城-长清", - num:1036, - }, - { - name:"大学城-长清", - num:1036, - } - ] - } - }, - - created() { - - }, - methods: { - selectItem(index){ - this.selectIndex = index; +export default { + name: 'CongestionIndicator', + components: { + WgtTitle + }, + data() { + return { + count: 2000, + tableData: [{ + name: "大学城-长清", + num: 1036, + }, { + name: "大学城-长清", + num: 1036, + }, + { + name: "大学城-长清", + num: 1036, + }, + { + name: "大学城-长清", + num: 1036, + }, + { + name: "大学城-长清", + num: 1036, + }, + { + name: "大学城-长清", + num: 1036, }, + { + name: "大学城-长清", + num: 1036, + } + ] + } + }, + + created() { + + }, + methods: { + selectItem(index) { + this.selectIndex = index; }, - mounted() { - - setTimeout(() => { - this.$nextTick(() => { - var myChart = echarts.init(document.getElementById('ChangesIndictors')); - myChart.setOption(chartsStatistics); - }); + }, + mounted() { + + setTimeout(() => { + this.$nextTick(() => { + var myChart = echarts.init(document.getElementById('ChangesIndictors')); + myChart.setOption(chartsStatistics); }); - }, - } - </script> + }); + }, +} +</script> - <style lang='scss' scoped> +<style lang='scss' scoped> +.showClass { + color: #00EBC1; +} - .showClass { - color:#00EBC1; - } +::v-deep .el-table .cell { + padding-left: 0px !important; +} - ::v-deep .el-table .cell { - padding-left:0px !important; - } +::v-deep .el-table .el-table__header-wrapper th { + background-color: #064258 !important; + color: #00D1FF; + border-color: #064258 !important; + border: 0px !important; + font-size: 12px !important; +} - ::v-deep .el-table .el-table__header-wrapper th { - background-color: #064258 !important; - color:#00D1FF; - border-color: #064258 !important; - border:0px !important; - font-size:12px !important; - } +::v-deep .el-table { + border: 0px !important; + background-color: transparent; + font-size: 12px !important; +} - ::v-deep .el-table { - border:0px !important; - background-color: transparent; - font-size:12px !important; - } +::v-deep .el-table__body-wrapper { + background-color: #064258; + color: #fff; +} - ::v-deep .el-table__body-wrapper { - background-color: #064258; - color: #fff; - } +::v-deep .el-table tr:hover td { + background: #1b2528 !important; + color: #00D1FF; +} - ::v-deep .el-table tr:hover td { - background: #1b2528 !important; - color:#00D1FF; - } +::v-deep .el-table tr:nth-child(odd) td { + background-color: #13272F; + border: 0px !important; +} - ::v-deep .el-table tr:nth-child(odd) td{ - background-color: #13272F ; - border:0px !important; - } - ::v-deep .el-table tr:nth-child(even) td{ - border:0px !important; - } +::v-deep .el-table tr:nth-child(even) td { + border: 0px !important; +} - ::v-deep .el-table tr { - background-color: #133242 !important; - border-collapse:0; - border:0px !important; - background-color: transparent !important; - } +::v-deep .el-table tr { + background-color: #133242 !important; + border-collapse: 0; + border: 0px !important; + background-color: transparent !important; +} + +.congestion { + display: inline-flex; + width: 100%; + // height: 310px; + flex-direction: column; - .congestion { - display: inline-flex; + .board { + height: 275px; width: 100%; - height: 310px; + padding: 0px 0px; + border-radius: 5px 5px 5px 5px; + opacity: 1; + display: flex; + align-items: center; flex-direction: column; + margin-top: 20px; - .board{ - height: 280px; - width: 100%; - padding: 0px 0px; - border-radius: 5px 5px 5px 5px; - opacity: 1; - display: flex; - align-items: center; - flex-direction: column; - margin-top:20px; - - background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%); - - .bodySort { - position: relative; - display: inline-block; - width:100%; - height:100%; - overflow: auto; - padding:20px 10px; + background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%); - >div:first-child { - .barTitle { - background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); - } + .bodySort { + position: relative; + display: inline-block; + width: 100%; + height: 100%; + overflow: auto; + padding: 5px 10px; - .lineHight .inner { - background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); - } + >div:first-child { + .barTitle { + background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); } - >div { - display: inline-flex; - width:95%; - height: 41px; - background: #0D517460; - border-radius: 0px 0px 0px 0px; - margin:5px; - font-size: 14px; - font-family: PingFang SC, PingFang SC; - font-weight: 500; - color: #FFFFFF; - align-items: center; - + .lineHight .inner { + background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%); + } + } - .barTitle { - position: relative; - display: inline-flex; - width: 48px; - height: 19px; - font-size: 14px; - font-family: PingFang SC, PingFang SC; - font-weight: 500; - color: #FFFFFF; - background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); - border-radius: 6px 6px 6px 6px; - opacity: 1; - justify-content: center; - align-items: center; - margin:0 10px; - } + >div { + display: inline-flex; + width: 95%; + height: 41px; + background: #0D517460; + border-radius: 0px 0px 0px 0px; + margin: 5px; + font-size: 14px; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: #FFFFFF; + align-items: center; - .lineHight { - width: 60%; - height: 8px; - background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%); - border-radius: 6px 6px 6px 6px; - opacity: 1; - margin:0 15px; - > .inner { - display: inline-flex; - height:8px; - background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); - border-radius: 6px 6px 6px 6px; - opacity: 1; - position: relative; - top:-7px; - } - } + .barTitle { + position: relative; + display: inline-flex; + width: 48px; + height: 19px; + font-size: 14px; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: #FFFFFF; + background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); + border-radius: 6px 6px 6px 6px; + opacity: 1; + justify-content: center; + align-items: center; + margin: 0 10px; } - } - .textStr { - display: inline-flex; - width:100%; - height:45px; - flex-direction: row; + .lineHight { + width: 60%; + height: 8px; + background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%); + border-radius: 6px 6px 6px 6px; + opacity: 1; + margin: 0 15px; - > div { + >.inner { display: inline-flex; - min-width: 80px; - height: 26px; - background: linear-gradient(180deg, #005C7950 0%, #009BCC50 100%); - border-radius: 2px 2px 2px 2px; + height: 8px; + background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%); + border-radius: 6px 6px 6px 6px; opacity: 1; - color:#fff; - font-size: 12px; - font-family: PingFang SC, PingFang SC; - font-weight: 400; - color: #FFFFFF; - justify-content: center; - align-items: center; - margin-left:20px; - padding:0 15px; - cursor: pointer; + position: relative; + top: -7px; + } } + } + } - .action { - background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); - } + .textStr { + display: inline-flex; + width: 100%; + height: 45px; + flex-direction: row; + + >div { + display: inline-flex; + min-width: 80px; + height: 26px; + background: linear-gradient(180deg, #005C7950 0%, #009BCC50 100%); + border-radius: 2px 2px 2px 2px; + opacity: 1; + color: #fff; + font-size: 12px; + font-family: PingFang SC, PingFang SC; + font-weight: 400; + color: #FFFFFF; + justify-content: center; + align-items: center; + margin-left: 20px; + padding: 0 15px; + cursor: pointer; + } + + .action { + background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); } } } - .charts { - height:180px; - width: 100%; - } - - </style> +} + +.charts { + height: 180px; + width: 100%; +} +</style> \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js index 6d43ac32..cb4e8bdb 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js @@ -1,160 +1,187 @@ - /* 数据 */ -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 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% 处的颜色 + }, + { + offset: 1, + color: "#FF6969", // 100% 处的颜色 }, - borderRadius: 6 - }, - label: { show: false } - }) - } else { - dataList.push({ - name: item, - value: valueList[index], - itemStyle:{ - borderRadius: 6 - } - }) - } -}) + ], + global: false, // 缺省为 false + }, + borderRadius: 6, + }, + label: { show: false }, + }); + } else { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + borderRadius: 6, + }, + }); + } +}); var options = { - legend: { - // orient: 'vertical', - icon: "circle", - itemHeight: 8, - itemWidth: 8, - top: "5%", - x: "right", - textStyle: { - color: "#fff", - }, + legend: { + // orient: 'vertical', + icon: "circle", + itemHeight: 8, + itemWidth: 8, + top: "5%", + x: "right", + textStyle: { + color: "#fff", }, - grid: { - top: '25%',//上边距 - right: '0',//右边距 - left: '0',//左边距 - bottom: "0%",//下边距 - containLabel: true, - }, - xAxis: { - type: 'category', - data: nameList, - axisTick: { - show: false //隐藏X轴刻度 - }, - axisLine: { - lineStyle: { - color: "rgba(49, 217, 255, 0.8)" - } - }, - axisLabel: { - show: true, - color: '#B6E6FF', - fontSize:8, - fontFamily: 'Source Han Sans CN-Regular', + }, + grid: { + top: "25%", //上边距 + right: "0", //右边距 + left: "0", //左边距 + bottom: "0%", //下边距 + containLabel: true, + }, + xAxis: { + type: "category", + data: nameList, + axisTick: { + show: false, //隐藏X轴刻度 + }, + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", }, - }, - yAxis: [{ - type: 'value', + }, + axisLabel: { + show: true, + color: "#B6E6FF", + fontSize: 8, + fontFamily: "Source Han Sans CN-Regular", + }, + }, + yAxis: [ + { + type: "value", name: "", max: 1200, - min:0, - splitNumber:5, + min: 0, + splitNumber: 5, nameTextStyle: { - color: '#B6E6FF', - fontSize: 13, - fontFamily: 'Source Han Sans CN-Regular', - align: "left", - verticalAlign: "center", + color: "#B6E6FF", + fontSize: 13, + fontFamily: "Source Han Sans CN-Regular", + align: "left", + verticalAlign: "center", }, axisLabel: { - fontSize: 13, - color: '#B6E6FF', - fontFamily: 'HarmonyOS Sans-Regular', - // formatter:function(value,index){ - // return yList[index] - // } + fontSize: 13, + color: "#B6E6FF", + 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: [ - { - name: '交通特征', - type: 'line', - symbol: 'circle', - symbolSize: 0, + }, + ], + series: [ + { + name: "交通特征", + type: "line", + symbol: "circle", + symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#32BB8A', - }, - lineStyle: { - width:2, - }, - data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据 - }, - { - name: '饱和度', - type: 'line', - symbol: 'circle', - symbolSize: 0, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#32BB8A", + }, + lineStyle: { + width: 2, + }, + data: [ + 1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700, + ], // 折线图的数据 + }, + { + name: "饱和度", + type: "line", + symbol: "circle", + symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#07A3FB', - }, - lineStyle: { - width: 2, - }, - data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据 - }, - { - name: '拥挤度', - type: 'line', - symbol: 'circle', - symbolSize: 0, - // yAxisIndex: 1, // 与第二个 y 轴关联 - itemStyle: { - color: '#E2BA74', - }, - lineStyle: { - width: 2, - }, - data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据 - }, - ] -} + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#07A3FB", + }, + lineStyle: { + width: 2, + }, + data: [ + 600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600, + ], // 折线图的数据 + }, + { + name: "拥挤度", + type: "line", + symbol: "circle", + symbolSize: 0, + // yAxisIndex: 1, // 与第二个 y 轴关联 + itemStyle: { + color: "#E2BA74", + }, + lineStyle: { + width: 2, + }, + data: [ + 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780, + ], // 折线图的数据 + }, + ], +}; export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js index 96fed411..e750558b 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js @@ -3,51 +3,59 @@ import * as echarts from "echarts"; function contains(arr, val) { var i = arr.length; while (i--) { - if (arr[i].name === val) { - return i; - } + if (arr[i].name === val) { + return i; + } } return false; } let list = [ { - name: '交通特征', - max: 88, + name: "交通特征", + max: 88, }, { - name: '拥挤度', - max: 88, + name: "拥挤度", + max: 88, }, { - name: '饱和度', - max:188, + name: "饱和度", + max: 188, }, ]; let data1 = [[80, 50, 55, 80, 50, 80, 48, 43]]; let data2 = [[60, 60, 65, 60, 70, 40, 80, 63]]; let options = { - tooltip: { - show: true, - trigger: 'item', - formatter: (data) => { - // console.log(data.seriesIndex); - var tip = '<h5 class="echarts-tip-h5">' + data.seriesName + '</h5>'; - let tmpData = []; - if (data.seriesIndex === 0) { - tmpData = data1; - } else if (data.seriesIndex === 1) { - tmpData = data2; - } - console.log(tmpData) - data.value.forEach((item, index) => { - // console.log(list[index].name) - tip += '<div>'; - tip += '<div>' + list[index].name + ': '+ tmpData[0][index] + '万</div>' - tip += '</div>'; - }); - return tip; - }, + show: true, + trigger: "item", + formatter: (data) => { + // console.log(data.seriesIndex); + var tip = '<span class="echarts-tip-h5">' + data.seriesName + "</span>"; + let tmpData = []; + if (data.seriesIndex === 0) { + tmpData = data1; + } else if (data.seriesIndex === 1) { + tmpData = data2; + } + console.log(tmpData); + data.value.forEach((item, index) => { + // console.log(list[index].name) + tip += "<div>"; + tip += + "<div>" + list[index].name + ": " + tmpData[0][index] + "万</div>"; + tip += "</div>"; + }); + return tip; + }, + }, + grid: { + top: "5%", //上边距 + right: "0", //右边距 + left: "0", //左边距 + bottom: "0%", //下边距 + padding: "50px", + containLabel: true, }, // legend: { // show: true, @@ -62,88 +70,92 @@ let options = { // data: ['数据1', '数据2'], // }, radar: { - name: { - textStyle: { - color: '#fff', - fontSize: 16, - }, - rich: { - a: { - fontSize: 16, - color: '#FFFFFF', - padding: [0, 0, 8, 0], - }, - b: { - fontSize: 18, - color: '#ACD3FF', - }, - }, - formatter: (a) => { - let i = contains(list, a); // 处理对应要显示的样式 - return `{a| ${a}}`; - }, + name: { + textStyle: { + color: "#fff", + fontSize: 16, }, - center: ['50%', '50%'], - radius: '60%', - startAngle: 90, - splitNumber: 5, - shape: 'circle', - splitArea: { - areaStyle: { - color: [ '#07A3FB99','#07A3FB8010', '#07A3FB30','#07A3FB60','#07A3FB80'], - }, + rich: { + a: { + fontSize: 12, + color: "#FFFFFF", + padding: [0, 0, 8, 0], + }, + b: { + fontSize: 18, + color: "#ACD3FF", + }, }, - axisLabel: { - show: false, + formatter: (a) => { + let i = contains(list, a); // 处理对应要显示的样式 + return `{a| ${a}}`; }, - axisLine: { - show: false, + }, + center: ["50%", "50%"], + radius: "60%", + startAngle: 90, + splitNumber: 5, + shape: "circle", + splitArea: { + areaStyle: { + color: [ + "#07A3FB99", + "#07A3FB8010", + "#07A3FB30", + "#07A3FB60", + "#07A3FB80", + ], }, - splitLine: { - show: true, - lineStyle: { - color: 'rgba(50, 72, 130, 0.4)', - }, + }, + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: "rgba(50, 72, 130, 0.4)", }, - indicator: list, + }, + indicator: list, }, series: [ - { - name: '数据1', - type: 'radar', - symbol: 'circle', - symbolSize: 3, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 1, - 0, - 0, - [ - { - offset: 0, - color: '#DC6A00', - }, - { - offset: 1, - color: '#099CCD', - }, - ], - false - ), + { + name: "数据1", + type: "radar", + symbol: "circle", + symbolSize: 3, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 1, + 0, + 0, + [ + { + offset: 0, + color: "#DC6A00", + }, + { + offset: 1, + color: "#099CCD", }, - }, - itemStyle: { - color: 'rgba(245, 166, 35, 0.2)', - borderColor: 'rgba(235, 171, 86, 00)', - borderWidth: 10, - }, - data: data1, + ], + false + ), + }, }, + itemStyle: { + color: "rgba(245, 166, 35, 0.2)", + borderColor: "rgba(235, 171, 86, 00)", + borderWidth: 10, + }, + data: data1, + }, ], }; - - -export default options; \ No newline at end of file +export default options; 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 0e86d8aa..e43bf4ec 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 @@ -35,7 +35,7 @@ </div> --> <ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" /> <div class="body"> - <div style="width:70%"> + <div class="body-l"> <div class="searchPanel_1"> <!-- <el-from ref="form"> --> <RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction" @@ -310,7 +310,7 @@ export default { <style lang='scss' scoped> .progressbar { - margin: 10px; + margin: 15px; } @@ -332,9 +332,10 @@ export default { flex-direction: column; height: 100%; width: 33%; - margin-right: 20px; + // margin-right: 20px; border: 1px solid; - border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1; + border: none; + // border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1; background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 100%); padding: 10px; } @@ -394,7 +395,13 @@ export default { justify-content: space-between; align-items: center; flex-direction: column; + --keep-ratio: scaleX(1); + .body-l { + width: 70%; + padding: 0 20px; + margin-right: 20px; + } .searchPanel_1 { position: absolute; @@ -406,6 +413,7 @@ export default { margin-bottom: 10px; z-index: 1000; + div { white-space: nowrap; margin-right: 4px; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue index 7951fbe0..bb3b0aea 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue @@ -1,75 +1,76 @@ <template> <div class='congestion'> - <div :style="{width: dataList.length * 300}" > - <div :class="selectIndex == index?selectLine < 1?'item action Abefore':'item action Aafter':selectIndex + selectLine == index?selectLine < 1?'item action Aafter':'item action Abefore':'item'" v-for="(item,index) in dataList" :key="index" > - <i class="after" @click="selectItem(index,-1)"></i> - <i class="before" @click="selectItem(index,+1)" ></i> - <span></span> - <div>{{ item.title }}</div> + <div :style="{ width: dataList.length * 300 }"> + <div :class="selectIndex == index ? selectLine < 1 ? 'item action Abefore' : 'item action Aafter' : selectIndex + selectLine == index ? selectLine < 1 ? 'item action Aafter' : 'item action Abefore' : 'item'" + v-for="(item, index) in dataList" :key="index"> + <i class="after" @click="selectItem(index, -1)"></i> + <i class="before" @click="selectItem(index, +1)"></i> + <span></span> + <div>{{ item.title }}</div> + </div> </div> - </div> </div> - </template> +</template> - <script> +<script> import { number } from 'echarts'; - export default { +export default { name: 'ProgressBar', components: { }, - props:{ - dataList:{ - type:Array, + props: { + dataList: { + type: Array, default: () => { return [] } }, }, data() { - return { - selectIndex:0, - selectLine:-1, - } + return { + selectIndex: 0, + selectLine: -1, + } }, - + created() { - + }, methods: { - selectItem(index,num){ + selectItem(index, num) { this.selectIndex = index; this.selectLine = num } }, mounted() { - + }, - } - </script> +} +</script> - <style lang='scss' scoped> - .congestion { +<style lang='scss' scoped> +.congestion { width: 100%; - height:35px; + height: 35px; display: inline-flex; flex-direction: row; - > div { + >div { position: relative; width: 100%; - height:35px; + height: 35px; display: inline-flex; - flex-direction: row; + flex-direction: row; >.item .after { position: absolute; display: inline-flex; - left:0px; - top:-5px; - width:45px !important; - height:35px !important; + left: 0px; + top: -5px; + width: 45px !important; + height: 35px !important; background-color: transparent; cursor: pointer; } @@ -78,20 +79,20 @@ import { number } from 'echarts'; content: ""; position: absolute; display: inline-flex; - left:0px; - top:8px; - width:45px !important; - height:3px !important; + left: 0px; + top: 8px; + width: 45px !important; + height: 3px !important; background-color: #C7C7C7; } >.item .before { position: absolute; display: inline-flex; - right:0px; - top:-5px; - width:45px; - height:35px; + right: 0px; + top: -5px; + width: 45px; + height: 35px; background-color: transparent; cursor: pointer; } @@ -100,96 +101,97 @@ import { number } from 'echarts'; content: ""; position: absolute; display: inline-flex; - left:0px; - top:8px; - width:45px !important; - height:3px !important; + left: 0px; + top: 8px; + width: 45px !important; + height: 3px !important; background-color: #C7C7C7; } .item.action .after::after { - background-color: #72FDC9 ; + background-color: #72FDC9; } - .item.action.Aafter .after::after{ - background-color: #C7C7C7 !important; + .item.action.Aafter .after::after { + background-color: #C7C7C7 !important; } - > .item.action.Aafter .before::after { - background-color: #72FDC9 ; + >.item.action.Aafter .before::after { + background-color: #72FDC9; } - > .item.action.Abefore .after::after { - background-color: #72FDC9 ; + >.item.action.Abefore .after::after { + background-color: #72FDC9; } - > .bef::before { + >.bef::before { background-color: #72FDC9 !important; } - > .aft::after { + >.aft::after { background-color: #72FDC9 !important; } - > .item.action span { - background-color: #72FDC9 ; + >.item.action span { + background-color: #72FDC9; cursor: pointer; } - > .item.action span::after { - border-color: #72FDC9 ; + >.item.action span::after { + border-color: #72FDC9; } - > .action div { - color:#72FDC9 !important; + >.action div { + color: #72FDC9 !important; } - + >.item { position: relative; width: 180px; - height:35px; + height: 35px; display: inline-flex; flex-direction: column; justify-items: center; - + >span { position: absolute; - display:inline-flex; + display: inline-flex; width: 9px; height: 9px; background: #C7C7C7; border-radius: 50%; opacity: 1; - left:53px; + left: 53px; } >div { position: relative; - display:inline-flex; - width:100%; + display: inline-flex; + width: 100%; align-items: center; justify-content: center; top: 5px; - margin-top:10px; - color:#C7C7C7; + margin-top: 10px; + font-size: 14px; + color: #C7C7C7; } >span::after { content: ""; position: absolute; - display:inline-flex; + display: inline-flex; width: 15px; height: 15px; - border:1px solid #C7C7C7; + border: 1px solid #C7C7C7; border-radius: 50%; opacity: 1; - top:-3.5px; - left:-3px; + top: -3.5px; + left: -3px; } } } - } - </style> +} +</style> \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue index 08046b04..e23bb841 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue @@ -1,180 +1,190 @@ <template> - <div class='TrafficFlow'> - <section class="content"> - <RoadIndicators class="content-l" /> - <SaturationMax class="content-l" /> - <Crowding class="content-l" /> - <ComposeFeatures class="content-l" /> - </section> - <section class="content" > - <TrafficIndicators class="content-max" /> - </section> - <section class="foot" > - <ChangesIndictors class="foot-l" /> - <CongestionIndicator class="foot-r" /> - </section> - </div> - </template> + <div class='TrafficFlow'> + <section class="content"> + <RoadIndicators class="content-l" /> + <SaturationMax class="content-l" /> + <Crowding class="content-l" /> + <ComposeFeatures class="content-l" /> + </section> + <section class="content"> + <TrafficIndicators class="content-max" /> + </section> + <section class="foot"> + <ChangesIndictors class="foot-l" /> + <CongestionIndicator class="foot-r" /> + </section> + </div> +</template> - <script> - import RoadIndicators from './components/roadIndicators'; - import SaturationMax from './components/saturationMax'; - import Crowding from './components/crowding'; - import ComposeFeatures from './components/composeFeatures'; - import TrafficIndicators from './components/trafficIndicators'; - import ChangesIndictors from './components/changesIndicators'; - import CongestionIndicator from './components/congestionIndicator'; - - export default { - name: 'IndicatorAnalysis', - components: { - RoadIndicators, - SaturationMax, - Crowding, - ComposeFeatures, - TrafficIndicators, - ChangesIndictors, - CongestionIndicator, - }, - data(){ - return { - activeName:"first" - } - }, - methods:{ - changeTabs(){ - - } +<script> +import RoadIndicators from './components/roadIndicators'; +import SaturationMax from './components/saturationMax'; +import Crowding from './components/crowding'; +import ComposeFeatures from './components/composeFeatures'; +import TrafficIndicators from './components/trafficIndicators'; +import ChangesIndictors from './components/changesIndicators'; +import CongestionIndicator from './components/congestionIndicator'; + +export default { + name: 'IndicatorAnalysis', + components: { + RoadIndicators, + SaturationMax, + Crowding, + ComposeFeatures, + TrafficIndicators, + ChangesIndictors, + CongestionIndicator, + }, + data() { + return { + activeName: "first" + } + }, + methods: { + changeTabs() { + } - } - </script> + +} +</script> - <style lang='scss' scoped> +<style lang='scss' scoped> +::v-deep .el-tabs__item { + display: inline-flex; + justify-content: center; + font-size: 16px; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: #FFFFFF; + min-width: 128px; + position: relative; + left: 10px; +} + +::v-deep .el-tabs__active-bar { + min-width: 128px; +} + +::v-deep .el-tabs__nav-wrap::after { + background-color: #133242; + opacity: 0.1; +} + +.el-tabs__content { + height: 100%; +} + +.footTabs { + display: inline; + width: 99%; + height: 100%; +} + + +.content { + width: 100%; + display: inline-flex; + justify-content: space-between; + pointer-events: none; + margin-top: 19px; + margin-left: 19px; + + >div { + pointer-events: auto; + } - ::v-deep .el-tabs__item{ - display: inline-flex; - justify-content: center; - font-size: 16px; - font-family: PingFang SC, PingFang SC; - font-weight: 500; - color: #FFFFFF; - min-width:128px; - position: relative; - left:10px; - } + .content-w { + width: 66.5%; + } - ::v-deep .el-tabs__active-bar { - min-width:128px; - } + .content-max { + width: 100%; - ::v-deep .el-tabs__nav-wrap::after { - background-color: #133242; - opacity: 0.1; - } + } - .footTabs { - display: inline; - width:99%; + .content-l { + width: 25%; + margin-left: 0px; + } - } +} +.TrafficFlow { + width: 100%; + height: 100%; + position: relative; + z-index: 6; + color: white; - .content { + + .content { width: 100%; - display: inline-flex; - justify-content: space-between; + margin: auto; + display: flex; + flex: 1; pointer-events: none; margin-top: 19px; - margin-left:19px; - >div { - pointer-events: auto; - } - .content-w { - width:66.5%; - } - .content-max { - width:100%; + .content-l { + width: calc(50%); + min-width: 460px; + margin-right: 20px; } - .content-l { - width: 25%; - margin-left:0px; + + .content-m { + display: inline-flex; + flex-direction: column; + width: calc(100% / 4); + margin-right: 20px; + + .content-m-t { + width: 100%; + height: 240px; + margin-bottom: 20px; + } } + .content-r { + width: 30%; + } } - .TrafficFlow { + .foot { width: 100%; - height: 100%; - position: relative; - z-index: 6; - color: white; - + margin: auto; + display: flex; + flex: 1; + pointer-events: none; + margin-top: 19px; + + >div { + pointer-events: auto; + } - .content { + .foot-w { width: 100%; - margin: auto; - display: flex; - flex: 1; - pointer-events: none; - margin-top: 19px; - - - .content-l { - width: calc(50%); - min-width:460px; - margin-right:20px; - } - - - .content-m { - display: inline-flex; - flex-direction: column; - width: calc(100% / 4 ); - margin-right:20px; - - .content-m-t { - width:100%; - height:240px; - margin-bottom: 20px; - } - } - .content-r { - width: 30%; - } } - .foot{ - width: 100%; - margin: auto; - display: flex; - flex: 1; - pointer-events: none; - margin-top: 8px; - >div { - pointer-events: auto; - } - .foot-w { - width:100%; + .foot-l { + width: 70%; + height: 330px; + } - } - - .foot-l { - width: 67%; - } - .foot-m { - width: 613px; - } - .foot-r { - margin-left:20px; - width: 33%; - } + .foot-m { + width: 613px; + } + + .foot-r { + margin-left: 20px; + width: 33%; } } - </style> +} +</style> \ No newline at end of file diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue index 8e247109..a74e198f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue @@ -1,519 +1,506 @@ <template> - <div class='congestion'> - <div class="buttonbar" > - <div class="button" > - <i class="el-icon-refresh-right"></i>刷新 - </div> - <div class="button" > - <i class="el-icon-upload2"></i>导出Excal - </div> - </div> - <div class="board"> - - <div class="weaterMain" > - <el-table - :border="false" - :data="tableData" - height="790" - style="width: 100%"> - <el-table-column - prop="nem" - label="" - width="30"> - </el-table-column> - <el-table-column - prop="address" - label="桩号范围" - > - </el-table-column> - <el-table-column - prop="name" - label="能见度" - class-name="showClass" - > - <template slot-scope="scope"> - <span class="showClass">{{scope.row.name}}</span> - </template> - </el-table-column> - <el-table-column - prop="date" - label="发生时间" - > - </el-table-column> - </el-table> - </div> - </div> + <div class='congestion'> + <div class="buttonbar"> + <div class="button"> + <i class="el-icon-refresh-right"></i>刷新 + </div> + <div class="button"> + <i class="el-icon-upload2"></i>导出Excal + </div> </div> - </template> - - <script> - - export default { - name: 'IndicatorQuery', - components: { - - }, - data() { - return { - tableData: [{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },,{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },,{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },,{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },,{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },,{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },,{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },,{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },,{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - },{ - date: '2023-12-31 13:00:00', - name: '2640.78m', - address: 'K100+000-K110+000' - }, - ] - } - }, + <div class="board"> + + <div class="weaterMain"> + <el-table :border="false" :data="tableData" style="width: 100%"> + <el-table-column prop="nem" label="" width="30"> + </el-table-column> + <el-table-column prop="address" label="桩号范围"> + </el-table-column> + <el-table-column prop="name" label="能见度" class-name="showClass"> + <template slot-scope="scope"> + <span class="showClass">{{ scope.row.name }}</span> + </template> + </el-table-column> + <el-table-column prop="date" label="发生时间"> + </el-table-column> + </el-table> + </div> + </div> + </div> +</template> - created() { - - }, - methods: { - selectItem(index){ - this.selectIndex = index; +<script> + +export default { + name: 'IndicatorQuery', + components: { + + }, + data() { + return { + tableData: [{ + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, , { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, , { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, , { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, , { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, , { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, , { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, , { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, , { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' + }, { + date: '2023-12-31 13:00:00', + name: '2640.78m', + address: 'K100+000-K110+000' }, - }, - mounted() { - - setTimeout(() => { - this.$nextTick(() => { - - }); - }); - }, - } - </script> - - <style lang='scss' scoped> - - .showClass { - color:#00EBC1; + ] } + }, - ::v-deep .el-table .cell { - padding-left:0px !important; - } - - ::v-deep .el-table .el-table__header-wrapper th { - background-color: #064258 !important; - color:#00D1FF; - border-color: #064258 !important; - border:0px !important; - font-size:12px !important; - } + created() { - ::v-deep .el-table { - border:0px !important; - background-color: transparent; - font-size:12px !important; - } + }, + methods: { + selectItem(index) { + this.selectIndex = index; + }, + }, + mounted() { - ::v-deep .el-table__body-wrapper { - background-color: #064258; - color: #fff; - } + setTimeout(() => { + this.$nextTick(() => { - ::v-deep .el-table tr:hover td { - background: #1b2528 !important; - color:#00D1FF; - } + }); + }); + }, +} +</script> + +<style lang='scss' scoped> +.showClass { + color: #00EBC1; +} + +::v-deep .el-table .cell { + padding-left: 0px !important; +} + +::v-deep .el-table .el-table__header-wrapper th { + background-color: #064258 !important; + color: #00D1FF; + border-color: #064258 !important; + border: 0px !important; + font-size: 12px !important; +} + +::v-deep .el-table { + border: 0px !important; + background-color: transparent; + font-size: 12px !important; +} + +::v-deep .el-table__body-wrapper { + background-color: #064258; + color: #fff; +} + +::v-deep .el-table tr:hover td { + background: #1b2528 !important; + color: #00D1FF; +} + +::v-deep .el-table tr:nth-child(odd) td { + background-color: #13272F; + border: 0px !important; +} + +::v-deep .el-table tr:nth-child(even) td { + border: 0px !important; +} + +::v-deep .el-table tr { + background-color: #133242 !important; + border-collapse: 0; + border: 0px !important; + background-color: transparent !important; +} + +.congestion { + display: inline-flex; + width: 100%; + height: 100%; + flex-direction: column; + + .buttonbar { + display: inline-flex; + flex-direction: row; + padding-top: 15px; - ::v-deep .el-table tr:nth-child(odd) td{ - background-color: #13272F ; - border:0px !important; - } - ::v-deep .el-table tr:nth-child(even) td{ - border:0px !important; - } + >.button { + display: inline-flex; + min-width: 90px; + height: 28px; + background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); + border-radius: 2px 2px 2px 2px; + justify-content: center; + align-items: center; + padding: 1px 10px; + ; + opacity: 1; + font-size: 14px; + font-family: PingFang SC, PingFang SC; + font-weight: 400; + color: #FFFFFF; + margin-left: 15px; + } - ::v-deep .el-table tr { - background-color: #133242 !important; - border-collapse:0; - border:0px !important; - background-color: transparent !important; } - .congestion { - display: inline-flex; + .board { + height: 880px; width: 100%; - height: 100%; + padding: 0px 0px; + border-radius: 5px 5px 5px 5px; + opacity: 1; + display: flex; + justify-content: space-between; + align-items: center; flex-direction: column; + margin-top: 20px; + + - .buttonbar { + .warningList { display: inline-flex; - flex-direction: row; - padding-top:15px; + flex-direction: column; + width: 100%; + height: calc(100% - 40px); - > .button { + >div { display: inline-flex; - min-width:90px; - height:28px; - background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); + width: 100%; + height: 138px; + background: #133242; border-radius: 2px 2px 2px 2px; - justify-content: center; - align-items: center; - padding: 1px 10px;; opacity: 1; + border: 1px solid; + border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; + overflow: hidden; + margin-top: 20px; + padding: 23px 29px; font-size: 14px; - font-family: PingFang SC, PingFang SC; - font-weight: 400; - color: #FFFFFF; - margin-left:15px; - } + font-family: PingFang SC, PingFang SC; + font-weight: 400; + color: #37E7FF; + + >.left-w { + display: inline-flex; + width: 40%; + height: 100%; + flex-direction: column; + + .left-row { + margin: 2px; + display: inline-flex; + width: 100%; + height: 30px; + flex-direction: row; + + >.value { + color: #fff; + } + + .org { + font-size: 14px; + font-family: PangMenZhengDao; + font-weight: 400; + color: #F4A125 + } + + } + } + + >.right-w { + margin-left: 30px; + display: inline-flex; + width: 100%; + height: 100%; + flex-direction: column; + + .right-row { + margin-bottom: 10px; + } + + .right-text { + color: #fff; + } + } + } } - .board{ - height: 880px; + .weaterMain { + display: inline-flex; + flex-direction: row; width: 100%; - padding: 0px 0px; - border-radius: 5px 5px 5px 5px; - opacity: 1; - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: column; - margin-top:20px; + height: 100%; + ; - - .warningList { - display: inline-flex; - flex-direction: column; - width:100%; - height:calc(100% - 40px); + .buttons { + width: 100%; + height: 38px; >div { - display: inline-flex; - width:100%; - height:138px; - background: #133242; - border-radius: 2px 2px 2px 2px; - opacity: 1; - border: 1px solid; - border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1; - overflow: hidden; - margin-top:20px; - padding:23px 29px; - font-size: 14px; - font-family: PingFang SC, PingFang SC; - font-weight: 400; - color: #37E7FF; - - >.left-w { - display: inline-flex; - width:40%; - height:100%; - flex-direction: column; - - .left-row { - margin:2px; - display: inline-flex; - width:100%; - height:30px; - flex-direction: row; - - >.value { - color:#fff; - } - - .org { - font-size: 14px; - font-family: PangMenZhengDao; - font-weight: 400; - color: #F4A125 - } - - } - } + display: inline-flex; + width: 10%; + height: 35px; + justify-content: center; + align-items: center; + font-size: 12px; + font-family: PangMenZhengDao; + font-weight: 800; + color: #FFFFFF; + z-index: 9; + } - >.right-w { - margin-left:30px; - display: inline-flex; - width:100%; - height:100%; - flex-direction: column; - - .right-row { - margin-bottom: 10px; - } - - .right-text { - color:#fff; - } - } + >div::after { + content: ""; + position: absolute; + display: inline-flex; + width: 55px; + height: 36px; + background: linear-gradient(180deg, #6557D7 0%, rgba(101, 87, 216, 0) 100%); + border-radius: 50%; + opacity: 1; + z-index: -1; + } + .redSel::after { + background: linear-gradient(180deg, #E73A14 0%, rgba(240, 92, 9, 0) 100%); } - } - .weaterMain { - display: inline-flex; - flex-direction: row; - width:100%; - height: 100%;; - - - .buttons { - width:100%; - height:38px; - >div { - display: inline-flex; - width:10%; - height:35px; - justify-content: center; - align-items: center; - font-size: 12px; - font-family: PangMenZhengDao; - font-weight: 800; - color: #FFFFFF; - z-index: 9; - } + .yelSel::after { + background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%); + } - >div::after { - content: ""; - position: absolute; - display: inline-flex; - width: 55px; - height: 36px; - background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%); - border-radius: 50%; - opacity: 1; - z-index:-1; - } + .bluSel::after { + background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%); + } - .redSel::after { - background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%); - } + .orgSel::after { + background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%); + } + } - .yelSel::after { - background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%); - } + .weaterTitle::after { + content: ""; + position: absolute; + top: 0px; + 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; + } - .bluSel::after { - background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%); - } + .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; + } - .orgSel::after{ - background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%); - } - } + .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; - .weaterTitle::after { - content: ""; - position: absolute; - top:0px; - 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::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; + >span.text { + display: inline-flex; + font-size: 16px; + font-family: PangMenZhengDao; + font-weight: 400; + color: #FFFFFF; } - .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; - } + .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%; - } - - </style> +} + +.charts { + height: 180px; + width: 100%; +} +</style> \ No newline at end of file