Merge branch 'feature-sy-v1.0.1' into dev

src/views/aiSupervision/fourPredictions/warnInfo/components/forecastDetail.vue

@@ -17,7 +17,109 @@
 
             </div>
         </div>
-
+        <div v-if="analysisList.length">
+            <div class="analysis-content" v-for="(item, index) in analysisList" :key="index">
+                <div class="echarts-content">
+                    <span class="title-name">{{ item.chartData.chartName }}</span>
+                    <div class="echarts-box" :id="item.chartId" :ref="item.chartId" :style="{ 'zoom': zoom, 'width': 'calc(951px /' + zoom + ')', height: 'calc(260px / ' + zoom + ')' }"></div>
+                </div>
+                <div class="warn-analysis">
+                    <span class="title-name">{{ item.tableName }}</span>
+                    <el-table height="258" :data="item.tableData" 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">
+                                <div @click="openWarnDeal(scope.row)"
+                                    :class="{ 'green-span': scope.row.warningStatus !== '1' }" class="default-span">
+                                    {{ scope.row.warningStatus === '1' ? '处理中' : '已处理' }}
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="warningInfo" align="center" label="预报">
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </div>
+        </div>
+        <div class="water-leve-forecast">
+            <span class="title-name">{{warnDetailData.wranTypeName}}</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>
+        <el-drawer title="预警处理详情" class="drawer-wrapper" size="300px" :visible.sync="drawerVisible" :append-to-body="true" @close="closeDrawer"
+            :with-header="true">
+            <div class="warn-deal-content">
+                <el-steps direction="vertical" :active="active">
+                    <el-step title="超汛限预警">
+                        <template slot="description">
+                            <div class="step-description">
+                                <div class="description-item">
+                                    <span class="item-name">ID：</span>
+                                    <span class="item-value">{{ '4001523562' }}</span>
+                                </div>
+                                <div class="description-item">
+                                    <span class="item-name">时间：</span>
+                                    <span class="item-value">{{ '2024/04/10 15:30' }}</span>
+                                </div>
+                            </div>
+                        </template>
+                    </el-step>
+                    <el-step title="专家交互">
+                        <template slot="description">
+                            <div class="step-description" v-if="active >= 1">
+                                <div class="description-item" v-for="(item, index) in warnDealData" :key="index">
+                                    <span class="item-name">{{ item.name }}：</span>
+                                    <span class="item-value">{{ item.value }}</span>
+                                </div>
+                            </div>
+                        </template>
+                    </el-step>
+                    <el-step title="预警处置">
+                        <template slot="description">
+                            <div class="step-description" v-if="active === 2">
+                                <el-form :model="dynamicValidateForm" :label-position="'top'" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+                                    <el-form-item
+                                      prop="wranDesc"
+                                      label="处置描述"
+                                      :rules="[
+                                        { required: true, message: '请输入处置描述', trigger: 'blur' }
+                                        ]"
+                                    >
+                                    <el-input v-model="dynamicValidateForm.wranDesc" type="textarea" :disabled="active !== 2 || isSuccessDeal" :autosize="{ minRows: 6, maxRows: 10 }"></el-input>
+                                    </el-form-item>
+                                  </el-form>
+                            </div>
+                        </template>
+                    </el-step>
+                </el-steps>
+                <div class="detail-footer">
+                    <el-button style="margin-top: 12px;" @click="closeDrawer">取消</el-button>
+                    <el-button style="margin-top: 12px;" @click="upStep" v-if="active !== 0">上一步</el-button>
+                    <el-button style="margin-top: 12px;" @click="nextStep" v-if="active !== 2">下一步</el-button>
+                    <el-button type="primary" style="margin-top: 12px;" @click="submitForm()" v-if="active === 2 && !isSuccessDeal">提交</el-button>
+                    <el-button style="margin-top: 12px;" @click="submitForm()" v-if="active === 2 && isSuccessDeal">关闭</el-button>
+                </div>
+            </div>
+        </el-drawer>
     </div>
 </template>
 
@@ -66,5 +168,234 @@ 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: 320px;
+        display: flex;
+        padding: 0px;
+        justify-content: space-between;
+        margin-bottom: 16px;
+        border-top: 1px solid #E5E5E5;
+        border-bottom: 1px solid #E5E5E5;
+        .echarts-content {
+            width: 951px;
+            height: 320px;
+            border-right: 1px solid #E5E5E5;
+
+            .echarts-box {
+                width: 951px;
+                height: 240px;
+            }
+        }
+
+        .warn-analysis {
+          flex: 1;
+            height: 300px;
+            border-right: 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);
+    }
+
+    .default-span {
+        color: #faad10;
+        cursor: pointer;
+    }
+
+    .green-span {
+        color: #31A08E;
+    }
+}
+
+::v-deep.drawer-wrapper {
+    .el-drawer__header {
+        margin-bottom: 0px;
+        border-bottom: 1px solid #E5E5E5;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        letter-spacing: 0em;
+        color: rgba(0, 0, 0, 0.9);
+        height: 56px;
+        padding: 16px;
+    }
+
+    .warn-deal-content {
+        padding: 16px;
+
+        .step-description {
+            margin-bottom: 10px;
+            .description-item {
+                height: 22px;
+                font-family: 思源黑体;
+                font-size: 14px;
+                font-weight: normal;
+                line-height: 22px;
+                letter-spacing: 0px;
+                margin-bottom: 4px;
+                .item-name {
+                    color: rgba(0, 0, 0, 0.55);
+                }
+                .item-value {
+                    color: rgba(0, 0, 0, 0.85);
+                }
+            }
+        }
+        .el-step__icon-inner {
+            font-size: 14px;
+            font-weight: normal;
+            line-height: 22px;
+            letter-spacing: 0px;
+        }
+        .el-step__title.is-success,
+        .el-step__title.is-process,
+        .el-step__title.is-wait,
+        .el-step__title.is-finish,
+        .el-step__head.is-finish {
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 22px;
+            letter-spacing: 0px;
+            color: rgba(0, 0, 0, 0.85);
+        }
+        .el-step__head.is-finish {
+            .el-step__icon-inner {
+                color: #36B29E;
+            }
+        }
+        .el-step__head.is-process {
+            color: #fff;
+            .el-step__icon.is-text {
+                background: #36B29E;
+                border-color: #36B29E;
+            }
+        }
+        .el-step__head.is-wait {
+            color: #fff;
+            .el-step__icon.is-text {
+                background: #CDCDCD;
+                border-color: #CDCDCD;
+            }
+        }
+        .el-form-item--medium .el-form-item__label {
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 22px;
+            letter-spacing: 0px;
+            color: rgba(0, 0, 0, 0.85);
+        }
+        .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
+            content: '';
+            margin-right: 0px;
+        }
+        .detail-footer {
+            position: absolute;
+            bottom: 0px;
+            border-top: 1px solid #E7E7E7;
+            width: 100%;
+            left: 0px;
+            padding: 0 16px 12px;
+        }
+    }
 }
 </style>

src/views/aiSupervision/fourPredictions/warnInfo/detail/PlanDetail.vue

@@ -76,13 +76,13 @@ export default {
 
 .warn-tree {
   width: 240px;
-  height: calc(100vh - 300px);
+  height: 100%;
   overflow-x: hidden;
 }
 
 .detail-right {
   flex: 1;
-  height: calc(100vh - 300px);
+  height: 100%;
   overflow-x: hidden;
   border-left: 1px solid #E5E5E5;
 }

src/views/aiSupervision/fourPredictions/warnInfo/js/detailData.js

@@ -1471,7 +1471,7 @@ export const wranPlan = [
                                 Data: [],
                                 unit: '降雨量',
                                 barType: 'line',
-                                yAxisIndex: 1,
+                                yAxisIndex: 0,
                                 yAxisName: '雨量:mm',
                                 yAxisType: 'value',
                                 alignTicks: true,
@@ -1482,7 +1482,7 @@ export const wranPlan = [
                                 Data: [],
                                 unit: '河道水位',
                                 barType: 'line',
-                                yAxisIndex: 1, 
+                                yAxisIndex: 0, 
                                 yAxisName: '水位:m',
                                 yAxisType: 'value',
                                 alignTicks: false,