chore:大屏初始化

ZhangXianQiang

2024-03-18 36856f57e487de401352f8ca52189ffab0420aab

chore:大屏初始化

 package.json

@@ -36,6 +36,7 @@
    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "clipboard": "2.0.8",
@@ -54,6 +55,7 @@
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "v-scale-screen": "1.0.0",
    "vue": "2.6.12",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",

 src/assets/images/screen/header_bg.png

 src/assets/images/screen/icon/icon1.png

 src/assets/images/screen/icon/icon2.png

 src/assets/images/screen/pageBg1.jpg

 src/assets/images/screen/title_bg.png

 src/main.js

@@ -1,7 +1,7 @@
import Vue from 'vue'

import Cookies from 'js-cookie'
import {getToken} from "@/utils/auth";
import { getToken } from "@/utils/auth";
import Element from 'element-ui'
import './assets/styles/element-variables.scss'

@@ -38,6 +38,12 @@
// 字典数据组件
import DictData from '@/components/DictData'

// 大屏
import VScaleScreen from 'v-scale-screen'
import dataV from '@jiaminghi/data-view'



// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
@@ -62,6 +68,8 @@
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
Vue.use(VScaleScreen)
Vue.use(dataV)
DictData.install()

/**

 src/router/index.js

@@ -75,6 +75,14 @@
    ]
  },
  {
    path: '/screen',
    component: Layout,
    hidden: true,
    component: () => import('@/views/screen/index'),
    name: 'Profile',
    meta: { title: '大屏信息', icon: 'user' }
  },
  {
    path: '/user',
    component: Layout,
    hidden: true,

 src/views/screen/components/screen-face/index.vue

New file
@@ -0,0 +1,204 @@
<template>
  <div class="face-container">
    <div class="title-container">
      <span class="title">人脸数据趋势</span>
    </div>
    <div class="face-content">
      <div class="data-plane">
        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">昨日人脸采集设备总数</div>
              <div class="data-num">{{formatNumber(1123)}}</div>
            </div>
          </div>
        </dv-border-box-13>

        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">昨日抓拍数据量</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
            </div>
          </div>
        </dv-border-box-13>

        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">历史抓拍数据量</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
            </div>
          </div>
        </dv-border-box-13>
      </div>
      <div id="faceChart" ref="faceChart"></div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
let lineChart = null;
export default {
  name: 'ScreenFace',
  data() {
    return {
      dataList: {
        state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
        state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
      },
    }
  },

  methods: {
    initChart() {
      const option = {
        legend: {
          right: 'right',
          top: 'top',
          orient: "vertical",
          icon: 'rect',
          data: [
            {
              name: '正常数',
              itemStyle: {
                color: 'rgba(62, 144, 247, 1)'
              }
            },
            {
              name: '异常数',
              itemStyle: {
                color: 'rgba(85, 192, 191, 1)'
              }
            },
          ],
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: Object.keys(this.dataList.state),
        },
        yAxis: {},
        series: [
          {
            name: '今日',
            data: Object.entries(this.dataList.state).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
          {
            name: '昨日',
            data: Object.entries(this.dataList.state2).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          }
        ]
      };
      lineChart.setOption(option, true);
    },

    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
    }
  },

  mounted() {
    lineChart = echarts.init(this.$refs.faceChart);
    this.initChart();
  },
  beforeDestroy() {
    if (lineChart) {
      lineChart.dispose();
    }
  },
}
</script>

<style lang="scss" scoped>
.title-container {
  background-image: url("../../../../assets/images/screen/title_bg.png");
  background-size: 231px 100%;
  background-repeat: no-repeat;
  height: 38px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .title {
    margin-left: 20px;
    margin-top: -2px;
    color: #fff;
    letter-spacing: 2px;
    font-size: 20px;
    font-style: italic;
  }
}

.face-content {
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);

  .plane {
    margin-bottom: 10px;
  }

  .data-plane {
    .data-item {
      width: 100%;
      padding: 20px 20px;
      display: flex;
      align-items: center;

      .data-icon {
        width: 40px;
        margin: 0 20px;
      }

      .data-info {
        flex: 1;
        color: #5b83bd;
        font-size: 16px;

        .data-num {
          margin-top: 5px;
          font-size: 24px;
          color: #fff;
        }
      }
    }
  }

  #faceChart {
    width: 100%;
    height: 300px;
  }
}

.width-img {
  width: 100%;
}
</style>

 src/views/screen/components/screen-title/index.vue

New file
@@ -0,0 +1,41 @@
<template>
  <div class="header-container">
    <div class="header-content">
      <div class="header-bg">
        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
      </div>
      <div class="header-text">
        自贡运维考核可视化大屏
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScreenTitle'
}
</script>

<style lang="scss" scoped>
.header-container {
  width: 1000px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.width-img {
  width: 100%;
  display: block;
}
.header-text {
  position: absolute;
  left: 49%;
  top: 15px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 30px;
}
</style>

 src/views/screen/components/screen-wrapper/index.vue

New file
@@ -0,0 +1,64 @@
<template>
  <div class="wrapper-container">
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face></screen-face>
      </div>
      <div class="center-container wrapper">

      </div>
      <div class="right-container wrapper">

      </div>
    </div>
  </div>
</template>

<script>
import ScreenFace from '../screen-face/index';
export default {
  name: 'ScreenWrapper',
  components: {
    ScreenFace
  },
}
</script>

<style lang="scss" scoped>
.wrapper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  .wrapper-content {
    width: 100%;
    height: calc(100% - 100px);
    margin-top: 100px;
    border: 1px solid red;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    align-items: center;
  }
}

.wrapper {
  width: 33.3%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &:first-of-type {
    padding-left: 0;
  }
  &:last-of-type {
    padding-right: 0;
  }
}
</style>

 src/views/screen/components/select-wrapper/index.vue

New file
@@ -0,0 +1,15 @@
<template>
  <div class="select-container">
    
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

 src/views/screen/index.vue

New file
@@ -0,0 +1,38 @@
<template>
  <div class="screen-container">
    <screen-title></screen-title>
    <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
      <screen-wrapper></screen-wrapper>
    </v-scale-screen>
  </div>

</template>

<script>
import ScreenTitle from './components/screen-title/index.vue';
import ScreenWrapper from './components/screen-wrapper/index.vue';

export default {
  name: 'App',
  components: {
    ScreenTitle,
    ScreenWrapper,
  },
  data() {
    return {
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.screen {
  background: url('../../assets/images/screen/pageBg1.jpg') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
</style>