From 34a2dbeeb7b255a5681af855b6371e900b0a1575 Mon Sep 17 00:00:00 2001
From: ruancuihong <2806986110@qq.com>
Date: Sat, 13 Apr 2024 17:53:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=84=E8=AD=A6=E9=A2=84=E6=8A=A5?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../warnInfo/components/Tree.vue              |  11 +-
 .../warnInfo/components/forecastDetail.vue    | 416 +++++++++++++++--
 .../warnInfo/detail/PlanDetail.vue            | 113 +----
 .../fourPredictions/warnInfo/js/detailData.js | 421 ++++++++++++++++++
 4 files changed, 817 insertions(+), 144 deletions(-)
 create mode 100644 src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js

diff --git a/src/views/aiSupervision/fourPredictions/warnInfo/components/Tree.vue b/src/views/aiSupervision/fourPredictions/warnInfo/components/Tree.vue
index 16af892..8f8b57c 100644
--- a/src/views/aiSupervision/fourPredictions/warnInfo/components/Tree.vue
+++ b/src/views/aiSupervision/fourPredictions/warnInfo/components/Tree.vue
@@ -308,12 +308,13 @@ export default {
             display: flex;
             align-items: center;
             justify-content: flex-start;
+            border-radius: 4px;
         }
 
         .el-tree-node:focus>.el-tree-node__content,
         .el-tree-node__content:hover {
             background: #ebf7f5;
-            color: rgb(54, 178, 158) !important;
+            color: rgba(0, 0, 0, 0.9) !important;
             // border-right: 3px solid #36b29e;
         }
 
@@ -330,7 +331,7 @@ export default {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            // color: rgb(38, 38, 38);
+            color: rgba(0, 0, 0, 0.6);
             // width: 100%;
             // padding-right: 8px;
             font-family: "思源黑体";
@@ -368,6 +369,12 @@ export default {
                     background: rgba(255, 255, 255, 0.16);
                 }
             }
+
+            &:hover,
+            &:active,
+            &:focus {
+                color: rgba(0, 0, 0, 0.9);
+            }
         }
 
         .custom-tree-node.opacity {
diff --git a/src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue b/src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue
index 1bb9737..d9d422d 100644
--- a/src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue
+++ b/src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue
@@ -1,63 +1,267 @@
 <template>
     <div class="forecast-detail-wrapper">
-        <div class="detail-title">预报详情</div>
-        <div class="select-content">
-            <span>预报类型</span>
-            <el-select v-model="selectValue" placeholder="请选择">
-                <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-            </el-select>
-            <el-radio-group v-model="radioValue">
-                <el-radio v-for="item in radioOptions" :key="item.label" :label="item.label">{{ item.name }}</el-radio>
-            </el-radio-group>
+        <div class="title-content">
+            <div class="detail-title">预报详情</div>
+            <div class="select-content">
+                <span class="select-type">预报类型</span>
+                <el-select v-model="selectValue" placeholder="请选择" @change="changeType">
+                    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+                <el-radio-group v-model="radioValue" v-show="!isCheckbox" @change="changeProject">
+                    <el-radio v-for="item in radioOptions" :key="item.label" :label="item.label">{{ item.name
+                        }}</el-radio>
+                </el-radio-group>
+                <el-checkbox-group v-model="checkedValue" :min="0" :max="2" v-show="isCheckbox" @change="changeProject">
+                    <el-checkbox v-for="item in radioOptions" :key="item.label" :label="item.label">{{ item.name
+                        }}</el-checkbox>
+                </el-checkbox-group>
+            </div>
         </div>
         <div class="analysis-content">
-            <div class="echarts-content" id="chart"></div>
+            <div class="echarts-content" id="chart">
+                <span class="title-name">河道水位-流量关系图</span>
+                <div class="echarts-box" id="waterchart" :style="{ 'zoom': zoom }"></div>
+            </div>
             <div class="warn-analysis">
-
+                <span class="title-name">预警分析</span>
+                <el-table height="262" :data="analysisTableData" border>
+                    <el-table-column prop="projectName" align="center" label="站点名称">
+                    </el-table-column>
+                    <el-table-column prop="warningType" align="center" label="预警类型">
+                    </el-table-column>
+                    <el-table-column prop="warningStatus" align="center" label="预警状态">
+                        <template slot-scope="scope">
+                            {{ scope.row.warningStatus === '1' ? '处理中' : '已处理' }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="warningInfo" align="center" label="预报">
+                    </el-table-column>
+                </el-table>
             </div>
         </div>
-
+        <div class="analysis-content" v-show="isCheckbox">
+            <div class="echarts-content">
+                <span class="title-name">河道水位-流量关系图</span>
+                <div class="echarts-box" id="flowchart" :style="{ 'zoom': zoom }"></div>
+            </div>
+            <div class="warn-analysis">
+                <span class="title-name">预警分析</span>
+                <el-table height="262" :data="analysisTableData" border>
+                    <el-table-column prop="projectName" align="center" label="站点名称">
+                    </el-table-column>
+                    <el-table-column prop="warningType" align="center" label="预警类型">
+                    </el-table-column>
+                    <el-table-column prop="warningStatus" align="center" label="预警状态">
+                        <template slot-scope="scope">
+                            {{ scope.row.warningStatus === '1' ? '处理中' : '已处理' }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="warningInfo" align="center" label="预报">
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+        <div class="water-leve-forecast" v-show="!isCheckbox">
+            <span class="title-name">河道流量预报</span>
+            <el-table height="235" :data="flowTableData" border>
+                <el-table-column prop="projectName" align="center" label="工程名称">
+                </el-table-column>
+                <el-table-column prop="projectID" align="center" label="ID">
+                </el-table-column>
+                <el-table-column prop="rainFlow" align="center" label="预报雨量">
+                </el-table-column>
+                <el-table-column prop="waterFlow" align="center" label="预报来水量">
+                </el-table-column>
+                <el-table-column prop="outFlow" align="center" label="预报出库流量">
+                </el-table-column>
+                <el-table-column prop="water" align="center" label="预报水位">
+                </el-table-column>
+                <el-table-column prop="flow" align="center" label="河道流量">
+                </el-table-column>
+                <el-table-column prop="warningTime" align="center" label="预报时间">
+                </el-table-column>
+            </el-table>
+        </div>
     </div>
 </template>
-
 <script>
+import { WARNTYPE, WARNTYPELIST, AnalysisTableData, FlowTableData, FlowWaterChartData } from "../js/detailData";
+let flowChart
+let waterchart
 export default {
     data () {
         return {
-            selectOptions: [{
-                value: '1',
-                label: '工程水位预报'
-            }, {
-                value: '2',
-                label: '河道水位预报'
-            }, {
-                value: '3',
-                label: '工程降雨量预报'
-            }, {
-                value: '4',
-                label: '水库出库流量预报'
-            }, {
-                value: '5',
-                label: '流域来水量预报'
-            }, {
-                value: '6',
-                label: '河道流量预报'
-            }],
+            selectOptions: WARNTYPE,
             selectValue: '1',
-            radioOptions: [{
-                label: 1,
-                name: '飞来峡水库'
-            }, {
-                label: 2,
-                name: '龙潭水库'
-            }],
-            radioValue: 1
+            radioOptions: WARNTYPELIST,
+            radioValue: '1',
+            analysisTableData: AnalysisTableData,
+            flowTableData: FlowTableData,
+            zoom: 1,
+            isCheckbox: false,
+            checkedValue: ['1']
+        };
+    },
+    mounted () {
+        this.initChart()
+        this.zoom = 1 / document.body.style.zoom;
+        window.onresize = () => {
+            this.zoom = 1 / document.body.style.zoom;
+            this.initChart()
         };
     },
     methods: {
-        handleNodeClick (data) {
-            console.log(data);
+        changeProject (data) {
+            this.radioValue = data
+            this.checkedValue = data
+            this.initChart()
+        },
+        changeType (val) {
+            this.selectValue = val
+            this.radioValue = '1'
+            this.checkedValue = ['1']
+            let node = WARNTYPE.find(item => item.value === val)
+            this.isCheckbox = node.checkbox
+            this.initChart()
+        },
+        initChart () {
+            if (waterchart) waterchart.dispose();
+            waterchart = this.$echarts.init(document.getElementById('waterchart'))
+            waterchart.clear();
+            let series = []
+            let yAxis = []
+            let tooltip = {}
+            let chartData = FlowWaterChartData.find(item => item.warnType === this.selectValue)
+            if (!chartData) chartData = FlowWaterChartData[0]
+            if (chartData.toolTipTrigger) {
+                tooltip.trigger = chartData.toolTipTrigger
+            }
+            if (this.selectValue === '3') {
+                let item = chartData.YData[0]
+                series.push(
+                    {
+                        name: item.unit,
+                        data: item.Data,
+                        type: item.barType,
+                        smooth: true,
+                        yAxisIndex: item.yAxisIndex,
+                        itemStyle: {
+                            opacity: item.opacity
+                        },
+                        barWidth: item.barWidth
+                    }
+                )
+                yAxis.push({
+                    name: item.yAxisName,
+                    alignTicks: item.alignTicks,
+                    type: item.yAxisType
+                })
+            } else {
+                chartData.YData.forEach(item => {
+                    series.push(
+                        {
+                            name: item.unit,
+                            data: item.Data,
+                            type: item.barType,
+                            smooth: true,
+                            yAxisIndex: item.yAxisIndex,
+                            itemStyle: {
+                                opacity: item.opacity
+                            },
+                            barWidth: item.barWidth
+                        }
+                    )
+                    yAxis.push({
+                        name: item.yAxisName,
+                        alignTicks: item.alignTicks,
+                        type: item.yAxisType
+                    })
+                })
+            }
+
+            let option = {
+                tooltip: tooltip,
+                legend: {
+                    right: 'center',
+                    top: '2%'
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLine: { onZero: false },
+                    data: chartData.XData.map(function (str) {
+                        return str.replace(' ', '\n');
+                    })
+                },
+                yAxis: yAxis,
+                grid: {
+                    top: '15%',
+                    bottom: '14%',
+                    left: '5%',
+                    right: '5%'
+                },
+                series: series
+            }
+            waterchart.setOption(option);
+            // this.$nextTick(() => {
+            //     waterchart.resize();
+            // });
+            if (this.isCheckbox) {
+                if (flowChart) flowChart.dispose();
+                flowChart = this.$echarts.init(document.getElementById('flowchart'))
+                flowChart.clear();
+                let series = []
+                let yAxis = []
+                let tooltip = {
+                    trigger: 'axis'
+                }
+                let chartData = FlowWaterChartData.find(item => item.warnType === this.selectValue)
+                if (!chartData) chartData = FlowWaterChartData[0]
+                let item = chartData.YData[1]
+                series.push(
+                    {
+                        name: item.unit,
+                        data: item.Data,
+                        type: item.barType,
+                        smooth: true,
+                        yAxisIndex: item.yAxisIndex,
+                        itemStyle: {
+                            opacity: item.opacity
+                        },
+                        barWidth: item.barWidth
+                    }
+                )
+                yAxis.push({
+                    name: item.yAxisName,
+                    alignTicks: item.alignTicks,
+                    type: item.yAxisType
+                })
+                let option = {
+                    tooltip: tooltip,
+                    legend: {
+                        right: 'center',
+                        top: '2%'
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        axisLine: { onZero: false },
+                        data: chartData.XData.map(function (str) {
+                            return str.replace(' ', '\n');
+                        })
+                    },
+                    yAxis: yAxis,
+                    grid: {
+                        top: '15%',
+                        bottom: '14%',
+                        left: '5%',
+                        right: '5%'
+                    },
+                    series: series
+                }
+                flowChart.setOption(option);
+            }
         }
     }
 };
@@ -66,5 +270,131 @@ export default {
 .forecast-detail-wrapper {
     width: 100%;
     height: 100%;
+
+    .title-content {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 40px;
+        border-radius: 0px 8px 0px 0px;
+        align-items: center;
+        padding: 0px 12px;
+        background: #FFFFFF;
+        border-width: 0px 0px 1px 0px;
+        border-style: solid;
+        border-color: #E7E7E7;
+
+        .detail-title {
+            height: 22px;
+            font-family: 思源黑体;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 22px;
+            letter-spacing: 0px;
+            color: #1A1A1A;
+            position: relative;
+            padding: 0 8px;
+
+            &:before {
+                content: '';
+                position: absolute;
+                background: #31A08E;
+                width: 3px;
+                height: 18px;
+                left: 0px;
+                top: 2px;
+                margin-right: 8px;
+            }
+        }
+
+        .select-content {
+            height: 34px;
+            display: flex;
+            align-items: center;
+
+            .select-type {
+                font-family: PingFang SC;
+                font-size: 14px;
+                font-weight: normal;
+                line-height: 22px;
+                text-align: center;
+                letter-spacing: 0px;
+                color: rgba(0, 0, 0, 0.6);
+                margin-right: 12px;
+            }
+
+            .el-select {
+                height: 26px;
+                line-height: 26px;
+                margin-right: 24px;
+                width: 200px;
+                border-radius: 4px;
+            }
+
+            .el-checkbox-group {
+                height: 26px;
+                line-height: 26px;
+            }
+
+            ::v-deep.el-input--medium .el-input__inner {
+                height: 26px;
+                line-height: 26px;
+            }
+        }
+    }
+
+    .analysis-content {
+        height: 300px;
+        display: flex;
+        padding: 0px;
+        justify-content: space-between;
+
+        .echarts-content {
+            width: 951px;
+            height: 300px;
+            border-bottom: 1px solid #E5E5E5;
+
+            .echarts-box {
+                width: 951px;
+                height: 240px;
+            }
+        }
+
+        .warn-analysis {
+            width: 441px;
+            height: 300px;
+            border-left: 1px solid #E5E5E5;
+            border-right: 1px solid #E5E5E5;
+            border-bottom: 1px solid #E5E5E5;
+        }
+    }
+
+    .water-leve-forecast {
+        height: 260px;
+        width: 100%;
+        border-width: 0px 1px 1px 0px;
+        border-style: solid;
+        border-color: #E7E7E7;
+    }
+
+    .title-name {
+        height: 40px;
+        border-radius: 8px 8px 0px 0px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 9px 16px;
+        gap: 8px;
+        align-self: stretch;
+        background: #FFFFFF;
+        box-sizing: border-box;
+        font-family: Source Han Sans;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        letter-spacing: 0em;
+        font-variation-settings: "opsz" auto;
+        color: rgba(0, 0, 0, 0.9);
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue b/src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue
index 948536b..8493ace 100644
--- a/src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue
+++ b/src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue
@@ -22,113 +22,18 @@
       </template>
 
     </Tree>
-    <forecastDetail></forecastDetail>
+    <forecastDetail class="detail-right"></forecastDetail>
   </div>
 </template>
 <script>
 import forecastDetail from '../components/forecastDetail.vue'
 import Tree from '../components/Tree.vue'
+import { TreeData } from "../js/detailData";
 export default {
   components: { Tree, forecastDetail },
   data () {
     return {
-      treeData: [
-        {
-          "id": "1752932766908338178",
-          "parentId": "root",
-          "name": "全部",
-          "userId": 1,
-          "children": [
-            {
-              "id": "1759857493740810240",
-              "parentId": "1752932766908338178",
-              "name": "2024年预报方案",
-              "userId": 1,
-              "children": [
-                {
-                  "id": "1759858444149125122",
-                  "name": "4月12号",
-                  "level": 2,
-                  "children": [
-                    {
-                      "id": "1759858444149125142",
-                      "name": "预报方案1",
-                      "level": 3
-                    },
-                    {
-                      "id": "1759458444149125142",
-                      "name": "预报方案2",
-                      "level": 3
-                    }
-                  ]
-                },
-                {
-                  "id": "1776817687412244481",
-                  "name": "4月13号",
-                  "level": 2,
-                  "children": [
-                    {
-                      "id": "1759858444142125142",
-                      "name": "预报方案1",
-                      "level": 3
-                    },
-                    {
-                      "id": "1759468444149125142",
-                      "name": "预报方案2",
-                      "level": 3
-                    }
-                  ]
-                }
-              ],
-              "level": 1
-            },
-            {
-              "id": "1759857493700810240",
-              "parentId": "1752932766908338178",
-              "name": "2023年预报方案",
-              "userId": 1,
-              "children": [
-                {
-                  "id": "1759858444109125122",
-                  "name": "4月15号",
-                  "level": 2,
-                  "children": [
-                    {
-                      "id": "1759858484149125142",
-                      "name": "预报方案1",
-                      "level": 3
-                    },
-                    {
-                      "id": "1759458444142125142",
-                      "name": "预报方案2",
-                      "level": 3
-                    }
-                  ]
-                },
-                {
-                  "id": "1776817687412244481",
-                  "name": "4月17号",
-                  "level": 2,
-                  "children": [
-                    {
-                      "id": "1759858544142125142",
-                      "name": "预报方案1",
-                      "level": 3
-                    },
-                    {
-                      "id": "1759468444749125142",
-                      "name": "预报方案2",
-                      "level": 3
-                    }
-                  ]
-                }
-              ],
-              "level": 1
-            }
-          ],
-          "level": 0
-        }
-      ],
+      treeData: TreeData,
       defaultProps: {
         children: "children",
         label: "name",
@@ -155,9 +60,19 @@ export default {
   height: 100%;
   display: flex;
   justify-content: space-between;
+  margin-top: -16px;
 }
 
 .warn-tree {
-  width: 350px !important;
+  width: 240px;
+  height: calc(100vh - 300px);
+  overflow-x: hidden;
+}
+
+.detail-right {
+  width: 1392px;
+  height: calc(100vh - 300px);
+  overflow-x: hidden;
+  border-left: 1px solid #E5E5E5;
 }
 </style>
diff --git a/src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js b/src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js
new file mode 100644
index 0000000..27cf20c
--- /dev/null
+++ b/src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js
@@ -0,0 +1,421 @@
+export const TreeData = [
+    {
+        "id": "1752932766908338178",
+        "parentId": "root",
+        "name": "全部",
+        "userId": 1,
+        "children": [
+        {
+            "id": "1759857493740810240",
+            "parentId": "1752932766908338178",
+            "name": "2024年预报方案",
+            "userId": 1,
+            "children": [
+            {
+                "id": "1759858444149125122",
+                "name": "4月12号",
+                "level": 2,
+                "children": [
+                {
+                    "id": "1759858444149125142",
+                    "name": "预报方案1",
+                    "level": 3
+                },
+                {
+                    "id": "1759458444149125142",
+                    "name": "预报方案2",
+                    "level": 3
+                }
+                ]
+            },
+            {
+                "id": "1776817687412244481",
+                "name": "4月13号",
+                "level": 2,
+                "children": [
+                {
+                    "id": "1759858444142125142",
+                    "name": "预报方案1",
+                    "level": 3
+                },
+                {
+                    "id": "1759468444149125142",
+                    "name": "预报方案2",
+                    "level": 3
+                }
+                ]
+            }
+            ],
+            "level": 1
+        },
+        {
+            "id": "1759857493700810240",
+            "parentId": "1752932766908338178",
+            "name": "2023年预报方案",
+            "userId": 1,
+            "children": [
+            {
+                "id": "1759858444109125122",
+                "name": "4月15号",
+                "level": 2,
+                "children": [
+                {
+                    "id": "1759858484149125142",
+                    "name": "预报方案1",
+                    "level": 3
+                },
+                {
+                    "id": "1759458444142125142",
+                    "name": "预报方案2",
+                    "level": 3
+                }
+                ]
+            },
+            {
+                "id": "1776817687412244481",
+                "name": "4月17号",
+                "level": 2,
+                "children": [
+                {
+                    "id": "1759858544142125142",
+                    "name": "预报方案1",
+                    "level": 3
+                },
+                {
+                    "id": "1759468444749125142",
+                    "name": "预报方案2",
+                    "level": 3
+                }
+                ]
+            }
+            ],
+            "level": 1
+        }
+        ],
+        "level": 0
+    }
+]
+export const WARNTYPE = [{
+    value: '1',
+    label: '工程水位预报',
+    checkbox : false
+}, {
+    value: '2',
+    label: '河道水位预报',
+    checkbox : false
+}, {
+    value: '3',
+    label: '工程降雨量预报',
+    checkbox : true
+}, {
+    value: '4',
+    label: '水库出库流量预报',
+    checkbox : false
+}, {
+    value: '5',
+    label: '流域来水量预报',
+    checkbox : false
+}, {
+    value: '6',
+    label: '河道流量预报',
+    checkbox : false
+}]
+
+export const WARNTYPELIST = [{
+    label: '1',
+    name: '飞来峡水库'
+}, {
+    label: '2',
+    name: '龙潭水库'
+}, {
+    label: '3',
+    name: '龙潭水库'
+}, {
+    label: '4',
+    name: '龙潭水库'
+}]
+
+export const AnalysisTableData = [
+    {
+        projectName: '南门口水位测站1',
+        warningType: '超警戒水位',
+        warningStatus: '2',
+        warningInfo: '12'
+    },
+    {
+        projectName: '南门口水位测站2',
+        warningType: '超警戒水位',
+        warningStatus: '1',
+        warningInfo: '12'
+    },
+    {
+        projectName: '南门口水位测站3',
+        warningType: '超警戒水位',
+        warningStatus: '2',
+        warningInfo: '12'
+    }, {
+        projectName: '南门口水位测站4',
+        warningType: '超警戒水位',
+        warningStatus: '2',
+        warningInfo: '12'
+    }, {
+        projectName: '南门口水位测站5',
+        warningType: '超警戒水位',
+        warningStatus: '1',
+        warningInfo: '12'
+    }, {
+        projectName: '南门口水位测站6',
+        warningType: '超警戒水位',
+        warningStatus: '2',
+        warningInfo: '12'
+    }, {
+        projectName: '南门口水位测站7',
+        warningType: '超警戒水位',
+        warningStatus: '1',
+        warningInfo: '12'
+    }
+]
+export const FlowTableData = [{
+    projectName: '南门口水位测站1',
+    projectID: 'BHA10000001',
+    rainFlow: '200',
+    waterFlow: '1002',
+    outFlow: '820',
+    water: '12.5',
+    flow: '8',
+    warningTime: '04/09 12:00'
+}, {
+    projectName: '南门口水位测站1',
+    projectID: 'BHA10000001',
+    rainFlow: '200',
+    waterFlow: '1002',
+    outFlow: '820',
+    water: '12.5',
+    flow: '8',
+    warningTime: '04/09 12:00'
+},
+{
+    projectName: '南门口水位测站1',
+    projectID: 'BHA10000001',
+    rainFlow: '200',
+    waterFlow: '1002',
+    outFlow: '820',
+    water: '12.5',
+    flow: '8',
+    warningTime: '04/09 12:00'
+},
+{
+    projectName: '南门口水位测站1',
+    projectID: 'BHA10000001',
+    rainFlow: '200',
+    waterFlow: '1002',
+    outFlow: '820',
+    water: '12.5',
+    flow: '8',
+    warningTime: '04/09 12:00'
+},
+{
+    projectName: '南门口水位测站1',
+    projectID: 'BHA10000001',
+    rainFlow: '200',
+    waterFlow: '1002',
+    outFlow: '820',
+    water: '12.5',
+    flow: '8',
+    warningTime: '04/09 12:00'
+},
+{
+    projectName: '南门口水位测站1',
+    projectID: 'BHA10000001',
+    rainFlow: '200',
+    waterFlow: '1002',
+    outFlow: '820',
+    water: '12.5',
+    flow: '8',
+    warningTime: '04/09 12:00'
+},
+{
+    projectName: '南门口水位测站1',
+    projectID: 'BHA10000001',
+    rainFlow: '200',
+    waterFlow: '1002',
+    outFlow: '820',
+    water: '12.5',
+    flow: '8',
+    warningTime: '04/09 12:00'
+},
+{
+    projectName: '南门口水位测站1',
+    projectID: 'BHA10000001',
+    rainFlow: '200',
+    waterFlow: '1002',
+    outFlow: '820',
+    water: '12.5',
+    flow: '8',
+    warningTime: '04/09 12:00'
+}]
+export const FlowWaterChartData = [
+    // 工程水位预报
+    {
+        warnType: '1',
+        toolTipTrigger: 'axis',
+        XData: [
+            '04/09 08:00',
+            '04/09 12:00',
+            '04/09 16:00',
+            '04/09 20:00',
+            '04/10 08:00',
+            '04/10 12:00',
+            '04/10 16:00'
+        ],
+        YData: [
+            {
+                Data: [10, 32, 11, 34, 90, 30, 20],
+                unit: '水位',
+                barType: 'line',
+                yAxisIndex: 0,
+                yAxisName: '水位:mm',
+                yAxisType: 'value',
+                alignTicks: false,
+                opacity: 0,
+                barWidth: 10
+            },
+            {
+                Data: [320, 332, 301, 334, 390, 330, 320],
+                unit: '水库水位',
+                barType: 'line',
+                yAxisIndex: 1, 
+                yAxisName: '雨量:mm',
+                yAxisType: 'value',
+                alignTicks: true,
+                opacity: 0,
+                barWidth: 10
+            }
+        ]
+    },
+    // 河道水位预报
+    {
+        warnType: '2', 
+        toolTipTrigger: 'axis',
+        XData: [
+            '04/09 08:00',
+            '04/09 12:00',
+            '04/09 16:00',
+            '04/09 20:00',
+            '04/10 08:00',
+            '04/10 12:00',
+            '04/10 16:00'
+        ],
+        YData: [
+            {
+                Data: [10, 32, 11, 34, 90, 30, 20],
+                unit: '降雨量',
+                barType: 'line',
+                yAxisIndex: 1,
+                yAxisName: '雨量:mm',
+                yAxisType: 'value',
+                alignTicks: true,
+                opacity: 0,
+                barWidth: 10
+            },
+            {
+                Data: [320, 332, 301, 334, 390, 330, 320],
+                unit: '河道水位',
+                barType: 'line',
+                yAxisIndex: 1, 
+                yAxisName: '水位:mm',
+                yAxisType: 'value',
+                alignTicks: false,
+                opacity: 0,
+                barWidth: 10
+            }
+        ]
+    },
+    // 工程降雨量预报
+    {
+        warnType: '3',
+        toolTipTrigger: '',
+        XData: [
+            '04/09 08:00',
+            '04/09 12:00',
+            '04/09 16:00',
+            '04/09 20:00',
+            '04/10 08:00',
+            '04/10 12:00',
+            '04/10 16:00'
+        ],
+        YData: [
+            {
+                Data: [10, 32, 11, 34, 90, 30, 20],
+                unit: '降雨量',
+                barType: 'bar',
+                yAxisIndex: 0,
+                yAxisName: '雨量:mm',
+                yAxisType: 'value',
+                alignTicks: true,
+                opacity: 1,
+                barWidth: 6
+            },
+            {
+                Data: [10, 32, 11, 34, 90, 30, 20],
+                unit: '降雨量',
+                barType: 'line',
+                yAxisIndex: 0,
+                yAxisName: '雨量:mm',
+                yAxisType: 'value',
+                alignTicks: true,
+                opacity: 1,
+                barWidth: 6
+            },
+        ]
+    },
+    // 水库出库流量预报
+    {
+        warnType: '4', 
+        toolTipTrigger: 'axis',
+        XData: [
+            '04/09 08:00',
+            '04/09 12:00',
+            '04/09 16:00',
+            '04/09 20:00',
+            '04/10 08:00',
+            '04/10 12:00',
+            '04/10 16:00'
+        ],
+        YData: [
+            {
+                Data: [10, 32, 11, 34, 90, 30, 20],
+                unit: '水库库容',
+                barType: 'line',
+                yAxisIndex: 0,
+                yAxisName: '库容:万m³',
+                yAxisType: 'value',
+                alignTicks: true,
+                opacity: 0,
+                barWidth: 10
+            },
+            {
+                Data: [320, 332, 301, 334, 390, 330, 320],
+                unit: '出库流量',
+                barType: 'line',
+                yAxisIndex: 1, 
+                yAxisName: '流量:m³/s',
+                yAxisType: 'value',
+                alignTicks: false,
+                opacity: 0,
+                barWidth: 10
+            },
+            {
+                Data: [194, 129, 341, 334, 90, 230, 130],
+                unit: '入库流量',
+                barType: 'line',
+                yAxisIndex: 1, 
+                yAxisName: '流量:m³/s',
+                yAxisType: 'value',
+                alignTicks: false,
+                opacity: 0,
+                barWidth: 10
+            }
+        ]
+    },
+]
\ No newline at end of file