jhbigscreen/src/components/amplify/jixieguanli/amplify-sbgk.js

import Vue from 'vue'

var vms = Vue.component("amplify-sbgk", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="/cdn/images/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="amplify-sbgk-survey_title">
                                <div class="amplify-sbgk-survey_title_btn">
                                    <div :class="overview==0?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
                                         @click="onClickoOverview(0)">设备数量
                                    </div>
                                </div>
                                <div class="amplify-sbgk-survey_title_btn">
                                    <div :class="overview==1?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
                                         @click="onClickoOverview(1)">绑定数量
                                    </div>
                                </div>
                                <div class="amplify-sbgk-survey_title_btn">
                                    <div :class="overview==2?'amplify-sbgk-survey_title_btn_min active':'amplify-sbgk-survey_title_btn_min'"
                                         @click="onClickoOverview(2)">监控数量
                                    </div>
                                </div>
                            </div>   
                            <div class="amplify-sbgk-survey_content">
                                <div class="amplify-sbgk-survey_content_img">
                                    <img :src="surveyUrlSb">
                                </div>
                                <div class="amplify-sbgk-survey_content_number">
                                    <p>{{showOverviewLabel}}</p>
                                    <div class="amplify-sbgk-survey_content_value">
                                        <span>{{showOverviewData.countNum}}</span> 台
                                    </div>
                                </div>
                            </div> 
                            <div class="amplify-sbgk-survey_title">
                                <div class="amplify-sbgk-survey_title_btn">
                                    <div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_zy"></div>
                                    <div class="amplify-sbgk-survey_text_value">
                                        <p>自有</p>
                                        <span>{{showOverviewData.zyNum}}</span>
                                    </div>
                                </div>
                                <div class="amplify-sbgk-survey_title_btn">
                                    <div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_zl"></div>
                                    <div class="amplify-sbgk-survey_text_value">
                                        <p>租赁</p>
                                        <span>{{showOverviewData.zlNum}}</span>
                                    </div>
                                </div>
                                <div class="amplify-sbgk-survey_title_btn">
                                    <div class="amplify-sbgk-survey_text amplify-sbgk-survey_text_fb"></div>
                                    <div class="amplify-sbgk-survey_text_value">
                                        <p>分包</p>
                                        <span>{{showOverviewData.fbNum}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
       
    `,
    props: {

    },
    data() {
        return {
            show:false,
            overview: 0,
            showOverviewLabel:'设备数量',
            surveyUrlSb: '/images/survey_icon_1.png',
            overviewInterval: '',
            overviewData:[],
            showOverviewData: {},
        }
    },
    mounted(){

    },
    methods: {
        openAmplify(){
            this.show = true
            //设备概况点击事件定时器
            this.overviewInterval = setInterval(this.overviewClick, 5000);
            this.getOverviewData()
        },
        closeAmplify(){
            this.show = false
            this.overview = 0
            this.showOverviewLabel='设备数量'
            this.surveyUrlSb= '/images/survey_icon_1.png'
            clearInterval(this.overviewInterval);
        },
        closeAmplifyAll(e){
            if(e.target.className == 'amplify-fixed'){
                this.show = false
                this.overview = 0
                this.showOverviewLabel='设备数量'
                this.surveyUrlSb= '/images/survey_icon_1.png'
                clearInterval(this.overviewInterval);
            }
        },
        //设备概况点击事件定时器方法
        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.showOverviewLabel = '设备数量'
                this.surveyUrlSb = '/images/survey_icon_1.png'
            } else if (this.overview == 1) {
                this.showOverviewLabel = '绑定数量'
                this.surveyUrlSb = '/images/survey_icon_2.png'
            } else {
                this.showOverviewLabel = '监控数量'
                this.surveyUrlSb = '/images/survey_icon_3.png'
            }
        },
        //设备概况点击事件
        onClickoOverview(n) {
            this.overview = n
            this.showOverviewData = this.overviewData[this.overview];
            if (this.overview == 0) {
                this.showOverviewLabel = '设备数量'
                this.surveyUrlSb = '/images/survey_icon_1.png'
            } else if (this.overview == 1) {
                this.showOverviewLabel = '绑定数量'
                this.surveyUrlSb = '/images/survey_icon_2.png'
            } else {
                this.showOverviewLabel = '监控数量'
                this.surveyUrlSb = '/images/survey_icon_3.png'
            }
        },
        //设备概况数据
        getOverviewData(){
            axios.post(requestUrl+"getEquipmentOverview?deptId="+deptId+"&projectId="+JSON.parse(localStorage.getItem("data1")).jzgj, {
            }).then(res => {
                this.overviewData =  [res.data.data.count,res.data.data.bind,res.data.data.monitor];
                this.showOverviewData = this.overviewData[0];
            }).catch(err => {
            })
        },
    },
    watch:{

    },

})