mkl_power_box/components/amplify/Company/xiangmugaikuang/amplify-sbgk.js

var vms = Vue.component("Company-amplify-sbgk", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="https://fileimg.makalu.cc/WEB_DBD5893450984E50AFF356EF44FF4139.png"  @click="openAmplify">
            </div>
            <transition name="el-zoom-in-top">
                <div class="amplify-fixed" v-show="show"  style="display: none" @click="closeAmplifyAll">
                    <div class="amplify-max">
                        <div class="amplify-title">
                            <div>设备概况</div>
                            <div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
                        </div>   
                        <div class="amplify-content">
                            <!--内容区域-->  
                              <div class="survey_title">
                                <div class="amplify-survey_title_btn">
                                    <div :class="overview==0?'amplify-survey_title_btn_min active':'amplify-survey_title_btn_min'" @click="onClickoOverview(0)">设备数量</div>
                                </div>
                                <div class="amplify-survey_title_btn">
                                    <div :class="overview==1?'amplify-survey_title_btn_min active':'amplify-survey_title_btn_min'" @click="onClickoOverview(1)">绑定数量</div>
                                </div>
                                <div class="amplify-survey_title_btn">
                                    <div :class="overview==2?'amplify-survey_title_btn_min active':'amplify-survey_title_btn_min'" @click="onClickoOverview(2)">监测数量</div>
                                </div>
                            </div>
                            <!--下面展示-->
                             <div class="amplify-survey_content">
                                <div class="amplify-survey_content_img">
                                    <img :src="surveyUrlSb">
                                </div>
                                <div class="amplify-survey_content_number">
                                    <p v-cloak>{{showOverViewLabel}}</p>
                                    <div class="amplify-survey_content_value"><span v-cloak>{{showOverviewData.countNum}}</span> 台</div>
                                </div>
                            </div>
                            <div class="amplify-survey_title">
                                <div class="amplify-survey_title_btn">
                                    <div class="amplify-survey_text survey_text_zy"> </div>
                                    <div class="amplify-survey_text_value">
                                        <p>自有</p>
                                        <span v-cloak>{{showOverviewData.zyNum}}</span>
                                    </div>
                                </div>
                                <div class="amplify-survey_title_btn">
                                    <div class="amplify-survey_text survey_text_zl"> </div>
                                    <div class="amplify-survey_text_value">
                                        <p>租赁</p>
                                        <span v-cloak>{{showOverviewData.zlNum}}</span>
                                    </div>
                                </div>
                                <div class="amplify-survey_title_btn">
                                    <div class="amplify-survey_text survey_text_fb"> </div>
                                    <div class="amplify-survey_text_value">
                                        <p>分包</p>
                                        <span v-cloak>{{showOverviewData.fbNum}}</span>
                                    </div>
                                </div>
                            </div>
                        
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {

    },
    data() {
        return {
            projectIdStr:"",
            show:false,
            //设备概况
            overview:0,
            overviewInterval:'',
            surveyUrlSb:'/images/survey_icon_1.png',
            showOverViewLabel:'设备数量',
            showOverviewData:{},
            projectIdList:[],
            projectList:JSON.parse(localStorage.getItem("projectList")),
        }
    },
    mounted(){

    },
    methods: {
        openAmplify(){
            this.show = true
            //获取机智管家项目ID
            this.getProjectIdList()
            this.getOverviewData()
            this.overviewInterval = setInterval(this.overviewClick,5000);
        },
        closeAmplify(){
            this.show = false
        },
        closeAmplifyAll(e){
            if(e.target.className == 'amplify-fixed'){
                this.show = false
            }
        },
        //设备概况数据
        getOverviewData(){
            var that = this
            axios.post(requestUrl+"getEquipmentOverview?deptId=131&projectId="+this.projectIdStr, {
            }).then(res => {
                that.overviewData =  [res.data.data.count,res.data.data.bind,res.data.data.monitor];
                that.showOverviewData = that.overviewData[0];
                console.log(that.showOverviewData)
            }).catch(err => {
            })
        },

        //获取机制管家id
        getProjectIdList(){
            let projectList = this.projectList;
            let projectIdList = [];
            for (let i = 0; i < projectList.length ; i++) {
                if(projectList[i].jzgj!="" && projectList[i].jzgj!=0){
                    projectIdList.push(projectList[i].jzgj);
                }
            }
            this.projectIdList = projectIdList;
            this.projectIdStr = projectIdList.toString();
        },

        //设备概况点击事件定时器方法
        overviewClick(){
            if(this.overview < 2){
                this.overview = this.overview + 1
            }else{
                this.overview = 0
            }
            this.showOverviewData = this.overviewData[this.overview];
            if(this.overview == 0){
                this.surveyUrl = '/images/survey_icon_1.png'
                this.showOverViewLabel= '设备数量'
            }else if(this.overview == 1){
                this.surveyUrl = '/images/survey_icon_2.png'
                this.showOverViewLabel= '绑定数量'
            }else{
                this.surveyUrl = '/images/survey_icon_3.png'
                this.showOverViewLabel= '监测数量'
            }
        },
        //设备概况点击事件
        onClickoOverview(n){
            var that = this
            that.overview = n
            that.showOverviewData = this.overviewData[this.overview];
            if(this.overview == 0){
                this.surveyUrl = '/images/survey_icon_1.png'
                this.showOverViewLabel= '设备数量'
            }else if(this.overview == 1){
                this.surveyUrl = '/images/survey_icon_2.png'
                this.showOverViewLabel= '绑定数量'
            }else{
                this.surveyUrl = '/images/survey_icon_3.png'
                this.showOverViewLabel= '监测数量'
            }
        },

    },
    watch:{

    },

})