From 1fb57a0507970f34e9215db5ae039663c2a91183 Mon Sep 17 00:00:00 2001
From: value <z1292839451@163.com>
Date: 星期一, 27 五月 2024 14:37:58 +0800
Subject: [PATCH] 功能调整
---
src/components/do/b1-ins-order/fiberoptic-config.vue | 505 +++++++++++++++++++++++--------------------------------
1 files changed, 209 insertions(+), 296 deletions(-)
diff --git a/src/components/do/b1-ins-order/fiberoptic-config.vue b/src/components/do/b1-ins-order/fiberoptic-config.vue
index 8adeb33..bcd523b 100644
--- a/src/components/do/b1-ins-order/fiberoptic-config.vue
+++ b/src/components/do/b1-ins-order/fiberoptic-config.vue
@@ -1,299 +1,200 @@
<template>
-<div class="ins_order_config">
- <div>
- <el-row class="title">
- <el-col :span="6" style="padding-left: 20px;">鍏夌氦閰嶇疆</el-col>
- <el-col :span="18" style="text-align: right;">
- <el-button size="medium" type="primary" @click="save" :loading="saveLoad">淇� 瀛�</el-button>
- <el-button size="medium" @click="$parent.playOrder(0)">
- <span style="color: #3A7BFA;">鍙� 娑�</span>
- </el-button>
- </el-col>
- </el-row>
+ <div class="ins_order_config">
+ <div>
+ <el-row class="title">
+ <el-col :span="6" style="padding-left: 20px;">鍏夌氦閰嶇疆</el-col>
+ <el-col :span="18" style="text-align: right;">
+ <el-button size="medium" type="primary" @click="save" :loading="saveLoad">淇� 瀛�</el-button>
+ <el-button size="medium" @click="$parent.playOrder(0)">
+ <span style="color: #3A7BFA;">鍙� 娑�</span>
+ </el-button>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="center">
+ <el-row :gutter="10" style="margin-bottom: 10px;">
+ <el-col :span="9">
+ <div class="grid-content">
+ <h5>濂楅</h5>
+ <div
+ style="display: flex;align-items: center;justify-content: space-between;padding: 0 12px;box-sizing: border-box;">
+ <div class="search-item">
+ <label style="width: 70px;">鏍峰搧鍨嬪彿</label>
+ <span style="font-size: 14px;">GYTA53</span>
+ </div>
+ <el-radio-group v-model="packageInfo.radio" size="small">
+ <el-radio :label="0">鍏ㄦ</el-radio>
+ <el-radio :label="1">鎶芥</el-radio>
+ </el-radio-group>
+ </div>
+ <div class="search-item" style="margin-bottom: 8px;padding: 0 12px;box-sizing: border-box;">
+ <label style="width: 70px;">鏍峰搧缂栧彿</label>
+ <el-input v-model="packageInfo.input" placeholder="璇疯緭鍏�" size="small"></el-input>
+ </div>
+ <div
+ style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;padding: 0 12px;box-sizing: border-box;">
+ <div class="search-item" style="margin-right: 10px;">
+ <label>濂楃鏁扮洰</label>
+ <el-input v-model="packageInfo.input" placeholder="璇疯緭鍏�" size="small"></el-input>
+ </div>
+ <div class="search-item" style="margin-right: 10px;">
+ <label style="width: 70px;">鏍囧噯閲�</label>
+ <el-input v-model="packageInfo.input" placeholder="璇疯緭鍏�" size="small"></el-input>
+ </div>
+ <div class="search-item">
+ <label style="width: 70px;">妫�娴嬮噺</label>
+ <el-input v-model="packageInfo.input" placeholder="璇疯緭鍏�" size="small"></el-input>
+ </div>
+ </div>
+ <el-table ref="table0" :data="tableData" tooltip-effect="dark" style="width: 100%" height="150px"
+ size="small" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="55">
+ </el-table-column>
+ <el-table-column label="绠¤壊鏍�" show-overflow-tooltip>
+ <template slot-scope="scope">{{ scope.row.date }}</template>
+ </el-table-column>
+ <el-table-column prop="name" label="鏍囬噺" show-overflow-tooltip>
+ </el-table-column>
+ <el-table-column prop="address" label="娴嬭瘯閲�" show-overflow-tooltip>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-col>
+ <el-col :span="15">
+ <div class="grid-content">
+ <h5>妫�娴嬮」淇℃伅</h5>
+ <el-table ref="table1" :data="tableData" tooltip-effect="dark" style="width: 100%" height="274px"
+ size="small" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="55">
+ </el-table-column>
+ <el-table-column label="瀹為獙瀹�" show-overflow-tooltip>
+ <template slot-scope="scope">{{ scope.row.date }}</template>
+ </el-table-column>
+ <el-table-column prop="name" label="妫�娴嬮」鐩�" show-overflow-tooltip>
+ </el-table-column>
+ <el-table-column prop="address" label="璇曢獙鏂规硶" show-overflow-tooltip>
+ </el-table-column>
+ <el-table-column prop="address" label="鍗曚环" width="70" show-overflow-tooltip>
+ </el-table-column>
+ <el-table-column prop="address" label="鍗曚綅" width="70" show-overflow-tooltip>
+ </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-column prop="address" label="妫�娴嬭姹�" show-overflow-tooltip>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="10">
+ <el-col :span="12">
+ <div class="grid-content">
+ <h5>鍏夌氦甯�</h5>
+ <div class="btns">
+ <el-button size="small" type="primary">鐢熸垚鍏夌氦甯�</el-button>
+ <el-button size="small" type="primary">淇濆瓨鍏夌氦甯﹂」鐩�</el-button>
+ </div>
+ <div
+ style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;padding: 0 12px;box-sizing: border-box;">
+ <div class="search-item" style="width: 50%;margin-right: 16px;">
+ <label style="width: 80px;">绾ゅ甫绫诲瀷</label>
+ <el-select v-model="tape.value" placeholder="璇烽�夋嫨" size="small" style="width: 100%;">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ <div class="search-item" style="width: 50%;">
+ <label style="width: 80px;">鍙傝�冩爣鍑�</label>
+ <el-select v-model="tape.value" placeholder="璇烽�夋嫨" size="small" style="width: 100%;">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ </div>
+ <el-table ref="table2" :data="tableData" tooltip-effect="dark" style="width: 100%" height="270px"
+ size="small" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="55">
+ </el-table-column>
+ <el-table-column label="鍏夌氦甯︾紪鍙�" show-overflow-tooltip>
+ <template slot-scope="scope">{{ scope.row.date }}</template>
+ </el-table-column>
+ <el-table-column prop="name" label="鍏夌氦甯﹁鏍�" show-overflow-tooltip>
+ </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>
+ </el-col>
+ <el-col :span="12">
+ <div class="grid-content">
+ <h5>鍏夌氦</h5>
+ <div class="btns">
+ <el-button size="small" type="primary">鍏夌氦閰嶈壊</el-button>
+ <el-button size="small" type="primary">淇濆瓨鍏夌氦椤圭洰</el-button>
+ </div>
+ <div
+ style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;padding: 0 12px;box-sizing: border-box;">
+ <div class="search-item" style="width: 50%;margin-right: 16px;">
+ <label style="width: 80px;">鍏夌氦绫诲瀷</label>
+ <el-select v-model="tape.value" placeholder="璇烽�夋嫨" size="small" style="width: 100%;">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ <div class="search-item" style="width: 50%;">
+ <label style="width: 80px;">鍙傝�冩爣鍑�</label>
+ <el-select v-model="tape.value" placeholder="璇烽�夋嫨" size="small" style="width: 100%;">
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ </div>
+ <el-table ref="table3" :data="tableData" tooltip-effect="dark" style="width: 100%" height="270px"
+ size="small" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="55">
+ </el-table-column>
+ <el-table-column label="绠″鑹叉爣" show-overflow-tooltip>
+ <template slot-scope="scope">{{ scope.row.date }}</template>
+ </el-table-column>
+ <el-table-column prop="name" label="鍏夌氦鑹叉爣" show-overflow-tooltip>
+ </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>
+ </el-col>
+ </el-row>
+ </div>
</div>
- <div class="center">
- <el-row :gutter="10" style="margin-bottom: 10px;">
- <el-col :span="9">
- <div class="grid-content">
- <h4>濂楅</h4>
- <div style="display: flex;align-items: center;justify-content: space-between;padding: 0 12px;box-sizing: border-box;">
- <div class="search-item">
- <label style="width: 70px;">鏍峰搧鍨嬪彿</label>
- <span style="font-size: 14px;">GYTA53</span>
- </div>
- <el-radio-group v-model="packageInfo.radio" size="small">
- <el-radio :label="0">鍏ㄦ</el-radio>
- <el-radio :label="1">鎶芥</el-radio>
- </el-radio-group>
- </div>
- <div class="search-item" style="margin-bottom: 8px;padding: 0 12px;box-sizing: border-box;">
- <label style="width: 70px;">鏍峰搧缂栧彿</label>
- <el-input v-model="packageInfo.input" placeholder="璇疯緭鍏�" size="small"></el-input>
- </div>
- <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;padding: 0 12px;box-sizing: border-box;">
- <div class="search-item" style="margin-right: 10px;">
- <label>濂楃鏁扮洰</label>
- <el-input v-model="packageInfo.input" placeholder="璇疯緭鍏�" size="small"></el-input>
- </div>
- <div class="search-item" style="margin-right: 10px;">
- <label style="width: 70px;">鏍囧噯閲�</label>
- <el-input v-model="packageInfo.input" placeholder="璇疯緭鍏�" size="small"></el-input>
- </div>
- <div class="search-item">
- <label style="width: 70px;">妫�娴嬮噺</label>
- <el-input v-model="packageInfo.input" placeholder="璇疯緭鍏�" size="small"></el-input>
- </div>
- </div>
- <el-table
- ref="table0"
- :data="tableData"
- tooltip-effect="dark"
- style="width: 100%"
- height="150px"
- size="small"
- @selection-change="handleSelectionChange">
- <el-table-column
- type="selection"
- width="55">
- </el-table-column>
- <el-table-column
- label="绠¤壊鏍�"
- show-overflow-tooltip>
- <template slot-scope="scope">{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column
- prop="name"
- label="鏍囬噺"
- show-overflow-tooltip>
- </el-table-column>
- <el-table-column
- prop="address"
- label="娴嬭瘯閲�"
- show-overflow-tooltip>
- </el-table-column>
- </el-table>
- </div>
- </el-col>
- <el-col :span="15">
- <div class="grid-content">
- <h4>妫�娴嬮」淇℃伅</h4>
- <el-table
- ref="table1"
- :data="tableData"
- tooltip-effect="dark"
- style="width: 100%"
- height="274px"
- size="small"
- @selection-change="handleSelectionChange">
- <el-table-column
- type="selection"
- width="55">
- </el-table-column>
- <el-table-column
- label="瀹為獙瀹�"
- show-overflow-tooltip>
- <template slot-scope="scope">{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column
- prop="name"
- label="妫�娴嬮」鐩�"
- show-overflow-tooltip>
- </el-table-column>
- <el-table-column
- prop="address"
- label="璇曢獙鏂规硶"
- show-overflow-tooltip>
- </el-table-column>
- <el-table-column
- prop="address"
- label="鍗曚环"
- width="70"
- show-overflow-tooltip>
- </el-table-column>
- <el-table-column
- prop="address"
- label="鍗曚綅"
- width="70"
- show-overflow-tooltip>
- </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-column
- prop="address"
- label="妫�娴嬭姹�"
- show-overflow-tooltip>
- </el-table-column>
- </el-table>
- </div>
- </el-col>
- </el-row>
- <el-row :gutter="10">
- <el-col :span="12">
- <div class="grid-content">
- <h4>鍏夌氦甯�</h4>
- <div class="btns">
- <el-button size="small" type="primary">鐢熸垚鍏夌氦甯�</el-button>
- <el-button size="small" type="primary">淇濆瓨鍏夌氦甯﹂」鐩�</el-button>
- </div>
- <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;padding: 0 12px;box-sizing: border-box;">
- <div class="search-item" style="width: 50%;margin-right: 16px;">
- <label style="width: 80px;">绾ゅ甫绫诲瀷</label>
- <el-select v-model="tape.value" placeholder="璇烽�夋嫨" size="small" style="width: 100%;">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- <div class="search-item" style="width: 50%;">
- <label style="width: 80px;">鍙傝�冩爣鍑�</label>
- <el-select v-model="tape.value" placeholder="璇烽�夋嫨" size="small" style="width: 100%;">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- </div>
- <el-table
- ref="table2"
- :data="tableData"
- tooltip-effect="dark"
- style="width: 100%"
- height="270px"
- size="small"
- @selection-change="handleSelectionChange">
- <el-table-column
- type="selection"
- width="55">
- </el-table-column>
- <el-table-column
- label="鍏夌氦甯︾紪鍙�"
- show-overflow-tooltip>
- <template slot-scope="scope">{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column
- prop="name"
- label="鍏夌氦甯﹁鏍�"
- show-overflow-tooltip>
- </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>
- </el-col>
- <el-col :span="12">
- <div class="grid-content">
- <h4>鍏夌氦</h4>
- <div class="btns">
- <el-button size="small" type="primary">鍏夌氦閰嶈壊</el-button>
- <el-button size="small" type="primary">淇濆瓨鍏夌氦椤圭洰</el-button>
- </div>
- <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;padding: 0 12px;box-sizing: border-box;">
- <div class="search-item" style="width: 50%;margin-right: 16px;">
- <label style="width: 80px;">鍏夌氦绫诲瀷</label>
- <el-select v-model="tape.value" placeholder="璇烽�夋嫨" size="small" style="width: 100%;">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- <div class="search-item" style="width: 50%;">
- <label style="width: 80px;">鍙傝�冩爣鍑�</label>
- <el-select v-model="tape.value" placeholder="璇烽�夋嫨" size="small" style="width: 100%;">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- </div>
- <el-table
- ref="table3"
- :data="tableData"
- tooltip-effect="dark"
- style="width: 100%"
- height="270px"
- size="small"
- @selection-change="handleSelectionChange">
- <el-table-column
- type="selection"
- width="55">
- </el-table-column>
- <el-table-column
- label="绠″鑹叉爣"
- show-overflow-tooltip>
- <template slot-scope="scope">{{ scope.row.date }}</template>
- </el-table-column>
- <el-table-column
- prop="name"
- label="鍏夌氦鑹叉爣"
- show-overflow-tooltip>
- </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>
- </el-col>
- </el-row>
- </div>
-</div>
</template>
<script>
-export default {
- data(){
- return{
- saveLoad:false,
- packageInfo:{
- radio:1,
- input:''
- },
- tableData:[],
- tape:{
- value:''
- },
- options:[]
+ export default {
+ data() {
+ return {
+ saveLoad: false,
+ packageInfo: {
+ radio: 1,
+ input: ''
+ },
+ tableData: [],
+ tape: {
+ value: ''
+ },
+ options: []
+ }
+ },
+ methods: {
+ save() {},
+ handleSelectionChange(val) {}
}
- },
- methods:{
- save(){},
- handleSelectionChange(val) {}
}
-}
</script>
<style scoped>
@@ -304,19 +205,27 @@
overflow-x: hidden;
}
+ .ins_order_config::-webkit-scrollbar {
+ width: 0;
+ }
+
.title {
height: 60px;
line-height: 60px;
}
- .center{
+
+ .center {
width: 100%;
height: calc(100% - 60px);
}
- .grid-content{
+
+ .grid-content {
background: #fff;
border-radius: 4px;
+ box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
}
- .grid-content h4{
+
+ .grid-content h5 {
color: #3A7BFA;
font-weight: 400;
line-height: 32px;
@@ -324,21 +233,25 @@
box-sizing: border-box;
border-bottom: 1px solid #eee;
}
- .search-item{
+
+ .search-item {
display: flex;
align-items: center;
line-height: 36px;
}
- .search-item label{
+
+ .search-item label {
width: 90px;
font-size: 12px;
color: #606266;
/* text-align: right; */
}
- .btns{
+
+ .btns {
margin: 8px 0 8px 10px;
}
- >>>.el-table th.el-table__cell>.cell{
+
+ >>>.el-table th.el-table__cell>.cell {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
--
Gitblit v1.9.3