From fa4d8c1933eafa10a7a6b1a4928e8ddd9d9e951e Mon Sep 17 00:00:00 2001 From: 李林 <z1292839451@163.com> Date: 星期五, 18 八月 2023 18:07:22 +0800 Subject: [PATCH] Revert "8.18" --- src/components/view/measurementManagement.vue | 665 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 653 insertions(+), 12 deletions(-) diff --git a/src/components/view/measurementManagement.vue b/src/components/view/measurementManagement.vue index 517b179..71ae13e 100644 --- a/src/components/view/measurementManagement.vue +++ b/src/components/view/measurementManagement.vue @@ -1,24 +1,665 @@ <template> - <div> - <el-row> - <el-col :span="12" class="top_left_name">璁¢噺绠$悊</el-col> - <el-col :span="12" style="text-align: right;"> - <el-button size="mini" icon="el-icon-plus" style="color: #000;" - >瀵煎嚭</el-button - > - </el-col> - </el-row> + <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-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" + > + </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="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> </template> <script> +import zhLocale from "element-ui/lib/locale/lang/zh-CN"; + +// 鐒跺悗灏唀lement-ui涓璸agination閫夐」鏀规帀 +zhLocale.el.pagination = { + pagesize: "鏉�/椤�", + total: `鍏辨湁 {total} 鏉, + goto: "璺宠嚦", + pageClassifier: "椤�" +}; + export default { - name: "measurementManagement" + name: "measurementManagement", + data() { + return { + radio1: 1, // 璁¢噺鍙拌处璁¢噺璁″垝鍒囨崲 + addShow: false, // 鏂板璁¢噺 + viewResume: true, // 鐐瑰嚮鏌ョ湅灞ュ巻鏄剧ず + currentPage4: 4, + value: "", + options: [ + { + value: "閫夐」1", + label: "榛勯噾绯�" + }, + { + value: "閫夐」2", + label: "鍙岀毊濂�" + }, + { + value: "閫夐」3", + label: "铓典粩鐓�" + }, + { + value: "閫夐」4", + label: "榫欓』闈�" + }, + { + value: "閫夐」5", + label: "鍖椾含鐑ら腑" + } + ], + tableData: [ + { + date: "2016-05-03", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-02", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-04", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-01", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-08", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-06", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-07", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-07", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-07", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-07", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-07", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + }, + { + date: "2016-05-07", + name: "鐜嬪皬铏�", + address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�" + } + ] + }; + }, + methods: { + handleSizeChange(val) { + console.log(`姣忛〉 ${val} 鏉); + }, + handleCurrentChange(val) { + console.log(`褰撳墠椤�: ${val}`); + } + } }; </script> <style> -.div_acb { - color: #000000; +.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: 100px; + background-color: #ffffff; + margin: 5px 0; +} +.middle_div { + width: 100%; + height: calc(100vh - 290x); + background-color: #ffffff; +} +.middle_top_div { + width: 100%; + height: 60px; +} +.ai-tab-change { + padding: 14px 0 15px 15px; +} +.middle_middle_div { + width: 100%; + height: calc(100vh - 360px); + margin-top: 5px; +} +.middle_middle_table { + width: 98%; + margin: 0 15px; +} +.middle_under_div { + width: 99%; + height: 30px; + margin-top: 5px; + padding-bottom: 6px; + text-align: right; +} +.table_top_input { + width: 13%; + margin-right: 24px; +} +.table_top_div { + margin-left: 20px; + padding: 20px 0; +} +.table_top_div span { + font-size: 15px; +} +.el-radio-button__inner { + border: 1px solid #ececed; + line-height: 14px; +} +.el-radio-button__orig-radio:checked + .el-radio-button__inner { + background: #fdfdfe; + border: 1px solid #2661a0; + 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