hitch-sb-antd/src/views/workplace/backlog/StoreWorkplaceBacklog.vue

<template>
  <div>
    <div v-show="visible">
      <div class="gutter-example">
        <a-row :gutter="20">
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box">
              <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
                <a-col>待入库总数</a-col>
                <a-col><a style="color:#E4007F;" href="/in/store/myform?status=1" target="_block">{{ topData.inTotalNum }}</a></a-col>
              </a-row>
              <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
                <a-col style="width:130px;">
                  <a-badge color="#E4007F"/>
                  <a href="/in/store/myform?type=1&status=1" target="_block"><span style="color:#E4007F;">采购入库 &nbsp; {{ topData.purchaseApplyNum }}</span></a>
                </a-col>
                <a-col style="width:130px;">
                  <a-badge color="#E4007F"/>
                  <a href="/in/store/myform?type=2&status=1" target="_block">
                    <span style="color:#E4007F;">闲置入库 &nbsp; {{ topData.spareBackApplyNum }}</span>
                  </a>
                </a-col>
              </a-row>
              <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
                <a-col style="width:130px;">
                  <a-badge color="#E4007F"/>
                  <a href="/in/store/myform?type=3&status=1" target="_block">
                    <span style="color:#E4007F;">调拨入库 &nbsp; {{ topData.applyDBNum }}</span>

                  </a>
                </a-col>
                <a-col style="width:130px;">
                  <a-badge color="#E4007F"/>
                  <a href="/in/store/myform?type=6&status=1" target="_block">

                    <span style="color:#E4007F;">其他入库 &nbsp; {{ topData.otherNum }}</span>

                  </a>

                </a-col>
              </a-row>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box">
              <a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
                <a-col>待出库总数</a-col>
                <a style="color:#E4007F;" href="/out/store/myform?status=1" target="_block">
                  <a-col>{{ topData.outTotalNum }}</a-col>
                </a>
              </a-row>
              <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
                <a-col style="width:130px;">
                  <a-badge color="#E4007F"/>
                  <a href="/out/store/myform?type=2&status=1" target="_block">
                    <span style="color:#E4007F;">调拨出库 &nbsp; {{ topData.outDBNum }}</span>
                  </a>
                </a-col>
                <a-col style="width:130px;">
                  <a-badge color="#E4007F"/>
                  <a href="/out/store/myform?type=1&status=1" target="_block">
                    <span style="color:#E4007F;">领用出库 &nbsp; {{ topData.lyNum }}</span>
                  </a>
                </a-col>
              </a-row>
              <a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
                <a-col style="width:130px;">
                  <a-badge color="#E4007F"/>
                  <a href="/out/store/myform?type=3&status=1" target="_block">
                    <span style="color:#E4007F;">报废出库 &nbsp; {{ topData.bfNum }}</span>
                  </a>
                </a-col>
                <a-col style="width:130px;">
                  <a-badge color="#E4007F"/>
                  <a href="/out/store/myform?type=6&status=1" target="_block">

                    <span style="color:#E4007F;">其他出库 &nbsp; {{ topData.otherOutNum }}</span>
                  </a>

                </a-col>
              </a-row>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div style="display:flex;text-align:center;background:#fff;height: 170px;">
              <div style="width:48%;margin:auto;font-size:26px; line-height: 60px;">
                <div>仓库总数</div>
                <a style="color:#E4007F;" href="/storeJituan" target="_block">
                  <div style="font-size:24px;">{{ topData.storeNums }}</div>
                </a>
              </div>
              <div style="width: 1px;height: 70px;background: #999999;margin:auto;"></div>
              <div style="width:48%;margin:auto; font-size:26px;line-height: 60px;">
                <div>备件总价值</div>
                <a style="color:#E4007F;" href="/spare/part/info" target="_block">

                  <div style="font-size:24px;">{{ topData.totalPrice }}</div>
                </a>

              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="gutter-example">
        <a-row :gutter="[20,40]">
          <a-col class="gutter-row" :span="8">
            <div style="height: 471px;background: #FFFFFF;padding:24px">
              <div style="display:flex;justify-content: space-between;width:160px;height: 18px; font-size:16px;color: #555555; ">
                <div>备件类型数量统计</div>
              <!-- <div>设备总数100</div> -->
              </div>
              <div id="container-pie"></div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="12">
            <div style="height: 471px;background: #FFFFFF; padding:24px;">
              <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
                <div style="width: 7px;background: #4D86ED;"></div>
                <div>近一周每日出入库数据</div>
              </div>
              <div id="container-line"></div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="4">
            <div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
              <div class="btn" style="background:linear-gradient(to right,#36B5FA,#26ECF5);" @click="handleOutAdd">
                <my-icon type="icon-chukuguanli" style="font-size:58px;"/>
                <span>出库</span>
              </div>
              <div class="btn" style="background:linear-gradient(to right,#FF416D,#FF847F);" @click="handleInAdd">
                <my-icon type="icon-rukuguanli" style="font-size:58px;"/>
                <span>入库</span>
              </div>
              <div class="btn" style="background:linear-gradient(to right,#FB47D1,#F96EFE);">
                <my-icon type="icon-zichanguanli-zichantiaobo" style="font-size:58px;"/>
                <span>调拨</span>
              </div>
              <div class="btn" style="background:linear-gradient(to right,#941FFF,#BC72FB);" @click="$refs.addStore.base()">
                <my-icon type="icon-xinzengyugengxinhuopindangan-copy" style="font-size:58px;"/>
                <span>新增</span>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="gutter-example">
        <a-row :gutter="20">
          <a-col class="gutter-row" :span="6">
            <div class="information">
              <div style="display:flex;justify-content: space-between;align-items: center; padding-bottom:20px;">
                <div style="display:flex; width:65px;height:17px;justify-content: space-between;align-items: center;">
                  <div style=" width: 17px;height: 17px;background: #3462FD;border-radius: 50%;"></div>
                  <div style="font-size: 18px;font-weight: 800;color: #333333;">资料</div>
                </div>
                <div >
                  查看全部
                  <my-icon type="icon-xiangyou-copy" style="font-size:13px;"/>
                </div>
              </div>
              <div
                class="demo-infinite-container"
              >
                <a-list size="small" bordered :data-source="information">
                  <a-list-item slot="renderItem" slot-scope="item,index" :class="{discolor: index%2}">
                    <a-list-item-meta>
                      <div slot="title" :href="item.href">{{ item.name }}</div>
                    </a-list-item-meta>
                    <div>{{ item.time }}</div>
                  </a-list-item>
                </a-list>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="18">
            <div class="information">
              <s-table
                ref="table"
                size="small"
                bordered
                rowKey="id"
                :columns="columns"
                :data="loadData"
                :pageSize="10"
                :scroll="{ y: 190 }"
              >
                <span slot="action" slot-scope="record">
                  <template>
                    <a @click="handle(record)">详情</a>
                    <a-divider v-if="record.status === 1" type="vertical" />
                    <a v-if="record.status === 1" @click="dealJumpDetail(record)">跳转</a>
                  </template>
                </span>
                <span slot="content" slot-scope="text" v-html="text">
                </span>
              </s-table>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <InBaseFrom ref="inBaseModal" @ok="handleOk"></InBaseFrom>
    <OutBaseFrom ref="outBaseModal" @ok="handleOk"></OutBaseFrom>
    <AddStore ref="addStore"></AddStore>
  </div>
</template>

<script>
import AddStore from '@/views/store/store/modules/BaseForm.vue'
import InBaseFrom from '@/views/store/instoreform/modules/BaseForm.vue'
import OutBaseFrom from '@/views/store/outstoreform/modules/BaseForm.vue'

import { STable } from '@/components'
import { getWorkplaceBacklogUserPage, getWorkplaceBacklogTopData, getWorkplaceBacklogWeekData, getWorkplaceBacklogPie } from '@/api/workplace/backlog'
import { Chart } from '@antv/g2'
export default {
  name: 'NewWorkplaceBacklog',
  components: {
    STable,
    AddStore,
    InBaseFrom,
    OutBaseFrom,
    Chart
  },
  data () {
    return {
      visible: true,
      equipmentData: [
      ],
      lineData: [
      ],
      storeNums: 0,
      allCount: 100,
      chartPie: null,
      chartLine: null,
      topData: null,
      queryParam: {
        status: 1
      },
      information: [
        {
          name: '项目管理通知',
          time: '2022-4-7'
        },
        {
          name: '项目管理通知',
          time: '2022-4-7'
        },
        {
          name: '项目管理通知',
          time: '2022-4-7'
        },
        {
          name: '项目管理通知',
          time: '2022-4-7'
        }, {
          name: '项目管理通知',
          time: '2022-4-7'
        },
        {
          name: '项目管理通知',
          time: '2022-4-7'
        },
        {
          name: '项目管理通知',
          time: '2022-4-7'
        }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: 50,
          customRender: (text, record, index) => {
            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
          }
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center',
          width: 100,
          customRender: (text, record, index) => {
            return this.typeDict[text]
          }
        },
        {
          title: '详细类型',
          dataIndex: 'detailType',
          align: 'center',
          width: 140,
          customRender: (text, record, index) => {
            return this.typeDetailDict[text]
          }
        },
        {
          title: '内容',
          dataIndex: 'content',
          align: 'center',
          width: 460,
          ellipsis: true,
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '时间',
          align: 'center',
          width: 160,
          dataIndex: 'createdTime'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          width: 100,
          customRender: (text, record, index) => {
            return (text === 1 ? '未读' : '已读')
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        parameter = {
          ...parameter,
          ...this.queryParam
        }
        return getWorkplaceBacklogUserPage(parameter)
          .then(res => {
            return res.data
          })
      }
    }
  },
  computed: {
    role () {
      if (this.$store.state.user.roles.join().includes('manage')) {
        return 'workplace_store_manage'
      } else if (this.$store.state.user.roles.join().includes('normal')) {
        return 'workplace_store_normal'
      } else {
        return ''
      }
    }
  },
  created () {
    this.getDict()
    this.getInfo()
  },
  mounted () {
  },
  updated () {
    if (this.lineData.length > 0 && this.equipmentData.length > 0) {
      this.$nextTick(function () {
        this.getPieCharts('container-pie', this.equipmentData)
        this.getLineCharts('container-line', this.lineData)
      })
    }
  },
  methods: {
    getDict () {
      this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
      this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
    },
    getInfo () {
      Promise.all([
        getWorkplaceBacklogWeekData(this.role),
        getWorkplaceBacklogPie(this.role),
        getWorkplaceBacklogTopData(this.role)
      ]).then(res => {
        const data = res[0].data.inStoreDetailVOS.reduce((pre, item) => {
          pre.push({
            week: item.weekDayName,
            value: item.num,
            name: '入库'
          })
          return pre
        }, [])
        data.push(
          ...res[0].data.outStoreDetailVOS.reduce((pre, item) => {
            pre.push({
              week: item.weekDayName,
              value: item.num,
              name: '出库'

            })
            return pre
          }, [])
        )
        this.lineData = data
        const data2 = res[1].data.reduce((pre, item) => {
          pre.push({
            item: item.name,
            count: item.currentStock,
            percent: item.currentStock
          })
          return pre
        }, [])
        this.equipmentData = data2
        this.topData = res[2].data
      })
    },
    getPieCharts (id, data) {
      this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
      this.chartPie = new Chart({
        container: id,
        autoFit: true,
        height: 400
      })
      this.chartPie.data(data)
      this.chartPie.scale('count', {
        nice: true
      })
      this.chartPie.coordinate('theta', {
        radius: 0.6,
        innerRadius: 0.5
      })
      this.chartPie.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: `<li class="g2-tooltip-list-item">
                     <span style="background-color:{color};" class="g2-tooltip-marker"></span>
                     {name}: {value}
                  </li>`
      })
      // 辅助文本
      this.chartPie
        .annotation()
      this.chartPie
        .interval()
        .adjust('stack')
        .position('percent')
        .color('item')
        .label('percent', (percent) => {
          return {
            content: (data) => {
              return `${data.item}: ${percent}`
            }
          }
        })
        .tooltip('item*count', (item, count) => {
          return {
            name: item,
            value: count
          }
        })
      // this.chartPie.interaction('element-active')
      this.chartPie.interaction('active-region')

      this.chartPie.render()
    },
    getLineCharts (id, data) {
      this.chartLine = new Chart({
        container: id,
        autoFit: true,
        height: 300
      })

      this.chartLine.data(data)
      this.chartLine.scale({

        value: {
          min: 0,
          nice: true
        }
      })

      this.chartLine.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        shared: true
      })

      this.chartLine.axis('value', {
        label: {
          formatter: (val) => {
            return val
          }
        }
      })

      this.chartLine.interval().position('week*value').color('name').adjust([
        {
          type: 'dodge',
          marginRatio: 0
        }
      ])

      this.chartLine.interaction('active-region')

      this.chartLine.render()
    },
    handleOk () {
      this.visible = true
      this.getDict()
    },
    handleInAdd () {
      this.visible = false
      const modal = this.$refs.inBaseModal
      modal.base()
    },
    handleOutAdd () {
      this.visible = false
      const modal = this.$refs.outBaseModal
      modal.base()
    }
  }
}
</script>

<style scoped>
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
  font-family: PingFang SC;
}
.gutter-box {
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  background: #fff;
  padding: 18px 41px;
  height: 170px;
}
.btn{
height: 113px;
width: 100%;
color: #fff!important;
font-size:28px;
border-radius: 20px;
display:flex;
align-items: center;
justify-content: space-around;
}
.information{
  background: #fff;
  padding: 30px 12px;
  height: 260px;
  color:#666;
}
.discolor{
  background: #EFEFFB;
}
.demo-infinite-container {
  overflow: auto;
  height: 190px;
}
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
</style>