|
|
@@ -0,0 +1,621 @@
|
|
|
+<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>
|
