Merge remote-tracking branch 'origin/master'

fuliqi

2024-08-20 a6842851a844e63a8766d63c5410a8e2f27a7d45

Merge remote-tracking branch 'origin/master'

 src/api/newpage.js

@@ -16,6 +16,14 @@
  });
}

// 工单地区
export function getWorkOrderRegion() {
  return request({
    url: "/dashboard/workOrder/region",
    method: "get",
  });
}

//设备正常率
export function getNormalRate(id) {
  return request({
@@ -23,3 +31,27 @@
    method: "get",
  });
}

//人脸考核数据
export function checkFace(id) {
  return request({
    url: "/dashboard/check/face",
    method: "get",
  });
}

// 车辆考核数据
export function checkCar(id) {
  return request({
    url: "/dashboard/check/car",
    method: "get",
  });
}

// 视频考核数据
export function checkVideo(id) {
  return request({
    url: "/dashboard/check/video",
    method: "get",
  });
}

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

@@ -11,7 +11,7 @@
  name: 'DataHola',
  props: {
    centerValue: {
      type: [Number, String],
      type: Number,
      default: 0
    },
    holaColor: {
@@ -120,6 +120,12 @@
  mounted() {
    myChart = echarts.init(this.$refs['chartRef']);
    this.initChart();
  },
  watch: {
    centerValue() {
      myChart = echarts.init(this.$refs['chartRef']);
      this.initChart();
    }
  }
}
</script>

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

@@ -17,21 +17,21 @@
          <div class="panel-item">
            <data-hola
              :holaTitle="`工单总数`"
              :centerValue="workOrderData.workOrderTotal.totalNum"
              :centerValue="workOrderData.totalNum"
              :holaColor="`#4ea8ff`"
            ></data-hola>
          </div>
          <div class="panel-item">
            <data-hola
              :holaTitle="`已处理工单数`"
              :centerValue="workOrderData.workOrderTotal.todolNum"
              :centerValue="workOrderData.todoNum"
              :holaColor="`#5dec24`"
            ></data-hola>
          </div>
          <div class="panel-item">
            <data-hola
              :holaTitle="`未处理工单数`"
              :centerValue="workOrderData.workOrderTotal.doneNum"
              :centerValue="workOrderData.doneNum"
              :holaColor="`#dfc639`"
            ></data-hola>
          </div>
@@ -66,23 +66,19 @@
  props: {
    workOrderData: {
      type: Object,
      default: {},
    },
    workOrderRegion: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      dataList: {
        name: [
          "富顺县",
          "荣县",
          "高新区",
          "自流井区",
          "贡井区",
          "大安区",
          "沿滩区",
        ],
        data1: [210, 310, 40, 102, 111, 201, 123],
        data2: [20, 30, 10, 10, 11, 21, 5],
        name: [],
        data1: [],
        data2: [],
      },
    };
  },
@@ -142,6 +138,23 @@
    chart = echarts.init(this.$refs.barChart);
    this.initEchart();
  },
  watch: {
    workOrderRegion() {
      let name = [];
      let data1 = [];
      let data2 =  [];
      this.workOrderRegion.map((item) => {
        name.push(item.area);
        data1.push(item.todoNum);
        data2.push(item.doneNum);
      })
      this.dataList.name = name;
      this.dataList.data1 = data1;
      this.dataList.data2 = data2;
      chart = echarts.init(this.$refs.barChart);
      this.initEchart();
    }
  },
};
</script>


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

New file
@@ -0,0 +1,143 @@
<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>
    </div>
  </div>
</template>

<script>
import ExamineHola from "./examine-hola.vue";
let barChart = null;
export default {
  name: "CarChart",
  components: {
    ExamineHola,
  },
  props: {
    carList: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      dataList: [],
    };
  },

  methods: {},
  mounted() { },
  watch: {
    carList() {
      //  "viewConnectStability": 95.26, //视图库对接稳定性
      // "siteOnline": 95.26, //点位在线率
      // "deviceDirectoryConsistent": 95.26, //联网卡口目录一致率
      // "vehicleInformationCollectionAccuracy": 95.26, //信息采集准确率
      // "vehicleCaptureIntegrity": 95.26, //抓拍数据完整性
      // "vehicleCaptureAccuracy": 95.26, //抓拍数据准确性
      // "vehicleTimingAccuracy": 95.26, //时钟准确性
      // "vehicleUploadTimeliness": 95.26, //抓拍数据上传及时性
      // "vehicleUrlAvailability": 95.26, //url可用性
      // "vehiclePictureAvailability": 95.26 //抓拍数据大图可用性
      let item = { value: 0, name: "", id: 0, routerUrl: "" }
      item.value = this.carList.viewConnectStability
      item.name = "视图库对接稳定性"
      item.id = 1
      item.routerUrl = ""
      this.dataList.push(item)

      let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
      item1.value = this.carList.siteOnline
      item1.name = "点位在线率"
      item1.id = 2
      item1.routerUrl = ""
      this.dataList.push(item1)

      let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
      item2.value = this.carList.deviceDirectoryConsistent
      item2.name = "联网卡口目录一致率"
      item2.id = 3
      item2.routerUrl = ""
      this.dataList.push(item2)

      let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
      item3.value = this.carList.vehicleInformationCollectionAccuracy
      item3.name = "信息采集准确率"
      item3.id = 4
      item3.routerUrl = ""
      this.dataList.push(item3)

      let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
      item4.value = this.carList.vehicleCaptureIntegrity
      item4.name = "抓拍数据完整性"
      item4.id = 5
      item4.routerUrl = ""
      this.dataList.push(item4)

      let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
      item5.value = this.carList.vehicleCaptureAccuracy
      item5.name = "抓拍数据准确性"
      item5.id = 6
      item5.routerUrl = ""
      this.dataList.push(item5)

      let item6 = { value: 0, name: "", id: 0, routerUrl: "" }      
      item6.value = this.carList.vehicleTimingAccuracy
      item6.name = "时钟准确性"
      item6.id = 7
      item6.routerUrl = ""
      this.dataList.push(item6)

      let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
      item7.value = this.carList.vehicleUploadTimeliness
      item7.name = "抓拍数据上传及时性"
      item7.id = 8
      item7.routerUrl = ""
      this.dataList.push(item7)

      let item8 = { value: 0, name: "", id: 0, routerUrl: "" }
      item8.value = this.carList.vehicleUrlAvailability
      item8.name = "url可用性"
      item8.id = 9
      item8.routerUrl = ""
      this.dataList.push(item8)

      let item9 = { value: 0, name: "", id: 0, routerUrl: "" }
      item9.value = this.carList.vehiclePictureAvailability
      item9.name = "抓拍数据大图可用性"
      item9.id = 10
      item9.routerUrl = ""
      this.dataList.push(item9)

    },
  }
};
</script>

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

  .rank-chart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;

    .hola-item {
      flex-shrink: 0;
      width: 150px;
      height: 120px;
    }
  }
}
</style>

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

File was deleted

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

New file
@@ -0,0 +1,127 @@
<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>
    </div>
  </div>
</template>

<script>
import ExamineHola from "./examine-hola.vue";
let barChart = null;
export default {
  name: "FaceChart",
  components: {
    ExamineHola,
  },
  props: {
    faceList: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      dataList: [],
    };
  },

  methods: {},
  mounted() { },
  watch: {
    faceList() {
      //  "viewConnectStability": 96.39, //视图库对接稳定性
      // "siteOnline": 96.39, //点位在线率
      // "deviceDirectoryConsistent": 96.39, //目录一致率
      // "faceInformationCollectionAccuracy": 96.39, //信息采集准确率
      // "facePictureQualification": 96.39, //抓拍图片合格性
      // "faceTimingAccuracy": 96.39, //抓拍图片时钟准确性
      // "faceUploadTimeliness": 96.39, //抓拍数据上传及时性
      // "facePictureAvailability": 96.39 //抓拍数据大图可用性
      let item = { value: 0, name: "", id: 0, routerUrl: "" }
      item.value = this.faceList.viewConnectStability
      item.name = "视图库对接稳定性"
      item.id = 1
      item.routerUrl = ""
      this.dataList.push(item)

      let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
      item1.value = this.faceList.siteOnline
      item1.name = "点位在线率"
      item1.id = 2
      item1.routerUrl = ""
      this.dataList.push(item1)

      let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
      item2.value = this.faceList.deviceDirectoryConsistent
      item2.name = "目录一致率"
      item2.id = 3
      item2.routerUrl = ""
      this.dataList.push(item2)

      let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
      item3.value = this.faceList.faceInformationCollectionAccuracy
      item3.name = "信息采集准确率"
      item3.id = 4
      item3.routerUrl = ""
      this.dataList.push(item3)

      let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
      item4.value = this.faceList.facePictureQualification
      item4.name = "抓拍图片合格性"
      item4.id = 5
      item4.routerUrl = ""
      this.dataList.push(item4)

      let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
      item5.value = this.faceList.faceTimingAccuracy
      item5.name = "抓拍图片时钟准确性"
      item5.id = 6
      item5.routerUrl = ""
      this.dataList.push(item5)

      let item6 = { value: 0, name: "", id: 0, routerUrl: "" }
      item6.value = this.faceList.faceUploadTimeliness
      item6.name = "抓拍数据上传及时性"
      item6.id = 7
      item6.routerUrl = ""
      this.dataList.push(item6)

      let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
      item7.value = this.faceList.facePictureAvailability
      item7.name = "抓拍数据大图可用性"
      item7.id = 8
      item7.routerUrl = ""
      this.dataList.push(item7)

    },
  }
};
</script>

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

  .rank-chart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;

    .hola-item {
      flex-shrink: 0;
      width: 150px;
      height: 120px;
    }
  }
}
</style>

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

New file
@@ -0,0 +1,232 @@
<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>
    </div>
  </div>
</template>

<script>
import ExamineHola from "./examine-hola.vue";
let barChart = null;
export default {
  name: "VideoChart",
  components: {
    ExamineHola,
  },
  props: {
    videoList: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      dataList: [],
    };
  },

  methods: {},
  mounted() { },
  watch: {
    videoList() {
    //  "platformOnline": 96.97, //平台在线率
    // "monitorQualification": 96.91, //一机一档合格率
    // "monitorRegistration": 96.44, //一机一档注册率
    // "archivesRate": 96.4, //档案考核比
    // "siteOnline": 96.4, //点位在线率
    // "videoAvailable": 96.52, //录象可用率
    // "annotationAccuracy": 97.15, //标注正确率
    // "timingAccuracy": 97.15, //校时准确率
    // "keySiteOnline": 97.15, //重点点位在线率
    // "keyVideoAvailable": 97.15, //重点点位录象可用率
    // "keyAnnotationAccuracy": 97.15, //重点点位标注正确率
    // "keyTimingAccuracy": 97.15, //重点点位按时正确率
    // "keyCommandImageInspection": 97.15, //重点指挥图像公安部巡检结果
    // "keyCommandImageDirectoryTree": 96.07, //重点指挥图像目录树
    // "onlineInspectionPlatform": 96.07, //在线检查平台部署及运行率
    // "videoTransmissionAssetsAccuracy": 96.07, //传输网资产准确率
    // "videoTransmissionAssetsWeakPasswordScore": 96.07, //传输网资产弱口令得分比率
    // "videoTransmissionDangerousAssetsScore": 96.07, //传输网危险资产得分比重
    // "videoTransmissionBoundaryIntegrityDetection": 96.07, //传输网边界完整性检测扣分项
    // "keyCommandImageOnline": 96.41, //月运行率
    // "operatingRate": 96.07 //重点指挥图像在线率
      let item = { value: 0, name: "", id: 0, routerUrl: "" }
      item.value = this.videoList.platformOnline
      item.name = "平台在线率"
      item.id = 1
      item.routerUrl = ""
      this.dataList.push(item)

      let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
      item1.value = this.videoList.monitorQualification
      item1.name = "一机一档合格率"
      item1.id = 2
      item1.routerUrl = ""
      this.dataList.push(item1)

      let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
      item2.value = this.videoList.monitorRegistration
      item2.name = "一机一档注册率"
      item2.id = 3
      item2.routerUrl = ""
      this.dataList.push(item2)

      let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
      item3.value = this.videoList.archivesRate
      item3.name = "档案考核比"
      item3.id = 4
      item3.routerUrl = ""
      this.dataList.push(item3)

      let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
      item4.value = this.videoList.siteOnline
      item4.name = "点位在线率"
      item4.id = 5
      item4.routerUrl = ""
      this.dataList.push(item4)

      let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
      item5.value = this.videoList.videoAvailable
      item5.name = "录象可用率"
      item5.id = 6
      item5.routerUrl = ""
      this.dataList.push(item5)

      let item6 = { value: 0, name: "", id: 0, routerUrl: "" }
      item6.value = this.videoList.annotationAccuracy
      item6.name = "标注正确率"
      item6.id = 7
      item6.routerUrl = ""
      this.dataList.push(item6)

      let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
      item7.value = this.videoList.timingAccuracy
      item7.name = "校时准确率"
      item7.id = 8
      item7.routerUrl = ""
      this.dataList.push(item7)

      let item8 = { value: 0, name: "", id: 0, routerUrl: "" }
      item8.value = this.videoList.keySiteOnline
      item8.name = "重点点位在线率"
      item8.id = 9
      item8.routerUrl = ""
      this.dataList.push(item8)

      let item9 = { value: 0, name: "", id: 0, routerUrl: "" }
      item9.value = this.videoList.keyVideoAvailable
      item9.name = "重点点位录象可用率"
      item9.id = 10
      item9.routerUrl = ""
      this.dataList.push(item9)

      let item10 = { value: 0, name: "", id: 0, routerUrl: "" }
      item10.value = this.videoList.keyAnnotationAccuracy
      item10.name = "重点点位标注正确率"
      item10.id = 11
      item10.routerUrl = ""
      this.dataList.push(item10)

      let item11 = { value: 0, name: "", id: 0, routerUrl: "" }
      item11.value = this.videoList.keyTimingAccuracy
      item11.name = "重点点位按时正确率"
      item11.id = 12
      item11.routerUrl = ""
      this.dataList.push(item11)

      let item12 = { value: 0, name: "", id: 0, routerUrl: "" }
      item12.value = this.videoList.keyCommandImageInspection
      item12.name = "重点指挥图像巡检结果"
      item12.id = 13
      item12.routerUrl = ""
      this.dataList.push(item12)

      let item13 = { value: 0, name: "", id: 0, routerUrl: "" }
      item13.value = this.videoList.keyCommandImageDirectoryTree
      item13.name = "重点指挥图像目录树"
      item13.id = 14
      item13.routerUrl = ""
      this.dataList.push(item13)

      let item14 = { value: 0, name: "", id: 0, routerUrl: "" }
      item14.value = this.videoList.onlineInspectionPlatform
      item14.name = "平台部署及运行率"
      item14.id = 15
      item14.routerUrl = ""
      this.dataList.push(item14)

      let item15 = { value: 0, name: "", id: 0, routerUrl: "" }
      item15.value = this.videoList.videoTransmissionAssetsAccuracy
      item15.name = "资产准确率"
      item15.id = 16
      item15.routerUrl = ""
      this.dataList.push(item15)

      let item16 = { value: 0, name: "", id: 0, routerUrl: "" }
      item16.value = this.videoList.videoTransmissionAssetsWeakPasswordScore
      item16.name = "资产弱口令得分比率"
      item16.id = 17
      item16.routerUrl = ""
      this.dataList.push(item16)

      let item17 = { value: 0, name: "", id: 0, routerUrl: "" }
      item17.value = this.videoList.videoTransmissionDangerousAssetsScore
      item17.name = "危险资产得分比重"
      item17.id = 18
      item17.routerUrl = ""
      this.dataList.push(item17)

      let item18 = { value: 0, name: "", id: 0, routerUrl: "" }
      item18.value = this.videoList.videoTransmissionBoundaryIntegrityDetection
      item18.name = "边界完整性检测扣分项"
      item18.id = 19
      item18.routerUrl = ""
      this.dataList.push(item18)

      let item19 = { value: 0, name: "", id: 0, routerUrl: "" }
      item19.value = this.videoList.keyCommandImageOnline
      item19.name = "月运行率"
      item19.id = 20
      item19.routerUrl = ""
      this.dataList.push(item19)

      let item20 = { value: 0, name: "", id: 0, routerUrl: "" }
      item20.value = this.videoList.operatingRate
      item20.name = "重点指挥图像在线率"
      item20.id = 21
      item20.routerUrl = ""
      this.dataList.push(item20)


    },
  }
};
</script>

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

  .rank-chart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;

    .hola-item {
      flex-shrink: 0;
      width: 150px;
      height: 120px;
    }
  }
}
</style>

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

@@ -87,13 +87,17 @@

<script>
import WrapperTitle from "../wrapper-title/index";
import ExamineChart from "./components/examine-chart";
import faceChart from "./components/face-chart";
import carChart from "./components/car-chart";
import videoChart from "./components/video-chart";
import ExamineTable from "./components/examine-table";
export default {
  name: "ScreenExamine",
  components: {
    WrapperTitle,
    ExamineChart,
    faceChart,
    carChart,
    videoChart,
    ExamineTable,
  },
  data() {

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

@@ -6,13 +6,7 @@
    ></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"
        >
        <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
          <el-table-column prop="area" label="地区" align="center" width="100">
          </el-table-column>

@@ -34,12 +28,7 @@
                  </div>
                </div>
                <div class="tip-num">
                  {{
                    scope.row.faceRate?(
                      (scope.row.faceNormalNum / scope.row.faceRate) *
                      100
                    ).toFixed(0)+'%':'--'
                  }}
                  {{ scope.row.faceRate ? scope.row.faceRate + '%' : '--' }}
                </div>
              </el-tooltip>
            </template>
@@ -58,17 +47,12 @@
                  <div class="tip-item">
                    <div class="tip-label">设备异常数:</div>
                    <div class="tip-info tip-danger">
                      {{ scope.row.carNormalNum }}
                      {{ scope.row.carErrorNum }}
                    </div>
                  </div>
                </div>
                <div class="tip-num">
                  {{
                      scope.row.carRate?(
                      (scope.row.carNormalNum / scope.row.carRate) *
                      100
                    ).toFixed(0)+'%':'--'
                  }}
                  {{ scope.row.carRate ? scope.row.carRate + '%' : '--' }}
                </div>
              </el-tooltip>
            </template>
@@ -87,17 +71,12 @@
                  <div class="tip-item">
                    <div class="tip-label">设备异常数:</div>
                    <div class="tip-info tip-danger">
                      {{ scope.row.videoNormalNum }}
                      {{ scope.row.videoErrorNum }}
                    </div>
                  </div>
                </div>
                <div class="tip-num">
                  {{
                    scope.row.videoRate?(
                      (scope.row.videoNormalNum / scope.row.videoRate) *
                      100
                    ).toFixed(0)+'%':'--'
                  }}
                  {{ scope.row.videoRate ? scope.row.videoRate + '%' : '--' }}
                </div>
              </el-tooltip>
            </template>
@@ -239,7 +218,7 @@
  border-color: #56739e99 !important;
}

::v-deep .el-table th.el-table__cell > .cell {
::v-deep .el-table th.el-table__cell>.cell {
  color: #447ed6;
}

@@ -253,11 +232,7 @@
  background-color: transparent !important;
}

::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: #447ed648;
}


 src/views/screen/newPage/index.vue

@@ -4,12 +4,8 @@
      <div class="header_box">
        <div class="tabs-box">
          <el-tabs v-model="activeName" @tab-click="tabChange">
            <el-tab-pane
              v-for="item in testData1"
              :label="item.name"
              :name="item.value"
              :key="item.value"
            ></el-tab-pane>
            <el-tab-pane v-for="item in testData1" :label="item.name" :name="item.value"
              :key="item.value"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
@@ -21,8 +17,12 @@
          <div>运维考核大屏</div>
        </div>
        <div class="card" style="height: 622px">
          <div class="card_header"><div class="title">工单数据</div></div>
          <div><ScreenData :workOrderData="workOrderData"></ScreenData></div>
          <div class="card_header">
            <div class="title">工单数据</div>
          </div>
          <div>
            <ScreenData :workOrderData="workOrderData" :workOrderRegion="workOrderRegion"></ScreenData>
          </div>
        </div>
      </div>
      <div class="large_screen_box">
@@ -35,36 +35,25 @@
            <div class="title">设备数据</div>
          </div>
          <div>
            <div
              class="device_data"
              v-for="(item, index) in deviceList"
              :key="index"
            >
              <img
                src="../../../assets/images/screen/lxicon.png"
                alt=""
                style="height: 25px"
              />
            <div class="device_data" v-for="(item, index) in deviceList" :key="index">
              <img src="../../../assets/images/screen/lxicon.png" alt="" style="height: 25px" />
              <div style="margin: 0 10px">{{ item.type }}</div>
              <div class="data-info">
                <div class="data-lable">设备总数</div>
                <div class="data-num type1">
                  <span v-roll>{{ item.totalNum }}</span
                  ><i class="el-icon-top"></i>
                <div class="data-lable center">设备总数</div>
                <div class="data-num type1 center">
                  <span v-roll>{{ item.totalNum }}</span>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备正常数</div>
                <div class="data-num type2">
                  <span v-roll>{{ item.normalNum }}</span
                  ><i class="el-icon-top"></i>
                <div class="data-lable center">设备正常数</div>
                <div class="data-num type2 center">
                  <span v-roll>{{ item.normalNum }}</span>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备异常数</div>
                <div class="data-num type3">
                  <span v-roll>{{ item.errorNum }}</span
                  ><i class="el-icon-bottom"></i>
                <div class="data-lable center">设备异常数</div>
                <div class="data-num type3 center">
                  <span v-roll>{{ item.errorNum }}</span>
                </div>
              </div>
            </div>
@@ -85,7 +74,7 @@
        <div class="card_header">
          <div class="title">人脸考核数据</div>
          <div style="width: 600px; margin-left: -20px">
            <ExamineChart class="wrapper-item" dataType="face"></ExamineChart>
            <FaceChart class="wrapper-item" :faceList="faceList"></FaceChart>
          </div>
        </div>
      </div>
@@ -93,24 +82,28 @@
        <div class="card_header">
          <div class="titleCar">车辆考核数据</div>
        </div>
        <div
          style="
        <div style="
            overflow: hidden;
            overflow-x: auto;
            margin-top: -9px;
            height: 90%;
          "
        >
          ">
          <div style="width: 750px">
            <ExamineChart class="wrapper-item" dataType="car"></ExamineChart>
            <CarChart class="wrapper-item" :carList="carList"></CarChart>
          </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" dataType="video"></ExamineChart>
          <div class="titleCar">视频考核数据</div>
        </div>
        <div style="
            overflow: auto;
            margin-top: -9px;
            height: 90%;
          ">
          <div style="width: 1100px">
            <VideoChart class="wrapper-item" :videoList="videoList"></VideoChart>
          </div>
        </div>
      </div>
@@ -122,17 +115,21 @@
import ScreenTable from "../components/screen-table/index.vue";
import ScreenMap from "../components/screen-wrapper/index.vue";
import ScreenMapThree from "../components/screen-map-three/index";
import ExamineChart from "../components/screen-examine/components/examine-chart.vue";
import FaceChart from "../components/screen-examine/components/face-chart.vue";
import CarChart from "../components/screen-examine/components/car-chart.vue";
import VideoChart from "../components/screen-examine/components/video-chart.vue";
import ScreenData from "../components/screen-data/index.vue";
import NewMap from "./components/newMap.vue";
import { getDeviceData, getWorkOrderData, getNormalRate } from "@/api/newpage";
import { getDeviceData, getWorkOrderData, getWorkOrderRegion, getNormalRate, checkFace, checkCar, checkVideo } from "@/api/newpage";
export default {
  name: "Newpage",
  components: {
    ScreenTable,
    ScreenMapThree,
    ScreenMap,
    ExamineChart,
    FaceChart,
    CarChart,
    VideoChart,
    ScreenData,
    NewMap,
  },
@@ -155,30 +152,11 @@
        },
      ],
      deviceList: [],
      workOrderData: {
        workOrderRegion: {
          create_time: "2024-03-05T19:04:24",
          deleted: 0,
          error_type: "网络故障,无光",
          id: 1,
          serial_number: 0,
          source: "中山大道与宝善巷交叉口东",
          status: "DISTRIBUTED",
          unit_id: 2,
          update_time: "2024-04-15T17:07:54",
          work_order_no: "202403051212",
          yw_check_result: "/profile/upload/2024/03/26/20240326100819A001.jpg",
          yw_condition: "修复完成",
          yw_handle_time: "2024-03-05T19:04:06",
          yw_people_id: 1,
          yw_result: "OK",
        },
        workOrderTotal: {
          doneNum: 8,
          todoNum: 20,
          totalNum: 28,
        },
      },
      workOrderRegion: [],
      carList: '',
      faceList: '',
      videoList: '',
      workOrderData: {},
      tableData: [],
    };
  },
@@ -197,37 +175,63 @@
        .then((res) => {
          this.deviceList = res.data;
        })
        .catch((err) => {});
        .catch((err) => { });
      getWorkOrderData()
        .then((res) => {
          this.workOrderData = res.data;
        })
        .catch((err) => {});
        .catch((err) => { });
      getWorkOrderRegion()
        .then((res) => {
          this.workOrderRegion = res.data;
        })
        .catch((err) => { });
      this.getTableList();
      checkCar()
        .then((res) => {
          this.carList = res.data;
        })
        .catch((err) => { });
      checkFace()
        .then((res) => {
          this.faceList = res.data;
        })
        .catch((err) => { });
      checkVideo()
        .then((res) => {
          this.videoList = res.data;
        })
        .catch((err) => { });
    },
    getTableList() {
      getNormalRate(this.activeName)
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((err) => {});
        .catch((err) => { });
    },
    tabChange(){
      this. getTableList()
    tabChange() {
      this.getTableList()
    }
  },
};
</script>

<style lang="scss" scoped>
.center {
  text-align: center;
}

.new-page {
  color: rgb(255, 255, 255);

  .header_box {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: -25px;
  }

  .return-button {
    position: absolute;
    right: -5px;
@@ -241,12 +245,15 @@
    font-size: 20px;
  }
}

::v-deep .tabs-box {
  margin-top: 5px;

  .el-tabs__item {
    color: #ffffff !important;
    font-size: 26px;
  }

  .is-active {
    color: #00b8ff !important;
    // background: url("../../../assets/images/screen/button1.png");
@@ -265,6 +272,7 @@
    background-size: 0.1vw 0.5vw, 0.5vw 0.1vw;
  }
}

::v-deep .el-input__inner {
  background: rgba(67, 102, 155, 0.4) !important;
  color: #4481dd;
@@ -275,18 +283,22 @@
  background-color: transparent !important;
  color: #4481dd;
}

::v-deep .date-select .el-date-editor .el-range-separator {
  color: #4481dd !important;
}

// }
/* 去掉tabs标签栏下的下划线 */
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
  //   background-color: #fff;
}

::v-deep .el-tabs__active-bar {
  width: 0 !important;
}

::v-deep .el-tabs__item {
  margin: 5px 30px;
  padding: 0px 25px !important;
@@ -306,17 +318,21 @@
  // background-repeat: no-repeat !important;
  // background-position: center center !important;
}

.left_box {
  width: 460px;
  position: relative;

  .card {
    height: 300px;
    width: 460px;
    margin: 20px 0;

    .card_header {
      height: 40px;
    }
  }

  .titleCard {
    // background: url("../../../assets/images/screen/titleBg.png");
    // background-size: 100% 100%;
@@ -329,6 +345,7 @@
    left: 10px;
  }
}

.large_screen_box {
  width: 920px;
  height: 621px;
@@ -338,18 +355,21 @@
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.card {
  background: url("../../../assets/images/screen/cardBg1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.card_header {
  background: url("../../../assets/images/screen/headerBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.footer_box {
  width: 100%;
  height: 320px;
@@ -357,11 +377,14 @@
  display: flex;
  justify-content: space-between;
  border: rgba(84, 132, 203, 0.4) 2px solid;

  .footer_card {
    width: 33%;
    margin: 5px 0;

    .card_header {
      height: 40px;

      .titleCar {
        margin-left: 20px;
        padding-top: 5px;
@@ -373,6 +396,7 @@
    }
  }
}

.title {
  margin-left: 20px;
  padding-top: 5px;
@@ -381,6 +405,7 @@
  font-size: 20px;
  font-style: italic;
}

.data-info {
  flex: 1;
  color: #5b83bd;
@@ -395,13 +420,16 @@
  .type1 {
    color: #287cfa;
  }

  .type2 {
    color: #0cd81d;
  }

  .type3 {
    color: #e20c0c;
  }
}

.device_data {
  display: flex;
  align-items: center;