zjugis_OA/client/src/views/OaSystem/home/homeLeader.vue

<template>
  <div class="leftBox">
    <div class="topBox">
      <div class="card-item-common">
        <CardTitle title="公司动态" @moreClick="moreHandle" showMore>
          <template #leftTitle>
            <div class="news-tabs">
              <span
                v-for="item in newsTabs"
                :key="item.type"
                :class="item.type === tabIndex ? 'checked' : ''"
                @click="handleTabClick(item.type)"
              >
                {{ item.label }}
              </span>
            </div>
          </template>
        </CardTitle>
        <CompanyNews v-if="tabIndex === 0" />
        <CardItemSeven3 v-else :type="1" />
      </div>
      <div class="card-item-common">
        <CardTitle
          title="回款通知"
          @moreClick="toNewPageHandle('/oaSystem/marketCenter/returnMessage')"
          showMore
        />
        <CardItemSeven />
      </div>
    </div>
    <div class="bottomBox">
      <div class="card-item-common card-flex-col" style="width: 50%; margin-right: 20px">
        <CardTitle title="人员情况" />
        <PersonInfo />
      </div>
      <div class="card-item-common card-flex-col" style="width: 50%">
        <ProjectInfo />
      </div>
    </div>
  </div>
  <div class="rightBox">
    <div class="card-item-common">
      <CardTitle title="事项办理" />
      <div class="handle-events"> <HandleEvents /> </div>
    </div>
    <div class="card-item-common card-flex-col">
      <CardTitle title="合同信息" />
      <CardItemThree @init="initData" />
      <CardTitle title="成本情况">
        <template #rightTitle>
          <span style="font-size: 12px; color: #8b969c"> 单位：元 </span>
        </template>
      </CardTitle>
      <div style="flex: 1"> <MyEchart :options="options" /></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import CompanyNews from './components/CompanyNews.vue'
import CardTitle from './components/CardTitle.vue'
import CardItemSeven from './components/CardItemSeven.vue'
import HandleEvents from './components/HandleEvents.vue'
import CardItemThree from './components/CardItemThree.vue'
import ProjectInfo from './components/ProjectInfo.vue'
import PersonInfo from './components/PersonInfo.vue'
import MyEchart from '@/components/Echart/src/Echart.vue'
import CardItemSeven3 from './components/CardItemSeven3.vue'

import { ref } from 'vue'
const tabIndex = ref(0)

const newsTabs = [
  {
    label: '公司动态',
    type: 0,
    path: 'newsLook'
  },
  {
    label: '通知公告',
    type: 1,
    path: '/noticeLook'
  }
]

const handleTabClick = (type: number) => {
  tabIndex.value = type
}

const router = useRouter()
const moreHandle = (index: number | null = null) => {
  if (index != null) {
    router.push({ path: newsTabs[index].path })
    return
  }
  router.push({ path: newsTabs[tabIndex.value].path })
}
const toNewPageHandle = (path: string | null = null) => {
  if (path != null) {
    router.push({ path: path })
  }
}

/**
 * 折线图
 */
const chartData = ref([
  { value: 0, name: '差旅费用' },
  { value: 0, name: '报销成本' },
  { value: 0, name: '用款成本' }
])

const xAxisData = ['差旅费用', '报销成本', '用款成本']

const options = reactive<EChartsOption>({
  grid: {
    left: '10%',
    right: '0%',
    bottom: '16%',
    top: '10%'
  },
  xAxis: {
    data: xAxisData,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#E3E3E3'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#666'
      }
    }
  },
  series: [
    {
      name: 'bar',
      type: 'bar',
      barWidth: 20,
      label: {
        show: true,
        position: 'top'
      },
      itemStyle: {
        normal: {
          barBorderRadius: 10,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#7BB5FA' },
            { offset: 1, color: '#448ADC' }
          ])
        }
      },
      data: chartData.value
    }
  ]
})
const initData = (result) => {
  let isBool = false
  if (result.travelCost >= 10000) {
    isBool = true
  } else if (result.reimbursementCost >= 10000) {
    isBool = true
  } else if (result.paymentCost >= 10000) {
    isBool = true
  }
  chartData.value[0]['value'] = isBool ? (result.travelCost / 10000).toFixed(2) : result.travelCost
  chartData.value[1]['value'] = isBool
    ? (result.reimbursementCost / 10000).toFixed(2)
    : result.reimbursementCost
  chartData.value[2]['value'] = isBool
    ? (result.paymentCost / 10000).toFixed(2)
    : result.paymentCost
  // options['series'][0]['data'] = chartData
}
</script>