mrshi

MrShi

2024-03-05 84b74d64ecc519882b89278f1011f7ac7525d190

 company/src/views/index.vue

@@ -1,33 +1,463 @@
<template>
  <div class="home">
    <!-- <div class="wrap">
      <h2>欢迎使用伊娃极速开发框架</h2>
      <p>您使用的此套开源框架没有任何版权问题，可学习可商用，请放心使用！</p>
      <p>伊娃致力于打造简洁、合理、高效的开发体验，为此我们将不断升级，感谢您的支持！</p>
      <p style="margin-top: 12px;">
        <a href="https://gitee.com/coderd-repos/eva" target="_blank">GITEE</a>
        <a href="https://github.com/coderd-repos/eva" target="_blank">GITHUB</a>
      </p>
      <div class="guide">
        <a href="http://eva.adjustrd.com" target="_blank">前往官网</a>
        <a href="http://coderd.adjustrd.com/template/308/default" target="_blank">前往CodeRd</a>
    <div class="home_inlet">
      <div class="home_inlet_label">快捷入口</div>
      <div class="home_inlet_list" v-if="userInfo.type==1" >
        <div class="home_inlet_item" v-for="(item, index) in cate" :key="index" @click="jump(item.url)">
          <img :src="item.icon" />
          <span>{{item.name}}</span>
        </div>
      </div>
      <img src="@/assets/images/qq.png">
      <p>你可以扫码加入群聊以获得技术支持</p>
      <div class="award">
        <h4>激励作者做得更好</h4>
        <img src="@/assets/images/alipay.jpeg">
        <img src="@/assets/images/wxpay.jpeg">
      <div class="home_inlet_list" v-else >
        <div class="home_inlet_item" v-for="(item, index) in catePlat" :key="index" @click="jump(item.url)">
          <img :src="item.icon" />
          <span>{{item.name}}</span>
        </div>
      </div>
    </div> -->
    </div>
    <div class="home_content">
      <div class="home_content_left">
        <div class="home_content_left_item" ref="picture1"></div>
        <div class="home_content_left_item" ref="picture2"></div>
        <div class="home_content_left_item" ref="picture3"></div>
      </div>
      <div class="home_content_right">
        <div class="home_content_right_label" v-if="tabs && tabs.length>0" >代办事项</div>
        <el-tabs v-model="activeName" @tab-click="handleClick" >
          <el-tab-pane v-for="a in tabs" :key="a.path" :name="a.name" >
             <span slot="label" title="点击刷新"> {{a.label }}
                        <el-badge v-if="(a.name==0?totalPage0:(a.name==1?totalPage1:totalPage2))  >0" :value="(a.name==0?totalPage0:(a.name==1?totalPage1:totalPage2)) " class="item"></el-badge>
                    </span>
          </el-tab-pane>
        </el-tabs>
        <div v-if="activeName === '0'"  v-permissions="['business:notice:insurance']" >
          <div class="home_content_right_list">
            <div class="list_item" v-for="(item, index) in tableData0" :key="index">
              <div class="list_item_left">
                <span>{{item.title}}（{{ item.typeDetail }}）</span>
                <span>{{item.info}}（{{item.content}}）</span>
              </div>
              <div class="list_item_center">
                <span>{{item.companyName}}</span>
                <span>提交时间  {{item.createDate}}</span>
              </div>
              <div class="list_item_right">
                <span @click="detail(item)">查看</span>
              </div>
            </div>
          </div>
          <div class="home_content_right_page">
            <el-pagination
                @current-change="handleCurrentChange0"
                :current-page="page0"
                :page-size="5"
                layout="total, prev, pager, next, jumper"
                :total="totalPage0">
            </el-pagination>
          </div>
        </div>
        <div v-if="activeName === '1'"  v-permissions="['business:notice:tax']">
          <div class="home_content_right_list">
            <div class="list_item" v-for="(item, index) in tableData1" :key="index">
              <div class="list_item_left">
                <span>{{item.title}}（{{ item.typeDetail }}）</span>
                <span>{{item.info}}（{{item.content}}）</span>
              </div>
              <div class="list_item_center">
                <span>{{item.companyName}}</span>
                <span>提交时间  {{item.createDate}}</span>
              </div>
              <div class="list_item_right">
                <span  @click="detail(item)">查看</span>
              </div>
            </div>
          </div>
          <div class="home_content_right_page">
            <el-pagination
                @current-change="handleCurrentChange1"
                :current-page="page1"
                :page-size="5"
                layout="total, prev, pager, next, jumper"
                :total="totalPage1">
            </el-pagination>
          </div>
        </div>
        <div v-if="activeName === '2'"  v-permissions="['business:notice:settle']">
          <div class="home_content_right_list">
            <div class="list_item" v-for="(item, index) in tableData2" :key="index">
              <div class="list_item_left">
                <span>{{item.title}}（{{ item.typeDetail }}）</span>
                <span>{{item.info}}（{{item.content}}）</span>
              </div>
              <div class="list_item_center">
                <span>{{item.companyName}}</span>
                <span>提交时间  {{item.createDate}}</span>
              </div>
              <div class="list_item_right">
                <span  @click="detail(item)">查看</span>
              </div>
            </div>
          </div>
          <div class="home_content_right_page">
            <el-pagination
                @current-change="handleCurrentChange2"
                :current-page="page2"
                :page-size="5"
                layout="total, prev, pager, next, jumper"
                :total="totalPage2">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <OperaInsuranceApplyWindow ref="operaInsuranceApplyWindow" @success="handleCurrentChange0()"/>
    <dispatchUnitDetailsPlat ref="dispatchUnitDetailsPlat" @success="handleCurrentChange0()"/>
    <OperaSettleClaimsWindow ref="operaSettleClaimsWindow" @success="handleCurrentChange2()"/>
    <OperaApplyChangeUnitDetailWindow ref="operaApplyChangeUnitDetailWindow" @success="handleCurrentChange0()"/>
    <OperaApplyChangeDetailWindow ref="operaApplyChangeDetailWindow" @success="handleCurrentChange0()"/>
    <OperaTaxesWindow ref="OperaTaxesWindow" @success="handleCurrentChange1()"/>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
import OperaInsuranceApplyWindow from '@/components/business/OperaInsuranceApplyWindow'
import dispatchUnitDetailsPlat from '@/components/business/dispatchUnitDetailsPlat'
import OperaApplyChangeUnitDetailWindow from '@/components/business/OperaApplyChangeUnitDetailWindow'
import OperaSettleClaimsWindow from '@/components/business/OperaSettleClaimsWindow'
import OperaApplyChangeDetailWindow from '@/components/business/OperaApplyChangeDetailWindow'
import OperaTaxesWindow from '@/components/business/OperaTaxesWindow'
import { fetchList as noticeList, deleById } from '@/api/business/notices'
export default {
  components: {
    OperaInsuranceApplyWindow,
    dispatchUnitDetailsPlat,
    OperaTaxesWindow,
    OperaSettleClaimsWindow,
    OperaApplyChangeDetailWindow,
    OperaApplyChangeUnitDetailWindow
  },
  name: 'Index',
  data () {
    return {}
    return {
      activeName: '0',
      tabs: [],
      page0: 1,
      page1: 1,
      page2: 1,
      totalPage2: 0,
      totalPage1: 0,
      totalPage0: 0,
      tableData0: [],
      tableData1: [],
      tableData2: [],
      cate: [
        {
          name: '投保申请',
          url: '/enterprise/insuranceApply',
          icon: require('../assets/icons/company/apply.png')
        },
        {
          name: '提交报案',
          url: '/business/settleClaims',
          icon: require('../assets/icons/company/settle.png')
        },
        {
          name: '添加派遣单位',
          url: '/enterprise/dispatchUnit',
          icon: require('../assets/icons/company/dipatch_unit.png')
        },
        {
          name: '直保开票',
          url: '/enterprise/directInvoicing',
          icon: require('../assets/icons/company/tax.png')
        },
        {
          name: '委托保开票',
          url: '/enterprise/entrustedInvoicing',
          icon: require('../assets/icons/company/tax.png')
        }
      ],
      catePlat: [
        {
          name: '投保审核',
          url: '/business/insuranceApply',
          icon: require('../assets/icons/plat/apply_check.png')
        },
        {
          name: '加/减保审核',
          url: '/business/applyChange',
          icon: require('../assets/icons/plat/change_apply_check.png')
        },
        {
          name: '理赔服务',
          url: '/business/settleClaims',
          icon: require('../assets/icons/plat/settle_check.png')
        },
        {
          name: '发票管理',
          url: '/business/taxes',
          icon: require('../assets/icons/plat/tax_check.png')
        },
        {
          name: '新增企业',
          url: '/business/company',
          icon: require('../assets/icons/plat/company_add.png')
        }
      ]
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    this.setPicture1()
    this.setPicture2()
    this.setPicture3()
    this.initPanel()
    this.setLoadTimer()
  },
  methods: {
    detail (obj) {
      if (obj.objType === 0) {
        this.$refs.operaInsuranceApplyWindow.open('投保申请详情', { id: obj.objId })
      } else if (obj.objType === 1) {
        this.$refs.operaApplyChangeDetailWindow.open('加减保详情', { id: obj.objId, applyId: obj.param1 })
      } else if (obj.objType === 2) {
        this.$refs.operaApplyChangeUnitDetailWindow.open('换厂申请详情', { id: obj.objId, applyId: obj.param1 })
      } else if (obj.objType === 3) {
        this.$refs.dispatchUnitDetailsPlat.open('派遣单详情', { id: obj.objId })
      } else if (obj.objType === 4) {
        this.$refs.OperaTaxesWindow.open('开票申请详情', { id: obj.objId })
      } else if (obj.objType === 5) {
        deleById(obj.id)
          .then(res => {
            this.tableData2.forEach((item, index) => {
              if (item.id === obj.id) {
                this.tableData2.splice(index, 1)
                this.totalPage2 = this.totalPage2 - 1
              }
            })
            this.$refs.operaSettleClaimsWindow.open('理赔详情', { id: obj.objId })
          })
      }
    },
    setLoadTimer () {
      var that = this
      this.initLoadData()
      if (window.timer) {
        clearInterval(window.timer)
      }
      window.timer = setInterval(() => {
          that.initLoadData()
      }, 60000)
    },
    initLoadData(){
      var pemissons = this.userInfo.permissions
      if (pemissons.includes('business:notice:insurance')) {
        this.handleCurrentChange0(0)
      }
      if (pemissons.includes('business:notice:tax')) {
        this.handleCurrentChange1(0)
      }
      if (pemissons.includes('business:notice:settle')) {
        this.handleCurrentChange2(0)
      }
    },
    getNoticeList (type, page) {
      noticeList({
        page: page,
        capacity: 5,
        model: { queryType: type },
        sorts: []
      })
        .then(response => {
          if (type === 0) {
            this.tableData0 = response.records
            this.totalPage0 = response.total
          }
          if (type === 1) {
            this.tableData1 = response.records
            this.totalPage1 = response.total
          } if (type === 2) {
            this.tableData2 = response.records
            this.totalPage2 = response.total
          }
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
    },
    initPanel () {
      var pemissons = this.userInfo.permissions

      if (pemissons.includes('business:notice:insurance')) {
        this.tabs.push({ name: '0', label: '投保代办' })
        // this.handleCurrentChange0(0);
      }
      if (pemissons.includes('business:notice:tax') && this.userInfo.type !== 1) {
        this.tabs.push({ name: '1', label: '发票代办' })
        // this.handleCurrentChange1(0);
      }
      if (pemissons.includes('business:notice:settle')) {
        this.tabs.push({ name: '2', label: '理赔提醒' })
        // this.handleCurrentChange2(0);
      }
      /* if (pemissons.includes('business:notice:insurance')) {
        this.getNoticeList(0, this.page0)
      }
      if (pemissons.includes('business:notice:tax')) {
        this.getNoticeList(1, this.page1)
      }
      if (pemissons.includes('business:notice:settle')) {
        this.getNoticeList(2, this.page2)
      } */
    },
    handleClick (e) {
      this.activeName = e.name
      if (this.activeName === '0') {
        this.handleCurrentChange0(0)
      } else if (this.activeName === '1') {
        this.handleCurrentChange1(0)
      } else if (this.activeName === '2') {
        this.handleCurrentChange2(0)
      }
    },
    handleCurrentChange0 (page) {
      this.page0 = page
      this.getNoticeList(0, this.page0)
    },
    handleCurrentChange1 (page) {
      this.page1 = page
      this.getNoticeList(1, this.page1)
    },
    handleCurrentChange2 (page) {
      this.page2 = page
      this.getNoticeList(2, this.page2)
    },
    jump (url) {
      if (!url) return
      this.$router.push({ path: url })
    },
    setPicture1 () {
      const chartDom = this.$refs.picture1
      const myChart = echarts.init(chartDom)
      let option
      option = {
        title: {
          text: '当月保险金额',
          left: '5%',
          top: '5%'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '保障中' },
              { value: 735, name: '不在保' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    setPicture2 () {
      const chartDom = this.$refs.picture2
      const myChart = echarts.init(chartDom)
      let option
      option = {
        title: {
          text: '当月在保人数',
          left: '5%',
          top: '5%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '13%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [10, 30, 25, 16, 21, 18, 5, 30, 30, 30, 30, 30],
            type: 'line'
          }
        ]
      }

      option && myChart.setOption(option)
    },
    setPicture3 () {
      const chartDom = this.$refs.picture3
      const myChart = echarts.init(chartDom)
      let option
      option = {
        title: {
          text: '总赔付率 78%',
          left: '5%',
          top: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['保险A赔付率', '保险B赔付率', '总赔付率']
        },
        series: [
          {
            type: 'bar',
            stack: 'total',
            barWidth: '60%',
            data: [10, 20, 30]
          },
          {
            type: 'bar',
            stack: 'total',
            barWidth: '60%',
            data: [15, 16, 24]
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
@@ -35,63 +465,143 @@
<style scoped lang="scss">
@import "@/assets/style/variables.scss";
.home {
  text-align: center;
  color: #777;
  .wrap {
    margin-top: 80px;
    img {
      width: 240px;
    }
  }
  h2 {
    font-size: 32px;
    color: #555;
    margin-bottom: 20px;
  }
  p {
    line-height: 24px;
    margin: 0;
  }
  .start-up {
    margin-top: 8px;
  }
  .guide {
    margin: 30px 0 40px 0;
    display: flex;
    justify-content: center;
    a {
      margin-right: 12px;
      padding: 12px 40px;
      border-radius: 30px;
      background: $primary-color;
      color: #fff;
      text-decoration: none;
    }
  }
  em,a {
    font-style: normal;
    font-weight: bold;
    margin: 0 3px;
    color: $primary-color;
  }
  .award {
    position: absolute;
    right: 20px;
    bottom: 60px;
  width: 100%;
  height: 100%;
  .home_inlet {
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 12px;
    border: 1px solid #eee;
    box-shadow: -1px 1px 10px #ccc;
    h4 {
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    .home_inlet_label {
      width: 100%;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    img {
      width: 160px;
      color: black;
      margin-bottom: 20px;
      transition: opacity ease .3s;
    }
    .home_inlet_list {
      width: 100%;
      display: flex;
      align-items: center;
      .home_inlet_item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        img {
          width: 40px;
          height: 40px;
        }
        span {
          font-size: 14px;
          color: black;
          margin-top: 5px;
        }
      }
    }
  }
  .home_content {
    width: 100%;
    height: calc(100% - 170px);
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .home_content_left {
      width: 350px;
      height: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .home_content_left_item {
        width: 100%;
        height: 32%;
        background: #ffffff;
      }
    }
    .home_content_right {
      flex: 1;
      height: 100%;
      background: #ffffff;
      margin-left: 10px;
      padding: 20px;
      box-sizing: border-box;
      position: relative;
      .home_content_right_label {
        font-size: 18px;
        color: black;
        font-weight: bold;
      }
      .home_content_right_list {
        width: 100%;
        display: flex;
        flex-direction: column;
        .list_item {
          padding: 10px;
          box-sizing: border-box;
          width: 100%;
          display: flex;
          justify-content: space-between;
          border: 1px solid #ececec;
          margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0 !important;
          }
          .list_item_left {
            display: flex;
            width: 60%;
            flex-direction: column;
            span {
              &:nth-child(1) {
                font-size: 14px;
                color: black;
                font-weight: bold;
              }
              &:nth-child(2) {
                font-size: 14px;
                color: black;
                margin-top: 5px;
              }
            }
          }
          .list_item_center {
            display: flex;
            flex-direction: column;
            span {
              font-size: 14px;
              color: black;
              &:nth-child(2) {
                margin-top: 5px;
              }
            }
          }
          .list_item_right {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              font-size: 14px;
              color: #1890FF;
              margin-top: 10px;
              cursor: pointer;
            }
          }
        }
      }
      .home_content_right_page {
        margin-top: 20px;
        position: relative;
        bottom: 20px;
        left: 20px;
        box-sizing: border-box;
      }
    }
  }
}