CVDEMCSUI/src-cordova/mobile/demo/report.vue

<template>
  <div>
    <q-layout view="lhh LpR lff" container :style="{
            height: container_height,
            width: $q.screen.width
          }" class="shadow-2 rounded-borders">

        <!-- <div class="q-pa-md">出库详情</div>
        <q-card-section 
        style="width:700px;height:400px">
          <IEcharts :option="dnSumOption" :resizable="true" />
        </q-card-section> -->
        <div class="q-pa-md">出库详情</div>
        <q-card-section 
          :style="{
            height: container_height,
            width: container_width
          }">
          <IEcharts :option="fiveOption" :resizable="true" />
        </q-card-section>

        <q-space/>
        
        <div class="q-pa-md">入库详情</div>
        <q-card-section :style="{
            height: container_height,
            width: container_width
          }">
          <IEcharts :option="fiveOption2" :resizable="true" />
        </q-card-section>
    </q-layout>
    
  </div>
</template>
<script>
import LottieWebCimo from 'components/lottie-web-cimo'
import IEcharts from 'vue-echarts-v3/src/full.js';
import { getauth,postauth } from 'boot/axios_request';

export default {
  name: 'PageIndexMobile',
  components: { LottieWebCimo },
  data () {
    return {
      container_height: (this.$q.screen.height  )+ '' + 'px',
      container_width: (this.$q.screen.width)+ '' + 'px',
      isEnglish: false,
      cleardata: [],
      height: '',
      width: '100%',
      fiveOption : {
       
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '物料出库次数占比',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      fiveOption2 : {
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '物料出库次数占比',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      
      dnSumOption: {
        title: {
          text: '',
          left: '1%'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '15%',
          bottom: '10%'
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        toolbox: {
          right: 10,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            startValue: '2014-06-01'
          },
          {
            type: 'inside'
          }
        ],
        visualMap: {
          top: 50,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 200,
              color: '#93CE07'
            },
            {
              gt: 200,
              lte: 400,
              color: '#FBDB0F'
            },
            {
              gt: 400,
              lte: 600,
              color: '#FC7D02'
            },
            {
              gt: 600,
              lte: 800,
              color: '#FD0100'
            },
            {
              gt: 800,
              lte: 1000,
              color: '#AA069F'
            },
            {
              gt: 1000,
              color: '#AC3B2A'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        toolbox:{
            feature:{
              magicType:{
                type:['bar','line',]
              }
            }
            
          },
        series: {
          name: '出库数量',
          type: 'line',
          data: [],
          markLine: {
            silent: true,
            lineStyle: {
              color: '#333'
            },
            data: [
              {
                yAxis: 200
              },
              {
                yAxis: 400
              },
              {
                yAxis: 600
              },
              {
                yAxis: 800
              },
              {
                yAxis: 1000
              }
            ]
          }
        }
      },
    }
  },
  methods: {
    
  },
  created() {
    getauth('dn/mobileFive/', {})
    .then(res => {
      this.fiveOption.series[0].data = res.data;
    })
    
    getauth('asn/mobileFive/', {})
    .then(res => {
      this.fiveOption2.series[0].data = res.data;
    })
  },
  beforeCreate: function () {
  },
  beforeMount: function () {
  },
  mounted: function () {
    
  },
  components: {
    IEcharts
  }
}
</script>