首页修改

src/login/js/login.js

@@ -1,5 +1,5 @@
 /* CONFIGURE START */
-var HOST_NAME = "192.168.2.248:1111"//"112.51.249.202:1111",//var HOST_NAME = "http://192.168.2.248:1111",
+var HOST_NAME = "112.51.249.202:1111",//"192.168.2.248:1111"//"112.51.249.202:1111",//var HOST_NAME = "http://192.168.2.248:1111",
 SYS_ADDR = location.href.trim().toLowerCase().replace(/login\/+$/, ""),
     COOKIE_EXPIRES = 1,
     COOKIE_PATH = location.pathname.trim().toLowerCase().replace(/login\/+$/, "");

src/main.ts

@@ -134,13 +134,13 @@ function loadApp(AppX: AppX) {
                             }
                         }
                         require(AppX.dojoConfig, ['core/LoadManager.class'], function (LoadManager) {
-                            let menuBarWidgets = _.findIndex(AppX.appConfig.menuBarWidgets, function (item) { return item.id == 'HomePage' });
-                            if(menuBarWidgets!=-1&&AppX.appConfig.menuBarWidgets[menuBarWidgets]&&AppX.appConfig.menuBarWidgets[menuBarWidgets].data.length>0){
-                                AppX.appConfig.loadHomePage=true;
-                            }else{
-                                AppX.appConfig.loadHomePage=false;
-                            }
-                            // AppX.appConfig.menuBarWidgets.splice(menuBarWidgets,1);
+                             let menuBarWidgets = _.findIndex(AppX.appConfig.menuBarWidgets, function (item) { return item.id == 'HomePage' });
+                             if(menuBarWidgets!=-1&&AppX.appConfig.menuBarWidgets[menuBarWidgets]&&AppX.appConfig.menuBarWidgets[menuBarWidgets].data.length>0){
+                                 AppX.appConfig.loadHomePage=true;
+                             }else{
+                                 AppX.appConfig.loadHomePage=false;
+                             }
+                            AppX.appConfig.menuBarWidgets.splice(menuBarWidgets,1);
                             //是否有首页权限
                             if (AppX.appConfig.loadHomePage) {
                                 (new LoadManager).load(AppX.appConfig.homePageStartWidgets);

src/widgets/HomePage/Widget.ts

@@ -44,7 +44,15 @@ class HomePage extends BaseWidget {
         "peopleNumber": "-"
     }
     pipeServicePath = "";
-    isLoad = false
+    isLoad = false;
+    bYlChart = null;
+    bGjChart = null;
+    zYLChart = null;
+    bCzChart = null;
+    bMsChart = null;
+    zSbChart = null;
+    zGxChart = null;
+    lSbChart = null;
     /**
      * @function 初始化启动
      */
@@ -57,6 +65,22 @@ class HomePage extends BaseWidget {
         this.setHtml(this.template, "body");
         this.initEvent();
         this.setConfig();
+        let bYlDom = this.domObj.find(".rightPanle .ylLength .echart")[0];//根据压力统计管线长度饼图
+        this.bYlChart = echarts.init(bYlDom, 'macarons');//echart饼状图渲染;
+        let bGjDom = this.domObj.find(".rightPanle .gjLength .echart")[0];//管径长度统计饼图
+        this.bGjChart = echarts.init(bGjDom, 'macarons');//echart饼状图渲染;
+        let zYlDom = this.domObj.find(".rightPanle .ylZLength .echart")[0];//压力柱状图统计
+        this.zYLChart = echarts.init(zYlDom, 'macarons');//echart柱状图渲染;
+        let bczDom = this.domObj.find(".rightPanle .czLength .echart")[0];//材质饼状图统计
+        this.bCzChart = echarts.init(bczDom, 'macarons');//echart饼状图渲染;
+        let bMsDom = this.domObj.find(".rightPanle .msLength .echart")[0];//埋设方式饼状图统计
+        this.bMsChart = echarts.init(bMsDom, 'macarons');//echart饼状图渲染;
+        let zSbDom = this.domObj.find(".rightPanle .sbtotal .echart")[0];//设备总数柱状图统计
+        this.zSbChart = echarts.init(zSbDom, 'macarons');//echart柱状图渲染;
+        let zGxDom = this.domObj.find(".rightPanle .gsgxtotal .echart")[0];//分公司管线长度统计
+        this.zGxChart = echarts.init(zGxDom, 'macarons');//echart柱状图渲染;
+        let lSbDom = this.domObj.find(".rightPanle .gssbtotal .echart")[0];//分公司设备总数统计
+        this.lSbChart = echarts.init(lSbDom, 'macarons');//echart柱状图渲染;
 
         this.domObj.find(".close").off().click(e => {
             $(window).unbind('beforeunload');
@@ -70,36 +94,16 @@ class HomePage extends BaseWidget {
             Cookies.remove(hex_sha1("systemmodeid"));
             Cookies.remove(hex_sha1("systemid"));
             window.location.href = window.location.href.replace(/\/+$/, "/login");
-        })
+        });
+        this.sendAjax(this,this.config.companyInfo,"GET",this.companyInfo);
 
-        this.ylLength();
-        this.gjLength();
-        this.ylZLength();
-        this.czLength();
-        this.msLength();
-        this.sbtotal();
-        this.gsgxtotal();
+        this.clickChart(1);
+        //this.sbtotal();
+        //this.gsgxtotal();
         this.gssbtotal();
-        this.companyInfo();
+        //this.companyInfo();
+
 
-        this.domObj.find(".item .infoLook").off().click(e=>{//点击不同的时候才能查询和切换
-            //点击不同的时候才能查询和切换数据
-            let search=false;
-            let value=$(e.currentTarget).attr("value");
-            if(!this.currentCompany){
-                this.currentCompany=value;
-                search=true;
-            }else{
-                if(value!=this.currentCompany){
-                    this.currentCompany=value;
-                    search=true;
-                }
-            }
-            if(search){
-                this.domObj.find(".currentCompany").removeClass("currentCompany");
-                $(e.currentTarget).parents(".item").addClass("currentCompany");
-            }
-        });
     }
 
 
@@ -148,19 +152,22 @@ class HomePage extends BaseWidget {
        * @param callBack 成功后的回调函数
        * @param errorBack 失败后的回调函数
        */
-    sendAjax(that, data, url, ajaxtype, callBack?, errorBack?) {
+    sendAjax(that, url, ajaxtype, callBack?,data?, errorBack?) {
         if (!url) {
             return;
         }
         let contentType = "application/json;charset=utf-8";
         $.ajax({
             headers: that.header,
+            // {
+            //     Authorization:"bearer 01fdd9a8-8010-417a-bf2f-2bf89889464c"
+            // },
             type: ajaxtype,
             url: that.apiRoot + url,
             contentType: contentType,
             data: data,
             success: function (result) {
-                callBack.bind(that)(result);
+                callBack.bind(that)(result.result);
             },
             error: (errorBack != undefined ? errorBack.bind(that) : function (data) {
                 console.error('请求地址：' + url + "，报错数据：" + data);
@@ -182,111 +189,198 @@ class HomePage extends BaseWidget {
         }
         return check;
     }
-
-
+    clickChart(code){
+        this.ylLength(code,1);//value = "1:压力类型 2：管径3：材质4：埋设方式"
+        this.gjLength(code,2);
+        this.ylZLength(code,1);
+        this.czLength(code,3);
+        this.msLength(code,4);
+        this.sbtotal(code);
+    }
     /**
      * 公司列表信息
      **/
-    companyInfo() {
-        let data = this.config.testCompany;
-        let html = ""
+    companyInfo(data) {
+        //let data = this.config.testCompany;
+        let html = "";
         if (data && data.length > 0) {
             data.forEach(item => {
-                html += "<div class='item'><div class='itemInfo'><span class='companyName' title='" + item.name + "'>" + item.name + "</span><span class='companyLength' title='" + item.length + "'>" + item.length + "</span></div>"+
-                "<div class='itemOperation'><a class='infoLook' value='" + item.name + "' title='点击查看公司管网情况'>查看</a><a class='goToSys' value='" + item.name + "' title='点击进入系统'>进入系统</a></div></div>"
+                if(item.companyId == 1){
+                    html += "<div class='item currentCompany'><div class='itemInfo'><span class='companyName' title='" + item.name + "'>" + item.name + "</span><span class='companyLength' title='" + item.value + "'>" + item.value + "</span></div>"+
+                    "<div class='itemOperation'><a class='infoLook' name='"+item.name+"' value='" + item.companyId + "' title='点击查看公司管网情况'>查看</a><a class='goToSys' value='" + item.name + "' title='点击进入系统'>进入系统</a></div></div>"
+                }else{
+                    html += "<div class='item'><div class='itemInfo'><span class='companyName' title='" + item.name + "'>" + item.name + "</span><span class='companyLength' title='" + item.value + "'>" + item.value + "</span></div>"+
+                    "<div class='itemOperation'><a class='infoLook' name='"+item.name+"' value='" + item.companyId + "' title='点击查看公司管网情况'>查看</a><a class='goToSys' value='" + item.name + "' title='点击进入系统'>进入系统</a></div></div>"
+                }
+
             })
         }
         this.domObj.find('.leftPanle .infoList').empty().append(html);
+        this.domObj.find(".infoList .infoLook").off().click(e=>{//点击不同的时候才能查询和切换
+            //点击不同的时候才能查询和切换数据
+            let search=false;
+            let value=$(e.currentTarget).attr("value");
+            let name = $(e.currentTarget).attr("name");
+            if(!this.currentCompany){
+                this.currentCompany=value;
+                search=true;
+            }else{
+                if(value!=this.currentCompany){
+                    this.currentCompany=value;
+                    search=true;
+                }
+            }
+            if(search){
+                this.domObj.find(".currentCompany").removeClass("currentCompany");
+                $(e.currentTarget).parents(".item").addClass("currentCompany");
+                this.domObj.find(".currentPlace").html(name);
+                this.clickChart(value);
+            }
+        });
+
+        this.gsgxtotal(data);//分公司管线长度
+
     }
 
     /**
      * 根据压力统计管线长度
      **/
-    ylLength(data?) {
-        if (!data) {
-            data = this.config.testYl
+    ylLength(data,typeId) {
+        // if (!data) {
+        //     data = this.config.testYl
+        // }
+        let sendData = {
+            companyId:data,
+            typeId:typeId
         }
-        let dom = this.domObj.find(".rightPanle .ylLength .echart")[0];
-        this.bEchart(data, dom);
+        this.sendAjax(this,this.config.getEchartData,"GET",(data)=>{
+            //let dom = this.domObj.find(".rightPanle .ylLength .echart")[0];
+            this.bEchart(data, this.bYlChart);
+        },sendData)
+
     }
 
     /**
      * 根据管径统计管线长度
      **/
-    gjLength(data?) {
-        if (!data) {
-            data = this.config.testGJ
+    gjLength(data,typeId) {
+        // if (!data) {
+        //     data = this.config.testGJ
+        // }
+        let sendData = {
+            companyId:data,
+            typeId:typeId
         }
-        let dom = this.domObj.find(".rightPanle .gjLength .echart")[0];
-        this.bEchart(data, dom);
+        this.sendAjax(this,this.config.getEchartData,"GET",(data)=>{
+            //let dom = this.domObj.find(".rightPanle .gjLength .echart")[0];
+            this.bEchart(data, this.bGjChart);
+        },sendData)
+        // let dom = this.domObj.find(".rightPanle .gjLength .echart")[0];
+        // this.bEchart(data, dom);
     }
 
     /**
      * 根据压力统计管线长度(柱状)
      **/
-    ylZLength(data?) {
-        if (!data) {
-            data = this.config.testYl
+    ylZLength(data,typeId) {
+        // if (!data) {
+        //     data = this.config.testYl
+        // }
+        let sendData = {
+            companyId:data,
+            typeId:typeId
         }
-        let dom = this.domObj.find(".rightPanle .ylZLength .echart")[0];
-        this.zEchart(data, dom,this.echartDisplay.type.pressure);
+        this.sendAjax(this,this.config.getEchartData,"GET",(data)=>{
+            //let dom = this.domObj.find(".rightPanle .ylZLength .echart")[0];
+            this.zEchart(data, this.zYLChart,this.echartDisplay.type.pressure);
+        },sendData)
+        // let dom = this.domObj.find(".rightPanle .ylZLength .echart")[0];
+        // this.zEchart(data, dom,this.echartDisplay.type.pressure);
     }
 
     /**
      * 根据材质统计管线长度
      **/
-    czLength(data?) {
-        if (!data) {
-            data = this.config.testCZ
+    czLength(data,typeId) {
+        // if (!data) {
+        //     data = this.config.testCZ
+        // }
+        let sendData = {
+            companyId:data,
+            typeId:typeId
         }
-        let dom = this.domObj.find(".rightPanle .czLength .echart")[0];
-        this.bEchart(data, dom);
+        this.sendAjax(this,this.config.getEchartData,"GET",(data)=>{
+            //let dom = this.domObj.find(".rightPanle .czLength .echart")[0];
+            this.bEchart(data, this.bCzChart);
+        },sendData)
+        // let dom = this.domObj.find(".rightPanle .czLength .echart")[0];
+        // this.bEchart(data, dom);
     }
 
 
     /**
  * 根据埋设统计管线长度
  **/
-    msLength(data?) {
-        if (!data) {
-            data = this.config.testMS
+    msLength(data,typeId) {
+        // if (!data) {
+        //     data = this.config.testMS
+        // }
+        let sendData = {
+            companyId:data,
+            typeId:typeId
         }
-        let dom = this.domObj.find(".rightPanle .msLength .echart")[0];
-        this.bEchart(data, dom);
+        this.sendAjax(this,this.config.getEchartData,"GET",(data)=>{
+            //let dom = this.domObj.find(".rightPanle .msLength .echart")[0];
+            this.bEchart(data, this.bMsChart);
+        },sendData)
+        // let dom = this.domObj.find(".rightPanle .msLength .echart")[0];
+        // this.bEchart(data, dom);
     }
 
     /**
      * 各设备情况(柱状)
      **/
-    sbtotal(data?) {
-        if (!data) {
-            data = this.config.testSB
+    sbtotal(code) {
+        // if (!data) {
+        //     data = this.config.testSB
+        // }
+        //let dom = this.domObj.find(".rightPanle .sbtotal .echart")[0];
+        let sendData = {
+            companyId:code,
         }
-        let dom = this.domObj.find(".rightPanle .sbtotal .echart")[0];
-        this.zEchart(data, dom,this.echartDisplay.type.diameter);
+        this.sendAjax(this,this.config.devicebycompany,"GET",(data)=>{
+            //let dom = this.domObj.find(".rightPanle .msLength .echart")[0];
+            this.zEchart(data, this.zSbChart,this.echartDisplay.type.diameter);
+        },sendData)
+        //this.zEchart(data,this.zSbChart,this.echartDisplay.type.diameter);
     }
 
 
     /**
      * 各公司管线总数(柱状)
      **/
-    gsgxtotal(data?) {
-        if (!data) {
-            data = this.config.testCompany
-        }
-        let dom = this.domObj.find(".rightPanle .gsgxtotal .echart")[0];
-        this.zEchart(data, dom,this.echartDisplay.type.totalPipe);
+    gsgxtotal(data) {
+        // if (!data) {
+        //     data = this.config.testCompany
+        // }
+        // let dom = this.domObj.find(".rightPanle .gsgxtotal .echart")[0];
+        this.zEchart(data, this.zGxChart,this.echartDisplay.type.diameter);
+        //this.zEchart(data, dom,this.echartDisplay.type.totalPipe);
     }
 
     /**
      * 各设备总数(柱状)
      **/
-    gssbtotal(data?) {
-        if (!data) {
-            data = this.config.testCompany
-        }
-        let dom = this.domObj.find(".rightPanle .gssbtotal .echart")[0];
-        this.zEchart(data, dom,this.echartDisplay.type.totalEquipment);
+    gssbtotal() {
+        // if (!data) {
+        //     data = this.config.testCompany
+        // }
+        this.sendAjax(this,this.config.totalDevice,"GET",(data)=>{
+            //let dom = this.domObj.find(".rightPanle .msLength .echart")[0];
+            this.zEchart(data, this.lSbChart,this.echartDisplay.type.totalEquipment);
+        })
+        //let dom = this.domObj.find(".rightPanle .gssbtotal .echart")[0];
+        //this.zEchart(data, dom,this.echartDisplay.type.totalEquipment);
     }
 
     /**
@@ -302,14 +396,20 @@ class HomePage extends BaseWidget {
         };
         dataList.forEach(item => {
             echartData.x.push(item.name);
-            echartData.data.push(item.length);
+            echartData.data.push(item.value);
         });
         if(type==this.echartDisplay.type.totalEquipment){
-            this.echartDisplay.echartMRender(dom, echartData,type)
+            this.echartDisplay.echartMRender(dom, echartData,type,(option)=>{
+                dom.setOption(option, true);
+            })
         }else if(type==this.echartDisplay.type.totalPipe){
-            this.echartDisplay.echartZHRender(dom, echartData,type)
+            this.echartDisplay.echartZHRender(dom, echartData,type,(option)=>{
+                dom.setOption(option, true);
+            })
         }else{
-            this.echartDisplay.echartZRender(dom, echartData,type)
+            this.echartDisplay.echartZRender(dom, echartData,type,(option)=>{
+                dom.setOption(option, true);
+            })
         }
 
     }
@@ -323,9 +423,12 @@ class HomePage extends BaseWidget {
         }
         let echartData = [];
         dataList.forEach(item => {
-            echartData.push({ name: item.name, value: item.length });
+            echartData.push({ name: item.name, value: item.value });
+        })
+        this.echartDisplay.echartBRender(dom, echartData,(option)=>{
+            //let Chart = echarts.init(dom, 'macarons');
+            dom.setOption(option, true);
         })
-        this.echartDisplay.echartBRender(dom, echartData)
     }
 
     /**

src/widgets/HomePage/config.json

@@ -6,7 +6,10 @@
     "getTrouble":"/zmrq/trouble/listNew",
     "getConstructionsite":"/zmrq/constructionsite/pagenew",
     "getCar":"/zmrqcar/car/listCarWatch",
-    "getMissionScheduleList": "/zmrq/planchild/page",
+    "getEchartData":"/zmrq/homepage/type",
+    "companyInfo":"/zmrq/homepage/total",
+    "totalDevice":"/zmrq/homepage/totaldevice",
+    "devicebycompany":"/zmrq/homepage/devicebycompany",
     "statisticService": "/exts/TFGeoAPISOE/statistic",
     "qwxSymbolUrl":"/widgets/HomePage/images/qwxdt.png",
     "gdjhSymbolUrl":"/widgets/HomePage/images/gddt.png",
@@ -69,4 +72,4 @@
         {"name":"阎良","length":"3021"},
         {"name":"富平","length":"2102"}
     ]
-}
+}

src/widgets/HomePage/echartDisplay.class.ts

@@ -15,8 +15,8 @@ class EchartDisplay {
        * @param dom 渲染位置的元素
        * @param echartData 渲染数据
        * */
-    echartBRender(dom, echartData,colors?) {
-        let Chart = echarts.init(dom, 'macarons');
+    echartBRender(dom, echartData,callback,colors?) {
+        //let Chart = echarts.init(dom, 'macarons');
         let drawColor=['rgb(194,53,49)','rgb(47,69,84)','rgb(97,160,168)','rgb(212,130,101)','rgb(145,199,174)','rgb(116,159,131)'];
         if(colors){
             drawColor=colors;
@@ -66,12 +66,13 @@ class EchartDisplay {
                 data: echartData
             }
         };
-        Chart.setOption(option, true);
+        callback(option)
+        //Chart.setOption(option, true);
     }
 
     /**
     * echart柱状图的柱子的颜色管理，根据类型获取颜色
-    * */    
+    * */
     colorSet(type){
         let color=null;
         switch(type){
@@ -81,20 +82,20 @@ class EchartDisplay {
                     start:"rgba(28,179,78,0.3)",
                     end:"rgb(28,179,78)"
                 }
-                break; 
-            //整体设备统计        
+                break;
+            //整体设备统计
             case   this.type.totalEquipment:
                 color={
                     start:"rgba(50,151,221,0.3)",
                     end:"rgb(50,151,221)"
                 }
-                break; 
+                break;
             default:
                 color={
                     start:"rgba(42,189,208,0.3)",
                     end:"rgb(42,189,208)"
                 }
-                break;    
+                break;
         }
         return color;
     }
@@ -104,9 +105,9 @@ class EchartDisplay {
     * @param dom 渲染位置的元素
     * @param echartData 渲染数据
     * */
-    echartZRender(dom, echartData,type) {
+    echartZRender(dom, echartData,type,callback) {
         let color=this.colorSet(type);
-        let Chart = echarts.init(dom, 'macarons');
+        //let Chart = echarts.init(dom, 'macarons');
         let option = {
             xAxis: {
                 data: echartData.x,
@@ -152,13 +153,13 @@ class EchartDisplay {
             },
             grid: {
                 top: 20,
-                left: 50,
+                left: 70,
                 right: 20,
                 bottom: 30
             },
             tooltip: {
                 trigger: 'item',
-                formatter: '{b} : {c} 个',
+                formatter: '{b} : {c} 公里',
                 backgroundColor: "rgba(50,50,50,0.5)"
             },
             yAxis: {
@@ -184,7 +185,7 @@ class EchartDisplay {
                 }
             ],
             series: [
-                { 
+                {
                     type: 'bar',
                     itemStyle: {
                         color: 'rgba(0,0,0,0.05)'
@@ -226,13 +227,14 @@ class EchartDisplay {
                 }
             ]
         };
-        Chart.setOption(option, true);
+        callback(option);
+        //Chart.setOption(option, true);
     }
 
     //echart面积图
-    echartMRender(dom, echartData,type) {
+    echartMRender(dom, echartData,type,callback) {
         let color=this.colorSet(type);
-        let Chart = echarts.init(dom, 'macarons');
+        //let Chart = echarts.init(dom, 'macarons');
         let option = {
             xAxis: {
                 type: 'category',
@@ -334,11 +336,12 @@ class EchartDisplay {
                                 { offset: 0, color: color.end }
                             ]
                         ),
-                    } 
+                    }
                 }
             ]
         };
-        Chart.setOption(option, true);
+        callback(option);
+        //Chart.setOption(option, true);
     }
 
     /**
@@ -346,9 +349,9 @@ class EchartDisplay {
     * @param dom 渲染位置的元素
     * @param echartData 渲染数据
     * */
-    echartZHRender(dom, echartData,type) {
+    echartZHRender(dom, echartData,type,callback) {
         let color=this.colorSet(type);
-        let Chart = echarts.init(dom, 'macarons');
+        //let Chart = echarts.init(dom, 'macarons');
         let option = {
             yAxis: {
                 data: echartData.x,
@@ -427,7 +430,7 @@ class EchartDisplay {
                 }
             ],
             series: [
-                { 
+                {
                     type: 'bar',
                     itemStyle: {
                         color: 'rgba(0,0,0,0.05)'
@@ -469,6 +472,7 @@ class EchartDisplay {
                 }
             ]
         };
-        Chart.setOption(option, true);
+        callback(option);
+        //Chart.setOption(option, true);
     }
-}
+}