.

黄何裕

2024-07-31 08a78d7c2dc453ccd510a176bf95b62c3da30c0c

.

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

@@ -1,44 +1,157 @@
<template>
  <div class="chart-container">
    <div class="rank-chart">
      <div class="hola-item" v-for="item in dataList" :key="item.id">
        <examine-hola :startColor="'#124ae4'" :endColor="'#99b3fd'" :centerValue="item.value" :bottomTitle="item.name"
          :routerPath="item.routerUrl"></examine-hola>
      <div
        class="hola-item"
        v-for="item in dataType == 'car' ? dataListA : dataList"
        :key="item.id"
      >
        <examine-hola
          :startColor="'#124ae4'"
          :endColor="'#99b3fd'"
          :centerValue="item.value"
          :bottomTitle="item.name"
          :routerPath="item.routerUrl"
        ></examine-hola>
      </div>
    </div>
  </div>
</template>

<script>
import ExamineHola from './examine-hola.vue';
import ExamineHola from "./examine-hola.vue";
let barChart = null;
export default {
  name: 'ExamineChart',
  name: "ExamineChart",
  components: {
    ExamineHola
    ExamineHola,
  },
  props: {
    dataType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dataList: [
        { id: 1, name: '平台在线率', value: 60, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 2, name: '一机一档合格率', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 3, name: '档案考核比', value: 60, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 4, name: '点位在线率', value: 40, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 5, name: '录像可用率', value: 80, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 6, name: '重点点位录像可用率', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 7, name: '重点点位录像可用率', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
        { id: 8, name: '重点点位录像可用率', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
      ]
    }
        {
          id: 1,
          name: "平台在线率",
          value: 60,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 2,
          name: "一机一档合格率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 3,
          name: "档案考核比",
          value: 60,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 4,
          name: "点位在线率",
          value: 40,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 5,
          name: "录像可用率",
          value: 80,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 6,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 7,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 8,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
      ],
      dataListA: [
        {
          id: 1,
          name: "平台在线率",
          value: 60,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 2,
          name: "一机一档合格率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 3,
          name: "档案考核比",
          value: 60,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 4,
          name: "点位在线率",
          value: 40,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 5,
          name: "录像可用率",
          value: 80,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 6,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 7,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 8,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 9,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 10,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
      ],
    };
  },

  methods: {


  },
  mounted() {
  }
}
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>

 src/views/screen/newPage/index.vue

@@ -46,14 +46,14 @@
                <div class="data-lable">设备总数</div>
                <div class="data-num type1">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                  ><i class="el-icon-top"></i>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备正常数</div>
                <div class="data-num type2">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                  ><i class="el-icon-top"></i>
                </div>
              </div>
              <div class="data-info">
@@ -139,15 +139,24 @@
        <div class="card_header">
          <div class="title">人脸考核数据</div>
          <div style="width: 600px; margin-left: -20px">
            <ExamineChart class="wrapper-item"></ExamineChart>
            <ExamineChart class="wrapper-item" dataType="face"></ExamineChart>
          </div>
        </div>
      </div>
      <div class="footer_card">
        <div class="card_header">
          <div class="title">车辆考核数据</div>
          <div style="width: 600px; margin-left: -20px">
            <ExamineChart class="wrapper-item"></ExamineChart>
          <div class="titleCar">车辆考核数据</div>
        </div>
        <div
          style="
            overflow: hidden;
            overflow-x: auto;
            margin-top: -9px;
            height: 90%;
          "
        >
          <div style="width: 750px">
            <ExamineChart class="wrapper-item" dataType="car"></ExamineChart>
          </div>
        </div>
      </div>
@@ -155,7 +164,7 @@
        <div class="card_header">
          <div class="title">视频考核数据</div>
          <div style="width: 600px; margin-left: -20px">
            <ExamineChart class="wrapper-item"></ExamineChart>
            <ExamineChart class="wrapper-item" dataType="video"></ExamineChart>
          </div>
        </div>
      </div>
@@ -205,7 +214,9 @@
    returnPath() {
      this.$router.push("/index");
    },
    handleClick() {},
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
@@ -353,6 +364,14 @@
    margin: 5px 0;
    .card_header {
      height: 40px;
      .titleCar {
        margin-left: 20px;
        padding-top: 5px;
        color: #fff;
        letter-spacing: 2px;
        font-size: 20px;
        font-style: italic;
      }
    }
  }
}