TFT_WmsFrontEnd/ZRAdmin-vue-main/src/views/index_v1.vue

<template>
  <div class="dashboard-editor-container home">
    <div
      style="width:100%;position:absolute;background:url(public/titleBackground.png) no-repeat center;background-size: 1500px 80px;">
      <el-row :gutter="10" justify="center"
        style="width: 360px;margin-top: 10px;margin-bottom: 60px; left: 50%;margin-left: -180px; ">
        <el-col :span="10">
          <img style="height:60px;" :src="logoL" />
        </el-col>
        <el-col :span="14">
          <span style="font-weight: bold; font-size:30px;height: 60px; line-height: 70px;">监控指挥平台</span>
        </el-col>
      </el-row>
    </div>
    <!-- 每日作业/统计信息/关键件占比 -->
    <el-row :gutter="10" class="row-space" style="margin-top:55px">
      <el-col :md="24" :lg="8" :xl="8">
        <el-card shadow="hover" class="card">
          <template #header>
            <span>每日作业</span>
          </template>
          <bar-chart />
        </el-card>
      </el-col>
      <el-col :md="24" :lg="8" :xl="8">
        <el-row style="margin-top:80px;" justify="center">
          <el-col :span="22">
            <el-row class="row-space row-space-span" justify="center">
              <el-col :span=intStatColWidth0>
                <span class="statistics-span">{{ strStatQA }}</span>
              </el-col>
              <el-col :span=intStatColWidth1>
                <div class="statistic-card">
                  <el-statistic :value=chartBar_qa_key>
                    <template #suffix>
                      <span class="than-yesterday green">
                        24%<el-icon>
                          <CaretBottom />
                        </el-icon>
                      </span>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-row class="row-space row-space-span" justify="center">
              <el-col :span=intStatColWidth0>
                <span class="statistics-span">{{ strStatInstore }}</span>
              </el-col>
              <el-col :span=intStatColWidth1>
                <div class="statistic-card">
                  <el-statistic :value=chartBar_in_key>
                    <template #suffix>
                      <span class="than-yesterday red">
                        24%<el-icon>
                          <CaretTop />
                        </el-icon>
                      </span>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-row class="row-space row-space-span" justify="center">
              <el-col :span=intStatColWidth0>
                <span class="statistics-span">{{ strStatOutstore }}</span>
              </el-col>
              <el-col :span=intStatColWidth1>
                <div class="statistic-card">
                  <el-statistic :value=chartBar_out_key>
                    <template #suffix>
                      <span class="than-yesterday red">
                        24%<el-icon>
                          <CaretTop />
                        </el-icon>
                      </span>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-row class="row-space row-space-span" justify="center">
              <el-col :span=intStatColWidth0>
                <span class="statistics-span">{{ strStatAssemble }}</span>
              </el-col>
              <el-col :span=intStatColWidth1>
                <div class="statistic-card">
                  <el-statistic :value=chartBar_ass_key>
                    <template #suffix>
                      <span class="than-yesterday red">
                        24%<el-icon>
                          <CaretTop />
                        </el-icon>
                      </span>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-row class="row-space row-space-span" justify="center">
              <el-col :span=intStatColWidth0>
                <span class="statistics-span">{{ strStatWork }}</span>
              </el-col>
              <el-col :span=intStatColWidth1>
                <div class="statistic-card">
                  <el-statistic :value=totalUnkey>
                    <template #suffix>
                      <span class="than-yesterday red">
                        24%<el-icon>
                          <CaretTop />
                        </el-icon>
                      </span>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :md="24" :lg="8" :xl="8">
        <el-card shadow="hover" class="card">
          <template #header>
            <span>关键件占比</span>
          </template>
          <Pie-chart-key />
        </el-card>

      </el-col>
    </el-row>
    <!-- 物料类别占比/操作日志/时间段作业效率 -->
    <el-row :gutter="10" class="row-space">
      <el-col :md="24" :lg="8" :xl="8">
        <el-card shadow="hover" class="card">
          <template #header>
            <span>物料类别占比</span>
          </template>
          <Pie-chart-category />
        </el-card>
      </el-col>
      <el-col :md="24" :lg="8" :xl="8">
        <el-card shadow="hover" class="card">
          <template #header>
            <span>系统操作日志</span>
            <el-button text class="card-button">
              <router-link to="/system/log/operlog">
                <el-icon>
                  <MoreFilled />
                </el-icon>
              </router-link>
            </el-button>
          </template>
          <el-table v-loading="loading" border :data="list">
            <el-table-column type="index" label="序号" align="center" />
            <el-table-column label="用户" align="center" prop="operName" />
            <el-table-column label="IP地址" align="center" prop="operIp" :show-overflow-tooltip="true" />
            <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
            <el-table-column label="操作状态" align="center" prop="status">
              <template #default="{ row }">
                <dict-tag :options="statusOptions" :value="row.status"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作日期" align="center" prop="operTime">
              <template #default="scope">
                <span>{{ scope.row.operTime }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </el-col>
      <el-col :md="24" :lg="8" :xl="8">
        <el-card shadow="hover" class="card">
          <template #header>
            <span>时间段作业效率</span>
          </template>
          <line-chart :chart-data="lineChartData" :key="dataType" />
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script setup name="index">
import { provide, computed } from 'vue'
import LineChart from './dashboard/LineChart'
import PieChartKey from './dashboard/PieChart_key'
import PieChartCategory from './dashboard/PieChart_category'
import BarChart from './dashboard/BarChart'

import useUserStore from '@/store/modules/user'
import useSocketStore from '@/store/modules/socket'

import logoL from '@/assets/logo/logo-L.png'

import { list as listOperLog } from '@/api/monitor/operlog'
const strStatQA = '关键件质检数统计：'
const strStatInstore = '关键件入库数统计：'
const strStatOutstore = '关键件出库数统计：'
const strStatAssemble = '关键件装配数统计：'
const strStatWork = '非关键件作业数统计：'
const strStatQATitle = '关键件质检数统计'
const strStatInstoreTitle = '关键件入库数统计'
const strStatOutstoreTitle = '关键件出库数统计'
const strStatAssembleTitle = '关键件装配数统计'
const strStatWorkTitle = '非关键件作业数统计'

const intStatColWidth0 = 10
const intStatColWidth1 = 10
const intStatColWidth2 = 10

const data = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  },
  wordCloud: [
    {
      name: 'Vue3',
      value: 144
    },
    {
      name: '.net6',
      value: 928
    },
    {
      name: 'Sqlsugar',
      value: 906
    },
    {
      name: 'Redis',
      value: 825
    },
    {
      name: '代码生成',
      value: 514
    },
    {
      name: '开源免费',
      value: 486
    },
    {
      name: '代码简单',
      value: 53
    },
    {
      name: '打赏',
      value: 163
    },
    {
      name: '国际化',
      value: 163
    },
    {
      name: 'Composition api',
      value: 1163
    },
    {
      name: 'Quartz.Net',
      value: 190
    },
    {
      name: 'Element UI',
      value: 190
    }
  ]
}
const { proxy } = getCurrentInstance()

const chartBar_qa = 99
provide('chartBar_qa', chartBar_qa)
const chartBar_qa_key = 99
provide('chartBar_qa_key', chartBar_qa_key)
const chartBar_in = 199
provide('chartBar_in', chartBar_in)
const chartBar_in_key = 199
provide('chartBar_in_key', chartBar_in_key)
const chartBar_out = 99
provide('chartBar_out', chartBar_out)
const chartBar_out_key = 99
provide('chartBar_out_key', chartBar_out_key)
const chartBar_ass = 299
provide('chartBar_ass', chartBar_ass)
const chartBar_ass_key = 399
provide('chartBar_ass_key', chartBar_ass_key)
const totalUnkey = computed(() => { return chartBar_qa + chartBar_in + chartBar_out + chartBar_ass })
const chartPie_key = 799
provide('chartPie_key', chartPie_key)
const chartPie_key_key = 1299
provide('chartPie_key_key', chartPie_key_key)

const chartPie_category0 = 1599
provide('chartPie_category0', chartPie_category0)
const chartPie_category1 = 1399
provide('chartPie_category1', chartPie_category1)
const chartPie_category2 = 899
provide('chartPie_category2', chartPie_category2)
const chartPie_category3 = 599
provide('chartPie_category3', chartPie_category3)
const chartPie_category4 = 399
provide('chartPie_category4', chartPie_category4)

const queryParams = ref({
  pageNum: 1,
  pageSize: 8,
  title: undefined,
  operName: undefined,
  businessType: undefined,
  status: undefined,
  operParam: undefined
})

// 遮罩层
const loading = ref(true)
// 操作日志数据
const list = ref([])
// 日期范围
const dateRange = ref([])
/** 查询操作日志 */
function getList() {
  loading.value = true
  listOperLog(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    loading.value = false
    if (response.code == 200) {
      list.value = response.data.result
    } else {
      list.value = []
    }
  })
}
let lineChartData = reactive([])
const dataType = ref(null)
function handleSetLineChartData(type) {
  dataType.value = type
  lineChartData = data[type]
}
handleSetLineChartData('newVisitis')
// 系统状态字典
const statusOptions = ref([])
proxy.getDicts('sys_common_status').then((response) => {
  statusOptions.value = response.data
})
// 操作类型字典
const businessTypeOptions = ref([])
proxy.getDicts('sys_oper_type').then((response) => {
  businessTypeOptions.value = response.data
})
getList()
</script>

<style lang="scss" scoped>
.home {
  overflow: hidden;

  .home-card-more {
    float: right;
    padding: 3px 0;
    font-size: 13px;
  }

  .statistics-span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin: 5px 0px;
  }

  .row-space {
    margin-bottom: 10px;
  }

  .row-space-span {
    line-height: 35px;
  }

  // .card{
  //   height: 390px;
  // }
  .user-item {
    height: 198px;
    display: flex;
    align-items: center;

    .user-item-left {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .user-item-right {
      flex: 1;
      padding: 15px;

      .right-title {
        font-size: 20px;
      }

      .right-l-v {
        font-size: 13px;
        display: flex;

        .right-label {
          color: gray;
          width: 75px;
        }

        .right-value {
          flex: 1;
        }
      }
    }
  }

  .info {
    height: 189px;

    // overflow-y: scroll;
    .info-scroll {
      height: 100%;
      overflow: auto;

      .info-ul {
        list-style: none;
        padding: 0;

        .info-item {
          display: flex;
          font-size: 13px;
          color: gray;
          height: 28px;
          line-height: 28px;

          &:hover {
            color: var(--color-primary);
            cursor: pointer;
          }

          .info-item-left {
            flex: 1;
            flex-shrink: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          .info-item-right {
            width: 140px;
            text-align: right;
            padding-right: 10px;
          }
        }
      }
    }
  }
}

.dashboard-editor-container {
  background-color: var(--base-bg-main);
  position: relative;

  .chart-wrapper {
    background: var(--base-bg-main);
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.el-statistic {
  --el-statistic-content-font-size: 32px;
}

.statistic-card {
  height: 100%;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-card-templete {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.than-yesterday {
  font-size: 16px;
  margin-left: 12px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}

.card {
  height: 400px;
}

.card-button {
  float: right;
  width: 25px;
  height: 25px;
}
</style>