mental-health-web/src/views/bigScreen/index.vue

<template>
  <div class="big-screen">
    <header class="item item1">
      <h1>云舒心理健康云平台</h1>
      <div class="showTime">{{ showTime }}</div>
    </header>

    <div class="item item2 no">
      <div class="no-hd">
        <ul>
          <li>50</li>
          <li>164</li>
          <li>87</li>
          <li>1</li>
        </ul>
      </div>
      <div class="no-bd">
        <ul>
          <li>总人数</li>
          <li>总采集人数</li>
          <li>关注人次</li>
          <li>干预人次</li>
        </ul>
      </div>
    </div>

    <div class="item item3 panel ">
      <h2>采集统计分析</h2>
      <v-chart style="height: 3.75rem;" :option="pieOption" autoresize />
      <div class="panel-footer"></div>
    </div>

    <div class="item item4 panel">
      <h2>单位数据统计</h2>
      <v-chart style="height: 3.75rem;" :option="barOption" autoresize />
      <div class="panel-footer"></div>
    </div>

    <div class="item item5 panel">
      <h2>单位排名统计</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>

    <div class="item item6 panel">
      <h2>心理咨询师</h2>
      <div class="chart">
        <el-table :data="tableData" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
          <el-table-column prop="date" label="姓名" />
          <el-table-column prop="name" label="专业资质" />
          <el-table-column prop="address" label="擅长方向" />
        </el-table>
      </div>
      <div class="panel-footer"></div>
    </div>

    <div class="item item7 panel">
      <h2>数据统计分析</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>

    <div class="item item8 panel">
      <h2>已测评人员</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>

    <div class="item item9"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import '@/utils/flexible'
import * as echarts from 'echarts';
import { use } from 'echarts/core'
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);

let showTime = ref('')
let timer: any = null

function time() {
  let dt = new Date();
  let y = dt.getFullYear();
  let mt = dt.getMonth() + 1;
  let day = dt.getDate();
  let h = dt.getHours();//获取时
  let m = dt.getMinutes();//获取分
  let s = dt.getSeconds();//获取秒
  showTime.value = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex % 2 == 0) {
    return {
      backgroundColor: '#082187',
      fontSize: '0.25rem'
    }
  } else {
    return {
      backgroundColor: '#0A27A8',
      fontSize: '0.25rem'
    }
  }
}

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  return {
    backgroundColor: '#10215D',
    color: '#fff',
    fontSize: '0.25rem'
  }
}

onMounted(() => {
  time()

  timer = setInterval(time, 1000);
});


onBeforeUnmount(() => {
  clearInterval(timer);
});

const pieOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 20
    },
  },
  series: [
    {
      name: '采集统计分析',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '中风险' },
        { value: 735, name: '低风险' },
        { value: 580, name: '高风险' },
        { value: 484, name: '未见异常' },
        { value: 300, name: '重大风险' }
      ]
    }
  ]
});

const barOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    textStyle: {
      color: '#fff',
      fontSize: 20
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url('@/assets/font/DS-DIGIT.TTF');
}

.big-screen {
  background: url('@/assets/images/bg.jpg') no-repeat top center;
  background-size: cover;
  line-height: 1.15;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1.25rem 1.75rem repeat(2, 1fr) .025rem;
  gap: .125rem;

  header {
    position: relative;
    height: 1.25rem;
    background: url('@/assets/images/head_bg.png') no-repeat;
    background-size: 100% 100%;

    h1 {
      font-size: .475rem;
      color: #fff;
      text-align: center;
      line-height: 1rem;
    }

    .showTime {
      position: absolute;
      right: .375rem;
      top: 0;
      line-height: .9375rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: .25rem;
      letter-spacing: .025rem;
    }
  }

  .no {
    background-color: rgba(101, 132, 226, 0.1);
    padding: .1875rem;
    margin-left: .125rem;
    margin-right: .125rem;

    .no-hd {
      height: 1rem;
      position: relative;
      border: 1px solid rgba(25, 186, 139, 0.17);

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 30px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }

      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        width: 30px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }

      ul {
        display: flex;

        li {
          position: relative;
          flex: 1;
          line-height: 1rem;
          font-size: .875rem;
          color: #ffeb7b;
          text-align: center;
          font-family: 'electronicFont';

          &::after {
            content: "";
            position: absolute;
            top: 25%;
            right: 0;
            height: 50%;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }

    .no-bd {
      height: .5rem;

      ul {
        display: flex;

        li {
          flex: 1;
          text-align: center;
          color: rgba(255, 255, 255, 0.7);
          font-size: .225rem;
          line-height: .5rem;
          padding-top: .125rem;
        }
      }
    }
  }

  .item1,
  .item2,
  .item9 {
    grid-column: 1/4;
  }

  .item3,
  .item6 {
    margin-left: .125rem;
  }

  .item5,
  .item8 {
    margin-right: .125rem;
  }

  .panel {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: url('@/assets/images/line.png') rgba(255, 255, 255, 0.03);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;

      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }

      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }

    h2 {
      height: .6rem;
      color: #fff;
      line-height: .6rem;
      text-align: center;
      font-size: .25rem;
      font-weight: 400;
    }

  }

  /* 设置表格的背景颜色 */
  :deep(.el-table) {
    background-color: #f0f0f0;
    /* 替换为你想要的颜色 */
  }

  /* 设置表格行的背景颜色 */
  :deep(.el-table__row) {
    background-color: #ffffff;
    /* 替换为你想要颜色 */
  }

  /* 设置表格头的背景颜色 */
  :deep(.el-table__header-wrapper th) {
    background-color: #e0e0e0;
    /* 替换为你想要颜色 */
  }
}
</style>