feat:详情跳转

ZhangXianQiang

2024-03-20 00ef473d3b7508fd898549fc9f4c74eef52a7d71

feat:详情跳转

 src/main.js

@@ -42,6 +42,9 @@
import VScaleScreen from 'v-scale-screen'
import dataV from '@jiaminghi/data-view'

import gsap from 'gsap';
import { formatNumber } from './utils/format';



// 全局方法挂载
@@ -87,6 +90,41 @@

Vue.config.productionTip = true


// 全局指令
Vue.directive('roll', {
  inserted: (el, binding) => {
    let target = {
      count: 0
    };
    let finalNumber = el.innerText;
    gsap.to(target, {
      count: finalNumber,
      duration: 1,
      ease: "power2.out",
      onUpdate: () => {
        el.innerText = formatNumber(target.count.toFixed(0));
      }
    })

  },
  update: (el, binding) => {
    let target = {
      count: el.innerText
    };
    let finalNumber = el.getAttribute('value');
    gsap.to(target, {
      count: finalNumber,
      duration: 1,
      ease: "power2.out",
      onUpdate: () => {
        el.innerText = formatNumber(target.count.toFixed(0));
      }
    })
  }
})


new Vue({
  el: '#app',
  router,

 src/utils/format.js

New file
@@ -0,0 +1,3 @@
export const formatNumber = (value) => {
  return new Intl.NumberFormat('en-US').format(value);
}

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

@@ -1,6 +1,6 @@
<template>
  <div class="car-container">
    <wrapper-title :title="'车辆设备数据'"></wrapper-title>
    <wrapper-title :title="'车辆设备数据'" :path="'/monitorServe/car'"></wrapper-title>

    <div class="car-content">
      <div class="data-plane">
@@ -11,7 +11,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
              <div class="data-num type1" v-roll>{{ 1123 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -23,7 +23,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
              <div class="data-num type2" v-roll>{{ 2000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -35,7 +35,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
              <div class="data-num type3" v-roll>{{ 1000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -63,9 +63,6 @@
  },

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

  mounted() {
@@ -114,6 +111,16 @@
          font-size: 24px;
          color: #fff;
        }

        .type1 {
          color: #287cfa;
        }
        .type2 {
          color: #0cd81d;
        }
        .type3 {
          color: #e20c0c
        }
      }
    }
  }

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

@@ -1,6 +1,6 @@
<template>
  <div class="detection-container">
    <wrapper-title :title="'运行监控数据'"></wrapper-title>
    <wrapper-title :title="'运行监控数据'" :path="'/dataManage'"></wrapper-title>

    <div class="detection-content">
      <div class="water-item">

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

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

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

@@ -1,6 +1,6 @@
<template>
  <div class="face-container">
    <wrapper-title :title="'人脸设备数据'"></wrapper-title>
    <wrapper-title :title="'人脸设备数据'" :path="'/monitorServe/face'"></wrapper-title>

    <div class="face-content">
      <div class="data-plane">
@@ -11,7 +11,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
              <div class="data-num type1" v-roll>{{ 1123 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -23,7 +23,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
              <div class="data-num type2" v-roll>{{ 2000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -35,7 +35,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
              <div class="data-num type3" v-roll>{{ 1000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -62,10 +62,6 @@
  },

  methods: {

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

  mounted() {
@@ -113,6 +109,16 @@
          font-size: 24px;
          color: #fff;
        }

        .type1 {
          color: #287cfa;
        }
        .type2 {
          color: #0cd81d;
        }
        .type3 {
          color: #e20c0c
        }
      }
    }
  }

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

@@ -5,7 +5,7 @@
        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
      </div>
      <div class="header-text">
        自贡市运维考核可视化大屏
        自贡市运维考核可视化
      </div>
    </div>
  </div>

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

@@ -1,6 +1,6 @@
<template>
  <div class="video-container">
    <wrapper-title :title="'视频设备数据'"></wrapper-title>
    <wrapper-title :title="'视频设备数据'" :path="'/monitorServe/video'"></wrapper-title>

    <div class="video-content">
      <div class="data-plane">
@@ -11,7 +11,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
              <div class="data-num type1" v-roll>{{ 1123 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -23,7 +23,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
              <div class="data-num type2" v-roll>{{ 2000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -35,7 +35,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
              <div class="data-num type3" v-roll>{{ 1000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -54,18 +54,10 @@
  },
  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: {

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

  mounted() {
@@ -113,6 +105,16 @@
          font-size: 24px;
          color: #fff;
        }

        .type1 {
          color: #287cfa;
        }
        .type2 {
          color: #0cd81d;
        }
        .type3 {
          color: #e20c0c
        }
      }
    }
  }

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

@@ -2,7 +2,7 @@
  <div class="wrapper-container">
    <select-item></select-item>
    <div class="return-button">
      <el-button type="primary">返回</el-button>
      <el-button type="primary" @click="returnPath">返回</el-button>
    </div>
    <div class="wrapper-content">
      <div class="left-container wrapper">
@@ -41,6 +41,11 @@
    ScreenCar,
    ScreenMap
  },
  methods: {
    returnPath() {
      this.$router.go(-1);
    }
  }
}
</script>


 vue.config.js

@@ -35,7 +35,7 @@
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        target: `http://192.168.3.88:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''