|
|
@@ -1,46 +1,51 @@
|
|
|
<template>
|
|
|
- <div class="xqgl-targetList">
|
|
|
- <!-- 目标列表 -->
|
|
|
- <div class="target-list">
|
|
|
- <div class="targetList-title"></div>
|
|
|
- <div class="target-searchArea">
|
|
|
- <el-input class="targetValue-input" v-model="targetValue" placeholder=""></el-input>
|
|
|
- <el-button class="targetSearch-button" type="primary" @click="getList">搜索</el-button>
|
|
|
- </div>
|
|
|
- <div class="targetTable-area">
|
|
|
- <el-table :data="tableData" style="width: 100%" height="330" tooltip-effect="light"
|
|
|
- @row-click="handleClick">
|
|
|
- <el-table-column v-for="(col, i) in cols" :key="i" :prop="col.prop" :label="col.label"
|
|
|
- :width="col.width" align="center" show-overflow-tooltip>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-pagination @current-change="handleCurrentChange" v-if='tableData.length > 0' prev-text="上一页"
|
|
|
- next-text="下一页" :pager-count="4" :current-page="currentPage"
|
|
|
- :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="totalCount"
|
|
|
- :pagerCount="5">
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 已选目标列表 -->
|
|
|
- <div class="clicked-targetList">
|
|
|
- <div class="clickedTargetList-title"></div>
|
|
|
- <div class="clickedTargets-table">
|
|
|
- <div class="clickedTargets-tableContent">
|
|
|
- <el-table height="240" :data="selTargetList" style="width: 100%"
|
|
|
- tooltip-effect="light" @row-click="selHandleClick">
|
|
|
- <el-table-column v-for="(col, i) in cols" :key="i" :prop="col.prop" :label="col.label"
|
|
|
- :width="col.width" align="center" show-overflow-tooltip>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div class="ClickedTarget-operateButoon">
|
|
|
- <el-button class="ClickedTarget-inputB" type="primary" @click="clickedTargetListInputBtn">导入</el-button>
|
|
|
- <!-- <el-button class="ClickedTarget-deleteB" type="primary">删除</el-button> -->
|
|
|
- <el-button class="ClickedTarget-clearB" type="primary" @click="clearClickedTarget">清空</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="xqgl-targetList">
|
|
|
+ <!-- 目标列表 -->
|
|
|
+ <div class="target-list">
|
|
|
+ <div class="targetList-title"></div>
|
|
|
+ <div class="targetBtn-area">
|
|
|
+ <el-button v-for="t in targetTypes" :key="t.type" class="targetBtn" type="primary" @click="selectTargetType(t)">
|
|
|
+ {{ t.name }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="target-searchArea">
|
|
|
+ <el-input v-model="targetValue" class="targetValue-input" placeholder=""></el-input>
|
|
|
+ <el-button class="targetSearch-button" type="primary" @click="getList">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="targetTable-area">
|
|
|
+ <el-table :data="tableData" height="330" style="width: 100%" tooltip-effect="light"
|
|
|
+ @row-click="handleClick">
|
|
|
+ <el-table-column v-for="(col, i) in cols" :key="i" :label="col.label" :prop="col.prop"
|
|
|
+ :width="col.width" align="center" show-overflow-tooltip>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination v-if='tableData.length > 0' :current-page="currentPage" :page-size="pageSize"
|
|
|
+ :pager-count="4" :pagerCount="5" :total="totalCount"
|
|
|
+ layout="total, prev, pager, next, jumper" next-text="下一页" prev-text="上一页"
|
|
|
+ @current-change="handleCurrentChange">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 已选目标列表 -->
|
|
|
+ <div class="clicked-targetList">
|
|
|
+ <div class="clickedTargetList-title"></div>
|
|
|
+ <div class="clickedTargets-table">
|
|
|
+ <div class="clickedTargets-tableContent">
|
|
|
+ <el-table :data="selTargetList" height="240" style="width: 100%"
|
|
|
+ tooltip-effect="light" @row-click="selHandleClick">
|
|
|
+ <el-table-column v-for="(col, i) in cols" :key="i" :label="col.label" :prop="col.prop"
|
|
|
+ :width="col.width" align="center" show-overflow-tooltip>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="ClickedTarget-operateButoon">
|
|
|
+ <el-button class="ClickedTarget-inputB" type="primary" @click="clickedTargetListInputBtn">导入</el-button>
|
|
|
+ <!-- <el-button class="ClickedTarget-deleteB" type="primary">删除</el-button> -->
|
|
|
+ <el-button class="ClickedTarget-clearB" type="primary" @click="clearClickedTarget">清空</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -49,264 +54,329 @@ import {postClickedTagetListData} from '@/api/xqglApi.js'
|
|
|
import {getTagetListData} from '@/api/api.js'
|
|
|
|
|
|
export default {
|
|
|
- name: "targetList",
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- selTargetList: [],
|
|
|
- cols: [
|
|
|
- {
|
|
|
- prop: 'targetName',
|
|
|
- label: '名称',
|
|
|
- width: 140,
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'countryName',
|
|
|
- label: '国别',
|
|
|
- width: 80,
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'type',
|
|
|
- label: '类型',
|
|
|
- width: 80,
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'targetLevel',
|
|
|
- label: '级别',
|
|
|
- width: 80,
|
|
|
- }
|
|
|
- ],
|
|
|
- //记录增加的已选目标的总数
|
|
|
- clickedTargetTotal: 0,
|
|
|
- //每页的数据
|
|
|
- tableData: [],
|
|
|
- //默认显示第几页
|
|
|
- currentPage: 1,
|
|
|
- //总条数
|
|
|
- totalCount: 1,
|
|
|
- //默认每页显示的条数
|
|
|
- pageSize: 2000,
|
|
|
- //目标列表中输入的内容
|
|
|
- targetValue: '',
|
|
|
- //目标列表 某行被点击后的行数据
|
|
|
- targetListRowData: [],
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState("xqgl", ['parentId']),
|
|
|
- },
|
|
|
- watch: {},
|
|
|
- methods: {
|
|
|
- ...mapMutations('xqgl', ['changeGetXqtbList']),
|
|
|
- getList() {
|
|
|
- let params = {
|
|
|
- page: this.currentPage,
|
|
|
- pageSize: this.pageSize,
|
|
|
- targetName: this.targetValue,
|
|
|
- }
|
|
|
- getTagetListData(params).then(res => {
|
|
|
- let rows = []
|
|
|
- res.resp.list.forEach((item, index) => {
|
|
|
- if (item.targetName && item.targetName.indexOf("测试点位") > -1) {
|
|
|
- this.tableData.push(item)
|
|
|
- rows.push(item)
|
|
|
- this.selTargetList.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- this.$store.dispatch("xqglClickedTargetRowForCesiumSetView", rows);
|
|
|
- // this.tableData = res.resp.list;
|
|
|
- this.totalCount = res.resp.total
|
|
|
- })
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.currentPage = val;
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- handleClick(row, column, event) {
|
|
|
- return
|
|
|
- let findTemp = this.selTargetList.find(i => i.targetId === row.targetId);
|
|
|
- if (!findTemp) {
|
|
|
- this.selTargetList.push(row);
|
|
|
- }
|
|
|
- //单击某行目标列表，用于地图转至中心视角
|
|
|
- this.$store.dispatch("xqglClickedTargetRowForCesiumSetView", row);
|
|
|
- },
|
|
|
-
|
|
|
- selHandleClick(row) {
|
|
|
- this.selTargetList = this.selTargetList.filter(i => i.targetId != row.targetId);
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- //右侧 “已选目标列表” 导入按钮
|
|
|
- clickedTargetListInputBtn() {
|
|
|
- let codeID = []
|
|
|
- let allClickedTargetList = this.selTargetList
|
|
|
- let firstStr = this.parentId + "_"
|
|
|
- let startNumber = this.clickedTargetTotal + 1
|
|
|
- this.clickedTargetTotal = this.clickedTargetTotal + allClickedTargetList.length
|
|
|
- //测试自增函数
|
|
|
- codeID = this.commonFunction.createParentID(firstStr, startNumber, this.clickedTargetTotal);
|
|
|
- let idList = []
|
|
|
- for (let i = 0; i < allClickedTargetList.length; i++) {
|
|
|
- const element = allClickedTargetList[i];
|
|
|
- let tempObj = {
|
|
|
- id: element.targetId,
|
|
|
- parentId: codeID[i],
|
|
|
- }
|
|
|
- idList.push(tempObj)
|
|
|
- }
|
|
|
- let data = JSON.stringify(idList)
|
|
|
- postClickedTagetListData(data).then(res => {
|
|
|
- if (res.resp) {
|
|
|
- //添加到左侧 需求提报 表格中
|
|
|
- this.changeGetXqtbList();
|
|
|
- }
|
|
|
- })
|
|
|
- this.clearClickedTarget();
|
|
|
-
|
|
|
- },
|
|
|
- //右侧“目标列表”,点击表格某行的绑定事件，将点击的改行数据给到下一个表格（已选目标列表）
|
|
|
- getTargetListRowFromTargetList(clickedRow) {
|
|
|
- // console.log('接到目标列表中，被点击行的数：',clickedRow);
|
|
|
- //去重操作，被点击多次的行，不新增到数组里面
|
|
|
- let findItem = this.targetListRowData.find(item => {
|
|
|
- return item.name == clickedRow.name
|
|
|
- })
|
|
|
- if (!findItem) {
|
|
|
- // console.log('新增数据在数组中已经存在：',findItem);
|
|
|
- this.targetListRowData.push(clickedRow)
|
|
|
- }
|
|
|
- },
|
|
|
- clearClickedTarget() {
|
|
|
- this.selTargetList = [];
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getList();
|
|
|
- }
|
|
|
+ name: "targetList",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ targetTypes: [{
|
|
|
+ name: '全部',
|
|
|
+ type: 'all'
|
|
|
+ }, {
|
|
|
+ name: '移动点目标',
|
|
|
+ type: '1'
|
|
|
+ }, {
|
|
|
+ name: '线目标',
|
|
|
+ type: '3'
|
|
|
+ }, {
|
|
|
+ name: '点群目标',
|
|
|
+ type: '4'
|
|
|
+ }, {
|
|
|
+ name: '点目标',
|
|
|
+ type: '0'
|
|
|
+ }, {
|
|
|
+ name: '区域目标',
|
|
|
+ type: '2'
|
|
|
+ }],
|
|
|
+ selTargetList: [],
|
|
|
+ cols: [
|
|
|
+ {
|
|
|
+ prop: 'targetName',
|
|
|
+ label: '名称',
|
|
|
+ width: 140,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'countryName',
|
|
|
+ label: '国别',
|
|
|
+ width: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'type',
|
|
|
+ label: '类型',
|
|
|
+ width: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'targetLevel',
|
|
|
+ label: '级别',
|
|
|
+ width: 80,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //记录增加的已选目标的总数
|
|
|
+ clickedTargetTotal: 0,
|
|
|
+ //每页的数据
|
|
|
+ tableData: [],
|
|
|
+ //默认显示第几页
|
|
|
+ currentPage: 1,
|
|
|
+ //总条数
|
|
|
+ totalCount: 1,
|
|
|
+ //默认每页显示的条数
|
|
|
+ pageSize: 2000,
|
|
|
+ //目标列表中输入的内容
|
|
|
+ targetValue: '',
|
|
|
+ //目标列表 某行被点击后的行数据
|
|
|
+ targetListRowData: [],
|
|
|
+ selectT: 'all'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState("xqgl", ['parentId']),
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('xqgl', ['changeGetXqtbList']),
|
|
|
+ getList() {
|
|
|
+ let params = {
|
|
|
+ page: this.currentPage,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ targetName: this.targetValue,
|
|
|
+ type: this.selectT == 'all' ? null : this.selectT,
|
|
|
+ }
|
|
|
+ getTagetListData(params).then(res => {
|
|
|
+ let rows = []
|
|
|
+ res.resp.list.forEach((item, index) => {
|
|
|
+ if (item.targetName && item.targetName.indexOf("测试点位") > -1) {
|
|
|
+ this.tableData.push(item)
|
|
|
+ rows.push(item)
|
|
|
+ this.selTargetList.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$store.dispatch("xqglClickedTargetRowForCesiumSetView", rows);
|
|
|
+ // this.tableData = res.resp.list;
|
|
|
+ this.totalCount = res.resp.total
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectTargetType(t){
|
|
|
+ this.selectT = t.type
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleClick(row, column, event) {
|
|
|
+ return
|
|
|
+ let findTemp = this.selTargetList.find(i => i.targetId === row.targetId);
|
|
|
+ if (!findTemp) {
|
|
|
+ this.selTargetList.push(row);
|
|
|
+ }
|
|
|
+ //单击某行目标列表，用于地图转至中心视角
|
|
|
+ this.$store.dispatch("xqglClickedTargetRowForCesiumSetView", row);
|
|
|
+ },
|
|
|
+
|
|
|
+ selHandleClick(row) {
|
|
|
+ this.selTargetList = this.selTargetList.filter(i => i.targetId != row.targetId);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //右侧 “已选目标列表” 导入按钮
|
|
|
+ clickedTargetListInputBtn() {
|
|
|
+ let codeID = []
|
|
|
+ let allClickedTargetList = this.selTargetList
|
|
|
+ let firstStr = this.parentId + "_"
|
|
|
+ let startNumber = this.clickedTargetTotal + 1
|
|
|
+ this.clickedTargetTotal = this.clickedTargetTotal + allClickedTargetList.length
|
|
|
+ //测试自增函数
|
|
|
+ codeID = this.commonFunction.createParentID(firstStr, startNumber, this.clickedTargetTotal);
|
|
|
+ let idList = []
|
|
|
+ for (let i = 0; i < allClickedTargetList.length; i++) {
|
|
|
+ const element = allClickedTargetList[i];
|
|
|
+ let tempObj = {
|
|
|
+ id: element.targetId,
|
|
|
+ parentId: codeID[i],
|
|
|
+ }
|
|
|
+ idList.push(tempObj)
|
|
|
+ }
|
|
|
+ let data = JSON.stringify(idList)
|
|
|
+ postClickedTagetListData(data).then(res => {
|
|
|
+ if (res.resp) {
|
|
|
+ //添加到左侧 需求提报 表格中
|
|
|
+ this.changeGetXqtbList();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.clearClickedTarget();
|
|
|
+
|
|
|
+ },
|
|
|
+ //右侧“目标列表”,点击表格某行的绑定事件，将点击的改行数据给到下一个表格（已选目标列表）
|
|
|
+ getTargetListRowFromTargetList(clickedRow) {
|
|
|
+ // console.log('接到目标列表中，被点击行的数：',clickedRow);
|
|
|
+ //去重操作，被点击多次的行，不新增到数组里面
|
|
|
+ let findItem = this.targetListRowData.find(item => {
|
|
|
+ return item.name == clickedRow.name
|
|
|
+ })
|
|
|
+ if (!findItem) {
|
|
|
+ // console.log('新增数据在数组中已经存在：',findItem);
|
|
|
+ this.targetListRowData.push(clickedRow)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearClickedTarget() {
|
|
|
+ this.selTargetList = [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
.xqgl-targetList {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .target-list {
|
|
|
- width: 400px;
|
|
|
- height: 55%;
|
|
|
- background: url('@/assets/ClipImage/dikuang/mubiaoliebiao.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
- left: 40px;
|
|
|
-
|
|
|
- .targetList-title {
|
|
|
- width: 400px;
|
|
|
- height: 38px;
|
|
|
- position: absolute;
|
|
|
- top: -44px;
|
|
|
- background: url('@/assets/ClipImage/biaoti/mubiaoliebiao.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .target-searchArea {
|
|
|
- width: 400px;
|
|
|
- height: 60px;
|
|
|
- padding: 15px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- /deep/ .targetValue-input {
|
|
|
- width: 308px;
|
|
|
- height: 30px;
|
|
|
- background-color: rgba(160, 160, 160, 0.3);
|
|
|
- border-radius: 15px;
|
|
|
- border: solid 1px #0095ff;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .el-input__inner {
|
|
|
- padding: 0 10px;
|
|
|
- height: 30px;
|
|
|
- border: none;
|
|
|
- background-color: transparent;
|
|
|
- font-family: SourceHanSansCN-Regular;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .targetSearch-button {
|
|
|
- width: 60px;
|
|
|
- height: 30px;
|
|
|
- // background-color: #0095ff;
|
|
|
- padding: 0;
|
|
|
- border-radius: 6px;
|
|
|
- font-family: SourceHanSansCN-Regular;
|
|
|
- font-size: 14px;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .targetTable-area {
|
|
|
- width: 380px;
|
|
|
- height: calc(100% - 60px);
|
|
|
- margin: 0 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .clicked-targetList {
|
|
|
- width: 400px;
|
|
|
- height: calc(45% - 10px);
|
|
|
- position: relative;
|
|
|
- left: 40px;
|
|
|
-
|
|
|
- .clickedTargetList-title {
|
|
|
- width: 100%;
|
|
|
- height: 38px;
|
|
|
- margin: 10px 0 6px 0;
|
|
|
- background: url('@/assets/ClipImage/biaoti/yixuanmubiao.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .clickedTargets-table {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 46px);
|
|
|
- background: url('@/assets/ClipImage/dikuang/yixuanmubiao.png');
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- ::v-deep .el-table__row {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .clickedTargets-tableContent {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 40px);
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 12px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .ClickedTarget-operateButoon {
|
|
|
- width: 400px;
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-end;
|
|
|
- padding: 5px 0;
|
|
|
-
|
|
|
- .ClickedTarget-inputB,
|
|
|
- .ClickedTarget-deleteB,
|
|
|
- .ClickedTarget-clearB {
|
|
|
- width: 60px;
|
|
|
- height: 30px;
|
|
|
- padding: 0;
|
|
|
- font-family: 'SourceHanSansCN-Regular';
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .target-list {
|
|
|
+ width: 400px;
|
|
|
+ height: 55%;
|
|
|
+ background: url('@/assets/ClipImage/dikuang/mubiaoliebiao.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ left: 40px;
|
|
|
+
|
|
|
+ .targetList-title {
|
|
|
+ width: 400px;
|
|
|
+ height: 38px;
|
|
|
+ position: absolute;
|
|
|
+ top: -44px;
|
|
|
+ background: url('@/assets/ClipImage/biaoti/mubiaoliebiao.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-searchArea {
|
|
|
+ width: 400px;
|
|
|
+ height: 60px;
|
|
|
+ padding: 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ /deep/ .targetValue-input {
|
|
|
+ width: 308px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: rgba(160, 160, 160, 0.3);
|
|
|
+ border-radius: 15px;
|
|
|
+ border: solid 1px #0095ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 30px;
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ font-family: SourceHanSansCN-Regular;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .targetSearch-button {
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
+ // background-color: #0095ff;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-family: SourceHanSansCN-Regular;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .targetTable-area {
|
|
|
+ width: 380px;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .targetBtn-area {
|
|
|
+ width: 80px;
|
|
|
+ height: 162px;
|
|
|
+ position: absolute;
|
|
|
+ left: -88px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ /deep/ .targetBtn {
|
|
|
+ width: 80px;
|
|
|
+ height: 40px;
|
|
|
+ border: none;
|
|
|
+ margin: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ font-family: 'SourceHanSansCN-Bold';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ background: url('@/assets/ClipImage/anniu/guangxue_link.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .targetBtn:hover {
|
|
|
+ background: url('@/assets/ClipImage/anniu/guangxue_hover.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .targetBtn:focus {
|
|
|
+ background: url('@/assets/ClipImage/anniu/guangxue_focus.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .clicked-targetList {
|
|
|
+ width: 400px;
|
|
|
+ height: calc(45% - 10px);
|
|
|
+ position: relative;
|
|
|
+ left: 40px;
|
|
|
+
|
|
|
+ .clickedTargetList-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 38px;
|
|
|
+ margin: 10px 0 6px 0;
|
|
|
+ background: url('@/assets/ClipImage/biaoti/yixuanmubiao.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clickedTargets-table {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 46px);
|
|
|
+ background: url('@/assets/ClipImage/dikuang/yixuanmubiao.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ ::v-deep .el-table__row {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .clickedTargets-tableContent {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 12px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ClickedTarget-operateButoon {
|
|
|
+ width: 400px;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ padding: 5px 0;
|
|
|
+
|
|
|
+ .ClickedTarget-inputB,
|
|
|
+ .ClickedTarget-deleteB,
|
|
|
+ .ClickedTarget-clearB {
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
+ padding: 0;
|
|
|
+ font-family: 'SourceHanSansCN-Regular';
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//分页样式更改
|
|
|
@@ -315,68 +385,68 @@ export default {
|
|
|
/deep/ .el-pagination__total,
|
|
|
/deep/ .btn-prev,
|
|
|
/deep/ .btn-next {
|
|
|
- margin: 0;
|
|
|
- font-family: SourceHanSansCN-Regular;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- height: 20px;
|
|
|
+ margin: 0;
|
|
|
+ font-family: SourceHanSansCN-Regular;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ height: 20px;
|
|
|
}
|
|
|
|
|
|
/deep/ li .number,
|
|
|
/deep/ .btn-prev,
|
|
|
/deep/ .btn-next,
|
|
|
/deep/ .el-pager li {
|
|
|
- background-color: transparent !important;
|
|
|
- margin: 0;
|
|
|
- padding: 0 4px;
|
|
|
+ background-color: transparent !important;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0 4px;
|
|
|
}
|
|
|
|
|
|
/deep/ [data-v-cd16b7b0] [data-v-cd16b7b0] .el-pager li {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-pager li {
|
|
|
- min-width: 20px;
|
|
|
- padding: 0 1px;
|
|
|
+ min-width: 20px;
|
|
|
+ padding: 0 1px;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-pager .more::before {
|
|
|
- color: #fff;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-pager {
|
|
|
- width: 150px;
|
|
|
- text-align: center;
|
|
|
+ width: 150px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-pagination__editor.el-input .el-input__inner,
|
|
|
/deep/ .is-in-pagination {
|
|
|
- width: 24px !important;
|
|
|
- height: 18px !important;
|
|
|
+ width: 24px !important;
|
|
|
+ height: 18px !important;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-pagination__editor {
|
|
|
- padding: 0;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-icon-more {
|
|
|
- width: 20px !important;
|
|
|
- height: 20px !important;
|
|
|
+ width: 20px !important;
|
|
|
+ height: 20px !important;
|
|
|
}
|
|
|
|
|
|
/deep/ .number,
|
|
|
/deep/ .active {
|
|
|
- width: 20px !important;
|
|
|
+ width: 20px !important;
|
|
|
}
|
|
|
|
|
|
/deep/ .is-in-pagination {
|
|
|
- width: 24px !important;
|
|
|
- height: 18px !important;
|
|
|
+ width: 24px !important;
|
|
|
+ height: 18px !important;
|
|
|
}
|
|
|
|
|
|
/deep/ .btn-next,
|
|
|
/deep/ .btn-prev {
|
|
|
- padding: 0 2px;
|
|
|
+ padding: 0 2px;
|
|
|
}
|
|
|
</style>
|
otmself