Merge remote-tracking branch 'origin/master'

fuliqi

2024-08-20 a6842851a844e63a8766d63c5410a8e2f27a7d45

 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: [],
    };
  },
@@ -203,7 +181,27 @@
          this.workOrderData = res.data;
        })
        .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)
@@ -220,14 +218,20 @@
</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;