123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820 |
- <!-- 底图 -->
- <template>
- <div id='floor_base' v-loading='loading' ref='graphy'>
- <canvas :id='`canvas${id}`' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
- <!-- 地图底部操作按钮 -->
- <div class='strip-bottom'>
- <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
- </div>
- <room-box ref='boxRoom'></room-box>
- <el-popover ref="popover" placement="right" trigger="manual" v-model="visible" width="380">
- <!-- <div style="text-align: right;margin-bottom: 10px;">
- <span style="float: left;">对应的工程信息化信息</span>
- <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
- </div> -->
- <div v-if="equipIds.length && !tabData.pointData.length" style="margin-top: 10px;">
- <el-table :data="tabData.tableData" max-height="235" style="width: 100%" @row-click='handleClickEquipDetail' v-loading="eqLoading">
- <el-table-column prop="sbjc" label="设备简称" width="164" :show-overflow-tooltip='true'></el-table-column>
- <el-table-column prop="sl" width="50" label="数量" :show-overflow-tooltip='true'></el-table-column>
- <el-table-column prop="sb_status" width="70" label="设备状态" :show-overflow-tooltip='true'></el-table-column>
- <el-table-column prop="sbglgs" width="70" label="管理归属" :show-overflow-tooltip='true'></el-table-column>
- <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
- <el-table-column label="" width="80" :show-overflow-tooltip='true'>
- <template slot-scope="scope">
- <span class="equip-detail-btn">台账详情</span>
- </template>
- </el-table-column> -->
- </el-table>
- <!-- <div style="text-align: right; margin-top: 10px;">
- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button>
- </div> -->
- </div>
- <div v-else-if="!equipIds.length && tabData.pointData.length" style="margin-top: 10px;">
- <ul class="pointList">
- <li v-for="point in tabData.pointData" :key="point.id" @click="handleClickPointDeatil(point)">
- <span :title="point.name">{{point.name}}</span>
- <a>查看</a>
- </li>
- </ul>
- <div style="text-align: right; margin-top: 10px;">
- <el-button v-show="showBtnWell" size="mini" type="primary" @click="handleClickHightLight(tabData.pointData)">查看控制商铺范围</el-button>
- <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
- </div>
- </div>
- <el-tabs v-else-if="equipIds.length && tabData.pointData.length" v-model="activeName">
- <el-tab-pane label="设备设施" name="equip">
- <el-table :data="tabData.tableData" max-height="235" style="width: 100%" @row-click='handleClickEquipDetail' v-loading="eqLoading">
- <el-table-column prop="sbjc" label="设备简称" width="164" :show-overflow-tooltip='true'></el-table-column>
- <el-table-column prop="sl" width="50" label="数量" :show-overflow-tooltip='true' align="right"></el-table-column>
- <el-table-column prop="sb_status" width="70" label="设备状态" :show-overflow-tooltip='true'></el-table-column>
- <el-table-column prop="sbglgs" width="70" label="管理归属" :show-overflow-tooltip='true'></el-table-column>
- <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
- <el-table-column label="" width="80" :show-overflow-tooltip='true'>
- <template slot-scope="scope">
- <span class="equip-detail-btn">台账详情</span>
- </template>
- </el-table-column> -->
- </el-table>
- <div style="text-align: right; margin-top: 10px;">
- <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
- </div>
- </el-tab-pane>
- <el-tab-pane label="位置" name="point">
- <ul class="pointList">
- <li v-for="point in tabData.pointData" :key="point.id" @click="handleClickPointDeatil(point)">
- <span :title="point.name">{{point.name}}</span>
- <a>查看</a>
- </li>
- </ul>
- <div style="text-align: right; margin-top: 10px;">
- <el-button v-show="showBtnWell" size="mini" type="primary" @click="handleClickHightLight(tabData.pointData)">查看控制商铺范围</el-button>
- <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
- </div>
- </el-tab-pane>
- </el-tabs>
- </el-popover>
- <span class="popStyle" :style="popoverPosition" v-popover:popover></span>
- </div>
- </template>
- <script>
- import { SFengParser, ProjectRf } from '@saga-web/feng-map'
- import { SFloorParser, ItemOrder, ItemColor, SPolygonItem } from '@saga-web/big'
- import { FloorView } from '@/lib/FloorView'
- import { FloorScene } from '@/lib/FloorScene'
- import RoomBox from '@/views/room/index'
- import canvasFun from '@/components/floorMap/canvasFun'
- import { readGroup, queryStatis } from '@/api/public'
- import { queryShops, queryAsset } from '@/api/equipmentList.js'
- import { STopologyParser } from '@/lib/parsers/STopologyParser'
- import { mapGetters, mapActions } from 'vuex'
- import { SImageItem, SImageShowType, SGraphItem } from '@saga-web/graph/lib'
- import { SColor } from '@saga-web/draw/lib'
- import bus from '@/utils/bus.js'
- import { TipelineItem } from '../../lib/items/TipelineItem'
- import { SImageLegendItem } from '../../lib/items/SImageLegendItem'
- export default {
- data() {
- return {
- appName: '万达可视化系统',
- key: '23f30a832a862c58637a4aadbf50a566',
- mapServerURL: `http:
- canvasWidth: 600,
- canvasHeight: 800,
- loading: false,
- view: null,
- urlMsg: {},
- canvasID: 'canvas',
- floorid: '',
- topologyParser: null,
- fParser: null,
- wellMap: {},
- activeName: "equip",
- popoverPosition: {
- top: 0,
- left: 0
- },
- visible: false,
- eqLoading: true,
- equipIds: [],
- tabData: {
- tableData: [],
- pointData: []
- },
- activeItem: null,
- showBtnWell: false,
- count: 0,
- }
- },
- props: {
- id: {
- default: '1',
- type: String,
- },
- categoryId: {
- default: '',
- type: String,
- },
-
- modalHeight: {
- type: [Number, undefined],
- default: undefined,
- },
- loadName: null,
- type: null,
- },
- components: { RoomBox, canvasFun },
- computed: {
- ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
- },
- methods: {
- handleClickLegendItem(item, events) {
- this.tabData = {tableData: [], pointData: []};
- this.showBtnWell = false;
- this.visible = false;
- this.activeItem = null;
- this.isLoading = true;
- if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
- const e = events[0];
- this.equipIds = [];
- this.activeItem = item;
- item.data.AttachObjectIds.forEach(v => {
- if (v.type == "Image") {
- if(v.id) { this.equipIds.push(v.id) }
-
- } else if (v.type == "Zone") {
- this.tabData.pointData.push(v);
- }
- })
- if (this.equipIds.length) {
- this.eqLoading = true;
- let data = {
- plazaId: this.$store.state.plazaId,
- page: 1,
- size: this.equipIds.length
- }
- let postParams = {
- assetnumList: this.equipIds
- }
- queryAsset({ data, postParams }).then(res => {
- this.tabData.tableData = res.data.data;
- this.eqLoading = false;
- })
- }
- this.popoverPosition.top = `${e.clientY}px`;
- this.popoverPosition.left = `${e.clientX}px`;
- this.$nextTick(() => {
- if (
- item.data.GraphElementId == '100050' ||
- item.data.GraphElementId == '100055' ||
- item.data.GraphElementId == '100056' ||
- item.data.GraphElementId == '100057'
- ) {
- this.showBtnWell = true;
- }
- this.visible = true;
- })
- }
- },
-
- handleClickEquipDetail(row) {
- if (row.assetuid) {
- window.open(`http:
- }
- },
-
- handleClickPointDeatil(point) {
- if (point.id && this.activeItem)
- this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id });
- },
- handleClickHightLight(pointData) {
- this.clearHightLight();
- pointData.forEach(point => {
- let location = point.id ? point.id : '';
- if (this.wellMap.hasOwnProperty(location)) {
- this.wellMap[location].forEach(item => {
- item.highLightFlag = true;
- item.zOrder = 30;
- })
- } else {
- let getParams = {
- plazaId: this.plazaId,
- floor: this.floorid,
- keyword: `${location}:wellnum;`
- }
- queryShops({ getParams }).then(res => {
- let shopsnumList = []
- let shopsnumItemList = []
- if (res.data && res.data.length) {
- for (let floor in res.data[0]) {
- if (res.data[0][floor].length) {
- res.data[0][floor].forEach(v => {
- shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
- })
- }
- }
- }
- if (shopsnumList.length) {
- this.fParser.spaceList.forEach(item => {
- if (shopsnumList.findIndex(name => name == item.data.Name) != -1) {
- item.highLightFlag = true
- item.zOrder = 30
- shopsnumItemList.push(item)
- }
- })
- this.wellMap[location] = shopsnumItemList
- }
- })
- }
- });
- this.visible = false;
- },
- ...mapActions(['getfmapID']),
- init(floorid) {
- this.loading = true
- this.floorid = floorid
- this.mapSize()
- this.$refs.canvasFun.isShow = false
- setTimeout(() => {
- this.clearGraphy()
- this.scene = new FloorScene()
- if (this.haveFengMap == 1) {
- this.scene.selectContainer.connect('listChange', this, this.listChange)
- if (this.canvasID != `canvas${this.id}`) {
- this.canvasID = `canvas${this.id}`
- }
- this.parserData(floorid)
- } else if (this.haveFengMap == 0) {
- this.view.scene = this.scene
- this.readGraph()
- } else {
- this.loading = false
- }
- }, 100)
- },
- parserData(floor) {
- if (floor == 'g80') {
-
- if (window.fengmapData.frImg) {
- const pj = this.urlMsg.fmapID.split('_')[0]
-
- if (!ProjectRf[pj]) {
- let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
- imgItem.showType = SImageShowType.AutoFit
- imgItem.connect('imgLoadOver', this, () => {
- this.readGraph()
- })
- this.scene.addItem(imgItem)
- this.view.scene = this.scene
-
- } else {
-
- try {
-
- this.count = 0;
- ProjectRf[pj].forEach(t => {
- const item = new SImageItem(
- null,
- `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${t.name}`
- );
- item.width = t.width
- item.height = t.width
- item.moveTo(t.x, t.y)
- item.connect("imgLoadOver", this, () => {
- this.countRf(ProjectRf[pj].length);
- });
- this.scene.addItem(item);
- })
- this.view.scene = this.scene;
- } catch(e) {
- console.log(e);
- }
- }
- } else {
-
- this.readBaseMap(floor);
- }
- } else {
- if (window.fengmapData.gnameToGid[floor]) {
- this.readBaseMap(floor);
- } else {
- console.log('楼层不正确')
- }
- }
- },
- readBaseMap(floor){
- window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], res => {
- if (res.err) {
- console.log('errr', res.err)
- return
- }
- this.fParser = new SFloorParser(null)
- this.fParser.parseData(res)
- this.fParser.spaceList.forEach(t => {
- this.scene.addItem(t)
- t.nameSize = 12
- t.nameColor = '#2a2a2a'
- if (t.data.Name && this.bunkObj[t.data.Name]) {
- t.name = this.bunkObj[t.data.Name].brandname
- } else {
-
- t.name = ''
- }
- })
- this.fParser.wallList.forEach(t => this.scene.addItem(t))
- this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
- this.fParser.doorList.forEach(t => this.scene.addItem(t))
- this.fParser.columnList.forEach(t => this.scene.addItem(t))
- this.fParser.casementList.forEach(t => this.scene.addItem(t))
- this.view.scene = this.scene
-
- this.readGraph()
- })
- },
- readGraph() {
- this.readGroup(this.floorid)
- .then((data) => {
- if (data.Result == 'failure') {
- this.$store.commit('SETISMESSAGE', false)
- this.view.fitSceneToView()
- this.view.minScale = this.view.scale
- if (this.$refs.canvasFun) {
- this.$refs.canvasFun.everyScale = this.view.scale
- }
- this.loading = false
- return
- } else {
- if (
- data.Data[0].Elements.Nodes.length === 0 &&
- data.Data[0].Elements.Markers.length === 0 &&
- data.Data[0].Elements.Relations.length === 0
- ) {
- this.$store.commit('SETISMESSAGE', false)
- } else {
- this.$store.commit('SETISMESSAGE', true)
- }
- }
-
- if (!(data.Data && data.Data.length)) {
- this.view.fitSceneToView()
- this.view.minScale = this.view.scale
- if (this.$refs.canvasFun) {
- this.$refs.canvasFun.everyScale = this.view.scale
- }
- return false
- }
-
- if (data.Data && data.Data[0].Note) {
- let note = data.Data[0].Note
- bus.$emit('queryRemarksMethods', note)
- } else {
- bus.$emit('queryRemarksMethods', '')
- }
-
- if (this.$cookie.get('categoryId') == 'SCPZ') {
- let scpzTable = [],
- arr = []
- scpzTable = data.Data[0].Elements.Nodes || []
- console.log(scpzTable)
- if (scpzTable.length > 0) {
- scpzTable.forEach((e) => {
- if (e.Properties.ItemExplain) {
- let obj = e
- arr.push(obj)
- }
- })
- }
- console.log(arr)
- this.$store.commit('SETSCPZTABLE', arr)
- }
- if (data.Data[0].Elements.Nodes.length > 0) {
- this.$store.commit('SETTYPENUM', '')
- let Lengd = data.Data[0].Elements.Nodes
- Lengd.forEach((el) => {
- if (el.Type == 'Image' && el.Num > 1) {
- console.log(el.Num)
- this.$store.commit('SETTYPENUM', el.Num)
- }
- })
- }
-
- this.$cookie.set('graphId', data.Data[0].ID, 3)
- if (this.$cookie.get('graphId')) {
-
-
- bus.$emit('queryViewMethods')
- }
- this.topologyParser = new STopologyParser(null)
- this.topologyParser.parseData(data.Data[0].Elements)
-
- this.topologyParser.zoneLegendList.forEach((t) => {
- this.scene.addItem(t)
- t.connect("legendItemClick", t, this.handleClickLegendItem);
- })
-
- this.topologyParser.textMarkerList.forEach((t) => {
- this.scene.addItem(t)
- })
-
- this.topologyParser.imageMarkerList.forEach((t) => {
- this.scene.addItem(t)
- })
-
- this.topologyParser.lineMarkerList.forEach((t) => {
- this.scene.addItem(t)
- })
-
- this.topologyParser.imageLegendList.forEach((t) => {
- this.scene.addItem(t)
- t.connect("legendItemClick", t, this.handleClickLegendItem);
- })
-
-
- this.topologyParser.relationList.forEach((t) => {
- t.selectable = true
- this.scene.addItem(t)
- t.connect("legendItemClick", t, this.handleClickLegendItem);
- })
- this.view.fitSceneToView()
- this.view.minScale = this.view.scale
- if (this.$refs.canvasFun) {
- this.$refs.canvasFun.everyScale = this.view.scale
- }
- this.loading = false
- })
- .catch(() => {
- this.loading = false
- })
- },
-
- countRf(len) {
- this.count++
- if (len == this.count) {
- this.readGraph();
- } else {
- console.log('所有图片未加载完成');
- }
- },
- clearGraphy() {
- if (this.view) {
- this.view.scene = null
- return
- }
- this.view = new FloorView(`canvas${this.id}`)
- },
- listChange(item, ev) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- if (ev[0].length) {
- if (!(ev[0][0] instanceof SPolygonItem || ev[0][0] instanceof TipelineItem || ev[0][0] instanceof SImageLegendItem)) {
- this.visible = false;
- }
- } else {
- this.visible = false;
- }
- this.clearHightLight()
- },
-
- setHightLight(arr) {
- this.clearHightLight()
- arr.forEach((item) => {
- let location = item.data.AttachObjectIds[0] ? item.data.AttachObjectIds[0].id : ''
-
- if (
- (item.data.GraphElementId == '100050' ||
- item.data.GraphElementId == '100055' ||
- item.data.GraphElementId == '100056' ||
- item.data.GraphElementId == '100057') &&
- location
- ) {
- if (this.wellMap.hasOwnProperty(location)) {
- this.wellMap[location].forEach((item) => {
- item.highLightFlag = true
- item.zOrder = 30
- })
- } else {
- let getParams = {
- plazaId: this.plazaId,
- floor: this.floorid,
- keyword: `${location}:wellnum;`,
- }
- queryShops({ getParams }).then((res) => {
- let shopsnumList = []
- let shopsnumItemList = []
- if (res.data && res.data.length) {
- for (let floor in res.data[0]) {
- if (res.data[0][floor].length) {
- res.data[0][floor].forEach((v) => {
- shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
- })
- }
- }
- }
- if (shopsnumList.length) {
- this.fParser.spaceList.forEach((item) => {
- if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
- item.highLightFlag = true
- item.zOrder = 30
- shopsnumItemList.push(item)
- }
- })
- this.wellMap[location] = shopsnumItemList
- }
- })
- }
- }
- })
- },
-
- clearHightLight() {
- ItemColor.spaceHighColor = new SColor('#FBF2CC')
- for (let key in this.wellMap) {
- this.wellMap[key].forEach((item) => {
- item.highLightFlag = false
- item.zOrder = ItemOrder.spaceOrder
- })
- }
- },
-
- fit() {
- this.view.fitSceneToView()
- },
-
- savePng() {
-
- this.view.saveImageSize(`${this.loadName}.png`, 'png', 1920 * 2, 1080 * 2)
-
- },
-
- saveSvg() {
- this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800)
- },
-
- saveJson() {
- this.view.saveFloorJson(`${this.loadName}.json`)
- },
-
- scale(val) {
- if (!this.view) {
- return
- }
- let scale = this.view.scale
- this.view.scaleByPoint(val / scale, this.canvasWidth / 2, this.canvasHeight / 2)
- },
-
- showText(val) {
-
-
-
- this.fParser.spaceList.forEach((t) => {
- t.showBaseName = val
- })
- },
-
- readGroup(FloorID) {
- const data = {
- BuildingID: '1',
- FloorID: FloorID,
- categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
- projectId: this.urlMsg.ProjectID,
- Pub: true,
- }
- return readGroup(data)
- },
-
- mapSize() {
- this.canvasWidth = this.$refs.graphy.offsetWidth
- if (window.screen.height == '768') {
- this.canvasHeight = this.$refs.graphy.offsetHeight - 100
- } else {
- this.canvasHeight = 900
- }
-
- if (this.modalHeight) {
- this.canvasHeight = this.modalHeight
- }
- },
- getEvent() {
- bus.$on('changeShow', (res) => {
- this.topologyParser &&
- this.topologyParser.zoneLegendList.forEach((t) => {
- let id = t.data.GraphElementId
- t.maskFlag = !(res.indexOf(id) > -1)
- })
-
-
-
-
-
-
-
-
-
-
-
-
- this.topologyParser &&
- this.topologyParser.imageLegendList.forEach((t) => {
- let id = t.data.GraphElementId
- t.maskFlag = !(res.indexOf(id) > -1)
- })
- this.topologyParser &&
- this.topologyParser.relationList.forEach((t) => {
- let id = t.data.GraphElementId || t.data.GraphElementID
- t.maskFlag = !(res.indexOf(id) > -1)
- })
- })
- },
- },
- watch: {
- 'view.scale': {
- handler(n) {
- if (this.$refs.canvasFun) {
- let s = (n * 10) / this.view.minScale
- this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s
- }
- },
- },
- haveFengMap() {
- this.init(this.floorid)
- },
- },
- mounted() {
- this.mapSize()
- this.getEvent()
- },
- created() {
-
-
-
- this.urlMsg = {
- categoryId: this.$cookie.get('categoryId'),
- ProjectID: this.plazaId,
- BuildingID: '1',
- FloorID: this.$cookie.get('floorMapId') || 'f1',
- fmapID: this.fmapID,
- }
- },
- }
- </script>
- <style lang="less" scoped>
- #floor_base {
- position: relative;
- height: 100%;
- .fengMap {
- position: fixed;
- width: 100px;
- height: 100px;
- z-index: -1;
- }
- .strip-bottom {
- position: absolute;
- right: 0;
- bottom: 40px;
- width: 100%;
- }
- .popStyle {
- position: fixed;
- }
- }
- </style>
- <style lang="less">
- a:hover {
- text-decoration: none;
- }
- .el-popover {
- .el-table {
- tr {
- .equip-detail-btn {
- display: none;
- }
- }
- tr:hover {
- cursor: pointer;
- .equip-detail-btn {
- cursor: pointer;
- display: inline-block;
- color: #025BAA;
- }
- }
- }
- .pointList {
- max-height: 235px;
- overflow-y: auto;
- text-align: right;
- li {
- height: 38px;
- line-height: 38px;
- padding: 0 12px;
- cursor: pointer;
- border-bottom: 1px solid rgba(0,0,0,0.06);
- span {
- float: left;
- width: 260px;
- text-align: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- a {
- display: none;
- color: #025BAA;
- font-size: 13px;
- }
- }
- li:hover {
- background-color: #F5F6F7;
- a {
- display: inline-block;
- }
- }
- }
- .el-button--primary{
- background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
- }
- .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
- .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
- .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
- .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
- padding-left: 16px;
- }
- .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
- .el-tabs--bottom .el-tabs__item.is-top:last-child,
- .el-tabs--top .el-tabs__item.is-bottom:last-child,
- .el-tabs--top .el-tabs__item.is-top:last-child {
- padding-right: 16px;
- }
- .el-tabs__nav-wrap::after {
- height: 0;
- }
- .is-active {
- color: #025BAA !important;
- border-color: #025BAA !important;
- background: rgba(2,91,170,0.15);
- }
- .el-tabs__item {
- padding: 5px 16px;
- height: 30px;
- line-height: 20px;
- font-size: 14px;
- font-family: MicrosoftYaHei;
- color: rgba(31, 36, 41, 1);
- border: 1px solid rgba(195, 199, 203, 1);
- }
- .el-tabs__active-bar {
- background-color: transparent !important;
- }
- /deep/ .el-tabs__item:last-child {
- border-radius: 0px 4px 4px 0px;
- }
- /deep/ .el-tabs__item:nth-child(2) {
- border-radius: 4px 0px 0px 4px;
- }
- }
-
- </style>
|