123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505 |
- <template>
- <!-- 设备设施 -->
- <div id='equipment'>
- <!-- 顶部八个子系统导航 -->
- <div class='eq-top'>
- <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
- <img :src='item.id==systemId?item.icon1:item.icon' />
- {{item.name}}
- </span>
- </div>
- <div class='eq-bottom'>
- <!-- 左侧选择,系统原理图等,点击进入弹窗 -->
- <div class='eq-left'>
- <ul v-for='(eve,index) in everySystem' :key='"o"+index'>
- <li class='li-style' :class='{"is-active": eve.id}' @click='dialogVisible(eve)'>
- <span class='circle'></span>
- <span class='hanzi'>{{eve.label}}</span>
- </li>
- </ul>
- </div>
- <!-- 右侧楼层图主体 -->
- <div class='eq-right'>
- <div class='eq-right-bottom'>
- <div class='title-box'>
- <div class='eq-title'>
- <span class='span1'>{{floorInfo.code}}</span>
- </div>
- </div>
- <div class='eq-content'>
- <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
- <div class='legend-boxs'>
- <Legend
- :key='keyLd'
- :systemName='systemName'
- :floors='floorsArr'
- type='1'
- :editTips='`编辑${floorInfo.code}层${systemName}平面图`'
- ></Legend>
- <!-- 楼层切换组件 -->
- <floor-list :key='keyFL' v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
- <div class='additional-box' ref="additionalBox" v-if='fqPic.length>0'>
- <div class='additional2' @click='additionalColl' v-if='showView===3'>
- <img src='../../assets/imgs/bg2.png' alt />
- </div>
- <div class='additional' @click='additionalColl' v-else>
- <img src='../../assets/imgs/bg.png' alt />
- </div>
- <el-collapse-transition>
- <div v-show='showView===3' class='add-img-container' ref="addImgContainer" :style="`bottom: ${bottomOffset}px;`">
- <div class='add-img' ref="addImg">
- <img :src='fqPic[0].url' alt />
- </div>
- </div>
- </el-collapse-transition>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 使用 v-if解决弹窗未展示时,会调用接口的问题 -->
- <eq-dialog v-if='ShowDialog' ref='dialog' :systemName='systemName' :smsxt='smsxt' @emitCount='emitCount' @closeModal='closeModal'></eq-dialog>
- </div>
- </template>
- <script>
- import floorList from '@/components/floorList.vue'
- import floorMap from '@/components/floorMap/index.vue'
- import eqDialog from './eqDialog'
- import editList from '@/components/edit.vue'
- import { system } from '@/utils/plugins/components.js'
- import { queryPic,getPvUv } from '@/api/public.js'
- import { mapGetters } from 'vuex'
- import store from '../../store'
- export default {
- data() {
- return {
- system,
- everySystem: [],
- systemId: 1,
- categoryId: 'GDXT',
- systemName: '供电系统',
- floorInfo: {
- gname: 'f1',
- code: 'F1'
- },
- smsxt: '1001',
- dialogInfo: {},
- brand: [], //品牌
- manufacturer: [],
- fqPic: [],
- loadName: '',
- type: '',
- objCount: [],
- bottomOffset: 0,
- keyFL: 'keyFL' + new Date().getTime(),
- keyLd: 'keyLd_' + new Date().getTime(),
- ShowDialog: false //是否显示弹窗
- }
- },
- components: { floorList, eqDialog, floorMap, editList },
- watch: {
- // 监听currentFloor变化,重新渲染楼层组件,解决 数据与视图不照应的问题
- /* '$store.state.currentFloor': {
- handler(newV, oldV) {
- if (newV.seq !== oldV.seq) {
- // TODO: keyFL更新
- this.keyFL = 'keyFL' + new Date().getTime()
- }
- }
- } */
- },
- methods: {
- // 查询tab页
- tabSyatem(item) {
- this.systemId = item.id
- this.everySystem = item.children
- this.systemName = item.name
- this.smsxt = item.smsxt
- this.$cookie.set('categoryId', item.categoryId, 3)
- store.commit('SETCATEGORYID', item.categoryId)
- this.$refs.floorMap.init(this.floorInfo.gname)
- this.querySmsxt()
- this.viewLengend();
- // 发送pvUv
- let data = {
- type: "equipmentRouter",
- target: item.name,
- parameter: item.categoryId
- };
- getPvUv(data)
- .then(res => {
- console.log("pvuv", res);
- })
- .catch(res => {
- console.log("error", res);
- });
- },
- querySmsxt() {
- // 目前消防和弱电下面有特殊的数据表格
- if (this.smsxt == '1003' || this.smsxt == '1004') {
- this.queryTable(this.smsxt)
- }
- },
- //判断有没有原理图,如果没有则不出现系统原理图列表li
- emitCount(objCount) {
- this.objCount = objCount
- },
- emitFloor(item) {
- this.floorInfo = item
- this.$refs.floorMap.init(this.floorInfo.gname)
- this.init()
- this.querySmsxt()
- },
- dialogVisible(eve) {
- // console.log('dialogVisible')
- console.log(eve)
- // 点击后显示弹窗组件
- if (eve.label != '查看图纸') {
- this.ShowDialog = true
- this.$nextTick(() => {
- this.$refs.dialog.showModal(eve)
- })
- // pvuv接口记录
- let data = {
- type: "modal",
- target: eve.id,
- parameter: eve.label
- };
- getPvUv(data)
- .then(res => {
- console.log("pvuv", res);
- })
- .catch(res => {
- console.log("error", res);
- });
- }
- },
- /**
- * 关闭弹窗后,重新渲染 楼层组件
- * 在父组件(本组件)内将 ShowDialog 置为false
- * @param {Boolean} flag 弹窗组件传回的标志: 一直传回 true
- */
- closeModal(flag) {
- this.ShowDialog = false
- this.keyFL = 'keyFL' + new Date().getTime()
- this.keyLd = 'keyLd' + new Date().getTime()
- },
- //附加数据图片查看 showView为3展示状态
- additionalColl() {
- if (this.showView != 3) {
- this.$store.commit('SETSHOWVIEW', 3)
- this.$nextTick(() => {
- let p = this.$refs.additionalBox.offsetTop;
- let d = this.$refs.addImgContainer.offsetHeight;
- let bottomOffset = p + 44 - d;
- if (bottomOffset >= 0) {
- this.bottomOffset = 0;
- } else {
- this.bottomOffset = bottomOffset;
- }
- })
- } else {
- this.$store.commit('SETSHOWVIEW', 0)
- }
- },
- // 查询附加数据图片
- queryTable(system) {
- this.fqPic = []
- let picFloor = this.$cookie.get('floorMapId')
- let getParams = {
- module: '1003',
- floor: picFloor,
- system: system,
- plazaId: this.plazaId
- }
- queryPic({ getParams }).then(res => {
- // console.log('附加数据', res)
- this.fqPic = res.data
- })
- },
- init() {
- this.loadName = `设备设施-${this.systemName}-${this.floorInfo.code}`
- },
- // 从设备设施进入的机房
- queryType(val) {
- this.type = val
- },
- viewLengend() {
- if (this.legendTable.length > 0) {
- this.$store.commit('SETSHOWVIEW', 1)
- } else {
- this.$store.commit('SETSHOWVIEW', 0)
- }
- },
- smsxtQuery() {
- if (this.smsxt == '1001') {
- this.$cookie.set('categoryId', 'GDXT')
- } else if (this.smsxt == '1002') {
- this.$cookie.set('categoryId', 'NTXT')
- } else if (this.smsxt == '1003') {
- this.$cookie.set('categoryId', 'XFXT')
- } else if (this.smsxt == '1004') {
- this.$cookie.set('categoryId', 'RDXT')
- } else if (this.smsxt == '1005') {
- this.$cookie.set('categoryId', 'JPSXT')
- } else if (this.smsxt == '1006') {
- this.$cookie.set('categoryId', 'DTXT')
- } else if (this.smsxt == '1007') {
- this.$cookie.set('categoryId', 'RQYL')
- } else {
- this.$cookie.set('categoryId', 'SCPZ')
- }
- }
- },
- /* mounted() {
- if (this.$route.query.smsxt) {
- this.smsxt = this.$route.query.smsxt
- this.system.forEach(el => {
- if (el.smsxt == this.smsxt) {
- this.everySystem = el.children
- this.systemName = el.name
- this.systemId = el.id
- }
- })``
- }
- this.everySystem = this.system[0].children
- this.init()
- this.$refs.floorMap.init(this.floorInfo.gname)
- }, */
- mounted() {
- window._vm = this
- if (this.$route.query.smsxt) {
- console.log(this.$route.query.smsxt)
- this.smsxt = this.$route.query.smsxt
- this.smsxtQuery()
- this.system.forEach(el => {
- if (el.smsxt == this.smsxt) {
- this.everySystem = el.children
- this.systemName = el.name
- this.systemId = el.id
- }
- })
- }
- this.everySystem = this.system[0].children
- // 刷新时,store中有categoryId时,选中子系统状态
- if (this.$store.state.categoryId) {
- let item = this.system.filter(item => item.categoryId === this.$store.state.categoryId)[0]
- this.systemId = item.id
- this.everySystem = item.children
- this.systemName = item.name
- this.smsxt = item.smsxt
- // this.$refs.floorMap.init(this.floorInfo.gname)
- this.querySmsxt()
- this.viewLengend()
- }
- this.init()
- console.log(this.floorInfo.gname)
- this.$refs.floorMap.init(this.floorInfo.gname)
- },
- computed: {
- ...mapGetters(['floorsArr', 'plazaId', 'showView', 'legendTable'])
- }
- }
- </script>
- <style lang="less" scoped>
- #equipment {
- background: rgba(242, 245, 247, 1);
- display: flex;
- flex: 1;
- overflow: hidden;
- color: #1f2429;
- .eq-top {
- // margin-left: 260px;
- width: 100%;
- padding-top: 24px;
- position: fixed;
- z-index: 3;
- display: flex;
- justify-content: center;
- .eq-system {
- padding: 12px 20px;
- background: #fff;
- font-size: 16px;
- cursor: pointer;
- img {
- width: 16px;
- height: 16px;
- margin-right: 4px;
- margin-bottom: 3px;
- }
- }
- .isActive {
- color: #025baa;
- font-weight: bolder;
- background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
- }
- }
- .eq-bottom {
- display: flex;
- flex: 1;
- .eq-left {
- position: fixed;
- z-index: 2;
- width: 260px;
- padding-top: 100px;
- color: #646c73;
- font-size: 14px;
- height: 100%;
- background: rgba(242, 245, 247, 1);
- }
- .li-style {
- margin-left: 28px;
- cursor: pointer;
- .circle {
- width: 6px;
- height: 6px;
- background: linear-gradient(180deg, rgba(54, 156, 247, 0.6) 0%, rgba(2, 91, 170, 0.6) 100%);
- border-radius: 50%;
- display: inline-block;
- margin-right: 10px;
- }
- .hanzi {
- padding: 10px 0 10px 6px;
- width: 200px;
- display: inline-block;
- &:hover {
- color: rgba(2, 91, 170, 1);
- background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
- }
- }
- }
- .eq-right {
- flex: 1;
- .eq-right-bottom {
- display: flex;
- flex: 1;
- height: 100%;
- .title-box {
- position: fixed;
- z-index: 2;
- top: 146px;
- left: 260px;
- display: flex;
- img {
- margin-top: -5px;
- }
- .eq-title {
- width: 140px;
- height: 32px;
- background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
- box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
- color: #025baa;
- font-size: 16px;
- &::before {
- width: 2px;
- height: 16px;
- background: rgba(2, 91, 170, 1);
- display: inline-block;
- content: '';
- margin-right: 10px;
- margin-top: 8px;
- }
- .span1 {
- position: absolute;
- top: 3px;
- }
- }
- }
- .eq-content {
- flex: 1;
- .legend-boxs {
- position: fixed;
- z-index: 9;
- right: 32px;
- top: 142px;
- }
- .additional-box {
- position: relative;
- margin-top: 8px;
- .additional,
- .additional2 {
- width: 44px;
- height: 44px;
- border-radius: 2px;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- img {
- width: 20px;
- height: 20px;
- }
- }
- .additional {
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
- }
- .additional2 {
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
- }
- .add-img-container {
- width: 560px;
- max-height: 768px;
- overflow-y: auto;
- background: #ffffff;
- -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- border-radius: 2px;
- border: 1px solid #e4e5e7;
- position: absolute;
- right: 48px;
- bottom: 0;
- padding: 20px;
- &::-webkit-scrollbar {
- display: none;
- }
- .add-img {
- width: 100%;
- height: 100%;
- overflow: hidden;
- img {
- width: 100%;
- display: block;
- margin: 0 auto;
- }
- }
- }
- }
- }
- }
- }
- }
- }
- @media screen and (max-width: 1600px) {
- /*当屏幕尺寸小于1366px时,应用下面的CSS样式*/
- .eq-top {
- margin-left: 0 !important;
- }
- #equipment .eq-bottom .eq-right .eq-right-bottom .eq-content .additional-box .add-img-container {
- max-height: 546px;
- }
- }
- </style>
- <style lang="less">
- .el-table {
- th {
- background: rgba(248, 249, 250, 1);
- font-size: 12px;
- padding: 8px 0;
- color: #646a73;
- }
- td {
- font-size: 14px;
- color: #1f2429;
- padding: 8px 0;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- </style>
|