22

pages/index/index.js

@@ -202,18 +202,15 @@ Page({
     // 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 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 },
@@ -270,6 +267,12 @@ Page({
     this.getUserDefaultMenuList();
     // 图5 主产品在库、在途、结束统计
     this.getSignProductState();
+    // 主产品正常、预警统计
+    this.getSignPorductNormalWarningState();
+    // 主产品使用量、生产量统计
+    this.getSignProductUsedProduceState();
+    // 主产品不同年度 使用量统计
+    this.getSignPrroductYearUsedProduceState();
   },
   getOrderWarnOption(list){
     var fontSize = 12
@@ -515,6 +518,32 @@ Page({
       {stack: 0, end: 1, productName: "红霉素", trans: 0},
     ]
     this.setCard_two_left_one(cardTwo_leftOne);
+    //  主产品正常、预警统计
+    this.setCardEightBar([
+      {normal: 1, warning: 0, product_name: "阿莫西林"},
+      {normal: 0, warning: 1, product_name: "红霉素"},
+      {normal: 1, warning: 9, product_name: "新型冠状病毒疫苗"}
+    ]);
+    var list = [
+      {product_name: "阿莫西林",data:[{data: 1,index: 39,color:"#2D59E6"},{data:1,index:872,color:"#71CCFF"}]},
+      {product_name: "红霉素",data:[{data:1,index: 266,color: "#2D59E6"},{data: 1,index: 862,color:"#71CCFF"}]},
+      {product_name: "新型冠状病毒疫苗",data:[{data:10,index: 555, color: "#2D59E6"},{data:1,index:200,color:"#71CCFF"}]},
+
+    ];
+    for (let index = 0; index < list.length; index++) {
+      for (let lindex = 0; lindex < list[index].data.length; lindex++) {
+        var color = list[index].data[lindex].color;
+        var total = list[index].data[lindex].data;
+        var itemIndex = list[index].data[lindex].index;
+        that.setCardFivePie_rght(color,total,itemIndex);
+      }
+    }
+    var seriesSixBar = [
+      {name: 2022, type: "line", stack: "Total",data:[1, 1, 6]},
+      {name: 2021, type: "line", stack: "Total",data:[4, 0,0]},
+    ]
+    var cardSixLineList = ["阿莫西林", "红霉素", "新型冠状病毒疫苗"];
+    this.setCardSixBar(seriesSixBar,cardSixLineList);
   },
   showMap1(markers) {
     var that = this;
@@ -1502,24 +1531,15 @@ Page({
           color:'#485465',
         },
       }
-      option.color = ['red','rgb(114,205,255)','rgb(10,92,170)']
+      option.color = ['#2D59E6','#FFAF36','#7FD1FF']
       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)
-        }
+        {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)=>{
@@ -1533,7 +1553,6 @@ Page({
           data:item.data
         })
       })
-      console.log(option);
       chart.setOption(option);
       return chart;
     })
@@ -2124,7 +2143,39 @@ Page({
       })
     }
   },
-  setCardFivePie_rght(list){
+  // 主产品使用量、生产量统计
+  getSignProductUsedProduceState(){
+    var that = this;
+    app.requestP({
+      url: '/daping/signProductUsedProduceState',
+      method: 'post',
+    }).then(res=>{
+      this.setData({
+        statisticSproductList:res.data.data.map(item=>{
+          return {
+            product_name:item.product_name,
+            data:[
+              {data:item.produce,index:Math.floor(Math.random()*1000),color:'#2D59E6'},
+              {data:item.end,index:Math.floor(Math.random()*1000),color:'#71CCFF'},
+            ]
+          }
+        }),
+      },()=>{
+        var list = that.data.statisticSproductList;
+        for (let index = 0; index < list.length; index++) {
+          for (let lindex = 0; lindex < list[index].data.length; lindex++) {
+            var color = list[index].data[lindex].color;
+            var total = list[index].data[lindex].data;
+            var itemIndex = list[index].data[lindex].index;
+            that.setCardFivePie_rght(color,total,itemIndex);
+          }
+      }
+      })
+    }).catch(err=>{
+      app.showToptip(this,'err',err.data.msg)
+    })
+  },
+  setCardFivePie_rght(color,total,itemIndex){
     var that = this;
     var placeHolderStyle = {
       normal: {
@@ -2141,59 +2192,91 @@ Page({
         },
       },
     };
-    that.selectComponent('#product_five_right').init((canvas, width, height, dpr) => {
+    that.selectComponent('#product_five_right'+itemIndex).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
-              }
-            }
+      var option = that.getStaticPieChart();
+      option.series = [];
+      option.color = [color];
+      option.series.push({
+        type: "pie",
+        silent: 1,
+        radius: ["65%", "80%"],
+        label: {
+          show: false,
+        },
+        labelLine: 0,
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: "40",
+            fontWeight: "bold",
           },
-          data: [
-            {
-              value: 0.6,
-              itemStyle:{
-                normal:{
-                  color:'#0e74ff'
-                }
-              }
+        },
+        data: [
+          {
+            value:total,
+            label: {
+              show: true,
+              fontSize: 8 * 1.5,
+              color: '#485465',
+              position: "center",
+              formatter: "{c}",
             },
-            {
-              value: 0.4,
-              itemStyle:{
-                normal:{
-                  color:"rgb(243,243,251)"
-                }
+          },
+          // { value: 55 ,},
+        ],
+      })
+      chart.setOption(option);
+      return chart;
+    })
+  },
+  // 主产品不同年度 使用量统计
+  getSignPrroductYearUsedProduceState(){
+    app.requestP({
+      url: '/daping/signPrroductYearUsedProduceState',
+      method: 'post',
+    }).then(res=>{
+      var xAxisName = [];
+      var seriesYear = [];
+      var series = [];
+      res.data.data.map((item,index)=>{
+        item.map((itemChild)=>{
+          if(xAxisName.indexOf(itemChild.productName) == -1){
+            xAxisName.push(itemChild.productName);
+          }
+          if(seriesYear.indexOf(itemChild.year) == -1){
+            seriesYear.push(itemChild.year);
+            series.push({
+              name:itemChild.year,
+              type: "line",
+              stack: "Total",
+              data:[itemChild.produce]
+            })
+          }else{
+            series.map((serItem,i)=>{
+              if(serItem.name == itemChild.year){
+                series[i].data.push(itemChild.produce)
               }
-            }
-          ]
+              if(serItem.name != itemChild.year){
+                series[i].data.push(0);
+              }
+            })
+          }
         })
+        if(index == res.data.data.length-1){
+          this.setCardSixBar(series,xAxisName);
+          this.setCardSixRightBar(series,xAxisName)
+        }
       })
-      chart.setOption(option)
-      return chart;
+    }).catch(err=>{
+      app.showToptip(this,'err',err.data.msg)
     })
   },
-  setCardSixBar(list,lineList){
+  setCardSixBar(lineList,xAxisName){
     var that = this;
     that.selectComponent('#product_six_left').init((canvas, width, height, dpr) => {
       const chart = echarts.init(canvas, null, {
@@ -2202,14 +2285,24 @@ Page({
         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';
+      var option =  that.getStaticBarChart();
+      option.color = ['#F71404','#2D59E6','#71CCFF'];
+      option.grid.top = '26%'
+      option.series = [];
+      option.xAxis.data = xAxisName;
+      option.title={
+        text: '单位：支',
+        left: 'right',
+        top:'15%',
+        textStyle: {
+          color: '#666',
+          fontSize: 12,
+        }
+      },
       option.legend = {
-        data:lineList.map(item=>item.name),
+        data:lineList.map(item=>item.name+''),
         icon:"circle",
-        top:"2%",
+        top:"10%",
         right:"auto",
         itemWidth:8,
         itemHeight:8,
@@ -2220,7 +2313,7 @@ Page({
       }
       lineList.map((item,index)=>{
         option.series.push({
-          name:item.name,
+          name:item.name+'',
           type:'line',
           data:item.data,
           lineStyle:{
@@ -2239,7 +2332,7 @@ Page({
       return chart
     })
   },
-  setCardSixRightBar(list){
+  setCardSixRightBar(lineList,xAxisName){
     var that = this;
     that.selectComponent('#product_six_right').init((canvas, width, height, dpr) => {
       const chart = echarts.init(canvas, null, {
@@ -2249,16 +2342,47 @@ Page({
       });
       var option = this.setCardLineTotal();
       option.series = [];
-      list.map(item=>{
+      var colors = ['#F71404','#2D59E6','#71CCFF'];
+      option.color = ['#F71404','#2D59E6','#71CCFF'];
+      option.grid.top = '26%'
+      option.xAxis.data = xAxisName;
+      option.title={
+        text: '单位：支',
+        left: 'right',
+        top:'15%',
+        textStyle: {
+          color: '#666',
+          fontSize: 12,
+        }
+      },
+      option.legend = {
+        data:lineList.map(item=>item.name+''),
+        icon:"circle",
+        top:"10%",
+        right:"auto",
+        itemWidth:8,
+        itemHeight:8,
+        textStyle:{
+          fontSize:8,
+          color:'#485465',
+        },
+      }
+      lineList.map((item,index)=>{
         option.series.push({
-          type: 'line',
-          stack: 'Total',
+          name:item.name+'',
+          type:'line',
+          data:item.data,
           areaStyle: {},
-          showSymbol:false,
-          emphasis: {
-            focus: 'series'
+          lineStyle:{
+            normal:{
+              color:colors[index]
+            }
           },
-          data: item.data,
+          itemStyle:{
+            normal:{
+              color:colors[index]
+            }
+          }
         })
       })
       chart.setOption(option)
@@ -2401,6 +2525,17 @@ Page({
       return chart;
     })
   },
+  // 主产品正常、预警统计
+  getSignPorductNormalWarningState(){
+    app.requestP({
+      url: '/daping/signPorductNormalWarningState',
+      method: 'post',
+    }).then(res=>{
+      this.setCardEightBar(res.data.data)
+    }).catch(err=>{
+      app.showToptip(this,'err',err.data.msg)
+    })
+  },
   setCardEightBar(list){
     var that = this;
     that.selectComponent('#product_eight_left').init((canvas, width, height, dpr) => {
@@ -2411,8 +2546,16 @@ Page({
       });
       var option =  that.getStaticBarChart();
       option.series = [];
+      option.grid.top='20%';
+      option.grid.bottom='13%';
+      option.xAxis.data = list.map(item=>item.product_name);
+      const echartsData = [
+        {name:'正常',data:list.map(item=>item.normal)},
+        {name:'报警',data:list.map(item=>item.warning)},
+      ]
+      option.color = ['#2D59E6','#E1291C']
       option.legend = {
-        data:list.map(item=>item.name),
+        data:echartsData.map(item=>item.name),
         icon:"circle",
         top:"2%",
         right:"auto",
@@ -2423,13 +2566,14 @@ Page({
           color:'#485465',
         },
       }
-      option.grid.top='20%';
-      option.grid.bottom='13%';
-      list.map((item,index)=>{
+      echartsData.map((item,index)=>{
         option.series.push({
-          name:item.name,
+          name: item.name,
           type: 'bar',
-          data:item.data
+          emphasis: {
+            focus: "series",
+          },
+          data:item.data,
         });
       })
       chart.setOption(option);
@@ -2446,7 +2590,8 @@ Page({
       });
       var option = that.getStaticBarChart();
       option.title = {
-        text: '历来所有疫苗的数据',
+        show:false,
+        text: '',
         top:'10%',
         textStyle: {
           color: '#999',
@@ -2512,7 +2657,7 @@ Page({
       list.map((item,index)=>{
         option.series.push({
           name: item.name,
-          type: index != list.length -1 ? 'bar' :'line',
+          type: 'bar',
           stack: "Ad",
           emphasis: {
             focus: "series",

pages/index/index.wxml

@@ -215,6 +215,13 @@
     </view>
     <view class="card_eight">
       <view class="product_All">
+        <view class="product_name">
+          <view class="card_text">产品状态统计</view>
+          <view class="card_unit">单位：支</view>
+        </view>
+        <view class="card_but">
+          <ec-canvas id="product_eight_left" canvas-id="product_eight_left" ec="{{ Ec }}"></ec-canvas>
+        </view>
         <!-- <view class="card_left">
           <ec-canvas id="product_eight_left" canvas-id="product_eight_left" ec="{{ Ec }}"></ec-canvas>
         </view>
@@ -225,12 +232,65 @@
     </view>
     <view class="card_nine">
       <view class="product_All">
+        <view class="product_name">
+          <view class="card_text">疫苗年度使用情况</view>
+        </view>
+        <view class="card_pie_lenged">
+          <view>
+            <view style="background-color: #2D59E6;"></view>
+            <text>使用量</text>
+          </view>
+          <view style="padding-left: 30rpx;">
+            <view style="background-color: #7FD1FF;"></view>
+            <text>使用量</text>
+          </view>
+        </view>
+        <view class="card_pie">
+          <view class="card_product_one" wx:for="{{statisticSproductList}}" wx:for-item="item" wx:for-index="index" wx:key="{{index}}">
+            <view class="card_product_pie" wx:for="{{item.data}}" wx:for-item="items" wx:for-index="indexs" wx:key="indexs">
+              <ec-canvas id="{{'product_five_right'+items.index}}" canvas-id="{{'product_five_right'+items.index}}" ec="{{ Ec }}"></ec-canvas>
+            </view>
+          </view>
+        </view>
+        <view class="card_pie_name">
+          <view wx:for="{{statisticSproductList}}" wx:for-item="item" wx:for-index="index" wx:key="{{index}}">{{item.product_name}}</view>
+        </view>
         <!-- <view class="card_left">
           <ec-canvas id="product_nine_left" canvas-id="product_nine_left" ec="{{ Ec }}"></ec-canvas>
         </view>
         <view class="card_right">
           <ec-canvas id="product_nine_right" canvas-id="product_nine_right" ec="{{ Ec }}"></ec-canvas>
         </view> -->
+        <view class="card_but">
+          <ec-canvas id="product_six_left" canvas-id="product_six_left" ec="{{ Ec }}"></ec-canvas>
+        </view>
+        <view class="card_but">
+          <ec-canvas id="product_six_right" canvas-id="product_six_right" ec="{{ Ec }}"></ec-canvas>
+        </view>
+      </view>
+    </view>
+    <view class="card_ten">
+      <view class="product_All">
+        <view class="product_name">
+          <view class="card_text">产品使用情况</view>
+        </view>
+        <view class="card_but" style="display: flex;">
+          <view class="card_left_pie">
+            <ec-canvas id="product_seven_left" canvas-id="product_seven_left" ec="{{ Ec }}"></ec-canvas>
+          </view>
+          <view class="card_right_pie" style="padding:20rpx 0 0 0;">
+            <view class="sj_yc_item">
+              <view class="sj_yc_tr1">
+                <view>订单号</view>
+                <view>已生产</view>
+              </view>
+              <view class="sj_yc_tr2" wx:for="{{orderCardList}}" wx:for-item="item">
+                <view>{{item.createTime}}</view>
+                <view>{{item.num}}</view>
+              </view>
+            </view>
+          </view>
+        </view>
       </view>
     </view>
   </view>

pages/index/index.wxss

@@ -753,4 +753,48 @@
 }
 .product_name .card_unit{
   color: #666666;
-}
+}
+.card_product_one{
+  height: 300rpx;
+  width:33%;
+  background-color: #FFF;
+  display: flex;
+  flex-direction: column;
+}
+.card_pie{
+  display: flex;
+  justify-content: space-between;
+}
+.card_product_pie{
+  height: 50%;
+}
+.card_pie_name {
+  display: flex;
+  justify-content: space-between;
+  height: 50rpx;
+  line-height: 50rpx;
+}
+.card_pie_name > view{
+  width: 33%;
+  text-align: center;
+  color: #666;
+  font-size: 18rpx;
+}
+.card_pie_lenged{
+  display: flex;
+  justify-content: center;
+}
+.card_pie_lenged > view{
+  display: flex;
+  align-items: center;
+}
+.card_pie_lenged > view > view{
+  width: 15rpx;
+  height: 15rpx;
+  border-radius: 50%;
+}
+.card_pie_lenged > view > text{
+  font-size: 22rpx;
+  color: #666;
+  padding-left: 12rpx;
+}