|
|
@@ -1,595 +1,899 @@
|
|
|
-<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',
|
|
|
- // position: 'absolute',
|
|
|
- left: '650px',
|
|
|
- // 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"
|
|
|
-
|
|
|
- },
|
|
|
- dictOptions:{},
|
|
|
- superFieldList:[],
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getSuperFieldList();
|
|
|
- },
|
|
|
- computed: {
|
|
|
- importExcelUrl: function(){
|
|
|
- return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initPieAndColumnar();
|
|
|
- },
|
|
|
- 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 = "生产异常报告"
|
|
|
- let pie = this.pieChart.getDataURL({
|
|
|
- type: 'png',
|
|
|
- pixelRatio: 2, // 设置像素比，提高清晰度
|
|
|
- backgroundColor: '#fff' // 设置背景色
|
|
|
- }).replace(/^data:image\/\w+;base64,/, '')
|
|
|
-
|
|
|
- downFile(this.url.report,{id: record.id,pie:pie},"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;
|
|
|
- let pie = that.pieChart.getDataURL({
|
|
|
- type: 'png',
|
|
|
- pixelRatio: 2, // 设置像素比，提高清晰度
|
|
|
- backgroundColor: '#fff' // 设置背景色
|
|
|
- }).replace(/^data:image\/\w+;base64,/, '')
|
|
|
- postAction(that.url.email, {id: id,pie:pie}).then((res) => {
|
|
|
- that.emailLoading = false;
|
|
|
- this.searchQuery();
|
|
|
- if (res.success) {
|
|
|
- that.$message.success(res.message);
|
|
|
- } else {
|
|
|
- that.$message.warning(res.message);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- 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>
|
|
|
+<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',
|
|
|
+ // position: 'absolute',
|
|
|
+ left: '650px',
|
|
|
+ // 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": "LOSS率"
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ "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: "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: 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>
|
SJ