From 5aa3a9bdd9001e53f245efd40b0d39263caa4bfc Mon Sep 17 00:00:00 2001 From: Surpriseplus <845948745@qq.com> Date: 星期六, 19 十一月 2022 17:27:53 +0800 Subject: [PATCH] 数据管理页面添加,修改 --- src/views/datamanage/dataUpdata.vue | 1019 +++++++++++++++++++++++++++-------------------------------- 1 files changed, 474 insertions(+), 545 deletions(-) diff --git a/src/views/datamanage/dataUpdata.vue b/src/views/datamanage/dataUpdata.vue index 791341d..d16d395 100644 --- a/src/views/datamanage/dataUpdata.vue +++ b/src/views/datamanage/dataUpdata.vue @@ -1,605 +1,534 @@ <template> - <div class="authorityManagement_box"> - <My-bread :list="['鏁版嵁绠$悊', '鏁版嵁涓婁紶']"></My-bread> + <div class="authorityManagement_box" v-loading.fullscreen.lock="fullscreenLoading" + element-loading-spinner="el-icon-loading" + element-loading-background="rgba(0, 0, 0, 0.8)"> + <My-bread + :list="[ + `${$t('dataManage.dataManage')}`, + `${$t('dataManage.dataUpdata')}`, + ]" + ></My-bread> <el-divider /> - <div class="inquire"> - <el-form ref="formData1" :model="updateForm" :inline="true"> - <el-form-item> - <el-button type="primary" size="small" @click="showCatalog()" - >鐩綍</el-button - > - </el-form-item> - <el-form-item> - <el-tooltip - :content=" - updateForm.cataName == '' ? '鏈�夋嫨鐩綍' : updateForm.cataName - " - placement="top-start" - > - <el-input - v-model="updateForm.cataName" - disabled - class="firstInput" + <div class="updateContent"> + <div class="contentIquery"> + <el-form :inline="true" :model="formInline" class="demo-form-inline"> + <el-form-item :label="$t('dataManage.dataUpObj.catalogue')"> + <el-cascader + v-model="formInline.catalog" + :options="catalogOption" + @change="catalogChange" + :props="cascader" + ></el-cascader> + </el-form-item> + <el-form-item :label="$t('dataManage.dataUpObj.company')"> + <el-cascader + v-model="formInline.company" + :options="companyOption" + @change="companyChange" + :props="cascader" + ></el-cascader> + </el-form-item> + <el-form-item :label="$t('dataManage.dataUpObj.entryTime')"> + <el-date-picker + v-model.trim="formInline.monitorTime" + :picker-options="pickerOptions" + type="datetime" + placeholder="璇烽�夋嫨" + value-format="yyyy-MM-dd HH:mm:ss" /> - </el-tooltip> </el-form-item - ><el-form-item> - <span>绫诲瀷閫夋嫨</span> - </el-form-item> - <el-form-item> - <el-select v-model="updateForm.type" clearable placeholder="璇烽�夋嫨"> - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value" - > - </el-option> - </el-select> - </el-form-item> - <el-form-item> - <span>鐗堟湰</span> - </el-form-item> - <el-form-item> - <el-input v-model="updateForm.version" /> - </el-form-item> + </el-form-item> + <el-form-item> + <input id="uploadfile" @change= "handleFileChange" type="file" name="file" multiple="multiple" style="display: none"></input> + <el-button icon="el-icon-document-add" @click="fileSelect" class="primary">{{ + $t('common.file') + }}</el-button> + </el-form-item> + <br /> + <el-form-item :label="$t('dataManage.dataUpObj.describe')"> + <el-input + type="textarea" + v-model="formInline.desc" + maxlength="50" + class="nm-skin-pretty" + show-word-limit +:rows="2" resize='none' + style="width: 460px" + ></el-input> + </el-form-item> + <el-form-item> + <el-button icon="el-icon-upload" @click="setFileUpload" - <el-form-item> - <input - name="file1" - :accept="acceptItem" - type="file" - id="uploading" - style="display: none" - multiple="multiple" - @change="clearFileList" - /> - <el-button - @click="clearFileList" - icon="el-icon-thumb" - type="primary" - size="small" - >閫夋嫨</el-button - > - <p class="show"></p> + type="success">{{ + $t('common.upload') + }}</el-button> - <el-button - v-if="btnStatus.upload" - @click="uploadFile" - icon="el-icon-thumb" - type="success" - size="small" - >涓婁紶</el-button - > - <!-- <el-row> - <el-col :span="2"> - <el-link - title="娣诲姞鏁版嵁" - :underline="false" - @click="uploadFile" - style="margin-left: 10px" - ><i class="el-icon-plus"></i - ></el-link> - </el-col> - </el-row> --> - <!-- <el-upload - id="uploading" - :on-remove="handleRemove" - :http-request="uploadFile" - :file-list="fileList" - multiple - ref="upload" - class="upload" - action="http://192.168.20.106/LFServer/Meta/Upload" - :auto-upload="false" - :headers="headers" - :accept="acceptItem" - > - <template #trigger> - <el-button - @click="clearFileList" - icon="el-icon-thumb" - type="primary" - size="small" - >閫夋嫨</el-button - > - </template> <el-button - class="ml-3" - @click="submitUpload" - icon="el-icon-upload2" - type="success" - size="small" + icon="el-icon-delete" + type="danger" + @click="setFileDelete" + + :disabled="tableData.length == 0 ? true : false" + >{{ $t('common.delete') }}</el-button > - 涓婁紶 - </el-button> - </el-upload> --> - </el-form-item> - </el-form> - </div> - <div class="table_box"> - <el-table - :data="tableData" + <el-button + icon="el-icon-folder-add" + type="warning" + @click="setFileWare" + :disabled="tableData.length == 0 ? true : false" + >{{ $t('common.Warehousin') }}</el-button + > + </el-form-item> + </el-form> + </div> + <div class="contentTable"> + <el-table + :data="tableData" border style="width: 100%" - fit - height="99%" - @selection-change="handleSelectionChange" - > - <el-table-column width="50" type="index" label="搴忓彿" /> - <el-table-column min-width="150" prop="name" label="鏁版嵁鍚嶇О" /> - <el-table-column min-width="200" prop="path" label="鎵�灞炵洰褰�" /> - <el-table-column min-width="100" prop="create_time" label="鍒涘缓鏃堕棿" /> - <el-table-column min-width="80" prop="create_user" label="鍒涘缓浜哄憳" /> - <el-table-column min-width="50" prop="type" label="鏁版嵁绫诲瀷" /> - <el-table-column min-width="50" prop="format" label="鏁版嵁鏍煎紡" /> - <el-table-column min-width="80" prop="up_unit" label="涓婁紶鍗曚綅" /> - <el-table-column min-width="50" prop="status" label="鏁版嵁鐘舵��" /> - <el-table-column min-width="50" prop="version" label="鏁版嵁鐗堟湰" /> - </el-table> - </div> - <div class="pagination_box" style="margin-top: 20px; margin-left: 400px"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage" - :page-sizes="[10, 20, 50, 100]" - :page-size="10" - layout="total, sizes, prev, pager, next, jumper" - :total="count" - > - </el-pagination> - </div> - <div class="leftTree" v-show="showCata"> - <div class="treeBox"> - <catalogueTree></catalogueTree> - </div> - <div class="btnBox"> - <el-button type="primary" size="small" @click="selectCataName" - >纭畾</el-button + height="92%" + @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" /> + <el-table-column + align="center" + type="index" + :label="$t('common.index')" + width="70px" + fixed + /> + + <el-table-column + align="center" + prop="name" + :label="$t('userManage.userInfoObj.uname')" + fixed + /> + </el-table> + <div style="margin-top: 10px" class="pagination_box"> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="listData.pageIndex" + :page-sizes="[10, 20, 30, 40]" + :page-size="listData.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="count" > - <el-button type="primary" size="small" @click="closeCata" - >鍙栨秷</el-button - > + </el-pagination> </div> + </div> + </div> </div> </template> <script> -import $ from "jquery"; - -import { queryUploadData, queryDataCount } from "../../api/api"; -import catalogueTree from "../../components/catalogueTree.vue"; -import MyBread from "../../components/MyBread.vue"; +import $ from 'jquery'; +import MyBread from '../../components/MyBread.vue'; +import { selectdirTab, queryDepTree } from '../../api/api'; export default { - name: "dataUpdata", + name: 'dataUpdata', components: { MyBread, - catalogueTree, }, data() { return { - options: [ - { - value: "DEM", - label: "楂樼▼鏁版嵁", - }, - { - value: "DOM", - label: "褰卞儚鏁版嵁", - }, - { - value: "Terra", - label: "鍦板舰鏁版嵁", - }, - { - value: "Tilt", - label: "鍊炬枩妯″瀷", - }, - { - value: "PointCloud", - label: "鐐逛簯鏁版嵁", - }, - { - value: "Geology", - label: "鍦拌川妯″瀷", - }, - { - value: "BIM", - label: "BIM妯″瀷", - }, - { - value: "manual", - label: "鎵嬪伐妯″瀷", - }, - { - value: "line", - label: "绾垮垝鍥炬暟鎹�", - }, - { - value: "Chart", - label: "鍥捐〃鏁版嵁", - }, - { - value: "File", - label: "鏂囦欢鏁版嵁", - }, - ], - value: "", - showinfoBox: false, - itemdetail: {}, - fileList: [], - headers: { "Content-Type": "multipart/form-data" }, - acceptItem: "", - showCata: false, - updateForm: { - path_id: "", - cataName: "", - version: "", - type: "", - name: "", - }, - multipleSelection: [], - tableData: [], + btnStatus: 0, count: 0, - currentPage: 1, - pageSize: 10, - pageNum: 1, - btnStatus: { - select: false, - delete: false, - upload: false, - download: false, - insert: false, - update: false, + formInline: { + monitorTime: '', + }, + catalogOption: [], + companyOption: [], + tableData: [], + listTable: [], + multipleSelection: [], + fullscreenLoading: false, + listData: { + pageIndex: 1, + pageSize: 10, + }, + pickerOptions: { + disabledDate(time) { + return time.getTime() > Date.now(); + }, + selectableRange: '00:00:00 - 23:59:59', + }, + cascader: { + label: 'name', + value: 'id', + children: 'children', + checkStrictly: true, + emitPath: false, }, }; }, + mounted() { + this.getSelectdirTab(); + this.getQueryDepTree(); + this.timeDefault(); + this.getFilePath(); + }, watch: { - "updateForm.type": { - immediate: true, - handler(val) { - switch (val) { - case "DEM": - this.acceptItem = ".tif,.img"; - break; - case "DOM": - this.acceptItem = ".tif,.img"; - break; - case "Terra": - this.acceptItem = ".mpt"; - break; - case "Tilt": - this.acceptItem = ".3dml"; - break; - case "PointCloud": - this.acceptItem = ".cpt"; - break; - case "Geology": - this.acceptItem = ".3dml"; - break; - case "BIM": - this.acceptItem = ".3dml"; - break; - case "manual": - this.acceptItem = ".Max"; - break; - case "Chart": - this.acceptItem = ".xls,.mdb"; - break; - case "line": - this.acceptItem = ".mdb"; - break; - case "File": - this.acceptItem = - ".xls,.mdb,.xls,.pdf,.dwg,.png,.jpg,.bmp,.avi,.mp4,.wmv,.mp3,.txt,.fly"; - break; + 'detailData.monitorTime': { + handler(newValue, oldValue) { + if (newValue) { + let date = new Date(); + let min = date.getMinutes(); + date.setMinutes(min + 1); //杩欓噷鍔�1鍒嗛挓锛屾槸涓轰簡瑙e喅鍊兼敼鍙樺悗锛岀郴缁熺鏁板氨杩囨湡闄愬埗浜嗭紝鏃犳硶鐐瑰嚮鈥滄鍒烩�濇寜閽紝 濡傛灉鐩戝惉 鈥滅郴缁熸椂闂粹�濈殑鏀瑰彉锛屽垯浼氬奖鍝嶆�ц兘銆� + let nowDate = moment(date).format('HH:mm:ss'); + let st = ''; + if ( + moment(date).format('yyyy-MM-DD') === + moment(newValue).format('yyyy-MM-DD') + ) { + let hh1 = moment(newValue).format('HH:mm:ss'); + if (hh1 > nowDate) { + this.detailData.monitorTime = new Date(); + } + st = nowDate; + } else { + st = '23:59:59'; + } + this.pickerOptions.selectableRange = '00:00:00 - ' + st; + this.pickerOptions = this.pickerOptions; } }, + deep: true, + immediate: true, }, }, - created() { - // this.getMetaData(10, 1); - // this.getMetaCount(""); - this.showPermsBtn(); - }, + methods: { - showPermsBtn() { - let currentPerms = this.$store.state.currentPerms; - let permsEntity = this.$store.state.permsEntity; - permsEntity - .filter((item) => item.perms == currentPerms) - .map((item) => (this.btnStatus[item.tag.substr(1)] = true)); - }, - // 璇锋眰鏁版嵁 - getMetaData(size, index) { - queryUploadData(size, index).then((res) => { - this.tableData = res.data; - }); - }, - // 璇锋眰鏁版嵁鏁伴噺 - getMetaCount(name) { - queryDataCount(name).then((res) => { - this.count = res.data; - }); - }, - // 鑾峰彇澶氶�� - handleSelectionChange(val) { - this.multipleSelection = val; - // console.log(val); - }, - // 鏄剧ず鐩綍 - showCatalog() { - this.showCata = true; - }, - // 閫夋嫨鐩綍 - selectCataName() { - this.updateForm.cataName = this.$store.state.catalogueName; - this.updateForm.path_id = this.$store.state.cataNode.id; - this.$store.commit("changeCata", ""); //娓呯┖state鐨勯潰鍖呭睉 - this.$store.commit("changeNode", ""); //娓呯┖state鐨勮妭鐐瑰璞� - this.showCata = false; - }, - closeCata() { - this.showCata = false; - }, - clearFileList() { - $("#uploading").click(); - // var val = document.getElementById("uploading").files; - // if (!val || !val.length) return; + //鏂囦欢涓婁紶 + setFileUpload() { + this.handlerLoading(true); + setTimeout(() => { + this.handlerLoading(false); + }, 2000); - // val.forEach((e) => { - // console.log(e.name); - // }); + this.getFileLength(); }, - submitUpload() { - if (this.updateForm.path_id == "" || this.updateForm.type == "") { - alert("璇烽�夋嫨鏁版嵁绫诲瀷鎴栦笂浼犵洰褰�"); - this.$refs.upload.abort(); - return false; - } else { - this.$refs.upload.submit(); - } - }, - uploadFile(item) { - var val = document.getElementById("uploading").files; - if (!val || !val.length) return; + //鏁版嵁鍒犻櫎 + setFileDelete() { + this.handlerLoading(true); - // if (val.length != 0) { - // var i = val.length; - // for (var j = 0; j < i; j++) { - // FormDatas.append("file" + j, val[j]); // 鏂囦欢瀵硅薄 - // } - // } - val.forEach((e) => { - let FormDatas = new FormData(); - FormDatas.append("file", e, e.name); // 鏂囦欢瀵� - let name = e.name; - let path_id = this.updateForm.path_id; - let version = this.updateForm.version; - let type = this.updateForm.type; - let url = `http://192.168.20.106/LFServer/Meta/Upload?path_id=${path_id}&type=${type}&version=${version}&name=${name}`; - // console.log(url); - this.$http({ - method: "post", - url, - headers: this.headers, - timeout: 30000, - data: FormDatas, - // onUploadProgress: (progressEvent) => { - // const complete = parseInt( - // ((progressEvent.loaded / progressEvent.total) * 100) | 0, - // 10 - // ); - // // 閲嶇偣浜岋細onProgress()鏂规硶闇�瑕佷互涓婃柟鎺ユ敹鐨勫舰鍙傛潵璋冪敤 - // // 杩欎釜鏂规硶鏈変竴涓弬鏁�"percent"锛岀粰浠栬繘搴﹀�� complete 鍗冲彲 - // item.onProgress({ percent: complete }); - // }, - }).then((res) => { - if (res.status == 200 && res.data.length != 0) { - this.$message({ - message: "涓婁紶鎴愬姛", - type: "success", - }); - this.getMetaData(10, 1); - this.getMetaCount(""); - } else { - alert("涓婁紶澶辫触"); - console.log(res); + + + this.multipleSelection.forEach(item => { + this.listTable = this.listTable.filter((items) => { + + if (items.name != item.name && item.id != items.id) { + return items; } + }); }); + this.listData.pageIndex= 1; + this.listData.pageSize = 10; + this.count = this.listTable.length; + this.setViewTable(); + this.getFileLength(); + this.handlerLoading(false); }, - // 鏂囦欢鍒楄〃绉婚櫎鏂囦欢鏃剁殑閽╁瓙 - handleRemove(file, fileList) { - // console.log(file, fileList); + //鏁版嵁鍏ュ簱 + setFileWare() { + this.handlerLoading(true); + setTimeout(() => { + this.handlerLoading(false); + }, 2000); + this.getFilePath(); }, - // 鏉℃暟淇敼 - handleSizeChange(val) { - this.pageSize = val; - this.getMetaData(this.pageSize, 1); - this.getMetaCount(""); + //鑾峰彇鏂囦欢涓婁紶璺緞 + getFilePath() { + for (var i = 0; i < 20; i++) { + this.listTable.push({ + id: i, + name: 'value' + i + }) + } + this.count = this.listTable.length; + this.listData.pageIndex = 1; + this.listData.pageSize = 10; + this.setViewTable(); }, - // 椤垫暟淇敼 - handleCurrentChange(val) { - this.pageNum = val; - this.getMetaData(this.pageSize, this.pageNum); - this.getMetaCount(""); + //鏄剧ず琛ㄦ牸鏁版嵁 + setViewTable() { + var index = this.listData.pageIndex - 1; + var start = index * this.listData.pageSize; + var size = (this.listData.pageSize) + (index * this.listData.pageSize); + var std = []; + for (var i = start; i < size; i++) { + if (this.listTable[i] != null) { + std.push(this.listTable[i]) + } + + } + + this.tableData = std; }, - // showDetail(index, row) { - // // console.log(index, row); - // this.showinfoBox = true; - // this.itemdetail = row; - // }, - // handleDelete(index, row) { - // // console.log(index, row); - // this.$confirm("纭畾鏄惁鍒犻櫎?", "鎻愮ず", { - // confirmButtonText: "纭畾", - // cancelButtonText: "鍙栨秷", - // type: "warning", - // }) - // .then(() => {}) - // .catch(() => {}); - // }, - // closeDetial() { - // this.showinfoBox = false; - // this.itemdetail = {}; - // }, + //鑾峰彇鏂囦欢涓婁紶鏁版嵁 + getFileLength() { + + }, + //娓呴櫎琛ㄦ牸淇℃伅 + setClearTableData() { + this.tableData = []; + this.listTable = []; + }, + //鍒嗛〉鎺у埗 + handleSizeChange(res) { + this.listData.pageIndex = 1; + this.listData.pageSize = res; + this.setViewTable(); + }, + handleCurrentChange(res) { + this.listData.pageIndex = res; + this.setViewTable(); + }, + //琛ㄦ牸閫変腑浜嬩欢 + handleSelectionChange(res) { + this.multipleSelection = res; + }, + //鏂囦欢鑾峰彇 + fileSelect() { + $("#uploadfile").click(); + }, + handleFileChange() { + var val = document.getElementById("uploadfile").files; + if (!val || !val.length) return; + var formData = new FormData(); + for (var i = 0; i < val.length; i++) { + formData.append(val[i].name, val[i]); + } + console.log(formData) + }, + //褰撳墠鏃堕棿鑾峰彇 + timeDefault() { + var date = new Date(); + var hour = date.getHours(); // 鏃� + var minutes = date.getMinutes(); // 鍒� + var seconds = date.getSeconds(); //绉� + var sign2 = ':'; + var s1 = + date.getFullYear() + + '-' + + (date.getMonth() + 1) + + '-' + + date.getDate() + + ' ' + + hour + + sign2 + + minutes + + sign2 + + seconds; + this.formInline.monitorTime = s1; + }, + + //Loading鏄鹃殣 + handlerLoading(res) { + this.fullscreenLoading = res; + }, + //鐩綍鍒囨崲 + catalogChange(value) { + this.formInline.catalog = value; + }, + //鍗曚綅鍒囨崲 + companyChange(value) { + this.formInline.company = value; + }, + + //鍗曚綅鍒楄〃鑾峰彇 + async getQueryDepTree() { + const res = await queryDepTree(); + if (res.code != 200) { + this.$message.error('鍗曚綅鍒楄〃鑾峰彇澶辫触'); + return; + } + this.formInline.company = 1; + this.companyOption = this.treeData(res.result); + }, + //鐩綍鍒楄〃鑾峰彇 + async getSelectdirTab() { + const res = await selectdirTab(); + if (res.code != 200) { + this.$message.error('鐩綍鍒楄〃鑾峰彇澶辫触'); + return; + } + this.formInline.catalog = 1; + this.catalogOption = this.treeData(res.result); + }, + //鏍戝垪琛ㄧ敓鎴� + treeData(source) { + let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 + return cloneData.filter((father) => { + // 寰幆鎵�鏈夐」 + let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁 + branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� + return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� + }); + }, }, }; </script> <style lang="less" scoped> //@import url(); 寮曞叆鍏叡css绫� .authorityManagement_box { - background: rgb(240, 242, 245); - border-radius: 10px; + width: 100%; height: 100%; - padding: 10px; + position: relative; box-sizing: border-box; - .inquire { - margin: 10px auto; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - height: 90px; - .el-form-item { - margin: 5px; - } - .el-input { - width: 307px; - } - .ml-3 { - margin-left: 10px; - } - .upload { - /deep/ .el-upload-list { - width: 79vw; - height: 27px; - margin: 0; - margin-left: 0px; - padding: 0; - list-style: none; - // background: #bfa; - position: absolute; - left: -53vw; - top: 5vh; - z-index: 10; - overflow: auto; - display: flex; - flex-wrap: wrap; - } - /deep/ .el-upload-list__item { - margin-top: 0px; - transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - font-size: 14px; - color: #606266; - line-height: 1.8; - // margin-top: 5px; - position: relative; - box-sizing: border-box; - border-radius: 4px; - width: 15%; - } - } - } - .table_box { - height: 73%; - overflow: auto; - padding: 10px; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - .el-table /deep/ .el-table__header-wrapper tr th { - background-color: rgb(255, 255, 255) !important; - color: rgb(0, 0, 0); - } - // 淇敼姣忚鏍峰紡锛� - .el-table /deep/ .el-table__row { - background-color: rgba(255, 255, 255) !important; - color: rgb(0, 0, 0); - } - .el-table /deep/ .el-table__body tr.current-row > td { - background-color: rgb(211, 211, 211) !important; - } - .el-table /deep/ .el-table__body tr:hover > td { - background-color: rgb(211, 211, 211) !important; - } - // 淇敼琛ㄦ牸姣忚杈规鐨勬牱寮忥細 - .el-table /deep/ td, - .el-table /deep/ th.is-leaf { - border-bottom: 1px solid #eee; - border-right: 1px solid #eee; - } - .el-table /deep/ .el-table__cell { - padding: 8px 0; - } - // 璁剧疆琛ㄦ牸姣忚鐨勯珮搴︼細 - .el-table /deep/ .el-table__header tr, - .el-table /deep/ .el-table__header th { - height: 50px; - } - .el-table__body tr, - .el-table__body td { - height: 50px; - padding: 0; - } - // 璁剧疆琛ㄦ牸杈规棰滆壊锛� + .updateContent { + width: 100%; + height: 670px; - .el-table--border::after, - .el-table--group::after { - width: 0; + position: relative; + .contentIquery { + width: 98%; + height: 16%; + border: 1px solid white; + padding: 1%; + border-radius: 5px; } - .el-table::before { - height: 0; + .contentTable { + width: 98%; + height: 72%; + border: 1px solid white; + padding: 1%; + border-radius: 5px; + margin-top: 1%; + /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/ + /deep/ .el-table { + background-color: transparent; + + th, + td { + background-color: transparent; + } + .el-table__expanded-cell { + background-color: transparent !important; + } + + // 琛ㄥご鑳屾櫙鑹� + th.el-table__cell { + background-color: #303030; + color: #fff; + } + tr > td { + background-color: #303030; + color: #fff; + } + + // hover鏁堟灉 + tr:hover > td { + background-color: rgba(255, 255, 255, 0.3) !important; + } + + tbody tr:hover { + background-color: rgba(255, 255, 255, 0.3) !important; + // text-align: center; + } + + // 婊氬姩鏉″楂� + .el-table__body-wrapper::-webkit-scrollbar { + width: 5px; + height: 5px; + } + + .el-table__body-wrapper::-webkit-scrollbar { + width: 5px; + /*婊氬姩鏉″搴�*/ + height: 5px; + /*婊氬姩鏉¢珮搴�*/ + } + /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/ + .el-table__body-wrapper::-webkit-scrollbar-track { + box-shadow: 0px 1px 3px #216fe6 inset; + /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/ + border-radius: 10px; + } + + /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/ + .el-table__body-wrapper::-webkit-scrollbar-thumb { + box-shadow: 0px 1px 3px #216fe6 inset; + border-radius: 6px; + background-color: #216fe6; + } + } + .pagination_box { + margin-top: 20px; + /deep/.el-input__inner { + background-color: transparent !important; + border: 1px solid; + color: white; + } + /deep/.el-pagination__total { + color: white; + } + /deep/.el-pagination__jump { + color: white; + } + /deep/.el-pager li.active { + color: #409eff; + } + /deep/.el-pager li { + color: white; + background: transparent; + } + /deep/.el-pager li { + color: white; + } + /deep/.btn-prev { + background: transparent; + } + /deep/.btn-next { + background: transparent; + } + /deep/.btn-next i { + color:white; + } + /deep/.btn-prev i { + color:white; + } + } + } + .primary { + background: #409eff; + border: #409eff; + color: white; } } - .leftTree { - position: absolute; - z-index: 10; - top: 100px; - left: 600px; - width: 400px; - height: 600px; - background: #f0f2f5; - border: 1px solid #000; - .treeBox { - height: 550px; - overflow: auto; - /deep/ .el-tree-node__content:hover { - background-color: rgb(153, 153, 153); - } - } - .btnBox { - width: 123px; - margin: 10px auto 0; - // background-color: red; - } + + /deep/.el-form-item__label { + color: white; } - .infoBox { - width: 500px; - border: 1px solid #eee; - position: absolute; - z-index: 100; - top: 15%; - right: 25%; - background-color: #fff; - .el-card { - background-color: transparent; - span { - font-size: 16px; - font-weight: 600; - } - } - .contentBox { - margin: 0 aotu 10px; - p { - // background-color: #bfa; - // margin-bottom: 10px; - font-size: 14px; - } - } + // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱 + /deep/.el-input__inner { + background-color: transparent !important ; + color: #fff; + border: 1px solid; + } + /deep/ .popper__arrow::after { + border-top-color: rgba(43, 45, 55, 0.8); + } + /deep/ .el-select .el-input__inner { + border-color: #fff !important; + } + /deep/.el-cascader .el-input__inner { + border-color: #fff !important; + } + /deep/.el-textarea__inner { + background: transparent; + border-color: #fff !important; + color: white; + } + /deep/.el-textarea .el-input__count { + background: transparent; + color: #fff !important; + } + /deep/.el-loading-spinner i { + color: #1890ff !important; } } </style> -- Gitblit v1.9.3