Cambodia-TBR-RFID-ui/src/views/chart/chart1.vue

<template>
  <div class="content">
    <div class="bg"></div>
    <div class="title">RFID中间件监控平台</div>
    <div class="topTitle" style="left: 13%">设备数量:</div>
    <div class="topTitle" style="left: 37.5%">在线数量:</div>
    <div class="topTitle" style="left: 62%">离线数量:</div>
    <div class="topTitle" style="left: 86.5%">告警数量:</div>
    <div class="topNum" style="left: 17%; color: #127feb">66</div>
    <div class="topNum" style="left: 41.5%; color: #49e1f5">66</div>
    <div class="topNum" style="left: 66%; color: #d8ee30">66</div>
    <div class="topNum" style="left: 90.5%; color: #901f43">66</div>
    <div class="successRate">
      <Chart ref="successRateRef"></Chart>
    </div>
    <div class="scrollTable">
      <div class="th" :style="{ backgroundImage: `url(${thbg})` }">
        <div class="td" style="width: 25%">时间</div>
        <div class="td" style="width: 15%">设备名称</div>
        <div class="td" style="width: 30%">位置</div>
        <div class="td" style="width: 10%">等级</div>
        <div class="td" style="width: 20%">告警行为</div>
      </div>
      <vue3ScrollSeamless
        :limitMoveNum="1"
        :step="1"
        :hover="true"
        :dataList="tableData"
        style="overflow: hidden; height: calc(100% - 3.5vw); margin-top: 0.2vw"
      >
        <div
          v-for="(item, index) in tableData"
          :key="index"
          class="tr"
          style="margin-top: 8px; line-height: 2.4vw"
          :style="{ backgroundImage: `url(${trbg})` }"
        >
          <div class="td" style="width: 25%; line-height: 2.4vw">{{ item.time }}</div>
          <div class="td" style="width: 15%; line-height: 2vw">{{ item.name }}</div>
          <div class="td" style="width: 30%; line-height: 2vw; font-size: 0.6vw">{{ item.lo }}</div>
          <div class="td" style="width: 10%; line-height: 2vw">{{ item.level }}</div>
          <div class="td" style="width: 20%; line-height: 2vw">{{ item.item1 }}</div>
        </div>
      </vue3ScrollSeamless>
    </div>
    <div class="center">
      <ListItem :isRoot="false" v-for="i in centerData" :key="i.name" :itemData="i" />
    </div>
  </div>
</template>
<script setup>
import Chart from '@/components/Chart/chart.vue';
import thbg from '@/assets/chart/thbg.png';
import trbg from '@/assets/chart/trbg.png';
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
import ListItem from './listItem.vue';

const successRateRef = ref(null);
const tableData = ref([
  {
    time: '2016-06-05',
    name: '带束层2',
    lo: '半钢成型A4机台',
    level: '次要',
    item1: '设备离线'
  },
  {
    time: '2016-06-05',
    name: '带束层2',
    lo: '半钢成型A4机台',
    level: '次要',
    item1: '设备离线'
  },
  {
    time: '2016-06-05',
    name: '带束层2',
    lo: '半钢成型A4机台',
    level: '次要',
    item1: '设备离线'
  },
  {
    time: '2016-06-05',
    name: '带束层2',
    lo: '半钢成型A4机台',
    level: '次要',
    item1: '设备离线'
  },
  {
    time: '2016-06-05',
    name: '带束层2',
    lo: '半钢成型A4机台',
    level: '次要',
    item1: '设备离线'
  },
  {
    time: '2016-06-05',
    name: '带束层2',
    lo: '半钢成型A4机台',
    level: '次要',
    item1: '设备离线'
  }
]);
const centerData = ref({
  isAmmeter: '1',
  monitorCode: '111',
  monitorName: '123',
  deviceData: [
    {
      value: '11',
      units: 'kg'
    }
  ],
  children: [
    {
      isAmmeter: '1',
      monitorCode: '111',
      monitorName: '123',
      deviceData: [
        {
          value: '11',
          units: 'kg'
        }
      ]
    }
  ]
});
onMounted(() => {
  successRateRef.value.setData({
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,.6)',
      borderWidth: 0,
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      top: '',
      icon: 'path://M512.798285 0.399142C230.604561 0.399142 1.895927 229.107776 1.895927 511.301501s228.708634 510.902358 510.902358 510.902358 510.902358-228.708634 510.902358-510.902358S794.992009 0.399142 512.798285 0.399142z m0 878.712142C309.634769 879.111284 144.988501 714.465017 144.988501 511.301501S309.634769 143.491717 512.798285 143.491717s367.809784 164.646268 367.809784 367.809784-164.646268 367.809784-367.809784 367.809783z',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      textStyle: {
        color: '#fff',
        fontSize: 8
      }
    },
    xAxis: {
      type: 'category',
      data: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14', '1/15', '1/16', '1/17', '1/18']
    },
    grid: {
      top: 30,
      left: 30,
      right: 30,
      bottom: 30
    },
    yAxis: {
      splitLine: {
        show: false
      },
      type: 'value'
    },
    series: [
      {
        name: '需求数量',
        data: [9, 8, 6.5, 7.2, 6.7, 7.4, 8.2, 9, 8, 6.5, 7.2, 6.7, 7.4, 8.2, 9, 8, 6.5, 5],
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          color: '#368CDC'
        },
        lineStyle: {
          color: '#368CDC'
        }
      },
      {
        name: '缺陷数量',
        data: [3, 9, 4, 3, 11, 8, 10, 3, 9, 4, 3, 11, 8, 10, 3, 9, 4, 3],
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          color: '#39FFF4'
        },
        lineStyle: {
          color: '#39FFF4'
        }
      }
    ]
  });
});
</script>
<style scoped lang="less">
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: 'Source Han Sans', 'Noto Sans CJK SC', '思源黑体', sans-serif;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/chart/bg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .title {
    position: absolute;
    top: 2vw;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.1vw;
    font-weight: 700;
    letter-spacing: 0.2vw;
    color: #7ae7f8;
    background: linear-gradient(to bottom, #ffffff 0%, #7ae7f8 100%);
    background-clip: text;
    color: transparent;
  }

  .topTitle {
    position: absolute;
    top: 16.7%;
    transform: translate(-50%, -50%);
    color: #eee;
    font-size: 1.4vw;
    letter-spacing: 0.2vw;
  }

  .topNum {
    position: absolute;
    top: 16.7%;
    transform: translateY(-50%);
    color: #eee;
    font-size: 1.5vw;
    letter-spacing: 0.2vw;
  }

  .successRate {
    position: absolute;
    top: 30.7%;
    left: 75.6%;
    width: 20.6%;
    height: 28.5%;
  }

  .scrollTable {
    position: absolute;
    top: 64.7%;
    left: 75.6%;
    width: 20.6%;
    height: 28.5%;
  }

  .th {
    height: 3.3vw;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 1vw;
  }

  .tr {
    height: 2.4vw;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 0.8vw;
  }

  .td {
    display: inline-block;
    line-height: 3.3vw;
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }

  .center {
    position: absolute;
    top: 24.5%;
    left: 19.6%;
    width: 53%;
    height: 69%;
  }
}
</style>