运行监控表头修改

fuliqi

2024-08-20 477dea9d2c9cd8a1e1eef19905dea64ed9b0965f

 src/views/screen/newPage/index.vue

@@ -3,7 +3,7 @@
    <div style="display: flex; justify-content: center">
      <div class="header_box">
        <div class="tabs-box">
          <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tabs v-model="activeName" @tab-click="tabChange">
            <el-tab-pane
              v-for="item in testData1"
              :label="item.name"
@@ -22,7 +22,7 @@
        </div>
        <div class="card" style="height: 622px">
          <div class="card_header"><div class="title">工单数据</div></div>
          <div><ScreenData></ScreenData></div>
          <div><ScreenData :workOrderData="workOrderData"></ScreenData></div>
        </div>
      </div>
      <div class="large_screen_box">
@@ -35,89 +35,35 @@
            <div class="title">设备数据</div>
          </div>
          <div>
            <div class="device_data">
            <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">人脸</div>
              <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>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                  <span v-roll>{{ item.totalNum }}</span
                  ><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>
                  <span v-roll>{{ item.normalNum }}</span
                  ><i class="el-icon-top"></i>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备异常数</div>
                <div class="data-num type3">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
            </div>
            <div class="device_data">
              <img
                src="../../../assets/images/screen/lxicon.png"
                alt=""
                style="height: 25px"
              />
              <div style="margin: 0 10px">车辆</div>
              <div class="data-info">
                <div class="data-lable">设备总数</div>
                <div class="data-num type1">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></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>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备异常数</div>
                <div class="data-num type3">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
            </div>
            <div class="device_data">
              <img
                src="../../../assets/images/screen/lxicon.png"
                alt=""
                style="height: 25px"
              />
              <div style="margin: 0 10px">视频</div>
              <div class="data-info">
                <div class="data-lable">设备总数</div>
                <div class="data-num type1">
                  <span v-roll>{{ 1123 }}</span
                  ><i class="el-icon-bottom"></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>
                </div>
              </div>
              <div class="data-info">
                <div class="data-lable">设备异常数</div>
                <div class="data-num type3">
                  <span v-roll>{{ 1123 }}</span
                  <span v-roll>{{ item.errorNum }}</span
                  ><i class="el-icon-bottom"></i>
                </div>
              </div>
@@ -128,7 +74,7 @@
          <div class="card_header">
            <div class="title">设备正常率</div>
            <div style="margin: 10px 10px">
              <ScreenTable></ScreenTable>
              <ScreenTable :tableData="tableData"></ScreenTable>
            </div>
          </div>
        </div>
@@ -139,15 +85,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 +110,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>
@@ -170,6 +125,7 @@
import ExamineChart from "../components/screen-examine/components/examine-chart.vue";
import ScreenData from "../components/screen-data/index.vue";
import NewMap from "./components/newMap.vue";
import { getDeviceData, getWorkOrderData, getNormalRate } from "@/api/newpage";
export default {
  name: "Newpage",
  components: {
@@ -190,7 +146,7 @@
          value: "1",
        },
        {
          name: "市局数据",
          name: "区县数据",
          value: "2",
        },
        {
@@ -198,14 +154,67 @@
          value: "3",
        },
      ],
      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,
        },
      },
      tableData: [],
    };
  },
  mounted() {},
  mounted() {
    this.getData();
  },
  methods: {
    returnPath() {
      this.$router.push("/index");
    },
    handleClick() {},
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getData() {
      getDeviceData()
        .then((res) => {
          this.deviceList = res.data;
        })
        .catch((err) => {});
      getWorkOrderData()
        .then((res) => {
          this.workOrderData = res.data;
        })
        .catch((err) => {});
      this.getTableList();
    },
    getTableList() {
      getNormalRate(this.activeName)
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((err) => {});
    },
    tabChange(){
      this. getTableList()
    }
  },
};
</script>
@@ -227,7 +236,6 @@
    background-size: 100% 100%;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: #4481dd;
    padding: 15px 25px;
    cursor: pointer;
    font-size: 20px;
@@ -318,7 +326,7 @@
    font-weight: bold;
    position: absolute;
    top: -60px;
    left: 0px;
    left: 10px;
  }
}
.large_screen_box {
@@ -354,6 +362,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;
      }
    }
  }
}