// index.js // 获取应用实例 import * as echarts from '../../ec-canvas/echarts' // 这个是自己实际的目录 import {path} from '../../utils/circle'; const app = getApp() Page({ data: { showRight:false, transportStatusData:{}, transportBusinessData:{}, transportBusinessNum:1, orderWaringStatusData:{}, waringStatus:0, waringStatusList:["当天","本周","本月",], transportCityData:[], transOrderList:[], transOrderIndex:0, polyline:[], tempList:[], hisLocal:[], urlLeft:'/group156/default/20211216/16/58/6/bde42061736d8dfcd68bbe33fd9464a0.jpg"', banner: "/group156/default/20211216/16/58/6/bde42061736d8dfcd68bbe33fd9464a0.jpg", ossPath: app.globalData.$filePath, title: '冷链追溯系统', token: '', mapCtx: '', latitude: '', //纬度 longitude: '', //经度 navbarData: { title: app.globalData.title, showCapsule: true, share: false }, alarmDTO: { chipNum: 0, allTimeNum: 0, realTimeNum: 0 }, temperatureDTO: { //温度监测数量 normal: 0, warning: 0, alarm: 0 }, waringDTO: { chipNum: 0, allTimeNum: 0, realTimeNum: 0 }, inTrans: 0, //已出库（个） inStore: 0, //已入库（个） inEnd: 0, //已结束（个） total: 0, //已生产（个） error11: 0, //一型有源报警数量 error20: 0, //二型报警数量 total10: 0, //一型无源数量 total11: 0, //一型有源数量 total20: 0, //二型数量 warning11: 0, //一型有源预警数量 warning20: 0, //一型无源预警数量 mapTopData: { name: '暂无', status: '暂无', updateTime: '暂无', lastTemperature: '暂无', minTemperature: '暂无', maxTemperature: '暂无' }, llzsEc: { lazyLoad: true, }, chainTempList: [], tempList:[], Ec: { lazyLoad: true, }, pieEc: { lazyLoad: true, }, labelNum: { lazyLoad: true, }, latitude: 40, longitude: 116, status: { checkedMap:true, statisticsInfo:true, statusLabelTest:true, statusLabelNum:true, statusLabelType:true, expressStatu:true, transportStatus:true, tempChart:true, onlineNum:true, packageStatu:true, onlineSituat:true, newSituat:true }, CustomBar: app.globalData.CustomBar, StatusBar: app.globalData.StatusBar, systemMenu: [{ menuName: '查一查', icon: '/img/idx_img2.png', path: 'find', }, { menuName: '冷链管理', icon: '/img/dev_img4.png', path: 'coldChain' }, { menuName: '产品管理', icon: '/img/idx_img4.png', path: 'productManager' }, { menuName: '员工管理', icon: '/img/idx_img5.png', path: 'workerManager' }, ], isAuth: false, showAuthWin: false, showChaType: false, isPrem: false, device: false, modalHidden: true, scrollTop:0,//滚动监听 // 沃森新 cardIndex:0, tabLeftTop:[ {name:'新冠',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'}, {name:'肺炎',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'}, {name:'流感',remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常'} ], tabLeftTop_remark:'本公司现有100个产品温度正常温度不正常0个，原料辅料20种状态正常，产品有100种，所有产品状态全部正常', orderCardList:[{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50},{createTime:'2022-07-01',num:50}] }, // 事件处理函数 onLoad() { var that = this; if (!wx.getStorageSync('status')) { wx.setStorageSync('status', JSON.stringify(that.data.status)); } }, showRight(){ this.setData({ showRight:true, }) }, onReady: function () { var that = this; // that.canvasRingA = that.selectComponent("#canvasRingA"); // that.canvasRingB = that.selectComponent("#canvasRingB"); // that.canvasRingC = that.selectComponent("#canvasRingC"); // that.canvasRingG = that.selectComponent("#canvasRingG"); // that.canvasRingA.showCanvasRing(); // that.canvasRingB.showCanvasRing(); // that.canvasRingC.showCanvasRing(); // that.canvasRingG.showCanvasRing(); // that.canvasRingD = that.selectComponent("#canvasRingD"); // that.canvasRingE = that.selectComponent("#canvasRingE"); // that.canvasRingF = that.selectComponent("#canvasRingF"); // that.canvasRingL = that.selectComponent("#canvasRingL"); // that.canvasRingD.showCanvasRing(); // that.canvasRingE.showCanvasRing(); // that.canvasRingF.showCanvasRing(); // that.canvasRingL.showCanvasRing(); }, onShow: function (options) { var that = this; var status = JSON.parse(wx.getStorageSync('status')) || ''; var title = wx.getStorageSync('title') || '' var status =status ? status:that.data.status; title = title ? title : '冷链追溯系统' this.setData({ status, title }) //获取新闻 this.getNewsList(); /**沃森新 */ // this.setPie4Chart({total:8,abnormal:3,normal:8}); // this.setCard_top_right_butChart([{"name":"北京","orderNum":50},{"name":"上海","orderNum":30},{"name":"安徽","orderNum":20},{"name":"成都","orderNum":20},{"name":"广东","orderNum":20},]); // this.product_two_left_two([ // {name:'标签1',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]}, // {name:'标签2',data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]}, // {name:'',data:[30.0, 42.2, 43.3, 44.5, 46.3, 80.2, 200.3, 123.4, 223.0, 26.5, 12.0, 6.2]}, // ]) // this.setCardPieTwo(); // this.setCard3dBar(); // this.setKLine(); var diagamList = [ {name: "标签1",value: 0,unNormalTotal:0,symbolSize:40}, {name: "标签2",value: 0,unNormalTotal:0,symbolSize:40}, {name: "标签3",value: 1,unNormalTotal:2,symbolSize:40}, {name: "标签4",value: 3,unNormalTotal:1,symbolSize:40}, {name: "标签5",value: 3,unNormalTotal:1,symbolSize:40}, ] this.setCardDiagram(diagamList); // this.setCardFivePie(); this.setCardXuTuOption({normalTotal:15}); // this.setCardFivePie_rght(); // var cardSixBarList = [{"name":"北京","orderNum":50},{"name":"上海","orderNum":30},{"name":"安徽","orderNum":20},{"name":"成都","orderNum":20},{"name":"广东","orderNum":20}]; // var cardSixLineList = [{name:'标签1',data:[10,15,18,25,15]},{name:'标签2',data:[14,16,20,28,17]},{name:'标签3',data:[20,24,28,32,22]}] // this.setCardSixBar(cardSixBarList,cardSixLineList); // var sixRightBarList = [{data:[120, 132, 101, 134, 90, 230, 210]},{data:[220, 182, 191, 234, 290, 330, 310]},{data:[150, 232, 201, 154, 190, 330, 410]}] // this.setCardSixRightBar(sixRightBarList); // var sevenCardPieList = [ // {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]}, // {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]}, // {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]}, // {data:[{ name: "标签1", value: 50 },{ name: "标签2", value: 20 },{ name: "标签3", value: 10 }]}, // ] // this.setSevenCardPie(sevenCardPieList); // var sevenCardPieList = [ // { name: "标签1", value: 50 }, // { name: "标签2", value: 20 }, // ] // this.setCardSenvenPie(sevenCardPieList); // var eightBarLeftList = [ // {name:'标签1',data:[2.0, 4.9, 7.0, 23.2,]}, // {name:'标签2',data:[2.6, 5.9, 9.0, 21.4,]}, // {name:'标签3',data:[3.6, 6.9, 8.0, 18.4,]}, // {name:'标签4',data:[4.6, 7.9, 7.0, 16.4,]}, // ] // this.setCardEightBar(eightBarLeftList); // var eightRightBarList = [ // {name:'标签1',data:[10, 20, 30, 40, 50, 60]}, // {name:'标签2',data:[10, 20, 30, 40, 50, 60]}, // {name:'标签3',data:[10, 20, 30, 40, 50, 60]}, // {name:'',data:[15,22,32,45,48,67]} // ] // this.setCardEightRightBar(eightRightBarList); // this.setCardNineBar([{"name":"二价流脑","orderNum":50},{"name":"胶囊","orderNum":30},{"name":"产品1","orderNum":20},{"name":"颗粒","orderNum":20},]); // var nineRightBarList = [{name:'生产',data:[120, 132, 101, 134, 90, 230, 210]},{name:'销售',data:[220, 182, 191, 234, 290, 330, 310]},{name:'在途',data:[150, 232, 201, 154, 190, 330, 410]},{name:'交付',data:[158, 242, 141, 164, 180, 230, 510]}] // this.setCardNineRightBar(nineRightBarList); /**沃森新 */ //获取token,若无则判定用户是游客访问，不进行任何请求 var token = wx.getStorageSync('token'); this.setData({ token, chainTempList:[], tempList:[] }) if (!token) { setTimeout(function () { that.noLogin() }, 500) return; } //地区产品统计 this.setCardLeftFive({ name:['北京', '云南', '广州', '辽宁', '山东', '重庆'], data:[ {name:'2022',data:[18203, 23489, 29034, 104970, 131744, 630230]}, {name:'2012',data:[19325, 23438, 31000, 121594, 134141, 681807]}, ] }); // 主产品查询 this.getsignProduct(); //主产品使用、库存、总数统计 this.getSignProductUseAndStackState(); //单一主产品不同地区使用情况 this.getSingleProductUseZoneStat(); // 获取按钮 this.getUserDefaultMenuList(); // 图5 主产品在库、在途、结束统计 this.getSignProductState(); }, getOrderWarnOption(list){ var fontSize = 12 var fontColor = "#999999" return { color:["#0079FF","#FF723A","#EA1C43"], title: { show:false }, grid:{ top:"5%", left:"5%", right:"5%", bottom:"5%", }, tooltip: { show:true }, legend: { data:list.map(item=>item.name), icon:"rect", orient:"vertical", top:"middle", right:"10%", itemWidth:fontSize, itemHeight:fontSize, textStyle:{ fontSize:fontSize, color:fontColor, }, formatter(name){ return name+" " + list.filter(item=>item.name == name)[0].num }, }, series: [ { type: 'pie', silent:0, radius: ["40%", '90%'], center: ["30%", '50%'], label:{ position:'inside', formatter:"{d}%", }, itemStyle:{ borderColor:"#ffffff", borderWidth:2, }, data: list.filter(item=>{ item.value = item.num return item }), }, ] } }, getCysOrderOption(list){ var fontSize=8; return { color:["#7190F6","#FF723A","#EA1C43"], title: { show:false }, grid:{ top:"5%", left:"8%", right:"5%", bottom:"14%", }, xAxis: { type: 'category', axisTick:{show:false,}, axisLine:{lineStyle:{color:"#DEE3FF",}}, axisLabel:{color:"#999999", fontSize,interval: 0}, data: list.map(item=>item.name), }, yAxis: { type: 'value', splitLine:{lineStyle:{color:"#DEE3FF",}}, axisLabel:{color:"#999999", fontSize,}, }, series: [ { type: 'bar', barMaxWidth:30, barMinHeight:10, data: list.map(item=>item.orderNum), }, ] } }, setTemp(temperature) { var that = this; that.ecWen = that.selectComponent('#ecDomWen'); that.ecWen.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); var option = that.getTempOption(); option.xAxis.data = temperature.map(v => v.createTime.replace(" ", "\n")); option.series[0].data = temperature.map(v => v.temp); chart.setOption(option); that.wenChart = chart; return chart; }); }, showMap(markers) { var that = this; var token = wx.getStorageSync('token'); this.mapCtx = wx.createMapContext('home_map'); var points = [] for (var i in markers) { if(i==0){ points.push({ width:54, height:54, latitude:Number(markers[i].lat), longitude:Number(markers[i].lng), iconPath:"/img/map_icon1.png", }) } else if(i == markers.length-1){ points.push({ width:54, height:54, latitude:Number(markers[i].lat), longitude:Number(markers[i].lng), iconPath:"/img/index_icon_1000.png", }) } markers[i].latitude = Number(markers[i].lat) markers[i].longitude = Number(markers[i].lng) delete markers[i].lat delete markers[i].lng } that.setData({ markers:points, polyline: [{ color: '#2D59E6', width: 2, points: markers, }], latitude:markers.length != 0 ? markers[0].latitude : '', longitude:markers.length != 0 ? markers[0].longitude : '' }); that.mapCtx.includePoints({ points: markers || [], padding: [50, 50, 50, 50] }) }, noLogin() { var temp = [ {temp: '23.3',createTime: "2021-12-03 17:06:40"}, {temp: '23.2', createTime: "2021-12-03 17:08:10"}, {temp: '23.1', createTime: "2021-12-03 17:09:40"}, {temp: '23.1', createTime: "2021-12-03 17:11:10"}, {temp: '23.3', createTime: "2021-12-03 17:12:40"}, {temp:' 23.2', createTime: "2021-12-03 17:14:10"}, {temp: '23.3', createTime: "2021-12-03 17:15:40"}, {temp: '23.3', createTime: "2021-12-03 17:18:40"}, {temp: '23.2', createTime: "2021-12-03 17:26:10"}, {temp: '23.2', createTime: "2021-12-03 17:32:10"} ] //设备定位列表 var markerList = [{ id: 1, lat: "49.828921", lng: "122.956163", lastTemp: 29.2, transportType: '10', status: '10', }, { id: 2, lat: "39.898959", lng: "116.188584", lastTemp: 19.2, transportType: '40', status: '00', }, { id: 3, lat: "29.828457", lng: "120.495225", lastTemp: 29.3, transportType: '40', status: '10', }, { id: 4, lat: "21.358161", lng: "111.003038", lastTemp: 29.5, transportType: '30', status: '20', }, { id: 5, lat: "38.948484", lng: "120.846788", lastTemp: 29.8, transportType: '20', status: '10', }, { id: 6, lat: "33.785733", lng: "104.850694", lastTemp: 28.2, transportType: '10', status: '00', }, { id: 7, lat: "29.225357", lng: "121.306968", lastTemp: 27.2, transportType: '30', status: '00', }, ] this.showMap(markerList); this.setData({ chainTempList:temp, tempList:temp, },()=>{ this.setTemp(temp); }) //地区产品统计 this.setCardLeftFive({ name:['北京', '云南', '广州', '辽宁', '山东', '重庆'], data:[ {name:'2022',data:[18203, 23489, 29034, 104970, 131744, 630230]}, {name:'2012',data:[19325, 23438, 31000, 121594, 134141, 681807]}, ] }); const cardTwo_leftOne = [ {stack: 0, end: 1, productName: "阿莫西林", trans: 0}, {stack: 0, end: 1, productName: "红霉素", trans: 0}, {stack: 0, end: 1, productName: "红霉素", trans: 0}, ] this.setCard_two_left_one(cardTwo_leftOne); }, showMap1(markers) { var that = this; var token = wx.getStorageSync('token'); this.mapCtx = wx.createMapContext('home_map'); for (var i in markers) { markers[i].bId = markers[i].id markers[i].id = Number(i) markers[i].width = 54 markers[i].height = 54 markers[i].iconPath = "/img/index_icon_" + markers[i].transportType + '' + markers[i].status + ".png" markers[i].latitude = Number(markers[i].lat) markers[i].longitude = Number(markers[i].lng) delete markers[i].lat delete markers[i].lng } that.setData({ markers, latitude:markers.length != 0 ? markers[0].latitude : '', longitude:markers.length != 0 ? markers[0].longitude : '' },()=>{ if(markers.length!=0 && token){ //地图数据加载完成后，获取第一条数据的详情 that.getListInfo(markers[0].bId); that.getListChainTemperature(markers[0].bId); }else{ var temp = [ {temp: '23.3',createTime: "2021-12-03 17:06:40"}, {temp: '23.2', createTime: "2021-12-03 17:08:10"}, {temp: '23.1', createTime: "2021-12-03 17:09:40"}, {temp: '23.1', createTime: "2021-12-03 17:11:10"}, {temp: '23.3', createTime: "2021-12-03 17:12:40"}, {temp:' 23.2', createTime: "2021-12-03 17:14:10"}, {temp: '23.3', createTime: "2021-12-03 17:15:40"}, {temp: '23.3', createTime: "2021-12-03 17:18:40"}, {temp: '23.2', createTime: "2021-12-03 17:26:10"}, {temp: '23.2', createTime: "2021-12-03 17:32:10"} ] that.setTemp(temp) } }); that.mapCtx.includePoints({ points: markers, padding: [50, 50, 50, 50] }) }, getMapInfo(e) { var that = this; var index = e.detail.markerId; if (that.data.token) { for (var i in that.data.markers) { if (that.data.markers[i].id == index) { //冷链信息 that.getListInfo(that.data.markers[i].bId); //冷链温度曲线 that.getListChainTemperature(that.data.markers[i].bId); return; } } } else { wx.navigateTo({ url: '/pages/login/login', }) } }, onPageScroll:function(e){ this.setData({ scrollTop:e.scrollTop }) }, getList() { var that = this; app.requestP({ url: '/index/listChainLocal', method: 'post', contentType: ' application/json' }).then(res => { var result = [] res.data.data && res.data.data.map(item=>{ if(item.lng != 0 && item.lat != 0){ result.push(item) } }) that.showMap(result); }).catch(err=>{ app.showToptip(that,'error',err.data.msg) }) }, getListInfo(id) { var that = this; app.requestP({ url: '/index/getChainInfo', method: 'post', contentType: 'application/json', data: { id } }).then(res => { const { name, status, updateTime, lastTemperature, minTemperature, maxTemperature } = res.data.data; that.setData({ //数据处理 mapTopData: { name: name || '暂无', status: status == '00' ? '正常' : status == '10' ? '黄色预警' : status == '20' ? '红色预警' : '暂无', updateTime: updateTime || '暂无', lastTemperature: lastTemperature ? lastTemperature + '℃' : '暂无', minTemperature: minTemperature ? minTemperature + '℃' : '暂无', maxTemperature: maxTemperature || '暂无' }, }) }).catch(err=>{ app.showToptip(that,'error',err.data.msg) }) }, getListChainTemperature(id) { var that = this; app.requestP({ url: '/index/listChainTemperature', method: 'post', contentType: 'application/json', data: { id }, }).then(res => { that.setData({ chainTempList: res.data.data, tempList:res.data.data }) that.setTemp(res.data.data); }).catch(err => { app.showToptip(that, 'error', '暂无温度数据'); }) }, setTransOption(temperature) { var that = this; that.ecWen = that.selectComponent('#llzsChartDom'); that.ecWen.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getTransOption(); option.xAxis.data = temperature.map(v => v.productTypeName); option.series[0].data = temperature.map(v => v.state10); option.series[1].data = temperature.map(v => v.state11); option.series[2].data = temperature.map(v => v.state20); chart.setOption(option); that.wenChart = chart; return chart; }); }, getTransOption() { return { title: { text: '数量', textStyle: { color: '#74788D', fontWeight: 'normal', fontSize: '16rpx' } }, tooltip: { show: false, trigger: 'axis' }, color: ['#7661FF', '#5AC8FA', '#00B972'], legend: { data: ['全程温控', '实时追溯', '追溯标签'], icon: "rect", // 设置形状 类型包括 circle，rect ，roundRect，triangle itemHeight: 11, itemWidth: 11, align: 'left', itemGap: 5, right: 10, top: 0, textStyle:{ color:'#999', } }, grid: { left: '0%', right: '0%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', nameTextStyle: { color: "#77869E", fontSize: 10 }, axisLine: { onZero: false, lineStyle: { color: "#999" } }, axisTick: { show: false }, splitLine: { show: false, }, data: ["产品一", "产品二", "产品三", "产品四"], }, yAxis: [{ type: 'value' }], series: [{ name: '追溯标签', type: 'bar', label: { show: true, position: 'top' }, symbolSize: '0', lineStyle: { width: 1 }, data: [50, 180, 290, 50] }, { name: '全程温控', type: 'bar', label: { show: true, position: 'top' }, symbolSize: '0', lineStyle: { width: 1 }, data: [200, 200, 292, 200] }, { name: '实时追溯', type: 'bar', label: { show: true, position: 'top' }, symbolSize: '0', lineStyle: { width: 1 }, data: [248, 290, 290, 240] } ] } }, getTempOption() { return { title: { text: '温度：℃', textStyle: { color: '#999', fontSize: 6, } }, grid: { top: "20%", left: "4%", right: "5%", bottom: "3%", containLabel: true }, xAxis: { type: 'category', // boundaryGap: false, nameTextStyle: { color: "#77869E", fontSize: 4 }, axisLine: { onZero: false, lineStyle: { color: "#cccccc" } }, axisTick: { show: false }, splitLine: { show: false, }, axisLabel: { show: true, textStyle: { color: '#999', //更改坐标轴文字颜色 fontSize: 5, //更改坐标轴文字大小 } }, data: ['16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30', '16:00 \n 2021-06-30'], // show: false }, yAxis: { type: 'value', splitNumber: 10, max: 40, axisLine: { lineStyle: { color: "#cccccc", }, show: true }, axisLabel: { show: true, textStyle: { color: '#999', //更改坐标轴文字颜色 fontSize: 5, //更改坐标轴文字大小 } }, splitLine: { show: false } }, series: [{ type: 'line', showSymbol: false, smooth: true, lineStyle: { width: 1, color: "#328EFD", //#D4D4D4 }, areaStyle: { origin: "start", color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#FFFFFF' // }, { offset: 1, color: '#4C96FE' //#D4D4D4 }], global: false } }, data: [18, 36, 25, 30, -20, 40, 33] }] } }, productTypeChipCount(userId) { var that = this; app.requestP({ url: '/index/productTypeChipCount', method: 'post', data: { userId } }).then(res => { that.setData({ productTypeChipCount: res.data.data }) const temperature = res.data.data; that.setPieChart(temperature.slice(0,6)); }).catch(err => { that.setData({ productTypeChipCount: [] }) }) }, setPieChart(temperature) { var that = this; var num = 0; var color = ['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393']; temperature.map(v => num += v.num); that.ecWen = that.selectComponent('#pieDom'); that.ecWen.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getPieChartOption(); option.color = color; option.series[0].data = temperature.map(v => { var per = v.num / num * 100; return { value:v.num, name: v.productTypeName+':'+ v.num + ' 占比' + per.toFixed(2) + '%' } }); chart.setOption(option); that.wenChart = chart; return chart; }); }, getPieChartOption() { return { legend: { top: 'bottom', show: false, }, grid: { left: '0%', right: '0%', bottom: '3%', containLabel: true }, // color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'], series: [{ type: 'pie', radius: [30, 60], center: ['50%', '50%'], itemStyle: { normal: { label: { formatter: function (v) { //文字中遇到空格就换行 let text = v.name.split(" ").join("\n"); return text; }, show: true, }, labelLine: { show: true, color:'' } }, }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, }, data: [{ value: 40, itemStyle:{ normal:{ color:'#45C2E0' } } }, { value: 38, }, { value: 32, }, { value: 30, }, ] }] } }, getChainStatus(userId) { var that = this; app.requestP({ url: '/index/getChainStatus', method: 'post', data: { userId } }).then(res => { const { alarmDTO, temperatureDTO, waringDTO, inTrans, inStore, inEnd, total } = res.data.data; that.setData({ temperatureDTO, waringDTO, inTrans, inStore, inEnd, total }) }).catch(err=>{ app.showToptip(that,'error',err.data.msg) }) }, getWarningState(userId) { var that = this; app.requestP({ url: '/index/warningState', method: 'post', data: { userId } }).then(res => { const { error11, error20, total10, total11, total20, warning11, warning20 } = res.data.data; that.setData({ error11, error20, total10, total11, total20, warning11, warning20 }, () => { // that.canvasRingA.showCanvasRing(); // that.canvasRingB.showCanvasRing(); // that.canvasRingC.showCanvasRing(); // that.canvasRingD.showCanvasRing(); // that.canvasRingE.showCanvasRing(); // that.canvasRingF.showCanvasRing(); // that.canvasRingG.showCanvasRing(); // that.canvasRingL.showCanvasRing(); }) }).catch(err=>{ app.showToptip(that,'error',err.data.msg) }) }, setMapCenter() { var that = this; var locations = that.data.markers; that.mapCtx.includePoints({ points: locations, padding: [50, 50, 50, 50] }) }, getUserInfo() { var that = this; app.requestP({ method: "post", url: "/user/getUserInfo", }).then(function (res) { var userId = res.data.data.userId; // that.getProductChipState(); that.productTypeChipCount(userId); that.getChainStatus(userId); // that.getWarningState(userId); }).catch(err => { app.showToptip(that, 'error', '请刷新重试'); }) }, transportationInfo() { var token = wx.getStorageSync('token'); if(!token){ wx.navigateTo({ url: '/pages/login/login', }) return; } var transportationJson = JSON.stringify(this.data.productChipStateList); wx.navigateTo({ url: '/pages/index/transportationInfo/transportationInfo?list=' + transportationJson, }) }, monitoringNum() { var token = wx.getStorageSync('token'); if(!token){ wx.navigateTo({ url: '/pages/login/login', }) return; } var productTypeChipCountJson = JSON.stringify(this.data.productTypeChipCount); wx.navigateTo({ url: '/pages/index/monitoringNum/monitoringNum?list=' + productTypeChipCountJson, }) }, packageInfo(){ var token = wx.getStorageSync('token'); if(!token){ wx.navigateTo({ url: '/pages/login/login', }) return; } var packageList = JSON.stringify(this.data.packageList); wx.navigateTo({ url: '/pages/index/packageInfo/packageinfo?list=' + packageList, }) }, expressInfo(){ var token = wx.getStorageSync('token'); if(!token){ wx.navigateTo({ url: '/pages/login/login', }) return; } var expressData = JSON.stringify(this.data.expressData); var title = JSON.stringify([{name:'出库',type:'o'},{name:'入库',type:'i'}]); var titleName = JSON.stringify({titleName:'出入库统计'}); wx.navigateTo({ url: '/pages/index/statics/statics?list=' +encodeURIComponent(expressData)+'&title='+title+'&titleName='+titleName, }) }, goAbnormal(){ wx.navigateTo({ url: '/pages/index/abnormal/abnormal', }) }, ordersInfo(){ wx.navigateTo({ url: '/pages/index/ordersList/ordersList', }) }, transporDetails(){ var temp = this.data.temp; var productName = this.data.productName; var {product10,product20,product30,product40,product50} = this.data; var token = wx.getStorageSync('token'); if(!token){ wx.navigateTo({ url: '/pages/login/login', }) return; } wx.navigateTo({ url: '/pages/index/transporDetails/transporDetails?temp='+encodeURIComponent(JSON.stringify(temp))+'&productName='+encodeURIComponent(JSON.stringify(productName))+'&productNum='+encodeURIComponent(JSON.stringify([product10,product20,product30,product40,product50])), }) }, onShareAppMessage() { return { title: 'cover-view', } }, monitoringNum() { var token = wx.getStorageSync('token'); if(!token){ wx.navigateTo({ url: '/pages/login/login', }) return; } var transportCityDataJson = JSON.stringify(this.data.transportCityData); wx.navigateTo({ url: '/pages/index/monitoringNum/monitoringNum?list=' + transportCityDataJson, }) }, getNewsList() { var that = this; app.requestP({ url: '/query/news', method: 'post', needToken: false, data: { keyword: '', pageNum: '1', pageSize: '5' } }).then(res => { that.setData({ newsList: res.data.data.map(item => { return { ...item, createTime: item.createTime.substring(item.createTime.length - 8) } }) }) }).catch(err => { app.showToptip(that, 'error', err.data.msg) }) }, goNewsInfo(e) { var id = e.currentTarget.dataset.id; wx.navigateTo({ url: '/pages/index/newsInfo/newsInfo?id=' + id, }) }, goNewsList() { wx.navigateTo({ url: '/pages/index/newList/newList', }) }, getUserDefaultMenuList() { var that = this; app.requestP({ url: '/userDeaultMenu/list', method: 'post', }).then(res => { that.setData({ systemMenu: res.data.data }) }).catch(err => { app.showToptip(that, 'error', err.data.msg) }) }, tapMenu(e) { let type = e.currentTarget.dataset.type let path = e.currentTarget.dataset.path; //判断token，若有则假设已经登录 if (!wx.getStorageSync('token')) { wx.redirectTo({ url: '/pages/login/login', }) return; } //获取用户信息，判断userInfo是否过期 let userInfo = wx.getStorageSync('userInfo'); const { loginRole, ifOverFlow, status } = userInfo; // this.matchPage(loginRole, ifOverFlow, status, path); app.globalData.tabarData = {loginRole, ifOverFlow, status, path}; wx.switchTab({ url: '/pages/workbench/workbench', }) }, goMessage:function(){ if(this.data.token){ wx.navigateTo({ url: '/pages/news/newList', }) }else{ wx.redirectTo({ url: '/pages/login/login', }) } }, // 沃森新 // 主产品查询 getsignProduct(){ app.requestP({ url: '/daping/signProduct', method: 'post', }).then(res => { this.setData({ tabLeftTop:res.data.data }) }).catch(err => { app.showToptip(this,'err',err.data.msg) }) }, // 主产品使用、库存、总数统计 getSignProductUseAndStackState(){ app.requestP({ url: '/daping/signProductUseAndStackState', method: 'post', }).then(res => { this.setPie4Chart(res.data.data) }).catch(err => { app.showToptip(this,'err',err.data.msg) }) }, setCard(e){ var index = e.currentTarget.dataset.index; this.setData({ cardIndex:index, // tabLeftTop_remark:this.data.tabLfeftTop[index].remark }) }, //单一主产品不同地区使用情况 getSingleProductUseZoneStat(){ app.requestP({ url: '/daping/singleProductUseZoneState', method: 'post', }).then(res=>{ this.setCard_top_right_butChart(res.data.data); this.setKLine(res.data.data); }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, setPie4Chart(list){ var that = this; var series = []; list.map((item,index)=>{ series.push(...that.pice4Chart("#23D9E9",index == 0 ? "20%" :index == 1 ? '50%':'80%',item.total,item.use_num,item.stack_num,item.name,'45%',)) }); that.pie4ChartConDom = that.selectComponent('#pie4ChartConDom'); that.pie4ChartConDom.init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); chart.setOption({ title: { show:false }, grid:{ top:"0%", left:"0%", right:"0%", bottom:"0%", }, color: ["red", "rgb(10,92,170)", "rgb(114,205,255)"], legend: { icon:"rect", top:10, right:0, itemWidth:20, itemHeight:20, textStyle:{ fontSize:16, color: "#D1E9F5", }, }, series:series, }); return chart; }) }, pice4Chart(color,pos,total,use_num,stack_num,name,top){ var that = this; var placeHolderStyle = { normal: { label: { show: false, formatter: function (v) { //文字中遇到空格就换行 let text = v.value; return text; }, }, labelLine: { show: true, }, }, }; const pieValue1 = { value1:(stack_num+use_num) / total, value2: 1 - (stack_num+use_num) / total }; const pieValue2 = { value1:use_num / total, value2:1 - use_num / total }; const pieValue3 = { value1: stack_num / total, value2: 1 - stack_num / total }; return [{ type: "pie", clockWise: true, //顺时加载 hoverAnimation: false, //鼠标移入变大 silent:false, radius: [20, 23], center: [pos, top], itemStyle: placeHolderStyle, data: [ { value: pieValue1.value1, itemStyle:{ normal:{ color:'#0e74ff' } } }, { value: pieValue1.value2, itemStyle:{ normal:{ color:"rgb(243,243,251)" } } } ], },{ type: "pie", clockWise: true, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [15, 18], silent:false, center: [pos, top], itemStyle: placeHolderStyle, data: [ { value: pieValue2.value1, itemStyle:{ normal:{ color:'#64a6ff' } } }, { value: pieValue2.value2, itemStyle:{ normal:{ color:"rgb(243,243,251)" } } } ], }, { type: "pie", clockWise: true, //顺时加载 hoverAnimation: false, //鼠标移入变大 silent:false, radius: [10, 13], center: [pos, top], itemStyle: placeHolderStyle, data: [ { value: pieValue3.value1, itemStyle:{ normal:{ color:'red' } } }, { value: pieValue3.value2, itemStyle:{ normal:{ color:"rgb(243,243,251)" } } } ], }] }, setCard_top_right_butChart(list){ var that = this; that.selectComponent('#cardBarChartConDom').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); list = list.map(item=>{ return {orderNum:item.total,name:item.city || 'N/A'} }) var option = that.getCysOrderOption(list); option.series = [{ type:'bar', barMaxWidth: 15, barMinHeight: 10, data:list.map(item=>item.orderNum), label: { show: true, position: 'inside' }, itemStyle:{ normal:{color:'#333FFF'} } }] chart.setOption(option); return chart; }); }, // 图5 主产品在库、在途、结束统计 getSignProductState(){ app.requestP({ url: '/daping/signProductState', method: 'post', }).then(res=>{ this.setCard_two_left_one(res.data.data); this.setKLine(res.data.data); }).catch(err=>{ app.showToptip(this,'err',err.data.msg) }) }, setCard_two_left_one(list){ var that = this; that.selectComponent('#product_two_left_one').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getStaticBarChart(); option.legend = { data:['在库','在途','结束'], icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.color = ['red','rgb(114,205,255)','rgb(10,92,170)'] option.grid.top='20%'; option.grid.bottom='13%'; option.series = []; option.xAxis.data = []; const echartsData = [ { name:'在库', data:list.map(item=>item.stack) }, { name:'结束', data:list.map(item=>item.end) }, { name:'在途', data:list.map(item=>item.trans) } ] option.xAxis.data = list.map(item=>item.productName); echartsData.map((item,index)=>{ option.series.push({ name:item.name, type: "bar", stack: "Ad", emphasis: { focus: "series", }, data:item.data }) }) console.log(option); chart.setOption(option); return chart; }) }, product_two_left_two(list){ var that = this; that.selectComponent('#product_two_left_two').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticBarChart(); option.series = []; option.legend = { data:list.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.grid.top='20%'; option.grid.bottom='13%'; list.map((item,index)=>{ option.series.push({ name:item.name, type: index != list.length -1 ? 'bar' :'line', // yAxisIndex: 1, data:item.data }); // if(index != list.length-1){ // delete option.series[index].yAxisIndex; // } }) chart.setOption(option); return chart; }) }, getStaticBarChart(){ return { xAxis: { type: "category", axisTick:{show:false,}, nameTextStyle: { color: "#77869E", fontSize: 8, }, axisLabel: { color: '#999999', fontSize: 8, }, axisLine: { onZero: false, lineStyle: { color: "#cccccc", }, }, data: ["Mon", "Tue", "Wed", "Thu",], }, yAxis: { type: "value", minInterval: 1, axisLine: { lineStyle: { color: "#cccccc", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, }, color: ["#7661FF", "#5AC8FA", "#00B972"], grid: { left: "3%", top: "8%", right: "4%", bottom: "3%", containLabel: true, }, series: [ { data: [120, 200, 150, 80, 70, 110, 130, 110], type: "bar", }, ], }; }, setCardPieTwo(list){ var that = this; that.selectComponent('#product_three_left_one').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticPieChart(); var itemStyle = { normal: { label: { show: true, formatter: function (v) { //文字中遇到空格 let text = v.name+'\n'+v.value; return text; }, }, labelLine: { show: true, length:4, length2:4, }, }, } option.series = [ { type: "pie", radius: "40%", center: ["50%", "25%"], itemStyle, label: { position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, { type: "pie", radius: "40%", center: ["50%", "75%"], percentPrecision:0, minShowLabelAngle:30, itemStyle, label: { position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, ] chart.setOption(option); return chart; }) }, getStaticPieChart(){ return { color: ["#964CC4", "#04A3CC", "#3B6AD5"], title: { show: false, }, grid: { top: "12%", left: "5%", right: "5%", bottom: "12%", }, series: [ // { // type: "pie", // radius: "50%", // center: ["50%", "25%"], // label: { // position: "inside", // formatter: "{d}%", // fontSize: 8, // color: '#fff', // }, // data: [ // { name: "在途", value: 50 }, // { name: "完成", value: 20 }, // { name: "待发运", value: 10 }, // ], // }, // { // type: "pie", // radius: "50%", // center: ["50%", "75%"], // percentPrecision:0, // minShowLabelAngle:30, // label: { // position: "inside", // formatter: "{d}%", // fontSize: 8, // color: '#fff', // }, // data: [ // { name: "在途", value: 50 }, // { name: "完成", value: 20 }, // { name: "待发运", value: 10 }, // ], // }, ] } }, setCardFivePie(){ var that = this; that.selectComponent('#product_five_left_one').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticPieChart(); option.color = ['rgb(91,132,206)','rgb(127,210,255)','rgb(44,87,226)']; var itemStyle = { normal: { label: { show: false, formatter: function (v) { //文字中遇到空格 let text = v.name+'\n'+v.value; return text; }, }, labelLine: { show: true, length:4, length2:4, }, }, } option.series = [ { type: "pie", radius: "80%", center: ["50%", "30%"], itemStyle, label: { position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, { type: "pie", radius: "80%", center: ["50%", "53%"], itemStyle, data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, { type: "pie", radius: "80%", itemStyle, center: ["50%", "77%"], data: [ { name: "标签1", value: 50 }, { name: "标签2", value: 20 }, { name: "标签3", value: 10 }, ], }, ] option.grid = { top: "12%", left: "10%", right: "0%", bottom: "12%", }, chart.setOption(option); return chart; }) }, setCard3dBar(){ var that = this; that.selectComponent('#product_three_left_two').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]] chart.setOption({ tooltip: {}, xAxis3D: { type: 'category', data: ['12a', '1a', '2a', '3a', '4a', '5a', '6a','7a', '8a', '9a', '10a', '11a','12p', '1p', '2p', '3p', '4p', '5p','6p', '7p', '8p', '9p', '10p', '11p'] }, yAxis3D: { type: 'category', data: ['Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', 'Sunday'] }, zAxis3D: { type: 'value' }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { // projection: 'orthographic' }, light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } } }, series: [ { type: 'bar3D', data: data.map(function (item) { return { value: [item[1], item[0], item[2]] }; }), shading: 'lambert', label: { fontSize: 16, borderWidth: 1 }, emphasis: { label: { fontSize: 20, color: '#900' }, itemStyle: { color: '#900' } } } ] }); return chart; }) }, setKLine(list){ var that = this; that.selectComponent('#product_four').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); list = list.map(item=>{ return {orderNum:item.total,name:item.city || 'N/A'} }) var option = that.getCysOrderOption(list); // lenged option.series = [{ type:'bar', barMaxWidth: 15, barMinHeight: 10, data:list.map(item=>item.orderNum), label: { show: true, position: 'inside' }, itemStyle:{ normal:{color:'#333FFF'} } }] chart.setOption(option); return chart; }) }, calculateMA(dayCount, data) { var result = []; for (var i = 0, len = data.length; i < len; i++) { if (i < dayCount) { result.push('-'); continue; } var sum = 0; for (var j = 0; j < dayCount; j++) { sum += +data[i - j][1]; } result.push(sum / dayCount); } return result; }, setCardDiagram(list){ var that = this; that.selectComponent('#product_four_left_two').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); chart.setOption({ backgroundColor: "transparent", tooltip: { formatter:function(params){ const {data:{name,value,unNormalTotal}} = params; return `${name}\n正常: ${value}\n预警: ${unNormalTotal}` } }, grid: {}, animationDurationUpdate: function (idx) { // 越往后的数据延迟越大 return idx * 100; }, color: ["red", "rgb(10,92,170)", "rgb(114,205,255)"], animationEasingUpdate: "bounceIn", series: [ { type: "graph", layout: "force", force: { repulsion: 100, //越大斥力越大 gravity: 0.05, //越大节点越往中心靠拢 edgeLength: 20, //值越小则长度越长 }, roam: true, draggable: true, symbolSize: 1, itemStyle: { // opacity: 0.9, color: () => { return ( 'red', 'rgb(114,205,255)', 'rgb(10,92,170)' ); }, }, label: { normal: { show: true, fontSize: 10, }, }, data: list }, ], }) return chart; }) }, setCardXuTuOption(testNum){ var that = this; let icon = "path://M512.584639,219.893708c40.41173,0.258019,73.19961-32.274913,73.199609-72.557634,0-40.025725-32.78788-72.559681-73.199609-72.559681-40.473163,0-73.196538,32.533956-73.196538,72.559681,0,40.089206,32.723375,72.557634,73.196538,72.557634z,m73.330666,16.396499H439.129058c-55.266258,0-91.39098,48.28336-91.390981,94.203594v220.945238c0,42.847553,60.780905,42.847553,60.780905,0V347.144224h11.782872v555.564273c0,59.179548,82.417649,57.316077,84.337434,0V582.569248h15.696162V902.96754c3.391108,60.650871,84.340506,54.817796,84.340506-0.258019V347.144224h9.800631v204.234406c0,42.837314,62.696594,42.837314,62.696594,0V330.433391c0.126962-45.72979-36.116531-94.143184-91.257876-94.143184z"; for (var index = 0; index < 4; index++) { that.selectComponent('#product_five_right_one'+index).init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); chart.setOption({ backgroundColor: "transparent", tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, formatter: "{b0}: {c0}%", }, grid: { containLabel: true, height: "200px", width: "auto", left: "0", top: "center", }, xAxis: { max: 100, splitLine: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, axisTick: { show: false, }, }, yAxis: { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { // margin: 10, fontSize: 20, color: "white", }, axisPointer: { label: { show: true, margin: 100, }, }, }, series: [ { type: "pictorialBar", symbolRepeat: "fixed", symbolMargin: "6!", label: { normal: { show: false, position: "right", offset: [3, 0], formatter: (param) => { return param.value.toFixed(0) + "%"; }, textStyle: { fontSize: 20, color: "white", }, }, }, symbolClip: true, symbolSize: [22, 30], symbolPosition: "start", symbolBoundingData: 100, data: [ { value: testNum.normalTotal, symbol: icon, itemStyle: { color: "#1DDBF9", }, }, ], z: 10, }, { type: "pictorialBar", itemStyle: { normal: { opacity: 0.2, }, }, animationDuration: 0, symbolRepeat: "fixed", symbolMargin: "6!", symbolSize: [22, 30], symbolBoundingData: 100, symbolPosition: "start", // symbolOffset: [ // 10, // 0 // ], data: [ { value: 100, symbol: icon, itemStyle: { color: "#1DDBF9", }, }, ], z: 5, }, ], }) return chart }) } }, setCardFivePie_rght(list){ var that = this; var placeHolderStyle = { normal: { label: { show: false, formatter: function (v) { //文字中遇到空格就换行 let text = v.value; return text; }, }, labelLine: { show: true, }, }, }; that.selectComponent('#product_five_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticPieChart(); var position = [['20%','20%'],['20%','50%'],['20%','80%'],['50%','20%'],['50%','50%'],['50%','80%'],['80%','20%'],['80%','50%'],['80%','80%']] position.map(item=>{ option.series.push({ type: "pie", clockWise: true, //顺时加载 hoverAnimation: false, //鼠标移入变大 silent:false, radius: [20, 23], center: item, itemStyle: placeHolderStyle, label:{ normal:{ show:true, position:'center', color:'#485465', formatter:'{d}', emphasis:{ show:true } } }, data: [ { value: 0.6, itemStyle:{ normal:{ color:'#0e74ff' } } }, { value: 0.4, itemStyle:{ normal:{ color:"rgb(243,243,251)" } } } ] }) }) chart.setOption(option) return chart; }) }, setCardSixBar(list,lineList){ var that = this; that.selectComponent('#product_six_left').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var colors = ['#F71404','#2D59E6','#71CCFF'] var option = that.getCysOrderOption(list); option.color = ['rgb(243,243,251)']; option.grid.top = '20%' option.yAxis.axisLabel.color = '#000'; option.legend = { data:lineList.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } lineList.map((item,index)=>{ option.series.push({ name:item.name, type:'line', data:item.data, lineStyle:{ normal:{ color:colors[index] } }, itemStyle:{ normal:{ color:colors[index] } } }) }) chart.setOption(option); return chart }) }, setCardSixRightBar(list){ var that = this; that.selectComponent('#product_six_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.setCardLineTotal(); option.series = []; list.map(item=>{ option.series.push({ type: 'line', stack: 'Total', areaStyle: {}, showSymbol:false, emphasis: { focus: 'series' }, data: item.data, }) }) chart.setOption(option) return chart; }) }, setCardLineTotal(){ return { xAxis: { type: "category", axisTick:{show:false,}, nameTextStyle: { color: "#77869E", fontSize: 8, }, axisLabel: { color: '#999999', fontSize: 8, }, axisLine: { onZero: false, lineStyle: { color: "#cccccc", }, }, data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], }, yAxis: { type: "value", minInterval: 1, axisLabel:{color:"#000", fontSize:8,}, axisLine: { lineStyle: { color: "#cccccc", }, show: true, }, }, color: ["#7661FF", "#5AC8FA", "#00B972"], grid: { left: "3%", top: "5%", right: "4%", bottom: "3%", containLabel: true, }, series: [ { data: [120, 200, 150, 80, 70, 110, 130, 110], type: "line", }, ] } }, setSevenCardPie(list){ var that = this; that.selectComponent('#product_seven_left').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var itemStyle = { normal: { label: { show: false, formatter: function (v) { //文字中遇到空格 let text = v.name+'\n'+v.value; return text; }, }, labelLine: { show: true, length:4, length2:4, }, }, } var option = this.getStaticPieChart(); option.color = ['rgb(247,20,4)','rgb(127,210,255)','rgb(44,88,288)']; var center = [["50%", "10%"],["50%", "35%"],["50%", "60%"],["50%", "85%"]]; option.series = []; list.map((item,index)=>{ option.series.push({ type: "pie", radius: ['40%','70%'], center: center[index], itemStyle, label: { position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data: item.data, }) }) chart.setOption(option) return chart }) }, setCardSenvenPie(list){ var that = this; that.selectComponent('#product_seven_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = this.getStaticPieChart(); option.series = []; option.color = ['#FFAF36','#7A4AFE'] option.legend = { data:list.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.series = [{ type: "pie", radius: "80%", center: ["50%", "50%"], label: { show:false, position: "inside", formatter: "{d}%", fontSize: 8, color: '#fff', }, data:list, }] chart.setOption(option); return chart; }) }, setCardEightBar(list){ var that = this; that.selectComponent('#product_eight_left').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getStaticBarChart(); option.series = []; option.legend = { data:list.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.grid.top='20%'; option.grid.bottom='13%'; list.map((item,index)=>{ option.series.push({ name:item.name, type: 'bar', data:item.data }); }) chart.setOption(option); return chart; }); }, setCardEightRightBar(list){ var that = this; that.selectComponent('#product_eight_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getStaticBarChart(); option.title = { text: '历来所有疫苗的数据', top:'10%', textStyle: { color: '#999', fontSize: 6, } } option.legend = { data:list.map(item=>item.name), icon:"circle", top:"2%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.grid = { top:'20%', bottom:'15%', right:'15%', left:'15%' } option.color = ['#26E657','#FFAF36','#F71404']; option.yAxis = [ { type: 'value', // min: 0, // max: 250, interval: 50, minInterval: 1, axisLine: { lineStyle: { color: "#cccccc", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, }, { type: 'value', min: 0, max:25, interval: 5, // minInterval: 1, axisLine: { lineStyle: { // color: "", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, } ]; option.series = []; list.map((item,index)=>{ option.series.push({ name: item.name, type: index != list.length -1 ? 'bar' :'line', stack: "Ad", emphasis: { focus: "series", }, data:item.data, }) }) chart.setOption(option); return chart; }) }, setCardNineBar(list){ var that = this; that.selectComponent('#product_nine_left').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.getCysOrderOption(list); option.title = { text: '产品分类信息', top:'10%', textStyle: { color: '#999', fontSize: 6, } } option.grid = { top:"25%", left:"13%", right:"15%", bottom:"14%", } option.yAxis = [ { type: 'value', // min: 0, // max: 250, // interval: 50, minInterval: 1, axisLine: { lineStyle: { color: "#cccccc", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, }, { type: 'value', min: 0, max:25, interval: 5, // minInterval: 1, axisLine: { lineStyle: { // color: "", }, show: false, }, axisLabel: { color: "#999999", fontSize: 8, }, } ]; chart.setOption(option); return chart; }) }, setCardNineRightBar(list){ var that = this; that.selectComponent('#product_nine_right').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = that.setCardLineTotal(); option.series = []; option.legend = { data:list.map(item=>item.name), icon:"circle", top:"5%", right:"auto", itemWidth:8, itemHeight:8, textStyle:{ fontSize:8, color:'#485465', }, } option.yAxis = { type: "value", // minInterval: 1, axisLine: { lineStyle: { color: "#cccccc", }, }, axisLabel: { color: "#999999", fontSize: 8, }, }, option.grid.top = '20%'; option.grid.right = '10%'; list.map(item=>{ option.series.push({ name:item.name, type: 'line', stack: 'Total', areaStyle: {}, showSymbol:false, emphasis: { focus: 'series' }, data: item.data, }) }) chart.setOption(option) return chart; }) }, // 地区产品统计 setCardLeftFive(list){ var that = this; that.selectComponent('#product_five').init((canvas, width, height, dpr) => { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); var option = { xAxis: { type: 'value', axisLabel: { show: false } }, grid:{ top:0, left: '3%', right: '4%', bottom: '3%', containLabel: true }, yAxis: { type: 'category', data: list.name.map(item=>item), axisTick: { show: false }, axisLabel:{color:"#999999", fontSize:9,}, axisLine: { lineStyle: { color: '#DEE3FF' } }, }, series:list.data.map(item=>{ return{ name:item.name,type:'bar',data:item.data } }) } chart.setOption(option); return chart; }) }, })