Fri Jan 19 10:52:00 CST 2024 inscode

src/components/HelloWorld.vue

+<template>
+  <a-card
+    :bordered="false"
+    :headStyle="{ fontSize: '22px', fontWeight: 600 }"
+    :body-style="{ padding: '0' }"
+  >
+    <div>
+
+          <a-tabs default-active-key="1" size="large" @change="changeProcessTabs" :tab-bar-style="{ paddingLeft: '16px' }">
+            <a-tab-pane tab="深圳" key="1">
+            </a-tab-pane>
+            <a-tab-pane tab="赤壁" key="2">
+            </a-tab-pane>
+          </a-tabs>
+          <a-row style="display: flex">
+            <div class="report">
+            <a-radio-group v-model="dateType" @change="changeDay">
+                <a-radio-button :value = "1">日报表</a-radio-button>
+                <a-radio-button :value = "2">周报表</a-radio-button>
+                <a-radio-button :value = "3">月报表</a-radio-button>
+            </a-radio-group>
+            </div>
+            <a-col :xl="18" :span="30" :style="{ right: '10px' }">
+                <a-select
+                  mode="multiple"
+                  placeholder="请选择工厂"
+                  :style="{ width: '240px', marginRight: '10px' }"
+                  v-model="companyCode"
+                  allowClear
+                >
+                  <a-select-option v-for="d in companyCodeList" :key="d">
+                    {{ d }}
+                  </a-select-option>
+                </a-select>
+                <a-select
+                  placeholder="请选择客户"
+                  :style="{ width: '150px', marginRight: '10px' }"
+                  v-model="salesAspectName"
+                >
+                  <a-select-option v-for="d in salesAspectNameList" :key="d">
+                    {{ d }}
+                  </a-select-option>
+                </a-select>
+                <a-select
+                  placeholder="请选择线别"
+                  :style="{ width: '150px', marginRight: '10px' }"
+                  v-model="productionLine"
+                >
+                  <a-select-option v-for="d in lineList" :key="d">
+                    {{ d }}
+                  </a-select-option>
+                </a-select>
+                
+                <j-date
+                  :show-time="false"
+                  style="width: 100%"
+                  date-format="YYYY-MM-DD"
+                  placeholder="查询时间"
+                  v-model="endDate"
+                  :style="{ width: '150px', marginRight: '10px' }"
+                ></j-date>
+                <a-input placeholder="请输入间隔" :style="{ width: '150px', marginRight: '10px' }" v-model="processGap" />
+                <a-button @click="searchProcessReach" type="primary" icon="" :style="{ marginRight: '10px' }">查询</a-button>
+                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+              <div :id="'saleReportChart'"  :style="{ width: '100%', height: '50vh' }"></div>
+            </a-col>
+            <!-- <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"> -->
+              <a-modal v-model="visiblePie">
+                <div id="saleReportPieChart" style="width: 400px; height: 400px;"></div>
+              </a-modal>
+              <!-- <div :id="'saleReportBarChart'"  :style="{ width: '100%', height: '50vh' }"></div> -->
+            <!-- </a-col> -->
+
+          </a-row>
+    </div>
+  </a-card>
+
+</template>
+
+<script>
+
+import { httpAction,postAction,getAction } from '@/api/manage'
+import JDate from '@/components/jeecg/JDate.vue'
+import * as echarts from 'echarts'
+import moment from 'dayjs'
+import '@/assets/less/TableExpand.less'
+
+var weekOfYear = require('dayjs/plugin/weekOfYear')
+var advancedFormat = require('dayjs/plugin/advancedFormat')
+moment.extend(advancedFormat)
+moment.extend(weekOfYear)
+
+export default {
+  name: 'PvdSalereportDetailList',
+  components: { JDate, getAction },
+  data() {
+    return {
+      visible:false,
+      visiblePie:false,
+      width:window.top.document.body.offsetWidth-500,
+      authority: this.$store.state.user.permissionList,
+      listData: [
+        moment().subtract(1, 'days').format('YYYY-MM-DD'),
+        moment().subtract(9, 'days').format('YYYY-w'),
+        moment().format('YYYY-MM'),
+      ],
+      startDate: moment().subtract(8, 'days').format('YYYY-MM-DD'),
+      endDate: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+      processTabKey: 'saleReportChart',
+      listProcessReach: 'aoiOee/aoiOeeMac',
+      listProcessSel: 'produce/report/listProcessSel',
+      listProNoReach: 'produce/report/listProNoReach',
+      listMachineNo: 'aoiOee/queryAoiOeeMachineNo',
+      // queryMachineByDate: 'aoiOee/queryMachineByDate',
+      queryCompanyCodeList: '/pvdSalereportDetail/queryConditionsList',
+      queryList: '/pvdSalereportDetail/queryList',
+      
+      listTab:[{text:'深圳',value:1},{text:'赤壁',value:2}],
+      dateType: 1,
+      processGap:14,
+      // xData:[],
+      loading:false,
+      day:'',
+      myChart1:{},
+      myChart2:{},
+      companyCode:undefined,
+      salesAspectName:undefined,
+      productionLine:undefined,
+      companyCodeList:[],
+      salesAspectNameList:[],
+      lineList:[],
+      dayList:[],
+      tabValue:1,
+      bodystyle:{
+        overflow: 'hidden',
+        overflowY: 'scroll',
+      },
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + "-" + range[1] + " 共" + total + "条"
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+    }
+  },
+  created() {
+    // setTimeout(() => {
+    this.initEcharts()
+      //  this.initsaleReportPieChart()
+    // }, 300)
+    this.initList()
+  },
+  methods: {
+    handleCancel(){
+      this.visible = false
+    },
+    handleProName(e) {
+      this.selectProcessName = e
+      this.getData()
+    },
+    //tab切换
+    changeProcessTabs(key) {
+      debugger
+      this.machineType = undefined
+      this.machineNo = undefined
+      this.shift = undefined
+      this.tabValue = key
+      this.dateType = 1
+      this.initEcharts()
+    },
+    changeDay(e) {
+      this.$nextTick(function () {
+        this.dateType = e.target.value
+        this.getData()
+      })
+    },
+    //初始化查询条件
+    initEcharts() {
+      // this.myChart1 = echarts.init(document.getElementById('saleReportChart'))  
+      this.initList()
+      this.getData()
+    },
+    initList() {
+      this.getCompanyCodeList();
+    },
+    getCompanyCodeList(){
+      let params = {
+        tab: this.tabValue,
+        days: this.startDate,
+        dayNum: this.processGap,
+      }
+      httpAction(this.queryCompanyCodeList,params,'post').then((res) => {
+        if (res.success) {
+          debugger
+          this.companyCodeList = res.result.listCompanyCode;
+          this.salesAspectNameList = res.result.listCustomerName;
+          this.lineList = res.result.listLine;
+          this.dayList = res.result.listDate;
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    searchReset(){
+      // this.machineType = undefined
+      // this.machineNo = undefined
+      // this.shift = undefined
+      this.getData()
+    },
+    searchProcessReach() {
+      this.getData()
+    },
+    
+    queryMachineByD(date){
+      let params= {
+        type:this.dateType,
+        date:date
+      }
+      params.pageNo = this.ipagination.current;
+      params.pageSize = this.ipagination.pageSize;
+      this.loading = true;
+      if(this.tabValue = '1'){
+        getAction(this.queryMachineByDateSZ, params).then((res) => {
+          if (res.success) {
+            // this.dataSource = res.result.records;
+            this.ipagination.total = res.result.total;
+          }
+          if(res.code===510){
+            this.$message.warning(res.message)
+          }
+          this.loading = false;
+        })
+      }else{
+        getAction(this.queryMachineByDate, params).then((res) => {
+          if (res.success) {
+            // this.dataSource = res.result.records;
+            this.ipagination.total = res.result.total;
+          }
+          if(res.code===510){
+            this.$message.warning(res.message)
+          }
+          this.loading = false;
+        })
+      }
+    },
+    handleTableChange(pagination, filters, sorter) {
+      //分页、排序、筛选变化时触发
+      //TODO 筛选
+      if (Object.keys(sorter).length > 0) {
+        this.isorter.column = sorter.field;
+      }
+      this.ipagination = pagination;
+      // this.queryMachineByD(this.day);
+    },
+    getData(){
+       //校验查询条件
+      if (!this.startDate) {
+        this.$message.warning('请选择开始时间查询条件')
+        return
+      }
+      let companyCode = this.companyCode;
+      let salesAspectName = this.salesAspectName;
+      let line = this.productionLine;
+      //调用后台接口
+      var params = {
+        tab: this.tabValue,
+        days: this.startDate,
+        dayNum: this.processGap,
+        companyCode:companyCode,
+        customerName:salesAspectName,
+        line:line
+      }
+      httpAction(this.queryList,params,'post').then((res) => {
+        if (res.success) {
+          debugger
+          this.companyCodeList = res.result.listCompanyCode;
+          this.salesAspectNameList = res.result.listCustomerName;
+          this.lineList = res.result.listLine;
+          // this.dayList = res.result.listDate;
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+      })
+      // var myChart = {};
+      // myChart = this.myChart1
+      // myChart.showLoading({
+      //     text: '数据正在加载...',
+      //     textStyle: { fontSize: 30, color: '#444' },
+      //     effectOption: { backgroundColor: 'rgba(0, 0, 0, 0)' },
+      // })
+      
+      this.initSaleReportChart()
+    },
+    //初始化销售柱状图表
+    initSaleReportChart() {  
+      debugger;
+      let that = this
+      var myChart = echarts.init(document.getElementById('saleReportChart')) ;
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: that.dayList,
+          axisPointer: {
+            type: 'shadow'
+          },
+          axisLabel: {
+            formatter: function (value, index) {
+              debugger
+              if (that.dateType == '1') {
+                return value.substring(5);  
+              } else if(that.dateType == '2'){
+                return "WK"+value;
+              } else if(that.dateType == '3'){
+                return value+"月";
+              }
+              // return value.substring(5);
+            }
+          }
+        },
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '按公司汇总',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320]
+          },
+          {
+            name: '按客户名称汇总',
+            type: 'bar',
+            // stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '按线别汇总',
+            type: 'bar',
+            // stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
+          },
+          // {
+          //   name: 'Video Ads',
+          //   type: 'bar',
+          //   stack: 'Ad',
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   data: [150, 232, 201, 154, 190, 330, 410]
+          // },
+          // {
+          //   name: 'Search Engine',
+          //   type: 'bar',
+          //   data: [862, 1018, 964, 1026, 1679, 1600, 1570],
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   markLine: {
+          //     lineStyle: {
+          //       type: 'dashed'
+          //     },
+          //     data: [[{ type: 'min' }, { type: 'max' }]]
+          //   }
+          // },
+          // {
+          //   name: 'Baidu',
+          //   type: 'bar',
+          //   barWidth: 5,
+          //   stack: 'Search Engine',
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   data: [620, 732, 701, 734, 1090, 1130, 1120]
+          // },
+          // {
+          //   name: 'Google',
+          //   type: 'bar',
+          //   stack: 'Search Engine',
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   data: [120, 132, 101, 134, 290, 230, 220]
+          // },
+          // {
+          //   name: 'Bing',
+          //   type: 'bar',
+          //   stack: 'Search Engine',
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   data: [60, 72, 71, 74, 190, 130, 110]
+          // },
+          // {
+          //   name: 'Others',
+          //   type: 'bar',
+          //   stack: 'Search Engine',
+          //   emphasis: {
+          //     focus: 'series'
+          //   },
+          //   data: [62, 82, 91, 84, 109, 110, 120]
+          // }
+        ]
+      };
+
+      myChart.on('click', function (params) {
+        // that.day = res.dateList[params.dataIndex]
+        that.ipagination.current = 1
+        that.ipagination.pageSize = 10
+        
+        that.initsaleReportPieChart();
+      })
+      option &&   myChart.setOption(option)
+      myChart.hideLoading()
+      window.onresize = function () {
+          myChart.resize();
+      }
+    },
+    initsaleReportPieChart() {  
+      debugger;
+      this.visiblePie = true
+      var myChart = echarts.init(document.getElementById('saleReportPieChart'));
+      // let that = this
+      var option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' }
+            ]
+          }
+        ]
+      };
+      option &&   myChart.setOption(option)
+      myChart.hideLoading()
+      window.onresize = function () {
+          myChart.resize();
+      }
+    },
+
+  },
+}
+</script>
+<style lang="less" scoped>
+.report {
+  display: flex;
+  width: 300px;
+  margin-left: 12px;
+}
+</style>
\ No newline at end of file