From 690eaac5ed710462a5f2635ccf9736e560f09381 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期三, 06 十一月 2024 10:07:02 +0800
Subject: [PATCH] 大图展示得分分开
---
src/views/screen/newPage/index.vue | 288 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 173 insertions(+), 115 deletions(-)
diff --git a/src/views/screen/newPage/index.vue b/src/views/screen/newPage/index.vue
index f278dd9..4e2d483 100644
--- a/src/views/screen/newPage/index.vue
+++ b/src/views/screen/newPage/index.vue
@@ -3,13 +3,9 @@
<div style="display: flex; justify-content: center">
<div class="header_box">
<div class="tabs-box">
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane
- v-for="item in testData1"
- :label="item.name"
- :name="item.value"
- :key="item.value"
- ></el-tab-pane>
+ <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-tabs>
</div>
</div>
@@ -21,12 +17,16 @@
<div>杩愮淮鑰冩牳澶у睆</div>
</div>
<div class="card" style="height: 622px">
- <div class="card_header"><div class="title">宸ュ崟鏁版嵁</div></div>
- <div><ScreenData></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">
- <NewMap></NewMap>
+ <NewMap @clickMap="getDeptId"></NewMap>
</div>
<div class="left_box">
@@ -35,90 +35,25 @@
<div class="title">璁惧鏁版嵁</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="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>{{ 1123 }}</span
- ><i class="el-icon-bottom"></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>{{ 1123 }}</span
- ><i class="el-icon-bottom"></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>{{ 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
- ><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>
@@ -128,7 +63,7 @@
<div class="card_header">
<div class="title">璁惧姝ｅ父鐜�</div>
<div style="margin: 10px 10px">
- <ScreenTable></ScreenTable>
+ <ScreenTable :tableData="tableData"></ScreenTable>
</div>
</div>
</div>
@@ -139,23 +74,34 @@
<div class="card_header">
<div class="title">浜鸿劯鑰冩牳鏁版嵁</div>
<div style="width: 600px; margin-left: -20px">
- <ExamineChart class="wrapper-item"></ExamineChart>
+ <FaceChart class="wrapper-item" :faceList="faceList"></FaceChart>
</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;
+ ">
+ <div style="width: 780px">
+ <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"></ExamineChart>
+ <div class="titleCar">瑙嗛鑰冩牳鏁版嵁</div>
+ </div>
+ <div style="
+ overflow: auto;
+ margin-top: -9px;
+ ">
+ <div style="width: 1100px">
+ <VideoChart class="wrapper-item" :videoList="videoList"></VideoChart>
</div>
</div>
</div>
@@ -167,30 +113,37 @@
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 { getDepartmentData, getDeviceData, getWorkOrderData, getWorkOrderRegion, getNormalRate, checkFace, checkCar, checkVideo } from "@/api/newpage";
export default {
name: "Newpage",
components: {
ScreenTable,
ScreenMapThree,
ScreenMap,
- ExamineChart,
+ FaceChart,
+ CarChart,
+ VideoChart,
ScreenData,
NewMap,
},
data() {
return {
+ deptId: '',
+ deptList: [],
isEnd: false,
- activeName: "1",
+ activeName: "2",
testData1: [
{
name: "鐪佸巺鏁版嵁",
value: "1",
},
{
- name: "甯傚眬鏁版嵁",
+ name: "鍖哄幙鏁版嵁",
value: "2",
},
{
@@ -198,64 +151,141 @@
value: "3",
},
],
+ deviceList: [],
+ workOrderRegion: [],
+ carList: '',
+ faceList: '',
+ videoList: '',
+ workOrderData: {},
+ tableData: [],
};
},
- mounted() {},
+ mounted() {
+ // 鑾峰彇閮ㄩ棬
+ getDepartmentData()
+ .then((res) => {
+ this.deptList = res.data;
+ })
+ .catch((err) => { });
+ // 鏌ヨ鏁版嵁
+ this.getData();
+ },
methods: {
+ getDeptId(deptName) {
+ let deptId = this.deptList.find(item => item.area === deptName).deptId;
+ if (deptId === this.deptId) {
+ this.deptId = '';
+ } else {
+ this.deptId = deptId
+ }
+ this.getData();
+ },
returnPath() {
this.$router.push("/index");
},
- handleClick() {},
+ handleClick(tab, event) {
+ console.log(tab, event);
+ },
+ getData() {
+ getDeviceData(this.activeName, this.deptId)
+ .then((res) => {
+ this.deviceList = res.data;
+ })
+ .catch((err) => { });
+ getWorkOrderData(this.activeName, this.deptId)
+ .then((res) => {
+ this.workOrderData = res.data;
+ })
+ .catch((err) => { });
+ getWorkOrderRegion(this.activeName, this.deptId)
+ .then((res) => {
+ this.workOrderRegion = res.data;
+ })
+ .catch((err) => { });
+ getNormalRate(this.activeName, this.deptId)
+ .then((res) => {
+ this.tableData = res.data;
+ })
+ .catch((err) => { });
+ checkCar(this.activeName, this.deptId)
+ .then((res) => {
+ this.carList = res.data;
+ })
+ .catch((err) => { });
+ checkFace(this.activeName, this.deptId)
+ .then((res) => {
+ this.faceList = res.data;
+ })
+ .catch((err) => { });
+ checkVideo(this.activeName, this.deptId)
+ .then((res) => {
+ this.videoList = res.data;
+ })
+ .catch((err) => { });
+ },
+ tabChange() {
+ this.getData();
+ }
},
};
</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: 20px;
+ right: -5px;
top: 20px;
background: url("../../../assets/images/screen/backBt.png");
background-size: 100% 100%;
background-repeat: no-repeat !important;
background-position: center center !important;
- color: #4481dd;
padding: 15px 25px;
cursor: pointer;
+ font-size: 20px;
}
}
+
::v-deep .tabs-box {
margin-top: 5px;
+
.el-tabs__item {
color: #ffffff !important;
- font-size: 24px;
+ font-size: 26px;
}
+
.is-active {
- color: #66b5ff !important;
+ color: #00b8ff !important;
// background: url("../../../assets/images/screen/button1.png");
// background-size: cover !important;
// background-repeat: no-repeat !important;
// background-position: center center !important;
- background: linear-gradient(#66b5ff, #66b5ff) left top,
- linear-gradient(#66b5ff, #66b5ff) left top,
- linear-gradient(#66b5ff, #66b5ff) right top,
- linear-gradient(#66b5ff, #66b5ff) right top,
- linear-gradient(#66b5ff, #66b5ff) left bottom,
- linear-gradient(#66b5ff, #66b5ff) left bottom,
- linear-gradient(#66b5ff, #66b5ff) right bottom,
- linear-gradient(#66b5ff, #66b5ff) right bottom;
+ background: linear-gradient(#00b8ff, #00b8ff) left top,
+ linear-gradient(#00b8ff, #00b8ff) left top,
+ linear-gradient(#00b8ff, #00b8ff) right top,
+ linear-gradient(#00b8ff, #00b8ff) right top,
+ linear-gradient(#00b8ff, #00b8ff) left bottom,
+ linear-gradient(#00b8ff, #00b8ff) left bottom,
+ linear-gradient(#00b8ff, #00b8ff) right bottom,
+ linear-gradient(#00b8ff, #00b8ff) right bottom;
background-repeat: no-repeat;
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;
@@ -266,18 +296,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;
@@ -297,29 +331,34 @@
// 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%;
// background-repeat: no-repeat !important;
// background-position: center center !important;
- font-size: 36px;
+ font-size: 40px;
font-weight: bold;
position: absolute;
top: -60px;
- left: 0px;
+ left: 10px;
}
}
+
.large_screen_box {
width: 920px;
height: 621px;
@@ -329,18 +368,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;
@@ -348,14 +390,26 @@
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;
+ color: #fff;
+ letter-spacing: 2px;
+ font-size: 20px;
+ font-style: italic;
+ }
}
}
}
+
.title {
margin-left: 20px;
padding-top: 5px;
@@ -364,6 +418,7 @@
font-size: 20px;
font-style: italic;
}
+
.data-info {
flex: 1;
color: #5b83bd;
@@ -378,13 +433,16 @@
.type1 {
color: #287cfa;
}
+
.type2 {
color: #0cd81d;
}
+
.type3 {
color: #e20c0c;
}
}
+
.device_data {
display: flex;
align-items: center;
--
Gitblit v1.8.0