From 2fde4b5e92cf74f7cf9b7a798ba52577753ef90d Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 16 八月 2024 16:55:32 +0800
Subject: [PATCH] 自定义列图标
---
src/views/screen/newPage/index.vue | 198 ++++++++++++++++++++++++++----------------------
1 files changed, 107 insertions(+), 91 deletions(-)
diff --git a/src/views/screen/newPage/index.vue b/src/views/screen/newPage/index.vue
index 8924d8b..32a7ed9 100644
--- a/src/views/screen/newPage/index.vue
+++ b/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>
@@ -221,37 +230,37 @@
}
.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: 20px;
+ 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;
}
@@ -281,7 +290,6 @@
::v-deep .el-tabs__item {
margin: 5px 30px;
padding: 0px 25px !important;
- border-radius: 5px;
background: linear-gradient(#ffffff, #ffffff) left top,
linear-gradient(#ffffff, #fff) left top,
linear-gradient(#ffffff, #ffffff) right top,
@@ -314,11 +322,11 @@
// 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 {
@@ -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;
+ }
}
}
}
--
Gitblit v1.8.0