hb_sis_zhfx/src/views/HealthControl/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" multiple 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" multiple 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>
            <div class="query-actions">
                <button class="btn green">重新选择</button>
            </div>
        </div>
        <div class="white font-md mg-t-16">测点选择</div>
        <el-checkbox-group v-model="checkList" text-color="#05bb4c" fill="#05bb4c" @change="check">
            <el-checkbox class="cb-item" label="C01">转子位置，值为：{{checkValue.C01}}</el-checkbox>
            <el-checkbox class="cb-item" label="C02">机舱震动×方向 ，值为：{{checkValue.C02}}</el-checkbox>
            <el-checkbox class="cb-item" label="C03">机舱震动×方向 ，值为：{{checkValue.C03}}</el-checkbox>
            <el-checkbox class="cb-item" label="C04">机舱震动×方向 ，值为：{{checkValue.C04}}</el-checkbox>
            <br>
            <el-checkbox class="cb-item" label="C05">风向1，值为：{{checkValue.C05}}</el-checkbox>
            <el-checkbox class="cb-item" label="C06">风向1，值为：{{checkValue.C06}}</el-checkbox>
            <el-checkbox class="cb-item" label="C07">风向1，值为：{{checkValue.C07}}</el-checkbox>
            <el-checkbox class="cb-item" label="C08">风向1，值为：{{checkValue.C08}}</el-checkbox>
            <br>
            <el-checkbox class="cb-item" label="C09">转子位置，值为：{{checkValue.C09}}</el-checkbox>
            <el-checkbox class="cb-item" label="C10">转子位置，值为：{{checkValue.C10}}</el-checkbox>
            <el-checkbox class="cb-item" label="C11">转子位置，值为：{{checkValue.C11}}</el-checkbox>
            <el-checkbox class="cb-item" label="C12">转子位置，值为：{{checkValue.C12}}</el-checkbox>
        </el-checkbox-group>
        <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},
    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: "选项1",
                    label: "黄金糕",
                },
                {
                    value: "选项2",
                    label: "双皮奶",
                },
                {
                    value: "选项3",
                    label: "蚵仔煎",
                },
                {
                    value: "选项4",
                    label: "龙须面",
                },
                {
                    value: "选项5",
                    label: "北京烤鸭",
                },
            ],
            value1: "",
            value2: [],
            value3: [],
            checkList: ["C01", "C02", "C03", "C04"],
            checkValue: {
                C01: 223.42,
                C02: 0.00,
                C03: 0.00,
                C04: 0.00,
                C05: 203.08,
                C06: 203.08,
                C07: 203.08,
                C08: 203.08,
                C09: 223.42,
                C10: 223.42,
                C11: 223.42,
                C12: 223.42,
            },
            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,
        };
    },
    // 函数
    methods: {
        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;
        },
        timeAxisAnimation: function () {
            this.timeAxisProgress += 0.2;
            if (Math.abs(this.timeAxisProgress - parseInt(this.timeAxisProgress)) <= 0.1) {
                this.checkValue.C01 = (Math.random() * 250 + 200).toFixed(2);
                this.checkValue.C02 = (Math.random() * 100).toFixed(2);
                this.checkValue.C03 = (Math.random() * 100).toFixed(2);
                this.checkValue.C04 = (Math.random() * 100).toFixed(2);
                this.checkValue.C05 = (Math.random() * 250 + 200).toFixed(2);
                this.checkValue.C06 = (Math.random() * 250 + 200).toFixed(2);
                this.checkValue.C07 = (Math.random() * 250 + 200).toFixed(2);
                this.checkValue.C08 = (Math.random() * 250 + 200).toFixed(2);
                this.checkValue.C09 = (Math.random() * 250 + 200).toFixed(2);
                this.checkValue.C10 = (Math.random() * 250 + 200).toFixed(2);
                this.checkValue.C11 = (Math.random() * 250 + 200).toFixed(2);
                this.checkValue.C12 = (Math.random() * 250 + 200).toFixed(2);
            }
            this.start += 0.2;
            this.end += 0.2;
            this.$refs.chart.datazoom(this.start, this.end);
            if (this.timeAxisProgress < 100) {
                this.animationFrameId = window.requestAnimationFrame(this.timeAxisAnimation);
            } else {
                this.endAnimate();
            }
        },
        check: function () {
            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();
        },
    },
};
</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>