- <template>
- <div id="ylfxJCFX">
- <div id="HeaderEcharts"></div>
- <el-divider>管网历史分析</el-divider>
- <div id="BodyFenXi">
- <div class="flex flex-justcontent-spacebetween">
- <div class="eachInfo">
- <div class="name">所属雨水分区:</div>
- <div class="text">{{ listData.rainArea }}</div>
- </div>
- <div class="eachInfo">
- <div class="name">运维片区:</div>
- <div class="text">{{ listData.watchAreaName }}</div>
- </div>
- </div>
- <div class="tableBox">
- <div class="name">历史经验:</div>
- <div class="text popUpTable">
- <el-table :data="listData.rainHistoryList" class="w100" stripe>
- <el-table-column prop="time" label="降雨日期" width="140px"> </el-table-column>
- <el-table-column prop="rain" label="日降雨量(mm)" />
- <el-table-column prop="jyjb" label="降雨级别">
- <template #default="scope">
- <div>
- {{ RainfallLevelFun(scope.row.rain) }}
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="maxData" label="最大雨强(mm)" />
- <el-table-column prop="zdss" label="最大水深(cm)" />
- <el-table-column prop="cmd" label="充满度" />
- <el-table-column prop="warn" label="风险" />
- <el-table-column prop="duration" label="风险时长(分钟)" width="140px" />
- </el-table>
- </div>
- </div>
- <div class="eachInfo">
- <div class="name">周边环境分析:</div>
- <div class="text">{{ listData.zbhjfx }}</div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="ylfxJCFX">
- import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
- import * as echarts from 'echarts';
- import { drainageDispatchRainAnalysisByGwjcd, getEchart } from '@/api/MonitorAssetsOnMap';
- import moment from 'moment';
-
- const props = defineProps({
- // 数据id
- dataID: {
- type: String,
- },
- dataCode: {
- type: String,
- },
- arrstcode: {
- type: Array,
- },
- arrid: {
- type: Array,
- },
- Getproperties: {
- type: Object,
- },
- });
-
- const AllData = reactive({
- chart: null,
- yAxis: [],
- yAxis_Name: '降雨量',
- yAxis3: [],
- yAxis3_Name: '水深',
- xAxis: [],
- MGSW: 0,
- GSW: 0,
- MG: 0,
- YL: 0,
- });
- const Timers = ref([moment().subtract(3, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]);
- const init = () => {
- //先获取Dom上的实例
- let chartDom = echarts.getInstanceByDom(document.getElementById('HeaderEcharts'));
- //然后判断实例是否存在,如果不存在,就创建新实例
- if (chartDom == null) {
- chartDom = echarts.init(document.getElementById('HeaderEcharts'));
- var option = {
- tooltip: {
- trigger: 'axis',
- backgroundColor: '#004284',
- borderColor: '#0B9BFF',
- borderRadius: 6, // 设置圆角大小
- // 自定义提示框文本样
- textStyle: {
- // 字体颜色
- color: 'white',
- // 字体大小
- fontSize: 14,
- },
- },
- legend: {
- data: [AllData.yAxis_Name, AllData.yAxis3_Name],
- textStyle: {
- color: '#FFFFFF',
- fontSize: 12,
- },
- },
- grid: {
- left: 100,
- right: 100,
- bottom: 20,
- containLabel: true,
- },
-
- xAxis: {
- type: 'category',
- boundaryGap: true,
- data: AllData.xAxis,
- axisLabel: {
- color: 'rgba(255,255,255,1)',
- fontSize: 12,
- fontFamily: 'AlibabaPuHuiTi',
- },
- },
-
- dataZoom: [
- {
- // show: true,
- show: false,
- height: 4,
- bottom: 10,
- start: 0,
- end: 100,
- handleSize: '100%',
- fillerColor: '#94FA41',
- borderColor: 'transparent',
- backgroundColor: 'rgba(148, 250, 65, 0.2)',
- handleStyle: {
- color: '#94FA41',
- },
- moveHandleSize: 0,
- textStyle: {
- color: '#fff',
- },
- },
- {
- type: 'inside',
- show: true,
- height: 15,
- start: 0,
- end: 100,
- },
- ],
- yAxis: [
- {
- name: AllData.yAxis_Name,
- type: 'value',
- // minInterval: 1,
- axisLabel: {
- color: '#AAC1CF',
- show: true,
- formatter: function (value) {
- return value.toFixed(2); // 保留两位小数
- },
- },
- min: 0,
- nameTextStyle: {
- color: '#19D5FF',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#2161a8',
- },
- },
- alignTicks: true,
- position: 'left',
- inverse: true,
- nameLocation: 'start',
- },
- {
- name: AllData.yAxis3_Name,
- type: 'value',
- // minInterval: 1,
- max: function (value) {
- return value.max > AllData.YL ? value.max : AllData.YL;
- },
- min: 0,
- axisLabel: {
- color: '#AAC1CF',
- show: true,
- formatter: function (value) {
- return value.toFixed(2); // 保留两位小数
- },
- },
- nameTextStyle: {
- color: '#99FF55',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#2161a8',
- },
- },
- alignTicks: true,
- },
- ],
- series: [
- {
- name: AllData.yAxis_Name,
- type: 'bar',
- data: AllData.yAxis,
- barWidth: '30%', // 可以是具体像素值 '20px' 或百分比 '50%'
- // 修改数据点颜色
- itemStyle: {
- borderRadius: [0, 0, 50, 50],
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#08B1FF' },
- { offset: 1, color: '#19D6FF' },
- ]), // 数据点颜色
- },
- },
- {
- name: AllData.yAxis3_Name,
- type: 'line',
- data: AllData.yAxis3,
- yAxisIndex: 1,
- symbolSize: 7,
- // 修改折线颜色
- lineStyle: {
- color: '#99FF55', // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: '#99FF55', // 数据点颜色
- },
- // yAxisIndex: 1,
- markLine: {
- data: [],
- symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none',即不显示箭头
- },
- },
- ],
- };
- if (AllData.MGSW > 0) {
- option.series[1].markLine.data.push({
- yAxis: AllData.MGSW, // 这是水平线的 Y 轴值
- lineStyle: {
- type: 'dashed',
- color: 'red', // 线的颜色
- },
- label: {
- show: true,
- // formatter: "满管水位" + props.data.yAxis6_YJ,
- formatter: '溢流风险:' + AllData.MGSW,
- color: 'red',
- fontSize: 12,
- position: 'middle',
- },
- });
- }
- if (AllData.GSW > 0) {
- option.series[1].markLine.data.push({
- yAxis: AllData.GSW, // 这是水平线的 Y 轴值
- lineStyle: {
- type: 'dashed',
- color: 'yellow', // 线的颜色
- cap: 'round',
- },
- label: {
- show: true,
- formatter: '高水位:' + AllData.GSW,
- color: 'yellow',
- fontSize: 12,
- position: 'middle',
- },
- });
- }
- if (AllData.MG > 0) {
- option.series[1].markLine.data.push({
- yAxis: AllData.MG, // 这是水平线的 Y 轴值
- lineStyle: {
- type: 'dashed',
- color: 'rgba(255, 191, 0, 1)', // 线的颜色
- cap: 'round',
- },
- label: {
- show: true,
- formatter: '满管:' + AllData.MG,
- color: 'rgba(255, 191, 0, 1)',
- fontSize: 12,
- position: 'middle',
- },
- });
- }
- if (AllData.YL > 0) {
- option.series[1].markLine.data.push({
- yAxis: AllData.YL, // 这是水平线的 Y 轴值
- lineStyle: {
- type: 'dashed',
- color: '#610404', // 线的颜色
- cap: 'round',
- },
- label: {
- show: true,
- formatter: '溢流:' + AllData.YL,
- color: '#610404',
- fontSize: 12,
- position: 'middle',
- },
- });
- }
- option && chartDom.setOption(option, true);
- AllData.chart = chartDom;
- }
- };
- const resizeTheChart = () => {
- if (AllData.chart) {
- AllData.chart.resize();
- }
- };
- const getChartsData = () => {
- getEchart({
- stType: props.Getproperties.stType,
- stCode: props.Getproperties.stCode,
- dataCode: props.Getproperties.dataCode,
- start: Timers.value[0],
- end: Timers.value[1],
- }).then(res => {
- if (res && res.code == 200) {
- AllData.xAxis = res.data.times;
- res.data.datas.forEach(element => {
- switch (element.dataKey) {
- case 'z':
- AllData.yAxis3 = element.datas;
- element.cordonLineList.forEach(element => {
- if (element.code == 'ylfx') {
- AllData.MGSW = Number(element.lineValue);
- }
- if (element.code == 'gsw') {
- AllData.GSW = Number(element.lineValue);
- }
- if (element.code == 'mg') {
- AllData.MG = Number(element.lineValue);
- }
- if (element.code == 'yl') {
- AllData.YL = Number(element.lineValue);
- }
- });
- break;
-
- case 'pn05':
- AllData.yAxis = element.datas;
- break;
- }
- });
- init();
- }
- });
- };
-
- const listData = ref({});
- function gitDataFun() {
- let params = {
- id: props.Getproperties.id,
- };
- drainageDispatchRainAnalysisByGwjcd(params).then(
- res => {
- console.log('监测分析渍水风险降雨历史', res);
- if (res && res.code == 200) {
- listData.value = res.data;
- }
- },
- error => {}
- );
- }
- function RainfallLevelFun(rain) {
- let sum = Number(rain);
- let text = '';
- switch (true) {
- // 江河水位
- case sum > 200:
- text = '特大暴雨';
- break;
- case sum > 100:
- text = '大暴雨';
- break;
- case sum > 50:
- text = '暴雨';
- break;
- case sum > 25:
- text = '大雨';
- break;
- case sum > 10:
- text = '中雨';
- break;
- case sum > 0:
- text = '小雨';
- break;
- default:
- text = '无雨';
- }
- return text;
- }
- onMounted(() => {
- nextTick(() => {
- if (props.Getproperties.daterange) {
- Timers.value = props.Getproperties.daterange;
- }
- getChartsData();
- gitDataFun();
- window.addEventListener('resize', resizeTheChart);
- });
- });
- </script>
-
- <style lang="scss" scoped>
- #ylfxJCFX {
- width: 100%;
- height: 100%;
- #HeaderEcharts {
- width: 1198px;
- height: 320px;
- }
- #BodyFenXi {
- width: 100%;
- height: 250px;
-
- .eachInfo {
- display: flex;
- align-items: center;
- font-weight: bold;
- font-size: 14px;
- margin-bottom: 10px;
-
- .name {
- color: #ccdfff;
- width: 100px;
- text-align: right;
- padding-right: 10px;
- }
- .text {
- flex: 1;
- min-width: 300px;
- min-height: 37px;
- color: #8fbffe;
- background: #0d2359;
- border-radius: 6px;
- border: 1px solid #0b9bff;
- padding: 7px 12px;
- }
- }
- .tableBox {
- display: flex;
- font-size: 14px;
- margin-bottom: 10px;
- color: #ccefff;
- .name {
- color: #ccdfff;
- min-width: 100px;
- text-align: right;
- padding-right: 10px;
- }
- .text {
- width: calc(100% - 100px);
- }
- :deep(.el-scrollbar__wrap) {
- max-height: 120px;
- overflow-y: auto;
- }
- }
- }
- }
- </style>