screen/public/assets/js/backend/video_point.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form','echarts', 'echarts-theme', 'template','china'],
    function ($, undefined, Backend, Table, Form,Echarts, EchartsTheme, Template,china) {
    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'video_point/index' + location.search,
                    add_url: 'video_point/add',
                    edit_url: 'video_point/edit',
                    del_url: 'video_point/del',
                    multi_url: 'video_point/multi',
                    import_url: 'video_point/import',
                    table: 'video_point',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                searchFormVisible:true,
                columns: [
                    [
                        //{checkbox: true},
                        {field:'id',title:"ID"},
                        {field: 'video.title', title: __('Video.title'),operate:"like",formatter(a,b){
                            let aa=a,
                                aaa=''
                                if(a.length>10){
                                    a=`${a.substr(0,10)}`
                                    aaa='...'
                                }
                                return `<a target="_blank" href="${b.video.src}" title="${aa}">${a}${aaa}</a>`
                            }},
                        {field: 'type', title: __('Type'),searchList:{'decide':'判断题','choose':'选择题','vote':'投票','wenda':'问答'},formatter:Table.api.formatter.label},
                        {field: 'second', title: __('Second'),operate: false},
                        {field: 'title', title: __('Title'),formatter(a, b) {
                            let txt=''
                                if(b.title){
                                    txt+=`<span title="${a}">${a.length>10?(a.substr(0,10)+'...'):a}</span>`;
                                }
                                if(b.title_img){
                                    txt+=`<img src="${b.title_img}" style="max-width: 60px;max-height: 60px;" alt=""/>`
                                }
                                return txt
                        }},
                        {field: 'items', title: __('选项'),operate:'LIKE',formatter(a, b) {
                            if(b.type==='wenda'){
                                return ''
                            }
                            let items=[]
                            Object.keys(b.items).forEach(idx=>{
                                if(b.item_type==='txt') {
                                    let txt=b.items[idx].length>10?(b.items[idx].substr(0,10)+'...'):b.items[idx]
                                    items.push(`<p class="" title="${b.items[idx]}">${idx}：${txt}</p>`)
                                }else{
                                    items.push(`<a style="display: block;" href="${b.items[idx]}" target="_blank">${idx}：<img src="${b.items[idx]}" alt="pic" style="width: 50px;height: 50px;object-fit: cover;"></a>`)
                                }
                            })
                                return items.join('')
                        }},
                        {field: 'key', title: __('答案'),formatter(a, b) {
                                return a
                            }
                        },
                        {field: 'ave_time', title: __('平均耗时(秒)'),operate:"BETWEEN",formatter(a, b) {
                            if(b.type==='vote'){
                                return '-'
                            }
                                return a
                            }
                        },
                        {field: 'total_time', title: __('总耗时(秒)'),operate:"BETWEEN",formatter(a, b) {
                                if(b.type==='vote'){
                                    return '-'
                                }
                                return a
                            }
                        },
                        {
                            field: 'buttons',
                            title:'操作',
                            table: table,
                            events: Table.api.events.operate,
                            formatter: Table.api.formatter.buttons,
                            buttons: [
                                {
                                    name: 'detail',
                                    text: __('耗时曲线'),
                                    title: __('耗时曲线'),
                                    classname: 'btn btn-xs btn-info btn-dialog',
                                    extend:'data-area=\'["1000px", "800px"]\'',
                                    url: 'video_point/time',
                                    callback: function (data) {},
                                    visible: function (row) {
                                        return row.type!=='vote';
                                    }
                                },
                                {
                                    name: 'detail',
                                    text: __('选择曲线'),
                                    title: __('选择曲线'),
                                    classname: 'btn btn-xs btn-info btn-dialog',
                                    extend:'data-area=\'["1000px", "800px"]\'',
                                    url: 'video_point/curve',
                                    callback: function (data) {},
                                    visible: function (row) {
                                        return row.type!=='wenda';
                                    }
                                },
                                {
                                    name: 'detail',
                                    text: __('正确率'),
                                    title: __('第一次答题正确率'),
                                    classname: 'btn btn-xs btn-info btn-dialog',
                                    extend:'data-area=\'["1000px", "800px"]\'',
                                    url: 'video_point/rate',
                                    callback: function (data) {},
                                    visible: function (row) {
                                        return ['choose','decide'].indexOf(row.type)>-1;
                                    }
                                },
                                {
                                    name: 'addtabs',
                                    text: __('互动记录'),
                                    title: __('互动记录'),
                                    classname: 'btn btn-xs btn-info btn-addtabs',
                                    url: 'video_point_user/index?frm=video_point',
                                    callback: function (data) {},
                                    visible: function (row) {
                                        return true;
                                    }
                                },
                                {
                                    name: 'addtabs',
                                    text: __('地图展示'),
                                    title: __('地图展示'),
                                    classname: 'btn btn-xs btn-info btn-dialog btn-map',
                                    url: 'video_point/map',
                                    callback: function (data) {},
                                    visible: function (row) {
                                        return true;
                                    },
                                    extend:'data-area=["100%","100%"]'
                                },
                            ]
                        },
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate},
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        curve:()=>{
            Controller.api.bindevent()
            let e=Echarts.init(document.getElementById('charts'))
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter:(p)=>{
                        let a=p[0]
                        return `选择：${a.name}<br>${a.value}%`
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: value,
                        type: 'bar',
                        tooltip: {
                            formatter:(a)=>{
                                return `${a.value}%`
                            }
                        }
                    }
                ]
            };
            e.setOption(option)
            $(window).resize(function () {
                e.resize();
            });
            $("#search").on('click',function (){
                let time=$('.form-time').val(),
                    sex=$('.form-sex').val(),age_start=$('input[name=age_start]').val(),age_end=$('input[name=age_end]').val(),
                    province_id=$('select[name="province_id"]').val(),
                    city_id=$('select[name="city_id"]').val()||''
                location.href=`${location.origin}${location.pathname}?time=${time}&sex=${sex}&age_start=${age_start}&age_end=${age_end}&province_id=${province_id}&city_id=${city_id}`
            })
            function makeCity(){
                let province_id=$('.province-select').val()
                if(!province_id){
                    $('.city-select').html('<option value="">请选择市</option>')
                    return
                }
                $.getJSON(`ajax/area?province=${province_id}`,{},function (res) {
                    let a='<option value="">请选择市</option>'
                    res.data.forEach(item=>{
                        a+=`<option value="${item.value}" ${city_id==item.value?'selected':''}>${item.name}</option>`
                    })
                    $('.city-select').html(a)
                })
            }
            $('.province-select').change(function (){
                makeCity()
            })
            makeCity()
        },
        rate:()=>{
            Controller.api.bindevent()
            let e=Echarts.init(document.getElementById('charts'))
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter:(p)=>{
                        let a=p[0]
                        if(a.name==='回答次数'){
                            return `${a.name}<br>${a.value}`
                        }else {
                            return `${a.name}<br>${a.value}%`
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: value,
                        type: 'line',
                        tooltip: {
                            formatter:(a)=>{
                                return `${a.value}%`
                            }
                        }
                    }
                ]
            };
            e.setOption(option)
            $(window).resize(function () {
                e.resize();
            });
            $("#search").on('click',function (){
                let time=$('.form-time').val()
                if(!time){
                    layer.msg('请选择时间')
                    return
                }
                location.href=`${location.origin}${location.pathname}?time=${time}`
            })
        },
        time:()=>{
            Controller.api.bindevent();
            let e=Echarts.init(document.getElementById('charts'))
            let option = {
                tooltip: {
                    trigger: 'axis',
                    formatter:(p)=>{
                        let a=p[0]
                        return `日期：${a.name}<br>${a.value}S`
                    }
                },
                xAxis: {
                    type: 'category',
                    data: x
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: value,
                        type: 'line',
                        tooltip: {
                            formatter:(a)=>{
                                return `日期：${a.name}<br>耗时：${a.value}`
                            }
                        }
                    }
                ]
            };
            e.setOption(option)
            $(window).resize(function () {
                e.resize();
            });
            $("#search").on('click',function (){
                let time=$('.form-time').val()
                if(!time){
                    layer.msg('请选择时间')
                    return
                }
                location.href=`${location.origin}${location.pathname}?time=${time}`
            })
        },
        map(){
            Form.api.bindevent($("#search"));
            let searchForm=$('#search')
            function pyChinese(pro){
                var str = '';
                switch(pro){
                    case '黑龙江':
                        str = 'heilongjiang';
                        break;
                    case '河北':
                        str = 'hebei';
                        break;
                    case '甘肃':
                        str = 'gansu';
                        break;
                    case '云南':
                        str = 'yunnan';
                        break;
                    case '四川':
                        str = 'sichuan';
                        break;
                    case '吉林':
                        str = 'jilin';
                        break;
                    case '辽宁':
                        str = 'liaoning';
                        break;
                    case '青海':
                        str = 'qinghai';
                        break;
                    case '陕西':
                        str = 'shanxi';
                        break;
                    case '河南':
                        str = 'henan';
                        break;
                    case '山东':
                        str = 'shandong';
                        break;
                    case '山西':
                        str = 'shanxi';
                        break;
                    case '安徽':
                        str = 'anhui';
                        break;
                    case '湖北':
                        str = 'hubei';
                        break;
                    case '湖南':
                        str = 'hunan';
                        break;
                    case '江苏':
                        str = 'jiangsu';
                        break;
                    case '贵州':
                        str = 'guizhou';
                        break;
                    case '浙江':
                        str = 'zhejiang';
                        break;
                    case '江西':
                        str = 'jiangxi';
                        break;
                    case '广东':
                        str = 'guangdong';
                        break;
                    case '福建':
                        str = 'fujian';
                        break;
                    case '台湾':
                        str = 'taiwan';
                        break;
                    case '海南':
                        str = 'hainan';
                        break;
                    case '广西':
                        str = 'guangxi';
                        break;
                    case '内蒙古':
                        str = 'neimenggu';
                        break;
                    case '宁夏':
                        str = 'ningxia';
                        break;
                    case '新疆':
                        str = 'xinjiang';
                        break;
                    case '西藏':
                        str = 'xizang';
                        break;
                    case '澳门':
                        str = 'aomen';
                        break;
                    case '北京':
                        str = 'beijing';
                        break;
                    case '上海':
                        str = 'shanghai';
                        break;
                    case '香港':
                        str = 'xianggang';
                        break;
                    case '天津':
                        str = 'tianjin';
                        break;
                    case '重庆':
                        str = 'chongqing';
                        break;
                    default:
                        str = '';
                        break;
                }
                return str;
            }
            let height=$('body').height(),
                reset=$('.btn-reset'),
                levelInput=$('#ilevel'),
                search=$('.btn-search')
            $('#mainMap').css('height',height-55)
            //creatChinaMap('mainMap');
            $('.back_btn').click(function(){
                //creatChinaMap('mainMap');
                reset.click()
                level=1
                search.click()
            })
            function creatChinaMap(id,data){
                reset.click()
                var myChart = Echarts.init(document.getElementById(id));
                $('.back_btn').hide();
                myChart.setOption({
                    title: {
                        text: '全国各省',
                        left: 'center',
                        textStyle: {
                            color: '#000'
                        }
                        ,top:30
                    },
                    tooltip: {
                       formatter: function (params) {
                           if(!params.data){
                               params.data={name:params.name,value:0}
                           }
                           console.log(params)
                           var info = '<p style="font-size:18px">' + params.name + `</p><p style="font-size:14px">${params.data.value}</p>`
                           return info;
                        },
                        trigger: 'item',
                        backgroundColor: "#ff7f50",//提示标签背景颜色
                        textStyle: { color: "#fff" } //提示标签字体颜色
                    },
                    series: [
                        {
                            name: '产品分布',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:data,
                            itemStyle: {
                                normal: {
                                    borderColor: '#ccc',
                                    areaColor: '#ffffff'
                                },
                                emphasis: {
                                    areaColor: '#ccc',
                                    color:'#fff',
                                    borderWidth: 0,
                                    show:false,
                                }
                            },
                        }
                    ]
                });
                myChart.on('click', function (param) {
                    level = 2
                    currentProvinceName = param.name
                    reset.click()
                    search.click()
                    //creatProvince(parm.name,id);
                })
            }
            function creatProvince(name,id,data){
                var pro = pyChinese(name);
                if(pro==''){
                    return false;
                }
                $('.back_btn').show();
                var childChart = Echarts.init(document.getElementById(id));
                var seriesdata = [{
                    type: 'map',
                    mapType: pro,
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:data,
                    itemStyle: {
                        normal: {
                            borderColor: '#ccc',
                            areaColor: '#ffffff'
                        },
                        emphasis: {
                            areaColor: '#ccc',
                            color:'#fff',
                            borderWidth: 0,
                            show:false,
                        }
                    },
                    animation: false
                }];
                var option = {
                    tooltip: {
                        formatter: function (params) {
                            if(!params.data){
                                params.data={name:params.name,value:0}
                            }
                            var info = '<p style="font-size:18px">' + params.name + `</p><p style="font-size:14px">${params.data.value}</p>`
                            return info;
                        },
                        trigger: 'item',
                        backgroundColor: "#ff7f50",//提示标签背景颜色
                        textStyle: { color: "#fff" } //提示标签字体颜色
                    },
                    title: {
                        text: name,
                        left: 'center',
                        textStyle: {
                            color: '#000'
                        }
                        ,top:30
                    },
                    series: seriesdata
                };
                $.get('/assets/js/map/json/'+pro+'.json', function(gdMap) {
                    console.log(gdMap)
                    Echarts.registerMap(pro, gdMap);
                    childChart.setOption(option, true);
                    childChart.on('click',function (){})
                });
            }
            search.on('click',function (){
                levelInput.val(level)
                let form=searchForm.serializeArray()
                let idx = layer.load(2),
                    call = () => {
                        layer.close(idx)
                    };
                if(level==1) {
                    form.push({name: 'province', value: JSON.stringify(province)})
                    $.post('', form, function (res) {
                        if (res.code !== 1) {
                            layer.alert(res.msg)
                            call()
                            return
                        }
                        creatChinaMap('mainMap', res.data)
                        call()
                    })
                }else if(level==2){
                    form.push({name:'province',value:currentProvinceName})
                    form.push({name:'province_pinyin',value:pyChinese(currentProvinceName)})
                    creatProvince(currentProvinceName,'mainMap',[{name:'济南市',value:1222}])
                    $.post('', form, function (res) {
                        if (res.code !== 1) {
                            layer.alert(res.msg)
                            call()
                            return
                        }
                        //creatChinaMap('mainMap', res.data)
                        creatProvince(currentProvinceName,'mainMap',res.data)
                        call()
                    })
                }
            })
            search.click()
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});