function pages_home() { return { component: Vue.component(arguments.callee.toString(), function (resolve, reject) { // 异步加载本地消息 var height; axios.get("/pages/home.html").then(function (response) { resolve({ template: response.data, data() { return { //messages: store.state.messages, // 此处为数据库调用为异步处理,有可能不生效,直接在模板中调用state title: '物联管控', url: '/UserCenter/api/v1/user/getUserInfo' }; }, mounted: function () { weui.tab('#tab', { defaultIndex: 0 }); // 获取产品数据(取设备数) store.dispatch('getProducts'); // 获取节点数据(取智慧教室数) store.dispatch('getNodes'); // 获取平台场景数据(取平台场景数) store.dispatch('getScenes'); // 获取在线设备数量 store.dispatch('getDeviceStatus'); // 获取在线设备数量 store.dispatch('getEnvironment'); window.chartColors = { red: 'rgb(255, 99, 132)', orange: 'rgb(255, 159, 64)', yellow: 'rgb(255, 205, 86)', green: 'rgb(75, 192, 192)', blue: 'rgb(54, 162, 235)', purple: 'rgb(153, 102, 255)', grey: 'rgb(201, 203, 207)', pink: 'rgb(255, 220, 220)', pink2: 'rgb(255, 150, 150)', yellow: 'rgb(255, 255, 0)', violet: 'rgb(238,130,238)', sandybrown: 'rgb(244,164,96)', goldenrod: 'rgb(218,165,32)', }; }, methods: { // 开平人人通关闭窗口API调用 closeWindow: function () { if(window.api){ window.api.execScript( { name: window.api.winName, script: "api.closeWin()" } ) } }, // 绘制设备状态 drawDeviceStatus: function () { var labels = ['离线', '在线']; var data = [store.state.deviceStatus.offline, store.state.deviceStatus.online]; var config = { type: 'doughnut', data: { datasets: [{ data: data, backgroundColor: [ window.chartColors.red, window.chartColors.green, ], label: 'Dataset 1' }], labels: labels }, options: { responsive: true, legend: { position: 'right', }, title: { display: false, text: '设备状态' }, animation: { animateScale: true, animateRotate: true } } }; var ctx = document.getElementById('status').getContext('2d'); var doughnut = new Chart(ctx, config); }, // 绘制产品类型 drawProductCategory: function () { var labels = []; var data = []; $.each(store.state.products, function(i, item){ data.push(item.count); labels.push(item.name.replace('FBee','')); }); /** * */ var config = { type: 'pie', data: { datasets: [{ data: data, backgroundColor: [ window.chartColors.red, window.chartColors.green, window.chartColors.yellow, window.chartColors.blue, window.chartColors.purple, window.chartColors.grey, window.chartColors.pink, window.chartColors.pink2, window.chartColors.sandybrown, window.chartColors.goldenrod ], label: 'Dataset 2' }], labels: labels }, options: { responsive: true, legend: { position: 'right', }, title: { display: false, text: '设备类型' }, animation: { animateScale: true, animateRotate: true }, } }; var ctx = document.getElementById('cate').getContext('2d'); var pie = new Chart(ctx, config); } }, computed: { // 设备数统计 deviceCount:function(){ console.log(store.state.products) var count = 0; $.each(store.state.products, function(i, item){ console.log('<<<'+item.name,item.count); count += item.count; }); return count; }, // 智慧教室(节点)数统计 nodeCount:function(){ console.log(store.state.nodes) return store.state.nodes.length || 0; }, // 平台场景数统计 scenesCount:function(){ console.log(store.state.scenes) return store.state.scenes.length || 0; }, // 环境信息统计 environment:function(){ console.log(store.state.environment) return store.state.environment; }, // 设备(在线/离线)状态统计 deviceStatus:function(){ return store.state.deviceStatus.online + ':' + store.state.deviceStatus.offline; } }, updated: function () { console.log('updated>>>>>>>>>>>>>>') this.$options.methods.drawDeviceStatus(); this.$options.methods.drawProductCategory(); }, destroyed:function(){ // } }) }); }), onMessage: function (event, model, to, from) { // loadMessage() } } }