jili2-screen/src/apps/twolevel/views/two-level.js

import Vue from 'vue';
import Component from 'vue-class-component';

import { swiper, swiperSlide } from 'vue-awesome-swiper';

import * as echartsGl from 'echarts';

import '../../../../public/map/js/china';

import echarts from '@/common/components/echarts.vue';
import ProgressBar from '@/common/components/progress.vue';
import openImg from '@/common/components/openImg.vue';
import iframes from '@/common/components/iframe.vue';
import dailyEcharts from '@/apps/twolevel/components/dailyEcharts.vue';
import todoEcharts from '@/apps/twolevel/components/todoEcharts.vue';
import api from '../api';

import 'swiper/dist/css/swiper.css';

@Component({
    components: {
        ProgressBar,
        echarts,
        openImg,
        iframes,
        swiper,
        swiperSlide,
        dailyEcharts,
        todoEcharts,
    },

})

export default class BannerIndex extends Vue {
    photoVisible = false;

    bigImgUrl = '';

    iframeVisible = false;

    iframeSrc = 'http://master.eegrid.com/AccountLogin.aspx?AccessToken=f410b994c4bc158bbb3860845d6ffbe3&account=ykdxm';

    iframeVisible2 = false;

    iframeSrc2 = 'http://xmyn3g.6655.la:27006/api/Topology/ZTPreview/Preview?id=350114596096315392';

    week = '';

    day = '';

    time = '';

    info = {};

    userId = 0;

    token = '';

    orgId = 0;

    flag = false;

    cityId = 0;

    orgModelLoading = false;

    echartOrgModel = {
        grid: {
            show: false,
            top: '5%',
            right: 0,
            left: 0,
            bottom: '5%',
        },
        color: ['#69C8F6', '#67AEF3', '#79DCCB', '#56ABF1', '#57ADF4', '#253F7B', '#598CEF'],
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
        },

        series: [

        ],

    };

    swiperList = [];

    // 轮播参数
    swiperOptions = {
        autoplay: true,
        speed: 1000,
    }

    // 地图参数

    mapSelParam = null; // 选中的参数

    markPointData = {}; // 标记点参数

    getEchartsOptions = {
        tooltip: { // 提示框组件。
            show: true,
            trigger: 'item', // 触发类型 散点图
            enterable: true, // 鼠标是否可进入提示框
            showContent: true, // 是否显示提示框浮层
            triggerOn: 'click', // 提示框触发的条件(mousemove|click|none)
            transitionDuration: 1, // 提示框移动动画过渡时间
            alwaysShowContent: true,
            // eslint-disable-next-line consistent-return
            formatter(params) {
                if (params.data.id > 0) {
                    // const str = `<div class="conut-next" id="btn-tooltip" οnclick="Jgclick('${params.id}')">${params.name}</div>`;
                    // const str = `<a href="/threelevel/${params.data.id}" class="conut-next" style="text-decoration: none !important;
                    // color: #fff !important;">${params.name}</a>`;
                    const str = `<text class="conut-next" style="color: #fff !important;">${params.name}</text>`;
                    return str;
                }
            },
            backgroundColor: 'rgba(30, 54, 124,1)',
            borderWidth: '1px',
            borderRadius: '5',
            borderColor: 'rgba(30, 159, 255,0.5)',
            textStyle: {
                color: 'rgba(255,255,255,1)',
            },
            padding: [2, 5],
        },
        title: {
            // text: this.echart.title,
            textStyle: {
                color: '#FFF',
                fontSize: 20,
            },
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        },
        // 主要用来控制图表四周留白
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },
        geo: {
            // 引入中国地图
            map: 'china',
            // 是否可以缩放，拖拽
            roam: false,
            // zoom: 0,
            // 地名配置项
            label: {
                // 默认情况下配置项
                normal: {
                    show: true,
                    textStyle: {
                        color: '#CCC',
                    },
                },
                // 选中高亮情况下配置项
                emphasis: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    },
                },

            },
            // 各省样式
            itemStyle: {
                normal: {
                    areaColor: '#053b93',
                    borderColor: '#73c3fc',
                    borderWidth: 1,
                },
                emphasis: {
                    areaColor: '#053b93',
                    borderColor: '#73c3fc',
                },
            },
            // scaleLimit: {
            //     min: 0.7,
            //     max: 10,
            // },
        },
        select: { // 地图选中区域样式
            label: { // 选中区域的label(文字)样式
                color: '#fff',
            },
            itemStyle: { // 选中区域的默认样式
                areaColor: '#053b93',
            },
        },

        // 系列配置
        series: [{
            name: '',
            type: 'map',
            // 【此参数必须配置，否则visualMap不起作用】
            // geoIndex: 0,
            // 此处可接收后端参数，当前数据仅为测试
            // clickable: false,
            data: [
                // {
                //     name: '济南市',
                //     selected: true,
                //     value: 1000,
                // },
            ],
        }],
        // animationType: 'scale',
        // animationEasing: 'elasticOut',
        // animationDelay: 2000,
    }

    orgList = [];

    todayTodoInfo = {};

    bjinfo = {}

    bxinfo = {}

    ysinfo = {}

    yhinfo = {}

    feedbackLoading = false;

    echartFeedback = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        legend: {
            textStyle: {
                color: '#627A9D',
                fontSize: 10,
            },
        },
        grid: {
            top: '15%',
            left: '8%',
            right: '4%',
            bottom: '12%',
        },
        color: ['#4D70E5', '#F99650'],
        xAxis: [
            {
                type: 'category',
                data: [],
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                    formatter: '{value}',
                },
                splitLine: {
                    show: false, // 去掉网格线
                },
                splitArea: {
                    show: false,
                },
                nameTextStyle: {
                    color: '#fff',
                },
            },
        ],

        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                nameTextStyle: {
                    color: '#fff',
                },
                splitLine: {
                    show: false, // 去掉网格线
                },
                splitArea: {
                    show: false,
                },
            },
        ],
        series: [

        ],
    };

    projectCount = {};

    quarterScore1 = null;

    quarterScore2 = null;

    quarterScore3 = null;

    quarterScore4 = null;

    quarterScore5 = null;

    quarterScoreOne = null;

    quarterScoreTwo = null;

    quarterScoreThree = null;

    quarterScoreFour = null;

    quarterScoreFive = null;

    nlxhLoading = false;

    nlxhConfig = {
        data: [],
        showValue: true,
        columnColor: 'rgba(84,121,251,0.5)',
    }

    patrolImg = [];

    patrolLoading = false;

    echartPatrol = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        color: ['#40E1F4', '#8340F4', '#208AF7', '#E9179C'],
        legend: {
            // data: ['巡更', '巡检', '巡视', '巡查'],
            textStyle: {
                color: '#ffffff',
            },
        },
        toolbox: {
            // feature: {
            //     saveAsImage: {}
            // }
        },
        grid: {
            // left: '3%',
            // right: '4%',
            bottom: '3%',

            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: [],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', // 这里用参数代替了
                    },
                },
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量',
                splitLine: {
                    show: false,
                },
                //  去掉背景的网格线
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', // 这里用参数代替了
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#FFFFFF',
                        width: 1, // 这里是为了突出显示加上的
                    },
                },
            },
        ],
        series: [

        ],

    }

    weather = {};

    jgId = 0;

    title = {};

    isWebp = false;

    csreens1 = []

    csreens2 = []

    csreens3 = []

    csreens4 = []

    mateCount = {}

    created() {
        // this.userId = this.$cookies.get('userId');
        // this.token = this.$cookies.get('token');

        this.isWebp = this.$isSupportWebp;

        this.jgId = this.$route.params.id;
        // if (!this.userId || !this.token) {
        //     this.$router.push({ path: '/login' });
        // }

        this.getTodayTodoInfo();
        this.getTodayTodoType();
        this.getModuleList();
        this.getCommentComplainList();
        this.getProjectCount();
        this.getCityList();
        // this.getQuarterScore();
        // this.getQuarterScore2();

        this.getFcompanyList();
        this.getnlxhList();
        this.getpatrolImg();
        this.getpatrolRecordList();
        this.getTodayWeather();
        this.getTitle();
        this.getOrgs();

        this.getMateTypeCount();

        // this.initalECharts();
        this.realSysTime();
        setInterval(() => {
            this.realSysTime();
        }, 1000);

        setInterval(() => {
            this.getpatrolImg();
        }, 1000 * 20);

        setInterval(() => {
            this.getTodayTodoInfo();
            this.getTodayTodoType();
            this.getModuleList();
            this.getCommentComplainList();
            this.getProjectCount();
            this.getCityList();
            // this.getQuarterScore();
            // this.getQuarterScore2();

            this.getFcompanyList();
            this.getnlxhList();
            this.getpatrolRecordList();
        }, 1000 * 60 * 5);
    }

    updateData() {

    }

    goThree(id) {
        if (id) {
            // this.$router.push({ name: 'threelevel', params: { orgId: id } });

            // window.location.href = `https://mdyg.sdmingde.cn/h5/screen/project?org_id=${id}`;
            // window.location.href = `http://mingde.com/h5/screen/project?org_id=${id}`;

            const url = `${process.env.VUE_APP_PHP_URL}/h5/screen/project?org_id=${id}`;
            window.open(url);
        }
    }

    backPage() {
        this.$router.back();
    }

    getOrgs() {
        api.getOrgs({ id: this.jgId }).then((res) => {
            this.csreens1 = res.data.lists1;
            this.csreens2 = res.data.lists2;
            this.csreens3 = res.data.lists3;
            this.csreens4 = res.data.lists4;
        }).catch(() => { });
    }

    getTitle() {
        api.getTitle({ id: this.jgId }).then((res) => {
            this.title = res.data;
        }).catch(() => { });
    }

    getTodayWeather() {
        api.getTodayWeather({ id: this.jgId }).then((res) => {
            this.weather = res.data;
        }).catch(() => { });
    }

    getTodayTodoInfo() {
        api.getTodayTodoInfo({ id: this.jgId }).then((res) => {
            this.todayTodoInfo = res.data;
        }).catch(() => { });
    }

    getTodayTodoType() {
        api.getTodayTodoType({ id: this.jgId }).then((res) => {
            this.bjinfo = res.data.bj;
            this.bxinfo = res.data.bx;
            this.ysinfo = res.data.ys;
            this.yhinfo = res.data.yh;
        }).catch(() => { });
    }

    getModuleList() {
        api.getModuleList({ id: this.jgId }).then((res) => {
            const series = [
                {
                    type: 'pie',
                    radius: ['15%', '50%'],
                    label: {
                        color: '#627A9D',
                        normal: {
                            textStyle: {
                                color: '#627A9D',
                                fontSize: 12,
                            },
                        },
                    },
                    data: res.data,
                },

            ];
            this.echartOrgModel.series = series;
            this.orgModelLoading = false;
        }).catch(() => { });
        this.orgModelLoading = false;
    }

    getCommentComplainList() {
        api.getCommentComplainList({ id: this.jgId }).then((res) => {
            this.feedbackLoading = true;
            this.echartFeedback.xAxis[0].data = res.data.title;
            const series = [
                {
                    name: '评价总分',
                    type: 'line',
                    data: res.data.list1,
                    areaStyle: {
                        color: {
                            // 线性渐变
                            type: 'linear',
                            colorStops: [{
                                offset: 0.1, color: 'rgba(77,112,229, 0.2)', // 0% 处的颜色
                            }, {
                                offset: 0.6, color: 'rgba(77,112,229,0.2)', // 100% 处的颜色
                            }],
                            global: false, // 缺省为 false
                        },
                    },
                },
                {
                    name: '投诉订单',
                    type: 'line',
                    data: res.data.list2,
                    areaStyle: {
                        color: {
                            // 线性渐变
                            type: 'linear',
                            colorStops: [{
                                offset: 0.1, color: 'rgba(249,150,80, 0.2)', // 0% 处的颜色
                            }, {
                                offset: 0.6, color: 'rgba(249,150,80,0.2)', // 100% 处的颜色
                            }],
                            global: false, // 缺省为 false
                        },
                    },
                },

            ];
            this.echartFeedback.series = series;
            this.feedbackLoading = false;
        }).catch(() => { });
        this.feedbackLoading = false;
    }

    getProjectCount() {
        api.getProjectCount({ id: this.jgId }).then((res) => {
            this.projectCount = res.data;
        }).catch(() => { });
    }

    getCityList() {
        api.getCityList({ id: this.jgId }).then((res) => {
            this.orgList = res.data.list;

            const lists = res.data.list;

            if (lists.length > 0) {
                const nl = [];
                lists.forEach((item) => {
                    if (item.lat !== '' && item.lng !== '') {
                        const aa = {
                            id: item.id,
                            name: item.name,
                            coord: [item.lng, item.lat],
                            symbol: `image://${item.img}`,
                            symbolSize: 28,
                        };
                        nl.push(aa);
                    }
                });

                this.markPointData = nl;
            }

            this.cityId = res.data.cityId;

            if (this.cityId > 0) {
                this.initalECharts();
            }
        }).catch(() => { });
    }

    getQuarterScore() {
        api.getQuarterScore({ id: this.jgId }).then((res) => {
            this.quarterScore1 = res.data.top1;
            this.quarterScore2 = res.data.top2;
            this.quarterScore3 = res.data.top3;
            this.quarterScore4 = res.data.top4;
            this.quarterScore5 = res.data.top5;
        }).catch(() => { });
    }

    getQuarterScore2() {
        api.getQuarterScore2({ id: this.jgId }).then((res) => {
            this.quarterScoreOne = res.data.top1;
            this.quarterScoreTwo = res.data.top2;
            this.quarterScoreThree = res.data.top3;
            this.quarterScoreFour = res.data.top4;
            this.quarterScoreFive = res.data.top5;
        }).catch(() => { });
    }

    getFcompanyList() {
        api.getFcompanyList({ id: this.jgId }).then((res) => {
            this.swiperList = res.data;
        }).catch(() => { });
    }

    getnlxhList() {
        api.getDeviceTaskList({ id: this.jgId }).then((res) => {
            this.nlxhLoading = true;
            this.nlxhConfig.xAxis[0].data = res.data.x;
            const series = [
                {
                    name: '维保计划',
                    type: 'bar',
                    barWidth: 10,
                    emphasis: {
                        focus: 'series',
                    },
                    data: res.data.y,
                },
                {
                    name: '计划延期',
                    type: 'line',
                    emphasis: {
                        focus: 'series',
                    },
                    data: res.data.y1,
                },
            ];
            this.nlxhConfig.series = series;
            this.nlxhLoading = false;
        }).catch(() => {
            this.nlxhLoading = false;
        });
    }

    getpatrolImg() {
        api.getpatrolImg({ id: this.jgId }).then((res) => {
            this.patrolImg = res.data;
        }).catch(() => { });
    }

    getpatrolRecordList() {
        api.getpatrolRecordList({ id: this.jgId }).then((res) => {
            this.patrolLoading = true;

            this.echartPatrol.xAxis[0].data = res.data.date;

            const series = [
                {
                    name: '巡更',
                    type: 'line',
                    data: res.data.count1,
                    areaStyle: {
                        color: {
                            // 线性渐变
                            type: 'linear',
                            colorStops: [{
                                offset: 0.1, color: 'rgba(64,225,244, 0.2)', // 0% 处的颜色
                            }, {
                                offset: 0.6, color: 'rgba(64,225,244,0.2)', // 100% 处的颜色
                            }],
                            global: false, // 缺省为 false
                        },
                    },
                },
                {
                    name: '巡视',
                    type: 'line',
                    data: res.data.count2,
                    areaStyle: {
                        color: {
                            // 线性渐变
                            type: 'linear',
                            colorStops: [{
                                offset: 0.1, color: 'rgba(32,138,247, 0.2)', // 0% 处的颜色
                            }, {
                                offset: 0.6, color: 'rgba(32,138,247,0.2)', // 100% 处的颜色
                            }],
                            global: false, // 缺省为 false
                        },
                    },
                },
                {
                    name: '巡查',
                    type: 'line',
                    data: res.data.count3,
                    areaStyle: {
                        color: {
                            // 线性渐变
                            type: 'linear',
                            colorStops: [{
                                offset: 0.1, color: 'rgba(233,23,156, 0.2)', // 0% 处的颜色
                            }, {
                                offset: 0.6, color: 'rgba(233,23,156,0.2)', // 100% 处的颜色
                            }],
                            global: false, // 缺省为 false
                        },
                    },
                },
                {
                    name: '巡检',
                    type: 'line',
                    data: res.data.count4,
                    areaStyle: {
                        color: {
                            // 线性渐变
                            type: 'linear',
                            colorStops: [{
                                offset: 0.1, color: 'rgba(131,64,244, 0.2)', // 0% 处的颜色
                            }, {
                                offset: 0.6, color: 'rgba(131,64,244,0.2)', // 100% 处的颜色
                            }],
                            global: false, // 缺省为 false
                        },
                    },
                },
            ];

            this.echartPatrol.series = series;

            this.patrolLoading = false;
        }).catch(() => {
            this.patrolLoading = false;
        });
    }

    Jgclick(id) {
        // if (type === 1) {
        //     this.$router.push({ name: 'threelevel2', params: { orgId: id } });
        // } else {
        //     this.$router.push({ name: 'threelevel', params: { orgId: id } });
        // }
        //   window.location.href = `https://mdyg.sdmingde.cn/h5/screen/project?org_id=${id}`;

        const url = `${process.env.VUE_APP_PHP_URL}/h5/screen/project?org_id=${id}`;
        window.open(url);
        // window.location.href = `http://mingde.com/h5/screen/project?org_id=${id}`;
    }

    initalECharts() {
        // 初始化echarts

        const echartApp = echartsGl.init(this.$refs.Map);

        const series = [
            {
                // name: '节点分布',
                type: 'map',
                geoIndex: 0,
                markPoint: { // 图表标注。
                    label: {
                        normal: {
                            show: true,
                        },
                        emphasis: {
                            show: true,
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(72,150,128,1)',
                        },
                    },
                    data: this.markPointData,
                },
            },
        ];

        this.getEchartsOptions.series = series;

        // 设置配置项
        echartApp.setOption(this.getEchartsOptions);

        // 解决事件冒泡（点击触发两次事件）的问题
        echartApp.off('click');
        // echartApp.on('click', (params) => {
        //     console.log(params, 'xxxxxxxxxxxxxxxxxxxxxxx');
        //     // 判断点击对象为当前 标记点
        //     // if (params.componentType === '"markPoint"') {
        //     //     this.getEchartsOptions.tooltip.show = true;
        //     //     echartApp.setOption(this.getEchartsOptions);
        //     // } else {
        //     //     this.getEchartsOptions.tooltip.show = false;
        //     //     echartApp.setOption(this.getEchartsOptions);
        //     // }
        // });
    }

    realSysTime() {
        const now = new Date();
        const year = now.getFullYear(); // 获取年份
        let month = now.getMonth(); // 获取月份
        let date = now.getDate(); // 获取日期
        const day = now.getDay(); // 获取星期
        let hour = now.getHours(); // 获取小时
        let minute = now.getMinutes(); // 获取分钟
        let seconds = now.getSeconds(); // 获取秒
        month += 1;
        const arrWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        this.week = arrWeek[day];
        if (month < 10) {
            month = `0${month}`;
        }
        if (date < 10) {
            date = `0${date}`;
        }
        if (hour < 10) {
            hour = `0${hour}`;
        }
        if (minute < 10) {
            minute = `0${minute}`;
        }
        if (seconds < 10) {
            seconds = `0${seconds}`;
        }
        this.day = `${year}.${month}.${date}`;
        this.time = `${hour}:${minute}:${seconds}`;
    }

    showBigImage(e) { // 点击图片函数，点击后，把photoVisible设置成true
        if (e) {
            this.photoVisible = true;
            this.bigImgUrl = e.currentTarget.src;
        }
    }

    openIframe() {
        this.iframeVisible = true;
    }

    openIframe2() {
        this.iframeVisible2 = true;
    }

    getMateTypeCount() {
        api.getMateTypeCount({ id: this.jgId }).then((res) => {
            this.mateCount = res.data;
        }).catch(() => { });
    }
}