lg-web/src/views/lg/ProdPlan/ProdPlanList.vue

<template>
  <a-card :bordered="false">
    <div ref="pie" :style="{
        width: '600px',
        height: '400px',
        position: 'absolute',
        left: '-9999px',
        top: '-9999px',
        visibility: 'hidden'
      }" />
    <div ref="barLine" :style="{
        width: '600px',
        height: '400px',
         left: '650px',
        position: 'absolute',
        top: '-9999px',
        visibility: 'hidden'
      }" />
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('生产计划')">导出</a-button> -->
      <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel" :customRequest="customRequest">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
      <!-- 高级查询区域 -->
      <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text, record" >
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
            <span v-if="record.analysisState" style="color: #13CE66;">（已解析）</span>
            <span v-else style="color: #E6A23C;">（未解析）</span>
          </a-button>


        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a @click="handleDetail(record)">详情</a>

          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>

          <a-divider type="vertical" />
          <a-button type="link" size="small" @click="handleAnalysis(record.id)" :loading="analysisLoading">解析</a-button>

          <a-divider type="vertical" />
          <a-button type="link" size="small" @click="handleReport(record)">生成报告</a-button>

          <a-divider type="vertical" />
          <a-button type="link" size="small" @click="handleEmal(record.id)" :loading="emailLoading">
            <span v-if="record.sendState === 1">重新发送</span>
            <span v-else>发送邮件</span>
          </a-button>
        </span>

      </a-table>
    </div>

    <prod-plan-modal ref="modalForm" @ok="modalFormOk"></prod-plan-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import ProdPlanModal from './modules/ProdPlanModal'
  import {  getAction,downFile,postAction} from '@/api/manage'
  import { reactive, ref } from 'vue';

  export default {
    name: 'ProdPlanList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      ProdPlanModal
    },
    data () {
      return {
        description: '生产计划管理页面',
        analysisLoading: false,
        emailLoading: false,
        pieInside: [],
        pieOutside: [],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'计划日期',
            align:"center",
            dataIndex: 'planDate',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'计划表',
            align:"center",
            dataIndex: 'planSheet',
            scopedSlots: {customRender: 'fileSlot'}
          },
          {
            title:'发件状态',
            align:"center",
            dataIndex: 'sendState',
            customRender: (t, r, index, column) => {
              let that = this;
              const child = that.$createElement('span', {
                style: {
                  color: t ? "#13CE66" : "#E6A23C"
                },
                domProps: {
                  innerHTML: t ? "已发送" : "未发送"
                }
              })
              const obj = {
                children: child,
                attrs: {}
              }
              return obj;
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/ProdPlan/prodPlan/list",
          delete: "/ProdPlan/prodPlan/delete",
          analysis: "/ProdPlan/prodPlan/analysis",
          report: "/ProdPlan/prodPlan/report",
          email: "/ProdPlan/prodPlan/email",
          deleteBatch: "/ProdPlan/prodPlan/deleteBatch",
          exportXlsUrl: "/ProdPlan/prodPlan/exportXls",
          importExcelUrl: "ProdPlan/prodPlan/importExcel",
          initPieAndColumnar: "/ProdPlan/delayProduct/getDelayProductByWeek",
          getChartData: "ProdPlan/prodPlan/getChartData"

        },
        dictOptions:{},
        superFieldList:[],
        minShow: 0
      }
    },
    created() {
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    mounted() {
    },
    methods: {
      customRequest(options){
        let params = new FormData();
        params.append("file", options.file)
        params.append("plan")
        httpAction(this.url.importExcelUrl,params,'POST').then(res=>{
            if(res.success){
              this.$message.success(res.message)
              this.searchQuery()
            }else{
              this.$message.warning(res.message);
            }
        })

      },
      initDictConfig(){
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'date',value:'planDate',text:'计划日期'})
        fieldList.push({type:'string',value:'planSheet',text:'计划表',dictCode:''})
        fieldList.push({type:'int',value:'sendState',text:'发件状态',dictCode:''})
        this.superFieldList = fieldList
      },
      handleAnalysis: function (id) {
        var that = this;
        that.analysisLoading = true;
        getAction(that.url.analysis, {id: id}).then((res) => {
          that.analysisLoading = false;
          this.searchQuery()
          if (res.success) {
            that.$message.success(res.message);
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      handleReport(record){
        let fileName = "生产异常报告"
        this.prepareChart(record.id).then(()=>{
          let pie = this.pieChart.getDataURL({
              type: 'png',
              pixelRatio: 2, // 设置像素比，提高清晰度
              backgroundColor: '#fff' // 设置背景色
            }).replace(/^data:image\/\w+;base64,/, '')
          let barLine = this.barLineChart.getDataURL({
              type: 'png',
              pixelRatio: 2, // 设置像素比，提高清晰度
              backgroundColor: '#fff' // 设置背景色
            }).replace(/^data:image\/\w+;base64,/, '')

          downFile(this.url.report,{id: record.id,pie:pie,barLine:barLine},"POST").then((data)=>{
            if (!data) {
              this.$message.warning("文件下载失败")
              return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
              window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}), fileName+'.xlsx')
              // window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
            }else{
              let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}))
              // let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = url
              link.setAttribute('download', record.planDate + fileName +'.xlsx')
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link); //下载完成移除元素
              window.URL.revokeObjectURL(url); //释放掉blob对象
            }
          })
        })
      },
      handleEmal: function (id) {
        var that = this;
        that.emailLoading = true;
        this.prepareChart(id).then(()=>{
          let pie = this.pieChart.getDataURL({
              type: 'png',
              pixelRatio: 2, // 设置像素比，提高清晰度
              backgroundColor: '#fff' // 设置背景色
            }).replace(/^data:image\/\w+;base64,/, '')
          let barLine = this.barLineChart.getDataURL({
              type: 'png',
              pixelRatio: 2, // 设置像素比，提高清晰度
              backgroundColor: '#fff' // 设置背景色
            }).replace(/^data:image\/\w+;base64,/, '')
          postAction(that.url.email, {id: id,pie:pie,barLine:barLine}).then((res) => {
            that.emailLoading = false;
            this.searchQuery();
            if (res.success) {
              that.$message.success(res.message);
            } else {
              that.$message.warning(res.message);
            }
          });
        }).finally(()=>{
            that.emailLoading = false;

        })
      },
      async prepareChart (id) {
        var that = this;
        await getAction(that.url.getChartData, {id: id}).then((res) => {
          if (res.success) {
            let chartData = res.result;
            this.initPie(chartData.pieInside,chartData.pieOutside)
            this.initBarLine(chartData.weeks,chartData.bars,chartData.lineData)
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      async initPie(pieInside,pieOutside){
        for(let pieIn of pieInside){
          pieIn.itemStyle = {color:pieIn.color}
        }
        let legendData = []
        for(let pieOut of pieOutside){
          pieOut.itemStyle = {color:pieOut.color}
          legendData.push(pieOut.name)
        }

        this.pieChart = this.$echarts.init(this.$refs.pie)
        let option = { 
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          backgroundColor: '#fff',
          // legend: {
          //   data: legendData
          // },
          "animation": false,
          series: [
            {
              name: '部门占比',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                position: 'inner',
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: pieInside
            },
            {
              name: '部门下原因占比',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                length: 30
              },
              label: {
                formatter: '{a|{b}}{abg|}\n{hr|}\n  {b|数量：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: pieOutside
            }
          ]
        };
        console.log(option);
        
        this.pieChart.setOption(option)
        await this.$nextTick()
      },
      async initBarLine(weeks,bars,lineData){
        let barData = []
        let legendData = []
        let allData = []
        for(let bar of bars){
          allData = allData.concat(bar.data)
          barData.push(
            {
              "name": bar.name,
              "type": "bar",
              "stack": "总量",
              "barWidth": "40%",
              "data": bar.data,
              color: bar.color,
              itemStyle: {
                  normal: {
                      label: {
                          show: true, //开启显示
                          offset: [20, 0],
                          formatter: (v) => {
                            return this.minShow<v.value ? `{a|} `+v.value:''
                          },
                          rich: {
                              a: {
                                  width: 30,
                                  height: 2,
                                  backgroundColor: bar.color
                              },
                          },
                          textStyle: { //数值样式
                              color: '#333',
                              fontSize: 14
                          }
                      }
                  }
              }
            }
          )
          legendData.push(
            {
              "name": bar.name
            }
          )
        }
        const sortedWithIndex = allData
            .map((value, idx) => ({ value, index: idx }))
            .sort((a, b) => b.value - a.value)
        this.minShow = sortedWithIndex[sortedWithIndex.length/3] .value
        this.barLineChart = this.$echarts.init(this.$refs.barLine)
        let option = {
          "legend": {
              "orient": "horizontal",
              "data": [
                  ...legendData,
                  {
                      "name": "OTD0"
                  },
                
              ],
              "left": 0,
              "top": "4%",
              "textStyle": {
                  "color": "#666",
                  "fontSize": 14
              }
          },
          "animation": false,
          "grid": {
              left: '2%',
              right: '4%',
              bottom: '6%',
              top: '16%',
              "containLabel": true
          },
          "tooltip": {
              "trigger": "axis",
              "axisPointer": {
                  "type": "shadow"
              },
              "textStyle": {
                  "align": "left"
              }
          },
          "xAxis": [
              {
                  "type": "category",
                  "data": weeks,
                  "axisTick": {
                      "show": false,

                  },
                  "axisLine": {
                      "show": true,
                      lineStyle: {
                          color: '#cdd5e2'
                      }
                  },
                  "axisLabel": {
                      "show": true,
                      "textStyle": {
                          "color": "#282828",
                          "fontSize": 14
                      },
                      "formatter": "{value}"
                  },

              }
          ],
          "yAxis": [
              {
                  "type": "value",
                  // "max": "600",
                  "axisTick": {
                      "show": false
                  },
                  "axisLine": {
                      "show": true,
                      lineStyle: {
                          color: '#cdd5e2'
                      }
                  },
                  "axisLabel": {
                      "show": true,
                      "textStyle": {
                          "color": "#282828",
                          "fontSize": 14
                      }
                  },
                  "splitLine": {
                      "show": false,
                      "lineStyle": {
                          "color": "rgba(255,255,255,0.2)"
                      }
                  }
              },
              {
                  type: "value",
                  name: "百分比",
                  // "max": "2",
                  nameTextStyle: {
                      color: "#666666"
                  },
                  position: "right",
                  axisLine: {
                      lineStyle: {
                          color: '#cdd5e2'
                      }
                  },
                  splitLine: {
                      show: false,
                  },
                  axisLabel: {
                      show: true,
                      formatter: "{value} %", //右侧Y轴文字显示
                      textStyle: {
                          color: "#666666",
                          fontSize: 14,
                      }
                  }
              }
          ],
          "series": [
              // {symbol: 'circle'},
              ...barData,
              {
                  name: "OTD0",
                  type: "line",
                  yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                  smooth: false, //平滑曲线显示
                  symbol: "circle", //标记的图形为实心圆
                  symbolSize: 8, //标记的大小
                  itemStyle: {
                      normal: {
                          color: '#72A9FE',
                          borderColor: 'rgba(114, 169, 254, 0.5)',  //圆点透明 边框
                          borderWidth: 7
                      },

                  },
                  lineStyle: {
                      color: "#72A9FE"
                  },
                  data: lineData
              },
              
            ]
        }
        this.barLineChart.setOption(option);
        await this.$nextTick()
      },
      initPieAndColumnar(){
        let data;
        let color;
        let columnarInside;
        let columnarOutside;
        getAction(this.url.initPieAndColumnar,  'get').then((res) => {
          if(res.success) {
            data = res.result;
            this.loadingPie(res.result);
            this.loadingShadow(res.result);
          }
        });

      },
      loadingPie(data) {
        this.pieChart = this.$echarts.init(this.$refs.pie)
        let legendData = [];
        let color = []
        data.pieInside.forEach(res => {
          legendData.push("name", res.name);
          color.push(res.itemStyle.color);
        })

        console.log(data);
        let option = {
          color: color,
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          backgroundColor: '#fff',
          legend: {
            data: legendData
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                position: 'inner',
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: data.pieInside
            },
            {
              name: 'Access From',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                length: 30
              },
              label: {
                formatter: '{a|{b}}{abg|}\n{hr|}\n  {b|数量：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: data.pieOutside
            }
          ]
        };
        this.pieChart.setOption(option)
      },
      loadingShadow(data) {
        this.barLineChart = this.$echarts.init(this.$refs.barLine)
        let seriesData = [];
        let legendData = [];
        let lossData = {
          name: "LOSS",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: false, //平滑曲线显示
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 8, //标记的大小
          itemStyle: {
            normal: {
              color: '#72A9FE',
              borderColor: 'rgba(114, 169, 254, 0.5)',  //圆点透明 边框
              borderWidth: 7
            },

          },
          lineStyle: {
            color: "#72A9FE"
          },
          data: data.lossData
        }
        let itemStyle = {
          normal: {
            label: {
              show: false,
                textStyle: {
                color: '#333',
                  fontSize: 14
              }
            }
          }
        }
        for (let key in data.columnarData) {
          legendData.push("name", key);
          seriesData.push({
            "name": key,
            "type": "bar",
            "data": data.columnarData[key],
            "stack": "总量",
            "barWidth": "40%",
            "itemStyle": itemStyle});
        }
        seriesData.push(lossData);
        let option = {
          "backgroundColor": "#fff",
          "color": [
            "#72A9FE",
            "#FFC533",
            "#56C994",
            "#F6856E",
            "#CC66FF",
            "#CCCC66"
          ],
          "title": {
          },
          "legend": {
            "orient": "horizontal",
            "data": legendData,
            "left": 0,
            "top": "4%",
            "textStyle": {
              "color": "#666",
              "fontSize": 14
            }
          },
          "grid": {
            left: '2%',
            right: '4%',
            bottom: '6%',
            top: '16%',
            "containLabel": true
          },
          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow"
            },
            "textStyle": {
              "align": "left"
            }
          },
          "xAxis": [
            {
              "type": "category",
              "data": data.columnarWeeks,
              "axisTick": {
                "show": false,

              },
              "axisLine": {
                "show": true,
                lineStyle: {
                  color: '#cdd5e2'
                }
              },
              "axisLabel": {
                "show": true,
                "textStyle": {
                  "color": "#282828",
                  "fontSize": 14
                },
                "formatter": "{value}"
              },

            }
          ],
          "yAxis": [
            {
              "type": "value",
              "max": data.weekMax,
              "axisTick": {
                "show": false
              },
              "axisLine": {
                "show": true,
                lineStyle: {
                  color: '#cdd5e2'
                }
              },
              "axisLabel": {
                "show": true,
                "textStyle": {
                  "color": "#282828",
                  "fontSize": 14
                }
              },
              "splitLine": {
                "show": false,
                "lineStyle": {
                  "color": "rgba(255,255,255,0.2)"
                }
              }
            },
            {
              type: "value",
              name: "百分比",
              "max": "10",
              nameTextStyle: {
                color: "#666666"
              },
              position: "right",
              axisLine: {
                lineStyle: {
                  color: '#cdd5e2'
                }
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: true,
                formatter: "{value} %", //右侧Y轴文字显示
                textStyle: {
                  color: "#666666",
                  fontSize: 14,
                }
              }
            }
          ],
          dataZoom: [
            {
              show: true,
              realtime: true,
              "height": 12,
              start: 0,
              end: 70,
              bottom: '2%',
            },
            {
              type: 'inside',
              realtime: true,
              "height": 12,
              start: 0,
              end: 70
            }
          ],
          "series": seriesData,
        }

        this.barLineChart.setOption(option);
      }
    }
  }


</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>