添加预览菜单表格详情弹框

tanghaolin

2023-01-11 50ad0a40d942624f7fcdfa8af3bc67d656a747a3

添加预览菜单表格详情弹框

 src/views/main/istation/overview/preview.vue

@@ -1,7 +1,7 @@
<template>
  <div class="preview-page">
         <fks-row :gutter="20" style="width:100%;height:100%;">
        <fks-col :span="4" style="height:100%">
         <fks-col :span="4" style="height:100%">
            <div class="model-binding-left-box">
                <titleBox title="泵站列表"></titleBox>
                    <fks-tree
@@ -26,25 +26,246 @@
                    </div>
                    <div class="bottom-tabs-div">
                        <fks-tabs type="border-card">
                            <fks-tab-pane label="健康评价">健康评价</fks-tab-pane>
                            <fks-tab-pane label="故障诊断">故障诊断</fks-tab-pane>
                            <fks-tab-pane label="时序趋势分析">时序趋势分析</fks-tab-pane>
                            <fks-tab-pane label="专家趋势分析">专家趋势分析</fks-tab-pane>
                            <fks-tab-pane label="健康评价">
                                <div class="time-pick-div">
                                 <label>开始时间：</label>
                                  <fks-date-picker
                                    v-model="date1"
                                    type="date"
                                    placeholder="选择日期">
                                  </fks-date-picker>
                                  <fks-button type="primary" style="margin-left:10px;">加载</fks-button>
                                </div>
                                <div id="healthRate" class="health-rate-chart"></div>
                            </fks-tab-pane>
                            <fks-tab-pane label="故障诊断">
                               <div class="time-pick-div">
                                 <label>开始时间：</label>
                                    <fks-date-picker
                                    v-model="date2"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                    </fks-date-picker>
                                  <fks-button type="primary" style="margin-left:10px;">搜索</fks-button>
                                </div>
                                <div class="table-box-div">
                                    <fks-table 
                                        border
                                        :data="brokenTableData"
                                        style="width: 100%;margin-top:15px;">
                                        <fks-table-column
                                            prop="name"
                                            label="名称"
                                            width="180">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="broken"
                                            label="故障"
                                            width="180">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="version"
                                            label="故障树版本">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="diagnosticModel"
                                            label="诊断模型">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="diagnoser"
                                            label="诊断人">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="desc"
                                            label="说明">
                                        </fks-table-column>
                                        <fks-table-column label="操作">
                                            <template slot-scope="scope">
                                                <fks-button
                                                type="primary"
                                                size="mini"
                                                @click="handleDetailByBroken(scope.$index, scope.row)">详细</fks-button>
                                            </template>
                                        </fks-table-column>                                                      
                                    </fks-table>
                                </div>
                            </fks-tab-pane>
                            <fks-tab-pane label="时序趋势分析">
                                <div class="time-pick-div">
                                 <label>开始时间：</label>
                                    <fks-date-picker
                                    v-model="date3"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                    </fks-date-picker>
                                  <fks-button type="primary" style="margin-left:10px;">搜索</fks-button>
                                </div>
                                <div class="table-box-div">
                                    <fks-table 
                                        border
                                        :data="sequentialTableData"
                                        style="width: 100%;margin-top:15px;">
                                        <fks-table-column
                                            prop="point"
                                            label="测点"
                                            width="180">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="signal"
                                            label="信号"
                                            width="180">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="earlyWarnModel"
                                            label="预警时间">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="occurrenceTime"
                                            label="发生时间">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="recordTime"
                                            label="记录时间">
                                        </fks-table-column>
                                        <fks-table-column label="操作">
                                            <template slot-scope="scope">
                                                <fks-button
                                                type="primary"
                                                size="mini"
                                                @click="handleDetailBySequential(scope.$index, scope.row)">详细</fks-button>
                                            </template>
                                        </fks-table-column>                                                      
                                    </fks-table>
                                </div>
                            </fks-tab-pane>
                            <fks-tab-pane label="专家趋势分析">
                               <div class="time-pick-div">
                                 <label>开始时间：</label>
                                    <fks-date-picker
                                    v-model="date4"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                    </fks-date-picker>
                                  <fks-button type="primary" style="margin-left:10px;">搜索</fks-button>
                                </div>
                                <div class="table-box-div">
                                    <fks-table 
                                        border
                                        :data="expertTrendsTableData"
                                        style="width: 100%;margin-top:15px;">
                                        <fks-table-column
                                            prop="point"
                                            label="测点"
                                            width="180">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="signal"
                                            label="信号"
                                            width="180">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="analysisMethod"
                                            label="分析方法">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="direction"
                                            label="方向">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="threshold"
                                            label="阀值">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="analyst"
                                            label="分析人">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="occurrenceTime"
                                            label="发生时间">
                                        </fks-table-column>
                                        <fks-table-column
                                            prop="recordTime"
                                            label="记录时间">
                                        </fks-table-column>                                                                                                                        
                                        <fks-table-column label="操作">
                                            <template slot-scope="scope">
                                                <fks-button
                                                type="primary"
                                                size="mini"
                                                @click="handleDetailByExpertTrends(scope.$index, scope.row)">详细</fks-button>
                                            </template>
                                        </fks-table-column>                                                      
                                    </fks-table>
                                </div>
                            </fks-tab-pane>
                        </fks-tabs>
                    </div>
               </div>
            </div>
        </fks-col>
    </fks-row>
    <!-- 故障诊断报告详情 -->
    <fks-dialog
        title="测试01"
        :visible.sync="brokenDownDialog"
        >

        <div slot="footer" class="dialog-footer">
            <fks-button @click="brokenDownDialog = false">取 消</fks-button>
            <fks-button type="primary" @click="brokenDownDialog = false">确 定</fks-button>
        </div>
    </fks-dialog>
    <!-- 故障诊断报告详情 -->
    <fks-dialog
        title="时序趋势预警记录详细"
        :visible.sync="sequentialDialog"
        >

        <div slot="footer" class="dialog-footer">
            <fks-button @click="sequentialDialog = false">取 消</fks-button>
            <fks-button type="primary" @click="sequentialDialog = false">确 定</fks-button>
        </div>
    </fks-dialog>
    <!-- 故障诊断报告详情 -->
    <fks-dialog
        title="专家趋势分析预警记录详细"
        :visible.sync="expertTrendsDialog"
        >

        <div slot="footer" class="dialog-footer">
            <fks-button @click="expertTrendsDialog = false">取 消</fks-button>
            <fks-button type="primary" @click="expertTrendsDialog = false">确 定</fks-button>
        </div>
    </fks-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import titleBox from "@/views/main/components/titleBox.vue"

let healthRateObj = {
     chartDom: "",
     myChart: "",
     option: ""
}
export default {
    components:{titleBox},
    data(){
        return {
            date1:"",
            date2:"",
            date3:"",
            date4:"",
            brokenDownDialog:false,
            sequentialDialog:false,
            expertTrendsDialog:false,
            treeData:[
                {
                    label: "金刚沱泵站",
@@ -67,12 +288,216 @@
                children: "children",
                label: "label",
            },
            healthRateChartData:[
              {
                DataTime: "2023-01-05 23:54:52",
                DataValue: "10",
              },
              {
                DataTime: "2023-01-04 22:30:52",
                DataValue: "11",
              },{
                DataTime: "2023-01-02 21:50:52",
                DataValue: "13",
              },{
                DataTime: "2023-01-01 20:44:52",
                DataValue: "12",
              },{
                DataTime: "2023-01-02 19:44:52",
                DataValue: "14",
              },{
                DataTime: "2023-01-01 09:04:52",
                DataValue: "16",
              },{
                DataTime: "2023-01-02 07:04:52",
                DataValue: "18",
              },{
                DataTime: "2023-01-03 06:51:52",
                DataValue: "20",
              },{
                DataTime: "2023-01-04 10:14:52",
                DataValue: "21",
              },{
                DataTime: "2023-01-05 20:33:52",
                DataValue: "24",
              },{
                DataTime: "2023-01-05 23:15:52",
                DataValue: "22",
              },{
                DataTime: "2023-01-05 23:54:52",
                DataValue: "22",
              },{
                DataTime: "2023-01-05 03:12:52",
                DataValue: "23",
              },{
                DataTime: "2023-01-05 09:21:52",
                DataValue: "21",
              },{
                DataTime: "2023-01-05 20:48:52",
                DataValue: "15",
              },{
                DataTime: "2023-01-05 19:54:52",
                DataValue: "16",
              },{
                DataTime: "2023-01-05 19:36:52",
                DataValue: "18",
              },{
                DataTime: "2023-01-05 19:22:52",
                DataValue: "15",
              },
            ],
            brokenTableData:[
                {
                    name:"测试01",
                    broken:"水泵无法启动",
                    version:"版本01",
                    diagnosticModel:"模型01",
                    diagnoser:"管理员",
                    desc:""
                },
                {
                    name:"测试02",
                    broken:"水泵出口压力过低",
                    version:"版本01",
                    diagnosticModel:"模型01",
                    diagnoser:"管理员",
                    desc:""
                },
                {
                    name:"测试03",
                    broken:"水泵不吸水",
                    version:"版本01",
                    diagnosticModel:"模型01",
                    diagnoser:"管理员",
                    desc:""
                },
            ],
            sequentialTableData:[
                {
                    point:"驱动端X方向振动",
                    signal:"有效值",
                    earlyWarnModel:"一阶平滑分析",
                    occurrenceTime:"2023-1-11",
                    recordTime:"2023-1-1",
                },
                {
                    point:"驱动端X方向振动",
                    signal:"峭度",
                    earlyWarnModel:"阻尼趋势预测分析",
                    occurrenceTime:"2023-1-11",
                    recordTime:"2023-1-1",
                },
                {
                    point:"驱动端X方向振动",
                    signal:"歪度",
                    earlyWarnModel:"二阶平滑分析",
                    occurrenceTime:"2023-1-11",
                    recordTime:"2023-1-1",
                },
            ],
            expertTrendsTableData:[
                {
                    point:"驱动端X方向振动",
                    signal:"有效值",
                    analysisMethod:"一阶平滑分析",
                    direction:"正向",
                    threshold:"0.6",
                    analyst:"专家",
                    occurrenceTime:"2023-1-11",
                    recordTime:"2023-1-1",
                },
                {
                    point:"驱动端X方向振动",
                    signal:"峭度",
                    analysisMethod:"阻尼趋势预测分析",
                    direction:"正向",
                    threshold:"0.6",
                    analyst:"专家",
                    occurrenceTime:"2023-1-11",
                    recordTime:"2023-1-1",
                },
                {
                    point:"驱动端X方向振动",
                    signal:"歪度",
                    analysisMethod:"自定义",
                    direction:"正向",
                    threshold:"0.6",
                    analyst:"专家",
                    occurrenceTime:"2023-1-11",
                    recordTime:"2023-1-1",
                },
            ]                                        
        }
    }
    },
    mounted(){
        setTimeout(() => {
            this.initHealthRateChart()
        }, 100);
    },
    methods:{
        initHealthRateChart(){
            healthRateObj.chartDom = document.getElementById('healthRate')
            healthRateObj.myChart = echarts.init(healthRateObj.chartDom);
            let xData = []
            let yData = []
            this.healthRateChartData.forEach(item=>{
                xData.push(item.DataTime)
                yData.push(item.DataValue)
            })
            healthRateObj.option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                name: "时间",
                data:xData
            },
            grid:{
                top:20,
                bottom:20,
                left:50,
                right:40
            },
            yAxis: {
                type: 'value',
                min:0,
                max:100,
                name: "扣分",
                nameGap: 35,
                nameLocation: "center",
                // boundaryGap: x.boundaryGap,
                scale: true,
                axisLine: {
                show: true,
                },
            },
                series: [
                    {
                    data: yData,
                    type: 'line',
                    smooth: true
                    }
                ]
            };
            healthRateObj.option && healthRateObj.myChart.setOption(healthRateObj.option);
        },
        //故障诊断详情
        handleDetailByBroken(index,item){
            this.brokenDownDialog = true
        },
        //时序趋势分析详情
        handleDetailBySequential(index,item){
            this.sequentialDialog = true
        },
        //专家趋势分析详情
        handleDetailByExpertTrends(index,item){
            this.expertTrendsDialog = true
        }
    },
    
}
</script>

<style scoped>
<style>
.preview-page{
    width: 100%;
    height: 100%;
@@ -105,4 +530,21 @@
    height: 45%;
    margin-top: 1%;
}
.bottom-tabs-div .fks-tabs--border-card{
    height: 100%;
}
.fks-tabs--border-card>.fks-tabs__content{
    height: calc(100% - 39px);
}
.time-pick-div{
    width: 100%;
    height: 36px;
}
.bottom-tabs-div .fks-tab-pane{
    height: calc(100% - 36px);
}
.health-rate-chart{
    width: 100%;
    height:100%;
}
</style>