ezhizao_dms_vue/src/views/index.vue

<template>
  <div class="page-container column-container">
    <el-row :gutter="24" style="margin-left: 10px;">
      <el-col :span="8" class="notifications-label">
        <!-- <div class="dashboard-total-item">
          <img :src="totalIcon2" />
          <div class="dashboard-total-item-label">
            <span>员工总数</span>
            <span>
              <span>本月新入职</span>
              <span>{{ monthTotalCompanies }} 人</span>
            </span>
          </div>
          <div class="number-label">{{ totalCompanies }} 人</div>
        </div> -->
        <div class="notifications-header">公告</div>
        <el-card v-for="item in notifications" style="width: 100%;margin-bottom: 5px;" shadow="always">
          <template #default>
            <div style="display: flex; flex-direction: row;">
              <i class="fa fa-bell-o" aria-hidden="true"
                style="display: inline-block; height: 25px; line-height: 25px;" />
              <div style="margin-left: 5px;display: inline-block; height: 25px; line-height: 25px;">{{ item.title }}
              </div>
            </div>
          </template>
        </el-card>
        <!-- <el-row v-for="item in notifications" style="padding: 5px 10px;">
          {{ item.title }}
        </el-row> -->
      </el-col>
      <el-col :span="8">
        <!-- <div class="dashboard-total-item">
          <img :src="totalIcon3" />
          <div class="dashboard-total-item-label">
            <span>设备总数</span>
            <span>
              <span>本月新购量</span>
              <span>{{ identityMonthTotal }} 台</span>
            </span>
          </div>
          <div class="number-label">{{ identityTotal }} 台</div>
        </div> -->
      </el-col>
    </el-row>
    <!-- <div class="statistic-container">
      <el-row :gutter="16">
        <el-col :span="12">
          <div class="item-statistic-container" id="information-statistic"></div>
        </el-col>
        <el-col :span="12">
          <div class="item-statistic-container" id="appointment-statistic"></div>
        </el-col>
      </el-row>
    </div> -->
  </div>
</template>
<script setup>
// import totalIcon2 from '@/assets/images/dashboard-total-icon-2.png'
// import totalIcon3 from '@/assets/images/dashboard-total-icon-3.png'
import { parseTime } from '@/utils/tools.js'
import { listNotification } from '@/api/business/notification'

// import { index } from '@/api/business/production'

//import { getDashboardStatistics } from '@/api/ss/visitor/general.js'
//import { getTenant } from '@/utils/auth'

// import * as echarts from 'echarts'
const statisticOption = reactive({
  title: {
    text: '企业与标识每日注册统计',
    left: 8
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['企业', '标识']
  },
  grid: {
    left: '16px',
    right: '48px',
    bottom: '48px',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    // x 坐标轴对应的值
    data: []
  },
  yAxis: {
    type: 'value'
  },
  // 缩放
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: 0,
      filterMode: 'none'
    },
    {
      type: 'slider',
      yAxisIndex: 0,
      filterMode: 'none'
    },
    {
      type: 'inside',
      xAxisIndex: 0,
      filterMode: 'none'
    },
    {
      type: 'inside',
      yAxisIndex: 0,
      filterMode: 'none'
    }
  ],
  // y 坐标轴对应的值
  series: [
    {
      name: '企业',
      type: 'line',
      data: [11, 0, 0, 22, 38, 32, 20, 12, 0, 0, 14, 9, 17, 18, 35, 0, 0, 16, 20, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '标识',
      type: 'line',
      data: [173, 101, 120, 240, 182, 123, 255, 198, 156, 110, 155, 121, 120, 128, 209, 127, 140, 205, 142, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    }
  ]
})

let totalCompanies = ref(0)
let monthTotalCompanies = ref(0)
let identityTotal = ref(0)
let identityMonthTotal = ref(0)

let currentMonth = ref('')
let statisticDom, statistic
const notifications = ref([])

onMounted(() => {
  currentMonth.value = parseTime(new Date(), '{y}-{m}')
  //statisticDom = document.getElementById('information-statistic')
  //statistic = echarts.init(statisticDom)
  //getCurrentMonthDayArr()
  getList()
})

function getList() {
  listNotification({}).then(res => {
    notifications.value = res.rows
  })
}

const getCurrentMonthDayArr = (dateStr) => {
  // 获取当前日期
  var currentDate = dateStr ? new Date(dateStr) : new Date()
  // 获取当前月份
  var currentMonth = currentDate.getMonth()
  // 获取下个月的第一天
  var nextMonth = new Date(currentDate.getFullYear(), currentMonth + 1, 1)
  // 设置日期为当前月份的最后一天
  nextMonth.setDate(nextMonth.getDate() - 1)
  // 根据当前月最后一天的日期，判断每个月有多少天
  var days = nextMonth.getDate()

  // 创建一个空数组来存储日期
  const dateArray = []
  // 循环遍历天数
  for (var day = 1; day <= days; ++day) {
    // 使用padStart函数将日期补齐到两位数，不足的地方用0填充
    var formattedDay = String(day).padStart(2, '0')
    // 将格式化后的日期添加到数组中
    dateArray.push(formattedDay)
  }
  statisticOption.xAxis.data = dateArray
  totalCompanies.value = 523
  monthTotalCompanies.value = 276
  identityTotal.value = 5133
  identityMonthTotal.value = 3015

  statisticOption && statistic.setOption(statisticOption)
}
const handleChangeMonth = (val) => {
  getCurrentMonthDayArr(val)
}
</script>

<style scoped>
.notifications-header {
  height: 30px;
  margin: 10px 5px;
  font-size: 20px;
  padding: 0 5px;
}

:deep(.notifications-label .el-card__body) {
  padding: 5px 10px !important;
}

.notifications-label .el-card {
  border: 1px solid #fdf1aa;
  border-radius: 2px;
}

.notifications-label .el-card.is-always-shadow {
  box-shadow: 0 0 5px #fdf1aa;
}

.dashboard-total-item {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 152px;
  background-color: #fff;
  font-size: 16px;
  justify-content: space-between;
}

.dashboard-total-item>.dashboard-total-item-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 32px;
  padding: 0 16px;
}

.dashboard-total-item>.dashboard-total-item-label>span:first-child {
  font-weight: bold;
  font-size: 18px;
}

.dashboard-total-item>.dashboard-total-item-label>span:last-child {
  color: #6b6b6b;
}

.dashboard-total-item>.dashboard-total-item-label>span:last-child>span:first-child {
  margin-right: 8px;
}

.dashboard-total-item>.dashboard-total-item-label>span:last-child>span:last-child {
  color: #4367df;
}

.dashboard-total-item>.number-label {
  font-size: 40px;
  margin-left: 16px;
  font-weight: bold;
  color: #5a6ac3;
}

.statistic-container {
  position: relative;
  margin-top: 24px;
  background-color: #fff;
  padding-top: 16px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 4px;
}

.statistic-container>.month-picker {
  position: absolute;
  top: 16px;
  left: 240px;
  line-height: 24px;
}

.item-statistic-container {
  height: 560px;
}
</style>