Merge remote-tracking branch 'origin/master'

xiangpei

2024-04-11 1b259b716a722cf9bd02abf3dc2ebf93198aba44

Merge remote-tracking branch 'origin/master'

 src/permission.js

@@ -8,7 +8,7 @@

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/register', '/screen']
const whiteList = ['/login', '/register',]

router.beforeEach((to, from, next) => {
  NProgress.start()

 src/views/screen/components/screen-data/components/data-hola.vue

New file
@@ -0,0 +1,137 @@
<template>
  <div class="hola-container">
    <div class="chart" id="dataChart" ref="chartRef"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
let myChart = null;
export default {
  name: 'DataHola',
  props: {
    centerValue: {
      type: [Number, String],
      default: 0
    },
    holaColor: {
      type: String,
      default: '#4ea8ff'
    },
    holaTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      
    }
  },
  methods: {
    initChart() {
      const series= [
        {
          type: 'gauge', // 仪表盘类型
          name: '系列名称', // 用于tooltip的显示
          startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
          endAngle: -270, // 仪表盘结束角度
          center: ['50%', '50%'], // 中心点（圆心坐标）
          radius: '100%', // 圆大小（仪表盘半径）
          clockwise: true, // 仪表盘刻度是否是顺时针增长
          // 仪表盘轴线相关配置
          axisLine: {
            show: true,
            roundCap: false, // 两端显示成圆形（背景环）
            clip: false, // 是否裁剪超出部分
            // 设置背景圆环样式
            lineStyle: {
              width: 6, // 圆环宽度
              color: [[1, '#002865']] // 圆环背景色
            }
          },
          max: 5000,
          // 仪表盘指针
          pointer: {
            show: false
          },
          // 进度设置
          progress: {
            show: true,
            overlap: false, // 多组数据时进度条是否重叠
            roundCap: true, // 是否在两端显示成圆形
            clip: false, // 是否裁掉超出部分
            // 进度条样式
            itemStyle: {
              borderWidth: 0,
              shadowColor: '',
              color: this.holaColor
            }
          },
          // 仪表盘分割线
          splitLine: {
            show: false
          },
          // 刻度样式
          axisTick: {
            show: false
          },
          // 刻度标签
          axisLabel: {
            show: false
          },
          title: {
            show: false,
            fontSize: 20
          },
          detail: {
            // width: 50,
            // height: 14,
            fontSize: 20,
            color: 'auto'
          },
          data: [
            {
              value: this.centerValue,
              name: this.holaTitle,
              title: {
                show: true,
                fontSize: 14,
                color: '#fff',
                offsetCenter: ['0%', '30%'],
              },
              detail: {
                fontSize: 18,
                // 中心title设置
                offsetCenter: ['0%', '-10%'],
                color: '#fff',
                formatter: '{value}'

              }
            }
          ],
        }
      ];
      myChart.setOption({
      series: series
    })
    }
  },
  mounted() {
    myChart = echarts.init(this.$refs['chartRef']);
    this.initChart();
  }
}
</script>

<style lang="scss" scoped>
.hola-container {
  width: 100%;
  height: 100%;

  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>

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

@@ -1,10 +1,28 @@
<template>
  <div class="data-container">
    <wrapper-title :title="'工单数据'" :path="'/monitorServe/car'"></wrapper-title>
    <wrapper-title :title="'工单数据'" :path="'/work-order-center/maintenance/work-order/work-order'"></wrapper-title>

    <div class="data-content">
      <div class="data-panel">

        <div class="panel-title">
          <div class="icon">
            <img src="@/assets/icons/arrow.png" alt="">
          </div>
          <div class="title">
            整体工单数
          </div>
        </div>
        <div class="panel-container">
          <div class="panel-item">
            <data-hola :holaTitle="`工单总数`" :centerValue="3000" :holaColor="`#4ea8ff`"></data-hola>
          </div>
          <div class="panel-item">
            <data-hola :holaTitle="`已处理工单数`" :centerValue="1600" :holaColor="`#5dec24`"></data-hola>
          </div>
          <div class="panel-item">
            <data-hola :holaTitle="`未处理工单数`" :centerValue="200" :holaColor="`#dfc639`"></data-hola>
          </div>
        </div>
      </div>
      <div class="data-panel">
        <div class="panel-title">
@@ -26,11 +44,13 @@
<script>
import * as echarts from 'echarts';
import WrapperTitle from '../wrapper-title/index';
import DataHola from './components/data-hola';
let chart = null;
export default {
  name: 'ScreenData',
  components: {
    WrapperTitle
    WrapperTitle,
    DataHola
  },
  data() {
    return {
@@ -45,7 +65,9 @@
    initEchart() {
      const option = {
        grid: {
          top: '10%',
          right: 0,
          bottom: '15%',
        },
        legend: {
          right: 0,
@@ -102,7 +124,7 @@
<style lang="scss" scoped>
.data-container {
  width: 100%;
  height: 450px;
  height: 500px;
  display: flex;
  flex-direction: column;

@@ -110,14 +132,14 @@
    flex: 1;
    background: rgba(67, 102, 155, 0.3);
    border: 1px solid rgba(47, 91, 157, 0.8);
    padding: 20px;
    padding: 10px;
    box-sizing: border-box;
  }
}

.echart-container {
  width: 100%;
  height: 300px;
  height: 260px;

  #barChart {
    width: 100%;
@@ -129,13 +151,27 @@
  color: #b9b9b9;
  display: flex;
  align-items: center;

  .icon {
    width: 20px;
    margin-right: 5px;

    img {
      width: 100%;
      display: block;
    }
  }
}

.panel-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 10px 0;

  .panel-item {
    width: 120px;
    height: 120px;
  }
}
</style>

 src/views/screen/components/screen-examine/components/examine-chart.vue

@@ -56,8 +56,8 @@

    .hola-item {
      flex-shrink: 0;
      width: 140px;
      height: 140px;
      width: 150px;
      height: 120px;
    }
  }
}

 src/views/screen/components/screen-examine/components/examine-hola.vue

@@ -28,7 +28,7 @@
            clip: false, // 是否裁剪超出部分
            // 设置背景圆环样式
            lineStyle: {
              width: 10, // 圆环宽度
              width: 6, // 圆环宽度
              color: [[1, '#002865']] // 圆环背景色
            }
          },
@@ -151,7 +151,9 @@
.progressChart {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  .chart {
    width: 100%;
    height: 75%;
@@ -166,4 +168,5 @@
    margin-top: 10px;
  }
}

</style>

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

@@ -1,6 +1,6 @@
<template>
  <div class="examine-container">
    <wrapper-title :title="'考核数据'" :path="'/examine/check-rule'"></wrapper-title>
    <wrapper-title :title="'考核数据'" :path="'/examine/default'"></wrapper-title>
    <div class="examine-content">

      <div class="examine-wrapper">

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

@@ -1,6 +1,6 @@
<template>
  <div class="table-container">
    <wrapper-title :title="'区域设备数据'" :path="'/monitorServe/face'"></wrapper-title>
    <wrapper-title :title="'区域设备数据'" :path="'/monitorServe/recovery'"></wrapper-title>
    <div class="table-content" ref="tabContent">
      <div class="table-wrapper">
        <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">

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

@@ -6,19 +6,19 @@
    </div>
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face class="animate-enter-x enter-left"></screen-face>
        <screen-car class="animate-enter-x enter-left animate-delay-1"></screen-car>
        <screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
        <screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face>
        <screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car>
        <screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video>
      </div>
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <screen-table class="animate-enter-y enter-top"></screen-table>
        <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table>
        <!-- <screen-detection></screen-detection> -->

      </div>
      <div class="right-container wrapper">
        <screen-examine class="animate-enter-x enter-right"></screen-examine>
        <screen-data></screen-data>
        <screen-examine class="enter-right" :class="{ 'animate-enter-x': isEnd }"></screen-examine>
        <screen-data class="enter-right animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-data>
      </div>
    </div>
  </div>
@@ -45,10 +45,29 @@
    ScreenCar,
    ScreenData
  },
  data() {
    return {
      isEnd: false
    }
  },
  methods: {
    returnPath() {
      this.$router.push('/index');
    },
    checkAnimationEnd(event) {
      if (this.isEnd) return;
      if (event.propertyName === 'transform') {
        this.isEnd = true;
      }
    }
  },
  mounted() {
    const container = document.querySelector('.screen-wrapper');
    container.addEventListener('transitionend', this.checkAnimationEnd);
  },
  destroyed() {
    const container = document.querySelector('.screen-wrapper');
    container.removeEventListener('transitionend', this.checkAnimationEnd);
  }
}
</script>

 src/views/system/template/index.vue

@@ -72,8 +72,8 @@
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button> -->
      </el-col>
        >删除</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"