windLifecontrolPro/src/views/powerPrediction/powerControlPage.vue

<template>
  <div class="powerControl">
    <div class="powerControl_wind">
        <el-row class="windStstus">
            <el-col :span="24" class="scrollbar">
                <!-- <span class="scrollbarName">场站名称：</span> -->
                <el-scrollbar>
                    <div class="scrollbar-flex-content">
                    <p v-for="item in stationData" :key="item.no" class="scrollbar-demo-item" :class="item.showBac ? 'changeBacksty' : 'defaultBacksty'" @click="changeStation(item.no)">
                        {{ item.stationName }}
                    </p>
                    </div>
                </el-scrollbar>
            </el-col>
        </el-row>
    </div>
    <div class="powerControl_main" :style="pageHeight">
        <div class="detailLeft">
            <div style="margin: 10px 30px;">
                <div class="detailLeftpicture titpicture1">
                    <div style="font-size:14px;color:#fff;">风电场期次集电线风机：</div>
                    <div class="messageSty">{{stationName}}详情数据总览</div>
                </div>
                <div class="detailLeft_msg msgSty">
                    <span class="titleStys titleSt1">风电场总期次数：</span>
                    <div>
                        <span class="numberStyss">{{stationMsg.project}}</span>
                        <span class="numberSty">期</span>
                    </div>
                </div>
                <div class="detailLeft_msg msgSty">
                    <span class="titleStys titleSt2">风电场总集电线数：</span>
                    <div>
                        <span class="numberStyss">{{stationMsg.collector}}</span>
                        <span class="numberSty">条</span>
                    </div>
                </div>
                <div class="detailLeft_msg msgSty">
                    <span class="titleStys titleSt3">风电场总风机数：</span>
                    <div>
                        <span class="numberStyss">{{stationMsg.wind}}</span>
                        <span class="numberSty">台</span>
                    </div>
                </div>
                <div class="detailLeft_msg msgSty">
                    <span class="titleStys titleSt2">风电场平均风速：</span>
                    <div>
                        <span class="numberStyss">{{stationMsg.speed}}</span>
                        <span class="numberSty">m/s</span>
                    </div>
                </div>
                <div class="detailLeft_msg msgSty">
                    <span class="titleStys titleSt1">风电场实时功率：</span>
                    <div>
                        <span class="numberStyss">{{stationMsg.power}}</span>
                        <span class="numberSty">MW</span>
                    </div>
                </div>
            </div>
            <img src="../assets/windStatus.png" alt="">
            <div style="margin: 10px 25px;">
                <p style="color: red;font-weight: 600">温馨提示：右侧详情图可拖拽，可移动</p>
                <span></span>
            </div>
        </div>
        <div class="powerControlSvg">
            <n-s-s-vue ref="nss" v-if="stationName === '牛首山二风场'"></n-s-s-vue>
            <q-s-vue ref="xliu" v-else-if="stationName === '青山'"></q-s-vue>
            <s-b-q-vue ref="xliu" v-else-if="stationName === '石板泉'"></s-b-q-vue>
            <m-h-s-vue ref="mhs" v-else-if="stationName === '麻黄山二风场'"></m-h-s-vue>
            <x-s-vue ref="mhs" v-else-if="stationName === '香山五风场'"></x-s-vue>
            <m-liu-vue ref="mliu" v-else-if="stationName === '麻黄山六风场'"></m-liu-vue>
            <s-liu-vue ref="mliu" v-else-if="stationName === '宋堡六风场'"></s-liu-vue>
            <x-liu-vue ref="xliu" v-else-if="stationName === '星能六风场'"></x-liu-vue>
            <n-wu-vue ref="xliu" v-else-if="stationName === '牛首山五风场'"></n-wu-vue>
        </div>
    </div>
    <el-dialog title="综合管控" v-model="dialogVisibleMenu" width="55%" custom-class="svgDia">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-sub-menu index="1">
                <template #title>功率/电量预测</template>
                <el-menu-item index="1-1">功率预测</el-menu-item>
                <el-menu-item index="1-2">电量预测</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>管控设置与记录</template>
                <el-menu-item index="2-1" >停机设置</el-menu-item>
                <el-menu-item index="2-2">并网设置</el-menu-item>
            </el-sub-menu>
        </el-menu>
        <div class="showEveryPage">
            <!-- 功率预测 -->
            <div id="powerLine" style="width:100%;height:400px;" v-loading="loading" v-if="activeIndex === '1-1'"></div>
            <!-- 电量预测 -->
            <div id="electricLine" style="width:100%;height:400px;" v-loading="loading" v-else-if="activeIndex === '1-2'"></div>
            <!-- 停机设置 -->
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" v-else-if="activeIndex === '2-1'">
                <el-form-item label="停机配置">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="计划停机"></el-radio>
                        <el-radio label="非计划停机"></el-radio>
                        <el-radio label="弃风停机"></el-radio>
                        <el-radio label="限电停机"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="停机时长" prop="pickerTime">
                    <el-col :span="11">
                        <el-date-picker
                        v-model="form.pickerTime"
                        :picker-options="pickerOptionsStart"
                        type="datetimerange"
                        :clearable="false"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="维检风机">
                    <div class="tagCla">
                        <el-tag
                            v-for="tag in transferLabel"
                            :key="tag"
                            closable
                            :disable-transitions="false"
                            @close="closeTag(tag)"
                        >{{tag}}</el-tag>
                    </div>
                </el-form-item>
                <el-transfer
                    v-model="transferValue"
                    @change="changeTrans"
                    :props="{  
                        key: 'wturNo',
                        label: 'name'
                    }"
                    :titles="['未添加风机', '已添加风机']"
                    :data="transferData"
                ></el-transfer>
                <el-form-item label="停机事由" prop="desc">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <!-- 并网设置 -->
            <el-form ref="form" :model="form" :rules="rulesx" label-width="80px" v-else-if="activeIndex === '2-2'">
                <!-- <el-form-item label="停机配置">
                    <el-radio-group v-model="formx.resource" disabled>
                        <el-radio label="计划停机"></el-radio>
                        <el-radio label="非计划停机"></el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <!-- <el-form-item label="停机配置">
                    <el-select v-model="formx.datas" placeholder="请选择" @change="changebingwang">
                        <el-option
                        v-for="item in bingwangData"
                        :key="item.index"
                        :label="item.name"
                        :value="item.index">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <!-- <el-form-item label="并网时长">
                    <el-col :span="11">
                        <el-date-picker
                        disabled
                        v-model="formx.pickerTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        :clearable="false"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-col>
                </el-form-item> -->
                <el-form-item label="并网风机">
                    <div class="tagCla">
                        <el-tag
                            v-for="tag in transferLabelx"
                            :key="tag"
                            closable
                            :disable-transitions="false"
                            @close="closeTagx(tag)"
                        >{{tag}}</el-tag>
                    </div>
                    <!-- <el-button size="small" @click="showTransfer = true">增加其他风机</el-button> -->
                </el-form-item>
                <el-transfer
                    v-model="transferValuex"
                    @change="changeTrans"
                    :props="{  
                        key: 'wturNo',
                        label: 'name'
                    }"
                    :titles="['未添加风机', '已添加风机']"
                    :data="transferData"
                ></el-transfer>
                <el-form-item label="停机事由">
                    <el-input type="textarea" v-model="formx.desc" disabled></el-input>
                </el-form-item>
                <el-form-item label="维护成果">
                    <el-input type="textarea" v-model="formx.descBing"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!-- 确定 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisibleMenu = false">取 消</el-button>
                <el-button type="primary" @click="submitFrom()">确 定</el-button>
            </span>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import svgPage from "../components/svgIcon/index.vue";
import svgControl from "../components/powerControlSvg/svgPageShow.vue";
// import wftSvg from "../icons/svg/ghydgd.svg";
import NSSVue from "../components/configPage/configDesignVue/NSS.vue";
import MHSVue from "../components/configPage/configDesignVue/MHS.vue";
import MLiuVue from "../components/configPage/configDesignVue/MLiu.vue";
import SLiuVue from "../components/configPage/configDesignVue/SLiu.vue";
import XLiuVue from "../components/configPage/configDesignVue/XLiu.vue";
import NWuVue from "../components/configPage/configDesignVue/Nwu";
import QSVue from "../components/configPage/configDesignVue/QS";
import SBQVue from "../components/configPage/configDesignVue/SBQ";
import XSVue from "../components/configPage/configDesignVue/XS";
import { apiGetStationGL,apiGetWturByStationNo,apiGetterminalOverview,apiGetpowerPredictionQc,apiGetpowerPredictionJdx,
apiGetpowerPredictionFj,apiGetelectricityForecastQc,apiGetelectricityForecastJdx,apiGetelectricityForecastFj,
apiGetcanCarriedOutDowntime,apiGetWturByWindplantprojectNo,apiGetWturByCollectorwireprojectNo,
apiGetgridConnection,apiGetshutdownSettings} from '../api/api'
export default {
  components: {
    svgPage,
    svgControl,
    NSSVue,
    MHSVue,
    MLiuVue,
    SLiuVue,
    XLiuVue,
    NWuVue,
    QSVue,
    SBQVue,
    XSVue
  },
  data() {
    return {
        dialogVisible: false,
        activeName: "first",
        loading: false,
        form: {
            resource: "计划停机",
            desc: "",
            pickerTime: "",
        },
        rules: {
            pickerTime: [
                { required: true, message: '请选择时间', trigger: 'change' }
            ],
            desc: [
                { required: true, message: '请填写停机事由', trigger: 'blur' }
            ]
        },
        rulesx: {
            descBing: [
                { required: true, message: '请填写停机事由', trigger: 'blur' }
            ]
        },
        formx: {
            datas: '',
            desc: "",
            descBing: '',
            pickerTime: "",
        },
        pickerOptionsStart: {
            disabledDate : time => {
                return time.getTime() < new Date().getTime()
            }
        },
        transferValue: [],
        transferLabel: [],
        transferData: [],
        transferValuex: [],
        transferLabelx: [],
        transferDatax: [],

        svgDom: null,
        allDom: null,
        windtitle: '',
        getId: '',
        stationMsg: {
            project: '',
            collector: '',
            wind: '',
            speed: '',
            power: ''
        },

        dialogVisibleMenu: false,
        activeIndex: '1-1',
        showEcharts: false,

        stationData: [],
        windTurbines: '',
        stationName: '',
        titleSx: '',
        windIds: [],
        windIdstring: '',
        bingwangData: [],
        stationWindsAll: []
    };
  },
  created() {
    this.getStationData()
  },
  computed:{
    pageHeight() {
        return {
            'height': document.documentElement.clientHeight-140 + 'px'
        }
    }
    },
  methods: {
    submitFrom() {
        if (this.activeIndex === '1-1' || this.activeIndex === '1-2') {
            this.dialogVisibleMenu = false
        } else {
            let formName = ''
            if (this.activeIndex === '2-1') {
                formName = 'ruleForm'
            } else {
                formName = 'form'
            }
            this.$refs[formName].validate((valid) => {
              if (valid) {
                if (this.activeIndex === '2-1') {
                    if (this.transferValue.length > 0) {
                        this.stopSetWind()
                    } else {
                        this.$message({
                            message: '请选择维检风机',
                            type: 'warning'
                        });
                    }
                } else {
                    if (this.transferValuex.length > 0) {
                        this.stopAndSetWind()
                    } else {
                        this.$message({
                            message: '请选择维检风机或输入维护成果',
                            type: 'warning'
                        });
                    }
                }
              }
            });
        }
    },
    // 提交停机设置服务
    stopSetWind() {
        let that = this
        let typeOut = null
        if (that.form.resource === '计划停机') {
            typeOut = 1
        } else if(that.form.resource === '非计划停机') {
            typeOut = 2
        } else if(that.form.resource === '弃风停机') {
            typeOut = 3
        } else {
            typeOut = 4
        }
        let params = {
            beginDataTime: that.$utils.getTime(that.form.pickerTime[0]),
            endDataTime: that.$utils.getTime(that.form.pickerTime[1]),
            outageType: typeOut,
            reasonDowntime: that.form.desc,
            windplantNo: that.windTurbines,
            wturNos: that.transferValue.join(',')
        }
        apiGetshutdownSettings(params).then(datas =>{
            console.log(datas)
            that.dialogVisibleMenu = false
        })
    },
    // 提交并网停机设置服务
    stopAndSetWind() {
        let that = this
        let params = {
            beginDataTime: that.formx.pickerTime[0],
            endDataTime: that.formx.pickerTime[1],
            overhaulResults: that.formx.descBing,
            windplantNo: that.windTurbines,
            wturNos: that.transferValuex.join(',')
        }
        apiGetgridConnection(params).then(datas =>{
            console.log(datas)
            that.dialogVisibleMenu = false
        })
    },
    getStationData() {
        let that = this
        that.loading = true
        apiGetStationGL().then(datas =>{
            datas.data.list.forEach((item,index) =>{
                if (item.itemVal === '4') {
                    datas.data.list.splice(index)
                }
            })
            that.stationData = datas.data.list
            that.windTurbines = datas.data.list[0].no
            that.stationName =  datas.data.list[0].stationName
            that.stationData[0].showBac = true
            that.getterminalOverview(that.windTurbines)
        })
    },
    //所有风机数据及状态
    getStationWind() {
        let that = this
        that.stationWindsAll = []
        let params = {
            stationNo: that.windTurbines
        }
        apiGetWturByStationNo(params).then(datas =>{
            that.stationWindsAll = datas.data.list
            console.log('stationWind', datas)
            that.$nextTick(() => {
                that.getSvg();
            });
        })
    },
    //获取概览数据
    getterminalOverview(val) {
        let that = this
        let params = {
            stationNumber: val
        }
        apiGetterminalOverview(params).then(datas =>{
            if (datas && datas.data) {
                that.stationMsg = {
                    project: datas.data.windplantprojectCount,
                    collector: datas.data.collectorwireprojectCount,
                    wind: datas.data.wturCount,
                    speed: datas.data.avgWindSpeed.toFixed(2),
                    power: datas.data.p0.toFixed(2)
                }
                this.getStationWind()
            }
        })
    },
    changeStation(val) {
            this.windTurbines = val
            this.getterminalOverview(val)
            this.stationData.forEach(item =>{
                if (item.no === val) {
                    this.stationName = item.stationName
                    item.showBac = true
                } else {
                    item.showBac = false
                }
            })
            this.seachData()
        },
    handleSelect(val) {
        this.activeIndex = val
        this.init()
        this.$nextTick(() =>{
            if (val === "1-1") {
                this.loading = true;
                this.getWindSpeed("powerLine", this.windtitle, this.getId);
            } else if (val === "1-2") {
                this.loading = true;
                this.getWindSpeed("electricLine", this.windtitle, this.getId);
            } else {
                this.getAllWind(val)
            }
        })
    },
    init() {
        this.form = {
            resource: "计划停机",
            desc: "",
            pickerTime: "",
        }
        this.formx = {
            datas: '',
            desc: "",
            descBing: "",
            pickerTime: "",
        }
        this.transferValue = []
        this.transferLabel = []
        this.transferValuex = []
        this.transferLabelx = []
        // this.transferData = []
    },
    //获取所有风机数据
    getAllWind(val) {
        let that = this
        let params = {
            stationNo: that.windTurbines
        }
        apiGetWturByStationNo(params).then(datas =>{
            if (datas && datas.data) {
                that.transferData = datas.data.list
                if (val === '2-1') {
                    if (that.windtitle === '风机') {
                        that.modifyShowWind(that.getId)
                    } else if (that.windtitle === '期次') {
                        that.modifyShowPro(that.getId, that.windTurbines)
                    } else {
                        that.modifyShowColl(that.getId, that.windTurbines)
                    }
                } else {
                    that.getStopAllwind()
                }
            }
        })
    },
    //获取所有并网停机的风机
    getStopAllwind() {
        let that = this
        let params = {
            id: that.windIdstring
        }
        apiGetcanCarriedOutDowntime(params).then(datas =>{
            if (datas && datas.data) {
                that.bingwangData = datas.data.list
                that.formx.datas = datas.data.list[0].name
                that.formx.pickerTime = datas.data.list[0].name.split('至')
                that.formx.desc = datas.data.list[0].content
                that.transferValuex = datas.data.list[0].id.split(',').map(it => it*1)
                for(let i=0; i<that.transferValuex.length; i++) {
                    let item = that.transferValuex[i]
                    for(let j=0; j<that.transferData.length; j++) {
                        let itn = that.transferData[j].wturNo
                        if (item === itn) {
                            that.transferLabelx.push(that.transferData[j].name)
                        }
                    }
                }
            }
        })
    },
    changebingwang(val) {
        this.transferLabelx = []
        this.transferValuex = []
        this.bingwangData.forEach(item =>{
            if (val === item.index) {
                this.formx.datas = item.name
                this.formx.pickerTime = item.name.split('至')
                this.formx.desc = item.content
                this.transferValuex = item.id.split(',').map(it => it*1)
                for(let i=0; i<this.transferValuex.length; i++) {
                    let item = this.transferValuex[i]
                    for(let j=0; j<this.transferData.length; j++) {
                        let itn = this.transferData[j].wturNo
                        if (item === itn) {
                            this.transferLabelx.push(this.transferData[j].name)
                        }
                    }
                }
            }
        })
    },
    changeTrans(val) {
        this.transferValue = []
        this.transferLabel = []
        if (val.length > 0) {
            this.transferValue = val
            for(let i=0; i<this.transferValue.length; i++) {
                let item = this.transferValue[i]
                for(let j=0; j<this.transferData.length; j++) {
                    let itn = this.transferData[j].wturNo
                    if (item === itn) {
                        this.transferLabel.push(this.transferData[j].name)
                    }
                }
            }
        }
    },
    getHandleClick(item) {
        let idArr = item.split('/')
        console.log(idArr);
        this.windIds = idArr
        this.windIdstring = item
        if (idArr.length > 0) {
            this.getId = ''
            this.windtitle = ''
            if (idArr.length === 4) {
                this.windtitle = '风机'
                this.getId = idArr[3]
            } else if (idArr.length === 3) {
                this.windtitle = '集电线'
                this.getId = idArr[2]
            } else if (idArr.length === 2) {
                this.windtitle = '期次'
                this.getId = idArr[1]
            }
            // this.titleSx = this.getId + this.windtitle
            // this.dialogVisible = true;
            this.dialogVisibleMenu = true;
            this.activeIndex = '1-1'
            this.getWindSpeed("powerLine", this.windtitle, this.getId);
        }
    },
    // 点击风机，期次，集电线默认展示维检风机
    // 点击风机
    modifyShowWind(id) {
        for(let j=0; j<this.transferData.length; j++) {
            let itn = this.transferData[j].wturNo
            if (id === itn.toString()) {
                this.transferLabel.push(this.transferData[j].name)
                this.transferValue.push(itn)
            }
        }
    },
    // 点击期次
    modifyShowPro(id, staId) {
        let that = this
        let params = {
            projectNo: id,
            stationNo: staId
        }
        apiGetWturByWindplantprojectNo(params).then(datas =>{
            if (datas && datas.data.list) {
                console.log(datas)
                for(let j=0; j<datas.data.list.length; j++) {
                    let itn = datas.data.list[j].wtgNo
                    that.transferValue.push(itn)
                }
                for(let i=0; i<that.transferValue.length; i++) {
                    let item = that.transferValue[i]
                    for(let j=0; j<that.transferData.length; j++) {
                        let itn = that.transferData[j].wturNo
                        if (item === itn) {
                            that.transferLabel.push(that.transferData[j].name)
                        }
                    }
                }
            }
        })
    },
    // 点击集电线
    modifyShowColl(id, staId) {
        let that = this
        let params = {
            projectNo: that.windIds[1],
            stationNo: staId,
            collectorwireNo: id
        }
        apiGetWturByCollectorwireprojectNo(params).then(datas =>{
            if (datas && datas.data.list) {
                console.log(datas)
                for(let j=0; j<datas.data.list.length; j++) {
                    let itn = datas.data.list[j].wtgNo
                    that.transferValue.push(itn)
                }
                for(let i=0; i<that.transferValue.length; i++) {
                    let item = that.transferValue[i]
                    for(let j=0; j<that.transferData.length; j++) {
                        let itn = that.transferData[j].wturNo
                        if (item === itn) {
                            that.transferLabel.push(that.transferData[j].name)
                        }
                    }
                }
            }
        })
    },
    getSvg() {
        let that = this;
        let domWind = document.querySelectorAll("g");
        let domPro = document.querySelectorAll("text");
        let domArr = [];
        let domonlyArr = [];
        domWind.forEach((it) => {
            if (it.getAttribute("data-pointname")) {
                domArr.push(it);
                it.style.cursor = 'pointer'
            }
        });
        console.log('domPro', domPro)
        domPro.forEach((itv) => {
            if (itv.getAttribute("data-pointname")) {
                domArr.push(itv);
                itv.style.cursor = 'pointer'

                let dataId = itv.getAttribute("data-pointname")
                // let idArr = dataId.split('/')
                itv.addEventListener('click',function(){
                    that.getHandleClick(dataId)
                },false);
            }
        })
        let statusx = {
            1:'运行',
            0:'待机',
            4:'维护',
            2:'停机',
            5:'限电',
            3:'中断',
            6:'检修'
        }
        let domArrid = [] 
        for(let k=0; k<domArr.length;k++){
            let itc = domArr[k]
            if (itc.children && itc.children.length>7) {
                for(let i =0; i<itc.children.length;i++) {
                    if (itc.children[i].id === '运行') {
                        if (domArrid.indexOf(itc.id) === -1) {
                            domArrid.push(itc.id)
                            domonlyArr.push(itc)
                        }
                    }
                }
            } else {
                if (itc.nodeName === "g") {
                    itc.style.display = 'none'
                }
            }
        }
        // console.log('domArr', domArr)
        // console.log('domonlyArr', domonlyArr)
        for(let z =0; z<domonlyArr.length;z++) {
            let dataId = domonlyArr[z].getAttribute("data-pointname")
            let idArr = dataId.split('/')
            for(let v =0;v<that.stationWindsAll.length;v++) {
                for(let h in statusx){
                    if (that.stationWindsAll[v].mag.toString() === h) {
                        that.stationWindsAll[v].magName = statusx[h]
                    }
                }
                if (that.stationWindsAll[v].wturNo.toString() === idArr[3]) {
                    if (domonlyArr[z].childNodes) {
                        for(let c =0;c<domonlyArr[z].childNodes.length;c++) {
                            if (domonlyArr[z].childNodes[c].id !== that.stationWindsAll[v].magName && domonlyArr[z].childNodes[c].nodeName === 'g') {
                            // if (domonlyArr[z].childNodes[c].id === '运行') {
                                domonlyArr[z].childNodes[c].style.display = 'none'
                            }
                        }
                    }
                }
            }
            if (domonlyArr[z].getAttribute("data-pointname")) {
                domonlyArr[z].addEventListener('click',function(){
                    that.getHandleClick(dataId)
                },false);
            }
        }

        // that.stationWindsAll
    },
    // 今日风速预测
    getWindSpeed(name, title) {
        let params = {
            id: this.windIdstring
        }
        if (name === 'powerLine') {
            if (title === '期次') {
                apiGetpowerPredictionQc(params).then(datas =>{
                    this.getWindSpeedFn(name, datas)
                })
            } else if (title === '集电线') {
                apiGetpowerPredictionJdx(params).then(datas =>{
                    this.getWindSpeedFn(name, datas)
                })
            } else if (title === '风机') {
                apiGetpowerPredictionFj(params).then(datas =>{
                    this.getWindSpeedFn(name, datas)
                })
            }
        } else {
            if (title === '期次') {
                apiGetelectricityForecastQc(params).then(datas =>{
                    this.getWindSpeedFn(name, datas)
                })
            } else if (title === '集电线') {
                apiGetelectricityForecastJdx(params).then(datas =>{
                    this.getWindSpeedFn(name, datas)
                })
            } else if (title === '风机') {
                apiGetelectricityForecastFj(params).then(datas =>{
                    this.getWindSpeedFn(name, datas)
                })
            }
        }
    },
    getWindSpeedFn(name, datas) {
        let that = this;
        if (datas && datas.data) {
            let xAxis = [];
            let series = [];
            let legend = [];
            if (datas.data.dateList.length > 0) {
                datas.data.dateList.forEach((item) => {
                xAxis.push(item.substring(item.indexOf(" ") + 1));
                });
            }
            if (datas.data.dataFormatList.length > 0) {
                datas.data.dataFormatList.forEach((iten) => {
                legend.push(iten.name);
                let seriesObj = {
                    name: iten.name,
                    type: "line",
                    data: iten.data.map(it => {
                        return that.$utils.isHasNum(it)
                    }),
                    symbol: "none",
                };
                series.push(seriesObj);
                });
            }
            that.getPowerLine(
                name,
                name === "powerLine" ? "功率预测" : "电量预测",
                xAxis,
                legend,
                series
            );
            that.loading = false;
        }
    },
    getPowerLine(name, title, xAxis, legend, series) {
        let tit = title
        let option = {
            title: {
            text: tit,
            textStyle: {
                fontSize: "16",
                fontWeight: "bold",
            },
            },
            tooltip: {
            trigger: "axis",
            },
            legend: {
            right: "20",
            data: legend,
            },
            grid: {
            left: "5%",
            right: "5%",
            bottom: "3%",
            containLabel: true,
            },
            xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxis,
            },
            yAxis: {
            type: "value",
            name: "兆瓦(Mw)",
            },
            series: series,
        };
        // 基于准备好的dom，初始化echarts实例
        let dom = document.getElementById(name);
        dom.removeAttribute("_echarts_instance_")
        let myChart = this.$echarts.init(dom);
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    },
    closeTag(tag) {
      this.transferLabel.splice(this.transferLabel.indexOf(tag), 1);
      this.transferData.forEach(item =>{
        if (item.name === tag) {
            this.transferValue.splice(this.transferValue.indexOf(item.wturNo), 1);
        }
      })
    },
    closeTagx(tag) {
      this.transferLabelx.splice(this.transferLabelx.indexOf(tag), 1);
      this.transferData.forEach(item =>{
        if (item.name === tag) {
            this.transferValuex.splice(this.transferValuex.indexOf(item.wturNo), 1);
        }
      })
    },
  },
};
</script>

<style lang="less">
.powerControl {
    overflow-y: hidden;
  .powerControl_wind{
        .windStstus{
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #3a35ae;
            margin: 0 10px;
            border: 1px solid #7674d8;
            border-radius: 10px 10px 0 0;
            border-bottom: none;
            height: 40px;
            .el-col{
                display: flex;
            }
            .scrollbar{
                .scrollbarName{
                    width: 5%;
                    font-size: 14px;
                    color: #fff;
                    position: relative;
                    top: 10px;
                    left: 20px;
                }
                .el-scrollbar{
                    width: 80%;
                    .scrollbar-flex-content {
                        display: flex;
                        width: 50%;
                        .scrollbar-demo-item {
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 0px 15px;
                            margin: 10px;
                            text-align: center;
                            border-radius: 4px;
                            border: 1px solid #8679df;
                            color: #fff;
                            font-size: 14px;
                            cursor: pointer;
                        }
                        .changeBacksty{
                            background-color: #4bb780 !important;
                        }
                        .defaultBacksty{
                            background-color: #373590 !important;
                        }
                    }
                    .el-scrollbar__bar{
                        display: block !important;
                        --el-scrollbar-opacity: 0.8;
                        --el-scrollbar-bg-color: #8679df;
                        // --el-scrollbar-hover-opacity: 0.5;
                        // --el-scrollbar-hover-bg-color: red;
                    }
                }
            }
        }
    }
    .powerControl_main{
        display: flex;
        width: calc(100% - 20px);
        padding: 10px 0 10px 20px;
        background: #edeffb;
        border-radius: 10px;
        .detailLeft{
            margin: 20px 30px 0px 30px;
            .detailLeftpicture{
                padding: 20px 0 0 15px;
                width: 285px;
                height: 80px;
                border-radius: 10px;
                .messageSty{
                    font-size:16px;
                    font-weight:600;
                    color:#fff;
                    margin-top:10px;
                    letter-spacing: 3px;
                }
            }
            .titpicture1{
                background-image: url('../assets/windFramPicture/back3.jpg');
            }
            .detailLeft_msg{
                margin-top:22px;
                display: flex;
                justify-content: space-between;
                .titleStys{
                    padding-left: 15px;
                    font-size: 14px;
                    font-weight: bold;
                    height: 30px;
                    line-height: 30px;
                    display: inline-block;
                }
                .numberSty{
                    display: inline-block;
                    margin-right: 10px;
                }
                .numberStyss{
                    display: inline-block;
                    font-size: 24px;
                }
                .titleSt1{
                    border-left: 5px solid #5678eb;
                }
                .titleSt2{
                    border-left: 5px solid #ff9f23;
                }
                .titleSt3{
                    border-left: 5px solid #56d1eb;
                }
            }
            .msgSty{
                border-bottom: 1px solid #d9d9d9;
                padding-bottom: 22px;
            }
        }
        .powerControlSvg{
            width: 95%;
            height: 100%;
        }
    }
  .svgDia {
    .el-dialog__body {
        padding: 0px 20px !important;
        .el-tabs {
            .el-tag {
            margin-right: 10px;
            }
            .el-date-editor {
            .el-input__icon,
            .el-range-separator {
                line-height: 25px !important;
            }
            }
            .el-transfer {
            margin-top: 15px;
            .el-transfer-panel {
                width: 290px;
            }
            .el-checkbox__label {
                font-size: 14px;
            }
            }
        }
        .showEveryPage{
            margin: 20px 10px;
            .el-form-item--small{
                .el-form-item__label{
                    font-size: 14px;
                }
                 .el-radio--small .el-radio__label{
                    font-size: 14px;
                 }
                 .el-form-item__content{
                    .el-date-editor{
                        height: 30px;
                    }
                    .el-tag--small{
                        height: 30px;
                        margin-bottom: 5px;
                    }
                 }
            }
            .el-transfer {
                margin: 15px 10px;
                .el-transfer-panel {
                width: 40%;
                }
                .el-checkbox__label {
                    font-size: 14px;
                }
                .el-checkbox--small{
                    height: 30px;
                }
            }
            
            .el-date-editor {
                .el-input__icon,
                .el-range-separator {
                    line-height: 25px !important;
                }
            }
            .el-tag{
                margin-right: 5px;
            }
            .tagCla{
                max-height: 123px;
                overflow-y: auto;
            }
        }
    }
    .el-dialog__footer{
        .dialog-footer{
            display: flex;
            justify-content: center;
            .el-button {
                height: 30px;
                padding: 0 20px;
                line-height: 5px;
            }
        }
    }
  }
}
</style>