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

<template>
  <div>
    <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 href="/repair/form?type=1&searchType=6" style="color:#3066EC ;" target="_block">{{ topData.repairTotalNum }}</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:110px;">
                <a-badge color="#3066EC " />
                <span style="color:#3066EC ;"><a style="color:#3066EC ;" target="_block" href="/repair/wait?type=1">待接单 &nbsp; {{ topData.completedRepairNum }}</a></span>

              </a-col>
              <a-col style="width:110px;">
                <a-badge color="#3066EC " />
                <span style="color:#3066EC ;"><a style="color:#3066EC ;" target="_block" href="/repair/form/mine?type=1">维修中 &nbsp; {{ topData.waitForRepairNum }}</a></span>
              </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:110px;">
                <a-badge color="#3066EC " />
                <span style="color:#3066EC ;"><a style="color:#3066EC ;" target="_block" href="/repair/form?type=1&searchType=3">待审核 &nbsp; {{ topData.verifyRepairNum }}</a></span>

              </a-col>
              <a-col style="width:110px;">
                <a-badge color="#3066EC " />
                <span style="color:#3066EC ;"><a style="color:#3066EC ;" target="_block" href="/repair/form?type=1&searchType=5">已驳回 &nbsp; {{ topData.refusedRepairNum }}</a></span>

              </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-col><a target="_block" style="color:#3066EC ;" href="/repair/form?type=2&searchType=6">{{ topData.outRepairTotalNum }}</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:110px;">
                <a-badge color="#3066EC " />
                <span style="color:#3066EC ;"><a style="color:#3066EC ;" target="_block" href="/repair/wait?type=2">待接单 &nbsp; {{ topData.outCompletedRepairNum }}</a></span>

              </a-col>
              <a-col style="width:110px;">
                <a-badge color="#3066EC " />
                <span style="color:#3066EC ;"><a style="color:#3066EC ;" target="_block" href="/repair/form/mine?type=2">待维修 &nbsp; {{ topData.outWaitForRepairNum }}</a></span>
              </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:110px;">
                <a-badge color="#3066EC " />
                <span style="color:#3066EC ;"><a style="color:#3066EC ;" target="_block" href="/repair/form?type=2&searchType=3">待审核 &nbsp; {{ topData.outVerifyRepairNum }}</a></span>

              </a-col>
              <a-col style="width:110px;">
                <a-badge color="#3066EC " />
                <span style="color:#3066EC ;"><a style="color:#3066EC ;" target="_block" href="/repair/form?type=2&searchType=5">已驳回 &nbsp; {{ topData.outRefusedRepairNum }}</a></span>
              </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>
              <div style="font-size:24px;"><a style="color:#3066EC ;" target="_block" :href="`/repair/form?repairStartTimeStart=${date.repairStartTimeStart}&repairStartTimeEnd=${date.repairStartTimeEnd}`">{{ topData.totalNum }}</a></div>
            </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>
              <div style="font-size:24px;"><a style="color:#3066EC ;" target="_block" :href="`/repair/fee?feeDateStart=${date.searchStartTime}&feeDateEnd=${date.searchEndTime}`">{{ topData.totalFee }}</a></div>
            </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>
            <chart-view height="400px" :chartOption="chartOption1" />
          </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:20px;">
              <div style="width: 7px;background: #4D86ED;"></div>
              <div>近一周每日产生维修单数</div>
            </div>

            <chart-view height="360px" :chartOption="chartOption2" />

          </div>
        </a-col>
        <a-col class="gutter-row" :span="4">
          <div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
            <a style="color:#fff;" target="_block" href="/repair/form/mine?type=1">
              <div class="btn" style="background:linear-gradient(to right,#36B5FA,#3066EC);">
                <my-icon type="icon-weixiu" style="font-size:58px;" />
                <span>维修</span>
              </div>
            </a>
            <div class="btn" style="background:linear-gradient(to right,#36B5FA,#3066EC);" @click="$refs.repairForm.base({},{filter: -1})">
              <my-icon type="icon-baoxiu-xuanzhong-copy" style="font-size:58px;color:#fff;" />
              <span>报修</span>
            </div>
            <div class="btn" style="background:linear-gradient(to right,#36B5FA,#3066EC);" @click="$refs.sparePickForm.base()">
              <my-icon type="icon-tubiaozhizuomoban-copy" style="font-size:58px;color:#fff;" />
              <span>领用</span>
            </div>
            <div class="btn" style="background:linear-gradient(to right,#36B5FA,#3066EC);" @click="$refs.sparebackform.base()">
              <!-- <my-icon type="icon-tuiku" style="font-size:58px; color:#fff;"/> -->
              <img src="@/assets/tuiku.png" width="60px" alt="">
              <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>
                <a href="/operate/article/Article" target="_block"> 查看全部
                  <my-icon type="icon-xiangyou-copy" style="font-size:13px;" /></a>
              </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 @click="handleView(item)">
                    <div slot="title" style="cursor:pointer">{{ item.title }}</div>
                  </a-list-item-meta>
                  <div>{{ item.updateTime }}</div>
                </a-list-item>
              </a-list>
            </div>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="18">
          <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>
              <a href="WorkplaceBacklog" target="_block">
                查看全部
                <my-icon type="icon-xiangyou-copy" style="font-size:13px;" />
              </a>
            </div>
            <s-table ref="table" size="small" bordered rowKey="id" :columns="columns" :data="loadData" :pageSize="10" :scroll="{ y: 400 }">
              <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>
    <detail ref="detailModal"></detail>
    <repair-form ref="repairForm"></repair-form>
    <SparePickForm ref="sparePickForm"></SparePickForm>
    <SpareBackForm ref="sparebackform"></SpareBackForm>
  </div>
</template>

<script>
import { STable } from '@/components'
import Detail from '@/views/operate/article/modules/Detail.vue'
import RepairForm from '@/views/repair/application-form/modules/BaseForm.vue'
import SpareBackForm from '@/views/store/sparebackform/modules/BaseForm'
import SparePickForm from '@/views/store/sparepickform/modules/BaseForm'
import { getArticlePage, fetchArticle } from '@/api/operate/article'
import {
  getWorkplaceBacklogUserPage,
  getWorkplaceBacklogTopData,
  getWorkplaceBacklogWeekData,
  getWorkplaceBacklogPie,
} from '@/api/workplace/backlog'
import { getCalendarNotice } from '@/api/repair/application-form'
import { Chart } from '@antv/g2'
import cookie from 'vue-cookie'
export default {
  name: 'NewWorkplaceBacklog',
  components: {
    STable,
    Detail,
    SparePickForm,
    SpareBackForm,
    RepairForm,
    Chart,
  },
  data() {
    return {
      equipmentData: [],
      lineData: [],
      allCount: 100,
      chartPie: null,
      chartLine: null,
      topData: null,
      type: this.$route.query.type,
      date: {
        repairStartTimeStart: '',
        repairStartTimeEnd: '',
        searchStartTime: '',
        searchEndTime: '',
      },
      queryParam: {
        status: 1,
      },
      information: [],
      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('workplace-repair-manage')) {
        return 'workplace-repair-manage'
      } else if (this.$store.state.user.roles.join().includes('workplace-repair-normal')) {
        return 'workplace-repair-normal'
      } else {
        return 'undifined'
      }
    },
    chartOption1() {
      return {
        legend: {
          top: '10%',
          type: 'scroll',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: [50, 100],
            label: {
              formatter: `{b}:{c}`,
              textBorderColor: '#000',
              textBorderWidth: 0,
              fontSize: 16,
              overflow: 'breakAll',
              labelLine: {
                length: 3,
              },
            },

            data: this.equipmentData,
          },
        ],
      }
    },
    chartOption2() {
      return {
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: {
          type: 'value',
        },
        xAxis: {
          type: 'category',
          data: this.lineData.map((item) => item.weekDayName),
        },
        series: [
          {
            name: '维修单数',
            type: 'bar',
            data: this.lineData.map((item) => item.tempTotalNum),
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: 'black',
                    fontSize: 16,
                  },
                },
              },
            },
          },
        ],
      }
    },
  },
  created() {
    this.getdate()
    this.getDict()
    this.toCalendar()
    this.getInfo()
  },
  methods: {
    getdate() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()
      this.date = {
        repairStartTimeStart: `${year}-0${month + 1}-01 00:00:00`,
        repairStartTimeEnd: this.BaseTool.Date.formatter(date, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN),
        searchStartTime: `${year}-0${month + 1}-01`,
        searchEndTime: this.BaseTool.Date.formatter(date, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN),
      }
    },
    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() {
      if (this.role === 'undifined') {
        // this.$error('您的角色未赋予该权限')
        alert('您的角色未赋予该权限')
        this.$router.push({ path: '/workplace' })
      }

      getWorkplaceBacklogTopData(this.role).then((res) => {
        this.topData = res.data
      })
      getArticlePage({
        pageNum: 1,
        pageSize: 10,
        dataScope: {
          sortBy: 'desc',
          sortName: 'update_time',
        },
      }).then((res) => {
        this.information = res.data.rows
      })
      getWorkplaceBacklogWeekData(this.role).then((res) => {
        this.lineData = res.data
      })
      getWorkplaceBacklogPie(this.role).then((res) => {
        const data = res.data.reduce((pre, item) => {
          pre.push({
            name: item.typeName,
            value: item.fee,
          })
          return pre
        }, [])
        this.$nextTick(() => {})

        this.equipmentData = data
      })
    },
    handleView(record) {
      fetchArticle({ id: record.id }).then((res) => {
        const modal = this.$refs.detailModal
        modal.base(res.data)
      })
    },
    toCalendar() {
      const repairTips = cookie.get('repairTips')
      if (repairTips === '1') {
        getCalendarNotice().then((res) => {
          const router = this.$router
          cookie.set('repairTips', 2, 7)
          if (res.data !== null && res.data.length > 0) {
            this.$confirm({
              title: '提示',
              content: () => {
                return (
                  <div>
                    近一周工单任务如下: <br />
                    {res.data.map((item) => {
                      return <div>{item.calendarDate + ' : ' + item.num}</div>
                    })}
                  </div>
                )
              },
              okText: '去查看',
              icon: 'info-circle',
              onOk() {
                return new Promise((resolve, reject) => {
                  router.push({ path: '/repaire/calendar' })
                  resolve()
                }).catch((err) => {
                  this.$message.error({
                    title: '错误',
                    description: err.message,
                  })
                })
              },
              onCancel() {},
            })
          }
        })
      }
    },
  },
}
</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;
}
.btn:hover {
  cursor: pointer;
}
.information {
  background: #fff;
  padding: 30px 12px;
  height: 500px;
  color: #666;
}
.discolor {
  background: #efeffb;
}
.demo-infinite-container {
  overflow: auto;
  height: 400px;
}
/deep/ .ant-table-placeholder {
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>