From 76da76135e3a7564b9f81116a2567454ecad3577 Mon Sep 17 00:00:00 2001
From: XiaoRuby <3114200645@qq.com>
Date: 星期二, 15 八月 2023 17:21:37 +0800
Subject: [PATCH] 8-15 下班提交
---
src/components/view/measurementManagement.vue | 630 ++++++++++++++++++++++++++++++++++++++++++++-------------
src/App.vue | 2
2 files changed, 488 insertions(+), 144 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 778df71..1783dc5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,7 +26,7 @@
</script>
<style>
/* @import url("../static/img/alifont/iconfont.css"); */
-@import url("//at.alicdn.com/t/c/font_4179845_lomzsmcvwfg.css");
+@import url("//at.alicdn.com/t/c/font_4179845_pixkgb97c4p.css");
* {
margin: 0;
diff --git a/src/components/view/measurementManagement.vue b/src/components/view/measurementManagement.vue
index d3d7291..71ae13e 100644
--- a/src/components/view/measurementManagement.vue
+++ b/src/components/view/measurementManagement.vue
@@ -1,145 +1,417 @@
<template>
- <div>
- <el-row>
- <el-col :span="12" class="top_left_name">璁￠噺绠＄悊</el-col>
- <el-col :span="12" style="text-align: right;">
- <el-button
- v-show="radio1 == 2"
- @click="routingJump()"
- type="primary"
- size="mini"
- icon="el-icon-plus"
- style="background: #004EA2; "
- >鏂板</el-button
- >
- <el-button size="mini"
- ><i class="font icon-xiazaidaoru" style="padding-right: 3px;"></i
- >瀵煎嚭</el-button
- >
- </el-col>
- </el-row>
- <div class="top_div">
- <div class="table_top_div">
- <span>璁￠噺缂栧彿锛�</span>
- <el-select
- class="table_top_input"
- size="small"
- v-model="value"
- placeholder="璇烽�夋嫨"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ <div class="main_div">
+ <div
+ class="first_div"
+ :style="
+ `width:${addShow ? 0 : 100}%; overflow: hidden;opacity: ${
+ addShow ? 0 : 1
+ };`
+ "
+ >
+ <el-row>
+ <el-col :span="12" class="top_left_name">{{
+ radio1 == 1 ? "璁￠噺鍙拌处" : "璁￠噺棰勬祴"
+ }}</el-col>
+ <el-col :span="12" style="text-align: right;">
+ <el-button
+ v-show="radio1 == 2"
+ @click="addShow = true"
+ type="primary"
+ size="mini"
+ icon="el-icon-plus"
+ style="background: #004EA2; "
+ >鏂板</el-button
>
- </el-option>
- </el-select>
- <span>浠櫒璁惧鍚嶇О锛�</span>
- <el-select
- class="table_top_input"
- size="small"
- v-model="value"
- placeholder="璇烽�夋嫨"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ <el-button size="mini"
+ ><i class="font icon-xiazaidaoru" style="padding-right: 3px;"></i
+ >瀵煎嚭</el-button
>
- </el-option>
- </el-select>
- <span>璁￠噺鍗曚綅锛�</span>
- <el-select
- class="table_top_input"
- size="small"
- v-model="value"
- placeholder="璇烽�夋嫨"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ </el-col>
+ </el-row>
+ <div class="top_div">
+ <div class="table_top_div">
+ <span>璁￠噺缂栧彿锛�</span>
+ <el-select
+ class="table_top_input"
+ size="small"
+ v-model="value"
+ placeholder="璇烽�夋嫨"
>
- </el-option>
- </el-select>
- <el-button size="mini" @click="reset"><span>閲� 缃�</span></el-button>
- <el-button
- size="mini"
- type="primary"
- @click="selectSearch"
- style="background: #004EA2;"
- ><span>鏌� 璇�</span></el-button
- >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <span>浠櫒璁惧鍚嶇О锛�</span>
+ <el-select
+ class="table_top_input"
+ size="small"
+ v-model="value"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <span>璁￠噺鍗曚綅锛�</span>
+ <el-select
+ class="table_top_input"
+ size="small"
+ v-model="value"
+ placeholder="璇烽�夋嫨"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <el-button size="mini" @click="reset"><span>閲� 缃�</span></el-button>
+ <el-button
+ size="mini"
+ type="primary"
+ @click="selectSearch"
+ style="background: #004EA2;"
+ ><span>鏌� 璇�</span></el-button
+ >
+ </div>
+ </div>
+ <div class="middle_div">
+ <div class="middle_top_div">
+ <el-radio-group class="ai-tab-change" v-model="radio1">
+ <el-radio-button size="small" label="1">
+ <div class="el_radio_button_div">璁￠噺鍙拌处</div>
+ </el-radio-button>
+ <el-radio-button size="small" label="2">
+ <div class="el_radio_button_div">璁￠噺璁″垝</div>
+ </el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="middle_middle_div">
+ <el-table
+ v-show="radio1 == 1"
+ ref="multipleTable"
+ :data="tableData"
+ border
+ tooltip-effect="dark"
+ class="middle_middle_table"
+ height="calc(100vh - 372px)"
+ width="100%"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55"> </el-table-column>
+ <el-table-column label="浠櫒璁惧缂栧彿" min-width="130px">
+ </el-table-column>
+ <el-table-column label="浠櫒璁惧鍚嶇О" min-width="130px">
+ </el-table-column>
+ <el-table-column
+ label="娴嬮噺鑼冨洿"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺鍛ㄦ湡"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺缁撴灉"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺鏃ユ湡"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺鏈夋晥鏈�"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column label="璐熻矗浜�" min-width="130px"></el-table-column>
+ <el-table-column
+ label="鍒涘缓鏃ユ湡"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column label="鍒涘缓浜�" min-width="130px"></el-table-column>
+ <el-table-column
+ label="璁￠噺鍗曚綅"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺缂栧彿"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ fixed="right"
+ class="table-fixed"
+ min-width="200px"
+ label="鎿嶄綔"
+ show-overflow-tooltip
+ >
+ <el-button
+ type="text"
+ size="mini"
+ @click="
+ addShow = true;
+ viewResume = false;
+ "
+ >鏌ョ湅璁￠噺灞ュ巻</el-button
+ >
+ <el-button type="text" size="mini">鏌ョ湅闄勪欢</el-button>
+ </el-table-column>
+ </el-table>
+ <el-table
+ v-show="radio1 == 2"
+ ref="multipleTable"
+ :data="tableData"
+ border
+ tooltip-effect="dark"
+ class="middle_middle_table"
+ height="calc(100vh - 372px)"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55"> </el-table-column>
+ <el-table-column label="璁″垝鍗曞彿" min-width="130px">
+ </el-table-column>
+ <el-table-column label="璁惧缂栫爜" min-width="130px">
+ </el-table-column>
+ <el-table-column
+ label="璁惧鍚嶇О"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁″垝鏃ユ湡"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁″垝鐘舵��"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺璐熻矗浜�"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺鍗曚綅"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column label="鍒涘缓浜�" min-width="130px"></el-table-column>
+ <el-table-column
+ label="鍒涘缓鏃ユ湡"
+ min-width="130px"
+ ></el-table-column>
+ <el-table-column
+ fixed="right"
+ width="200px"
+ label="鎿嶄綔"
+ show-overflow-tooltip
+ >
+ <el-button
+ type="text"
+ size="mini"
+ @click="
+ addShow = true;
+ viewResume = false;
+ "
+ >鏌ョ湅璁￠噺灞ュ巻</el-button
+ >
+ <el-button type="text" size="mini">鏌ョ湅闄勪欢</el-button>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <div class="middle_under_div">
+ <el-pagination
+ v-show="radio1 == 1"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage4"
+ :page-sizes="[12, 20, 30, 40]"
+ :pager-count="9"
+ :page-size="12"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="400"
+ >
+ </el-pagination>
+ <el-pagination
+ v-show="radio1 == 2"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage4"
+ :page-sizes="[12, 20, 30, 40]"
+ :pager-count="9"
+ :page-size="12"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="600"
+ >
+ </el-pagination>
+ </div>
</div>
</div>
- <div class="middle_div">
- <div class="middle_top_div">
- <el-radio-group class="ai-tab-change" v-model="radio1">
- <el-radio-button size="small" label="1">
- <div class="el_radio_button_div">璁￠噺鍙拌处</div>
- </el-radio-button>
- <el-radio-button size="small" label="2">
- <div class="el_radio_button_div">璁￠噺璁″垝</div>
- </el-radio-button>
- </el-radio-group>
- </div>
- <div class="middle_middle_div">
- <el-table
- v-show="radio1 == 1"
- ref="multipleTable"
- :data="tableData"
- border
- tooltip-effect="dark"
- class="middle_middle_table"
- height="calc(100vh - 325px)"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55"> </el-table-column>
- <el-table-column label="鏃ユ湡" width="120">
- <template slot-scope="scope">{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column prop="name" label="濮撳悕" width="120">
- </el-table-column>
- <el-table-column prop="address" label="鍦板潃" show-overflow-tooltip>
- </el-table-column>
- </el-table>
- <el-table
- v-show="radio1 == 2"
- ref="multipleTable"
- :data="tableData"
- border
- tooltip-effect="dark"
- class="middle_middle_table"
- height="calc(100vh - 325px)"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55"> </el-table-column>
- <el-table-column label="鏃ユ湡" width="120">
- <template slot-scope="scope">{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column prop="name" label="濮撳悕" width="120">
- </el-table-column>
- <el-table-column prop="address" label="鍦板潃" show-overflow-tooltip>
- </el-table-column>
- <el-table-column prop="address" label="鍦板潃" show-overflow-tooltip>
- </el-table-column>
- </el-table>
- </div>
- <div class="middle_under_div">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="currentPage4"
- :page-sizes="[12, 20, 30, 40]"
- :pager-count="9"
- :page-size="12"
- layout="total, sizes, prev, pager, next, jumper"
- :total="400"
- >
- </el-pagination>
+ <div
+ class="second_div"
+ :style="
+ `width: ${addShow ? 100 : 0}%; overflow: hidden;opacity: ${
+ addShow ? 1 : 0
+ };`
+ "
+ >
+ <el-row>
+ <el-col :span="12" class="top_left_name">{{
+ viewResume ? "鏂板璁￠噺璁″垝" : "鏌ョ湅璁￠噺灞ュ巻"
+ }}</el-col>
+ <el-col :span="12" style="text-align: right;">
+ <el-button
+ @click="
+ addShow = false;
+ viewResume = true;
+ "
+ size="mini"
+ :style="`opacity: ${addShow ? 1 : 0};transition: 0s`"
+ ><i class="font icon-fanhui"></i>杩斿洖</el-button
+ >
+ <el-button
+ v-show="viewResume == true"
+ type="primary"
+ size="mini"
+ icon="el-icon-plus"
+ :style="`background: #3a7bfa; opacity: ${addShow ? 1 : 0}`"
+ >淇濆瓨</el-button
+ >
+ </el-col>
+ </el-row>
+ <div class="second_div_main">
+ <div class="second_div_top">
+ <el-descriptions class="secode_div_top_descriptions">
+ <template slot="title">
+ <span>璁″垝淇℃伅</span>
+ <span v-show="viewResume == false" style="font-size: 14px;"
+ > 宸插畬鎴�</span
+ >
+ </template>
+ <el-descriptions-item label="璁″垝缂栧彿"
+ >kooriookami</el-descriptions-item
+ >
+ <el-descriptions-item label="鍒涘缓浜�"
+ >18100000000</el-descriptions-item
+ >
+ <el-descriptions-item label="鍒涘缓鏃ユ湡">鑻忓窞甯�</el-descriptions-item>
+ <el-descriptions-item label="璁″垝鏃ユ湡">鑻忓窞甯�</el-descriptions-item>
+ <el-descriptions-item label="璁″垝鍗曚綅"
+ >姹熻嫃鐪佽嫃宸炲競鍚翠腑鍖哄惔涓ぇ閬� 1188 鍙�</el-descriptions-item
+ >
+ <el-descriptions-item label="璐熻矗浜�">鑻忓窞甯�</el-descriptions-item>
+ </el-descriptions>
+ </div>
+ <div class="second_div_middle">
+ <div class="el_divider_span">璁惧淇℃伅</div>
+ <el-divider></el-divider>
+ </div>
+ <div class="second_div_table">
+ <!-- <div>
+ <el-button size="mini" style="padding: 5px 7px;" icon="el-icon-plus"
+ ><span style="font-size: 14px;">鎵归噺璁￠噺</span></el-button
+ >
+ </div> -->
+ <div v-show="viewResume == true">
+ <el-table
+ ref="multipleTable"
+ :data="tableData"
+ tooltip-effect="dark"
+ border
+ style="width: 100%; margin-top: 12px;"
+ height="calc(100vh - 382px)"
+ >
+ <el-table-column type="selection" width="55" min-width="5%">
+ </el-table-column>
+ <el-table-column label="浠櫒璁惧缂栫爜" min-width="10%">
+ </el-table-column>
+ <el-table-column
+ label="浠櫒璁惧鍚嶇О"
+ min-width="10%"
+ ></el-table-column>
+ <el-table-column
+ label="娴嬮噺鑼冨洿"
+ min-width="10%"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺鍛ㄦ湡"
+ min-width="10%"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺缁撴灉"
+ min-width="10%"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺鏃ユ湡"
+ min-width="10%"
+ ></el-table-column>
+ <el-table-column
+ label="璁￠噺鏈夋晥鏈�"
+ min-width="10%"
+ ></el-table-column>
+ <el-table-column label="鎿嶄綔" min-width="10%">
+ <el-button type="text" size="mini">浣滃簾</el-button>
+ </el-table-column>
+ </el-table>
+ <div class="middle_under_div">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage4"
+ :page-sizes="[12, 20, 30, 40]"
+ :pager-count="9"
+ :page-size="12"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="600"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ <div v-show="viewResume == false">
+ <el-table
+ :data="tableData"
+ tooltip-effect="dark"
+ border
+ :row-style="{ height: '50px' }"
+ :cell-style="{ padding: '0px' }"
+ style="width: 100%; margin-top: 12px;"
+ height="calc(100vh - 382px)"
+ >
+ <el-table-column label="浠櫒璁惧缂栫爜"> </el-table-column>
+ <el-table-column label="浠櫒璁惧鍚嶇О"></el-table-column>
+ <el-table-column label="娴嬮噺鑼冨洿"></el-table-column>
+ <el-table-column label="璁￠噺鍛ㄦ湡"></el-table-column>
+ <el-table-column label="璁￠噺缁撴灉"></el-table-column>
+ <el-table-column label="璁￠噺鏃ユ湡"></el-table-column>
+ <el-table-column label="璁￠噺鏈夋晥鏈�"></el-table-column>
+ <el-table-column label="璐熻矗浜�"></el-table-column>
+ <el-table-column label="鍒涘缓鏃ユ湡"></el-table-column>
+ <el-table-column label="鍒涘缓浜�"></el-table-column>
+ <el-table-column label="璁￠噺鍗曚綅"></el-table-column>
+ <el-table-column label="璁￠噺缂栧彿"></el-table-column>
+ </el-table>
+ <div class="middle_under_div">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage4"
+ :page-sizes="[12, 20, 30, 40]"
+ :pager-count="9"
+ :page-size="12"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="600"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -160,7 +432,9 @@
name: "measurementManagement",
data() {
return {
- radio1: 1, // 鍒嗙被鍒囨崲
+ radio1: 1, // 璁￠噺鍙拌处璁￠噺璁″垝鍒囨崲
+ addShow: false, // 鏂板璁￠噺
+ viewResume: true, // 鐐瑰嚮鏌ョ湅灞ュ巻鏄剧ず
currentPage4: 4,
value: "",
options: [
@@ -255,24 +529,36 @@
},
handleCurrentChange(val) {
console.log(`褰撳墠椤�: ${val}`);
- },
- routingJump() {
- this.$router.push("/measure/manage");
}
}
};
</script>
<style>
+.main_div {
+ height: calc(100vh - 110px);
+ position: relative;
+ width: 100%;
+}
+.first_div {
+ float: left;
+ height: calc(100vh - 110px);
+ transition: 0.5s;
+}
+.second_div {
+ float: left;
+ height: calc(100vh - 110px);
+ transition: 0.5s;
+}
.top_div {
width: 100%;
- height: 70px;
+ height: 100px;
background-color: #ffffff;
margin: 5px 0;
}
.middle_div {
width: 100%;
- height: calc(100vh - 225px);
+ height: calc(100vh - 290x);
background-color: #ffffff;
}
.middle_top_div {
@@ -284,7 +570,7 @@
}
.middle_middle_div {
width: 100%;
- height: calc(100vh - 325px);
+ height: calc(100vh - 360px);
margin-top: 5px;
}
.middle_middle_table {
@@ -295,6 +581,7 @@
width: 99%;
height: 30px;
margin-top: 5px;
+ padding-bottom: 6px;
text-align: right;
}
.table_top_input {
@@ -318,4 +605,61 @@
color: #2661a0;
line-height: 14px;
}
+.second_div_top {
+ height: 136px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+}
+.second_div_table {
+ height: calc(100vh - 342px);
+ padding: 0 20px;
+}
+.second_div_middle {
+ height: 30px;
+ position: relative;
+}
+.el_divider_span {
+ z-index: 1;
+ width: 60px;
+ height: 20px;
+ position: absolute;
+ border-bottom: #538bfb 2px solid;
+ color: #538bfb;
+ margin-left: 15px;
+ font-size: 14px;
+}
+.el-divider {
+ position: absolute;
+ background-color: #dcdfe6;
+ width: 97%;
+ margin: 20px 60px 15px 15px;
+}
+.second_div_main {
+ background-color: #ffffff;
+ height: calc(100vh - 150px);
+}
+.secode_div_top_descriptions {
+ padding-left: 20px;
+ padding-top: 10px;
+}
+.el-descriptions__title {
+ font-size: 15px;
+ font-weight: 500;
+}
+.el-descriptions__body span {
+ padding-left: 30px;
+ font-size: 14px;
+}
+.el-descriptions__table {
+ width: 90%;
+ height: 80px;
+ margin: 0 auto;
+}
+::-webkit-scrollbar {
+ height: 10px;
+ background-color: transparent;
+}
+.icon-fanhui {
+ padding-right: 6px;
+}
</style>
--
Gitblit v1.9.3