sis_zhfx/src/views/malfunctionRecall/components/fault-diagnosis.vue

<template>
    <div class="fault-diagnosis-pop-up-window">
        <div class="white font-md">查询条件</div>
        <div class="query left mg-b-8">
            <div class="query-items">
                <div class="query-item">
                    <div class="lable">风机：</div>
                    <div class="search-input">
                        <el-input v-model="value1" placeholder="SG01_53" class="placeholder-left" />
                    </div>
                </div>
                <div class="query-item">
                    <div class="lable">部件类型：</div>
                    <div class="search-input">
                        <el-select class="placeholder-left" v-model="value2" placeholder="风机" popper-class="select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="query-item">
                    <div class="lable">测点类型：</div>
                    <div class="search-input">
                        <el-select class="placeholder-left" v-model="value3" placeholder="所有测点" popper-class="select">
                            <el-option v-for="item in pointype" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="query-actions">
                <button class="btn green"  @click="onClickSelect">重新选择</button>
            </div>
        </div>
        <div class="white font-md mg-t-16">
            <div>测点选择</div>
            <div class="check-item">
                <el-checkbox-group v-model="checkValue" text-color="#05bb4c" fill="#05bb4c" :max="5" @change="check">
                    <template v-for="(items, i) in checkList" :key="i">
                        <template v-for="(item, j) in items" :key="j">
                            <el-checkbox class="cb-item" :label="item.uniformcode+'$'+item.name"> {{item.name}},值：{{item.value}}</el-checkbox>
                        </template>
                        <br>
                    </template>
                </el-checkbox-group>
            </div>
        </div>
        <div class="time-axis-box">
            <div class="time-axis-icon mg-r-16" @click="startAnimate">
                <i :class="timeAxisIcon" class="green"></i>
            </div>
            <div class="time-axis-progress-box">
                <div class="time-axis-progress" :style="'width: '+timeAxisProgress+'%;'"></div>
                <div class="time-axis-progress-scale" v-for="index of 20" :key="index"></div>
            </div>
        </div>
        <div class="white font-md mg-t-16">风机故障回溯</div>
        <div class="fdp-sub-title font-sm">国电电力宁夏新能源集控系统</div>
        <multiple-y-line-chart ref="chart" class="fdp-chart" height="32.407vh" :yAxises="yAxis" :list="lineData" :showLegend="true" />
    </div>
</template>

<script>
import MultipleYLineChart from "@com/chart/line/multiple-y-line-chart.vue";
export default {
    components: {MultipleYLineChart},
    props:{
        data: String,
    },
    data() {
        return {
            yAxis: [
                {
                    name: '机舱震动x方向',
                    min: -0.01,
                    max: 0,
                    unit: "",
                    position: "left",
                },
                {
                    name: '机舱震动y方向',
                    min: -0.01,
                    max: 0,
                    unit: "",
                    position: "right",
                },
                {
                    name: '机舱震动最大偏移值',
                    min: 0,
                    max: 1,
                    unit: "",
                    position: "left",
                },
                {
                    name: '风速1',
                    min: 0,
                    max: 10,
                    unit: "",
                    position: "right",
                },
                {
                    name: '风速2',
                    min: 0,
                    max: 10,
                    unit: "",
                    position: "left",
                },
            ],
            lineData: [
                {
                    title: "机舱震动x方向",
                    yAxisIndex: 0,
                    value: [
                        {
                            text: "-0.003",
                            value: -0.003,
                        },
                        {
                            text: "-0.002",
                            value: -0.002,
                        },
                        {
                            text: "-0.003",
                            value: -0.006,
                        },
                        {
                            text: "-0.003",
                            value: -0.003,
                        },
                        {
                            text: "-0.002",
                            value: -0.002,
                        },
                        {
                            text: "-0.003",
                            value: -0.006,
                        },
                        {
                            text: "-0.003",
                            value: -0.003,
                        },
                        {
                            text: "-0.002",
                            value: -0.002,
                        },
                        {
                            text: "-0.003",
                            value: -0.006,
                        },
                    ],
                },
                {
                    title: "机舱震动y方向",
                    yAxisIndex: 1,
                    value: [
                        {
                            text: "-0.01",
                            value: -0.01,
                        },
                        {
                            text: "-0.005",
                            value: -0.005,
                        },
                        {
                            text: "-0.008",
                            value: -0.008,
                        },
                        {
                            text: "-0.01",
                            value: -0.01,
                        },
                        {
                            text: "-0.005",
                            value: -0.005,
                        },
                        {
                            text: "-0.008",
                            value: -0.008,
                        },
                        {
                            text: "-0.01",
                            value: -0.01,
                        },
                        {
                            text: "-0.005",
                            value: -0.005,
                        },
                        {
                            text: "-0.008",
                            value: -0.008,
                        },
                    ],
                },
                {
                    title: "机舱震动最大偏移值",
                    yAxisIndex: 2,
                    value: [
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "0.05",
                            value: 0.05,
                        },
                        {
                            text: "0.5",
                            value: 0.5,
                        },
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "0.05",
                            value: 0.05,
                        },
                        {
                            text: "0.5",
                            value: 0.5,
                        },
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "0.05",
                            value: 0.05,
                        },
                        {
                            text: "0.5",
                            value: 0.5,
                        },
                    ],
                },
                {
                    title: "风速1",
                    yAxisIndex: 3,
                    value: [
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "5",
                            value: 5,
                        },
                        {
                            text: "3",
                            value: 1,
                        },
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "5",
                            value: 5,
                        },
                        {
                            text: "3",
                            value: 1,
                        },
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "5",
                            value: 5,
                        },
                        {
                            text: "3",
                            value: 1,
                        },
                    ],
                },
                {
                    title: "风速2",
                    yAxisIndex: 4,
                    value: [
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "2",
                            value: 2,
                        },
                        {
                            text: "3",
                            value: 1,
                        },
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "2",
                            value: 2,
                        },
                        {
                            text: "3",
                            value: 1,
                        },
                        {
                            text: "1",
                            value: 1,
                        },
                        {
                            text: "2",
                            value: 2,
                        },
                        {
                            text: "3",
                            value: 1,
                        },
                    ],
                },
            ],
            options: [
                {
                    value: "0",
                    label: "风机",
                },
                {
                    value: "1",
                    label: "齿轮箱",
                },
                {
                    value: "2",
                    label: "发电机",
                },
                {
                    value: "3",
                    label: "变桨",
                }
            ],
            pointype: [
                {
                    value: "0",
                    label: "所有测点",
                },
                {
                    value: "1",
                    label: "遥测测点",
                },
                {
                    value: "2",
                    label: "遥信测点",
                },
                
            ],
            value1: "",
            value2: "",
            value3: "",
            checkList: [],
            checkValue: [],
            timeAxisIcon: "el-icon-video-play", // el-icon-video-play el-icon-video-pause
            timeAxisProgress: 0,
            timeAxisAnimate: false,
            animationFrameId: null,
            start: 0,
            end: 10,
            temp: null,
            temp1: null,
            animationTime: 100, // 每次变化数据的大致时间间隔(具体会根据当前页面是否可见、CPU的负荷情况等上下浮动14~18ms)
            animationData: {}, // 回显的数组
            animationDataIndex: -1,
            maxlength: 0,
        };
    },
    created(){},
    mounted() {
        this.value1 = this.data.windTurbineId
        this.value2 = this.options[0].value
        this.value3 = this.pointype[0].value
        this.requestPoint()
    },
    // 函数
    methods: {
        // 重新选择按钮
        onClickSelect(){
            this.requestPoint()
        },
        requestPoint(){
            let that = this;
            that.API.requestData({
                method: "POST",
                subUrl: "/fault/queryPointVos",
                data: {
                    wtId: that.value1,
                    bjtype: that.value2,
                    cdtype: that.value3
                },
                success(res) {
                    if(res.code == 200){
                        let points = "";
                        let data = res.data;
                        that.checkList = [];
                        // 将数据分成4个一组
                        var chunk = 4;
                        for(var i = 0, j = data.length; i < j ;i+=chunk) {
                            that.checkList.push(data.slice(i,i + chunk))
                        }
                        data.forEach(item => {points += item.uniformcode + ","})
                        // 默认选择前5个
                        if (that.checkList.length >= 2){
                            that.checkValue = [
                                that.checkList[0][0].uniformcode + "$" + that.checkList[0][0].name, 
                                that.checkList[0][1].uniformcode + "$" + that.checkList[0][1].name,
                                that.checkList[0][2].uniformcode + "$" + that.checkList[0][2].name,
                                that.checkList[0][3].uniformcode + "$" + that.checkList[0][3].name,
                                that.checkList[1][0].uniformcode + "$" + that.checkList[1][0].name]
                        }else {
                            data.forEach(item => {
                                that.checkValue.push(item.uniformcode + "$" + item.name)
                            })
                        }   
                        that.requestValue(points);
                    }
                },
            }); 
        },
        requestValue(points){
            let that = this;
            that.API.requestData({
                method: "POST",
                subUrl: "/fault/getFaultPlayback",
                timeout: 8000,
                data: {
                    wtId: that.value1,
                    pointids: points,
                    stopTime: new Date(that.data.stopTime).formatDate("yyyy-MM-dd hh:mm:ss")
                },
                success(res) {
                    if(res.code == 200) {
                        that.animationData = [];
                        let data = res.data.datas
                        // 取出最长的一个数值
                        that.checkList.forEach((items) => {
                            for (var i = 0; i < items.length; i++){
                                items[i].value = data[items[i].uniformcode][0]
                                if (items[i].uniformcode.length > that.maxlength){
                                    that.maxlength = data[items[i].uniformcode].length;
                                }
                            }  
                        })
                        that.animationData = data;
                    }
                    that.initEchart();
                },
            }); 
        },
        startAnimate: function () {
            if (this.timeAxisAnimate) {
                this.timeAxisIcon = "el-icon-video-play";
                if (this.animationFrameId) {
                    window.cancelAnimationFrame(this.animationFrameId);
                }
            } else {
                this.timeAxisIcon = "el-icon-video-pause";
                this.animationFrameId = window.requestAnimationFrame(this.timeAxisAnimation);
            }
            this.timeAxisAnimate = !this.timeAxisAnimate;
        },
        endAnimate: function () {
            this.timeAxisProgress = 0;
            this.timeAxisIcon = "el-icon-video-play";
            this.timeAxisAnimate = false;
            this.start = 0;
            this.end = 10;
            this.$refs.chart.datazoom(this.start, this.end);
            if (this.animationFrameId) {
                window.cancelAnimationFrame(this.animationFrameId);
            }
            this.animationFrameId = null;
            this.animationDataIndex = -1;
        },
        timeAxisAnimation: function () {
            if (this.timeAxisAnimate) {
                this.maxlength <= 100 ? this.maxlength = 100 : this.maxlength
                const step = this.maxlength / 100;
                this.timeAxisProgress += step;
                this.animationDataIndex += 1;

                if (this.animationDataIndex < this.maxlength) {
                   this.checkList.forEach(items => {
                       items.forEach(item => {
                           if (this.animationDataIndex < this.animationData[item.uniformcode].length)
                                item.value = this.animationData[item.uniformcode][this.animationDataIndex]
                       })
                   })
                }

                this.start += step;
                this.end += step;
                this.$refs.chart.datazoom(this.start, this.end);
                if (this.timeAxisProgress < 100) {
                    setTimeout(() => {
                        this.animationFrameId = window.requestAnimationFrame(this.timeAxisAnimation);
                    }, this.animationTime);
                } else {
                    this.endAnimate();
                } 
            }
        },
        check: function () {
            this.initEchart();
            if (this.temp) {
                this.lineData.splice(4, 0, this.temp);
                this.yAxis.splice(4, 0, this.temp1);
                this.temp = null;
                this.temp1 = null;
            } else {
                this.temp = this.lineData[4];
                this.temp1 = this.yAxis[4];
                this.lineData.splice(4, 1);
                this.yAxis.splice(4, 1);
            }
            this.$refs.chart.reload();
        },
        initEchart(){
            this.yAxis = [];
            this.lineData = [];
            this.checkValue.forEach((item, index) => {
                let uniformcode = item.substring(0, item.indexOf("$"));
                let name = item.substring(item.indexOf("$") + 1);
                let obj = {
                    name: name,
                    unit: "",
                }
                if (index%2 == 0)
                    obj.position = "left";
                else
                    obj.position = "right";
                this.yAxis.push(obj);

                let data = {
                    title: name,
                    yAxisIndex: index
                }
                let value = [];
                this.animationData[uniformcode].forEach(ele => {
                    let obj = {
                        text: String(ele),
                        value: ele
                    }
                    value.push(obj)
                })
                data.value = value

                this.lineData.push(data);
            })
        },
    },
    watch: {
        data(value){
            this.value1 = value.windTurbineId
            this.checkList = []
        }
    }
};
</script>

<style lang="less">
.fault-diagnosis-pop-up-window {
    width: 100%;

    .time-axis-box {
        margin: 16px auto;
        display: flex;
        width: 256px;

        .time-axis-icon {
            font-size: 30px;
            line-height: 1;
            cursor: pointer;
        }

        .time-axis-progress-box {
            width: 200px;
            height: 30px;
            display: flex;
            position: relative;

            .time-axis-progress {
                position: absolute;
                height: 100%;
                left: 0;
                top: 0;
                background: fade(@green, 60);
                transition: all .1s;
            }

            .time-axis-progress-scale {
                width: 10px;
                height: 100%;
                border: 1px solid @green;

                +.time-axis-progress-scale {
                    border-left: none;
                }
            }
        }
    }

    .fdp-sub-title {
        color: #a8b2b5;
        margin: 2px 0 16px 0;
    }

    .cb-item {
        margin-top: 12px;
        width: 240px;
    }

    .fdp-chart {
        width: 100%;
        height: 32.407vh;
    }
}
</style>