promotion/promotion_html.git

<!DOCTYPE html>
<html>
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>本竞品分省销售表现</title>
    </head>
 
    <body>
        <style type="text/css">
            h5,ul,h1 {
                margin: 0;
                padding: 0;
            }
            li {
                list-style: none;
            }
        </style>
        <div v-cloak id="hbody" class="h_body" style="margin: 0;padding: 0;">
            <div ref="ref_header" class="v_header">
            </div>
            <div ref="ref_main" class="v_main" style="padding: 0px 36px;">
                <h1 style="font-weight: 600;color: #3A63A6;text-align: center;">本竞品分省销售表现</h1>
                <div style="width: 100%;height: 100%;display: flex;justify-content: center;">
                    <div id = "competitor" style="width: 90%;height: 90%;"></div>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            function loadJsCss(callback) {
                var jscss_urls = [
                    {id: "js6", type: "js", url: "root/js/echarts.js"},
                ];
                window.top.initJsCss(document, jscss_urls, callback);
            }
        
            function initVue() {
                new BasicsVue({
                    el: "#hbody",
                    data: {
                        cardtablist: [
                            // {id: "6-5-2-2-1", type: "cardtab", name: "新增协会智库", icon:"", img: "../../img/page/associationLibraryList.png", enname:"", url: "../../page/flow_manage/addAssociationLibraryList.html", parentid: "1", opentype: "add"},
                            // {id: "2-1-2", type: "cardtab", name: "中央专家库", icon:"", img: "../../img/page/icon_open@2x.png", enname:"", url: "../../page/flow_manage/centralfileList.html", parentid: "2", opentype: "add"},
                        ],
                        page_url: "",
                        rowkey: "id",
                        dataname: "",
                        module_title: "",
                        tableHeight: 500,
                        filterAttr: {
                            columnnumber: 4,
                            labelwidth: "100px",
                            labelposition: "left",//"left",//"right",
                            size: "medium",
                            borderleft: "0px solid #c6c6c600",
                            bordertop: "8px solid #c6c6c600",
                            borderright: "0px solid #c6c6c600",
                            borderbottom: "0px solid #c6c6c600",
                            border: "3px solid #c6c6c600"
                        },
                        formButton: {
                            query: true,
                            empty: true,
                            add: false,
                            import: false,
                            export: false
                        },
                        filterObj: {},
                        filterFieldsObj: {},
                        filterFields: [
                            {isshow: "T",fieldname: "province", field: "province", name: "省份", type: "select"},
                            {isshow: "T", fieldname: "city",field: "city",name: "城市", type: "select"},
                            // {isshow: "T", field: "field1", name: "客户编号", type: "select"},
                            // {isshow: "T", field: "name", fieldname: "name", name: "客户名称", fieldtype: "like", type: "select"},
                            // {isshow: "T", field: "creator_name", fieldname: "creator_name", name: "客户属性", fieldtype: "like"},
                            // {isshow: "T", field: "createtime", name: "是否启用",fieldtype: "inScopeInclude"},
                        ],
                        
                        //Tab项
                        activeName: "code1",
                        wrapStyle: "",
                        viewStyle: "",
                        
                        tabList: [
                            {code: "code1", name: "列表"},
                        ],
                        tabsObj: {
                            code1: true,
                        },
                        
                        isRefresh: true,
                        pagesize: 10,
                        pagenum: 0,
                        total: 0,
                        orderby:"createtime desc",
                    },
                    created() {
                        var me = this;
                        this.popupParames = clone(Root.popupParames);
                        
                    },
                
                    mounted() {
                        var me = this;
                        // this.initData();
                        this.$nextTick(function() {
                            let w_ = this.$refs.ref_header.offsetWidth;
                            let h_ = this.$refs.ref_header.offsetHeight;
                            //let h_ = 0;
                            let clientHeight = document.documentElement.clientHeight;
                            var m_h = clientHeight - h_ - 10;
                            this.tableHeight = clientHeight - h_ - 252;
                            
                            this.wrapStyle = "overflow-y: auto; width: 100%; height: " + (m_h - 50) + "px";
                            this.viewStyle = "max-height: " + (m_h - 50) + "px";
                            this.$refs.ref_main.style.height = m_h + "px";
                            //this.$refs.ref_v_body.style.height = m_h + "px";
                        })
                        setTimeout(function(){
                            me.competitor();
                        },500);
                        
                    },
                    methods: {
                        competitor(){
                            var cpDom = document.getElementById('competitor');
                            var cpChart = echarts.init(cpDom);
                            
                            var cpOption = {
                              tooltip: {
                                  trigger: 'axis',
                                  axisPointer: {
                                  // Use axis to trigger tooltip
                                  type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                                  }
                              },
                              legend: {
                                  top:'20',
                              },
                              grid: {
                                  left: '3%',
                                  right: '4%',
                                  bottom: '3%',
                                  containLabel: true
                              },
                              xAxis: {
                                  type: 'value'
                              },
                              yAxis: {
                                  type: 'category',
                                  axisLabel:{
                                  interval:'0'
                                  },
                                  data: ['江苏', '广东', '浙江', '山东', '河南', '上海', '安徽', '湖南', '四川', '江西', '福建', '河北', '北京', '湖北', '山西', '广西', '重庆', '陕西', '天津', '辽宁', '新疆', '吉林', '甘肃', '黑龙江', '云南', '内蒙古', '贵州', '海南', '青海', '宁夏'],
                              },
                              series: [
                                  {
                                  name: '天境',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true,
                                      formatter:function(params){
                                          return params.value+"%";
                                      }
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [32, 30, 31, 33, 39, 35, 37,25,30,35,20,30,40,25,35,35,25,20,30,40,25,30,35,20,20,25,30,35,40,25]
                                  },
                                  {
                                  name: '百济',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true,
                                      formatter:function(params){
                                          return params.value+"%";
                                      }
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [19, 23, 20, 23, 19, 27, 21,20,25,15,20,25,20,25,20,15,20,15,20,25,20,25,15,20,15,20,25,20,15,20]
                                  },
                                  {
                                  name: '德琪',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true,
                                      formatter:function(params){
                                          return params.value+"%";
                                      }
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [24, 26, 27, 30, 23, 19, 11,10,25,20,10,15,20,15,20,25,20,15,20,10,20,25,15,20,25,30,15,20,25,20]
                                  },
                                  {
                                  name: '杨森',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true,
                                      formatter:function(params){
                                          return params.value+"%";
                                      }
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [25, 21, 22, 14, 19, 19, 31,45,20,30,50,30,20,35,25,25,35,50,30,25,35,20,35,40,40,25,30,25,20,35]
                                  },
                              ]
                            };
                            cpChart.setOption(cpOption);
                        },
                        initData() {
                            var me = this;
                            let param_ = {
                                isClientMode: false,
                                dataname: this.dataname,
                                page: {
                                    pageno: this.pagenum,
                                    pagesize: this.pagesize
                                },
                            }
                            Server.call("root/data/getEntitySet", param_, function(result) {
                                me.total = 0;
                                me.tableData = [];
                                if (result && result.data) {
                                    me.total = result.data.page.recordcount;
                                    var data_ = result.data.entityset;
                                    // console.log(data_)
                                    me.tableData = data_;
                                }
                            });
                        },
                        showFilterPopup() {
                            
                        },
                        onInitFilter() {
                            this.filterObj = {}
                            this.onQuery();
                        },
                        onEditFilter() {
                            
                        },
                        getData(page) {
                            this.pagesize = page.pagesize;
                            this.pagenum = page.pagenum;
                            this.doQuery();
                        },
                        handleClick(tab) {
                            this.AnchorLinkTo(tab.name);
                        },
                        formSelectChange(obj) {
                            var me = this;
                            var fieldObj = obj.fieldobj;
                            var filterFieldsData = clone(me.filterFields);
                            
                            if (fieldObj.field == "province") {
                                var filterObj_ = clone(me.filterObj);
                                filterObj_.city = null;
                                me.filterObj = filterObj_;
                                let param_ = {
                                    isClientMode: false,
                                    dataname: "md_province",
                                    filter: [
                                        {field: "name", value:obj.data.province}
                                    ]
                                }
                                Server.call("root/data/getEntitySet", param_, function(result) {
                                    if (result && result.data) {
                                        let param_ = {
                                            isClientMode: false,
                                            dataname: "md_vip_area",
                                            filter:[
                                                {"field": "province_id", "value":result.data.entityset[0].id}
                                            ]
                                        }
                                        Server.call("root/data/getEntitySet", param_, function(result) {
                                            if (result && result.data) {
                                                var options_ = result.data.entityset;
                                                for(var i=0; i<options_.length;i++) {
                                                    options_[i].label = options_[i].name;
                                                    options_[i].value = options_[i].name;
                                                    
                                                }
                                                filterFieldsData.map(e=>{
                                                    if(e.field == "city") {
                                                        e.options = options_;
                                                    }
                                                })
                                            }
                                            me.filterFields = filterFieldsData;
                                        });
                                    }
                                });
                            }
                        },
                        
                        //动态加载下拉项
                        cellVisibleChange(obj, row) {
                            let me = this;
                            var filterFieldsData = clone(me.filterFields);
                            if (obj.field == "province") {
                                var filterFieldsData = clone(me.filterFields);
                                let param_ = {
                                    isClientMode: false,
                                    dataname: "md_province",
                                }
                                Server.call("root/data/getEntitySet", param_, function(result) {
                                    if (result && result.data) {
                                        var options_ = result.data.entityset;
                                        for(var i=0; i<options_.length;i++) {
                                            options_[i].label = options_[i].name;
                                            options_[i].value = options_[i].name;
                                        }
                                        filterFieldsData.map(e=>{
                                            if(e.field == "province") {
                                                e.options = options_;
                                            }
                                        })
                                    }
                                    me.filterFields = filterFieldsData;
                                });
                            }
                        },
                        
                        onFormButtonByCode(code) {
                            if (code == "add") {//添加
                                // let me = this;
                                // var config = {
                                //     totab: true,
                                //     title: "客户主数据新增",
                                //     url: "../home/masterDataAdd.html",
                                //     data: {},
                                //     delta: {},
                                //     opentype: "add",
                                //     sceneCode: "add",
                                //     width: 780,
                                //     height: 420,
                                //     callback: function(obj, callback) {
                                //         me.onQuery();
                                //         if (callback) {
                                //             callback();
                                //         }
                                //     }
                                // };
                                // Root.showPopup(config);
                                // this.tabCardClick(config);
                            }
                            else if (code == "import") {//导入
                                
                            }
                            else if (code == "export") {//导出
                                
                            }
                        },
                        cellClick(obj) {//单元格点击
                            var field = obj.column.property;
                            var row = obj.row;
                            var tableField = obj.tableField;
                            // if(tableField.field == "field2") {
                            //     var to_page = {
                            //         totab: true,
                            //         title: "客户明细(主数据)",
                            //         url: "../home/masterDataCustomerDetails.html",
                            //         data: {},
                            //         delta: {},
                            //         opentype: "add",
                            //         sceneCode: "add",
                            //         width: 1100,
                            //         height: 550,
                            //         callback: function(obj, callback) {
                            //             me.onQuery();
                            //             if (callback) {
                            //                 callback();
                            //             }
                            //         }
                            //     };
                            //     Root.showPopup(to_page);
                            // }
                        },
                        queryData(row) {
                            let me = this;
                            
                            // var config = {
                            //     width: 1000,
                            //     height: 550,
                            //     title: "查看协会智库档案",
                            //     url: "../flow_manage/addAssociationLibraryList.html",
                            //     totab: true,
                            //     sceneCode: "query",
                            //     opentype: "add",
                            //     data: row,
                            //     delta: {},
                            //     callback: function(obj, callback) {
                            //         if (callback) {
                            //             callback();
                            //         }
                            //     }
                            // };
                            // // this.doPopup(config);
                            // this.tabCardClick(config);
                        },
                        cellButtonClick(obj) {
                            var type_ = obj.column.property;
                            var row = obj.row;
                            var field = "name";
                            var tips = "";
                            
                            if(type_ == "delete"){
                                this.delData(row,field,tips);
                            } else if (type_ == "update"){
                                this.editData(obj);
                            } else if (type_ == "query"){
                                this.queryData(row);
                            }
                        },
                        //修改数据事件
                        onEditData(config, scope) {
                            var me = this;
                            var row = scope.row;
                            // var config = {
                            //     width: 1000,
                            //     height: 550,
                            //     title: "编辑客户主数据",
                            //     url: "../home/masterDataAdd.html",
                            //     totab: true,
                            //     sceneCode: "edit",
                            //     opentype: "add",
                            //     data: row,
                            //     delta: {},
                            //     callback: function(obj, callback) {
                            //         me.initData();
                            //         if (callback) {
                            //             callback();
                            //         }
                            //     }
                            // };
                            // this.doPopup(config);
                        },
                        
                        
                        
                        //滚动事件
                        myFunction(e) {
                            var isToBottom_ = this.isToBottom(e);
                            if (isToBottom_) {
                                this.org_footer = true;
                            }
                            else {
                                this.org_footer = false;
                            }
                        },
                        
                        isToBottom(e) {
                            var bo_ = false;
                            if(e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight){
                        　　　　//已经到最底部了
                                bo_ = true;
                        　　}
                            return bo_;
                        },
                        
                    }
                });
            }
        
            loadJsCss(function() {
                initVue();
            });
        </script>
        
        
        <style>
            [v-cloak] {
                display: none !important;
            }
            
            .v_header .v_header_query{
                padding: 0px 36px;
                box-sizing: border-box;
            }
        </style>
    </body>
</html>