企业应急-事件处置-周边资源信息

yangdelong

2021-05-28 038d3b71ed121785df9476ea404dc4b12ad3ff8c

 src/components/base-page/enterprise-emergency/PipelineFile.vue

@@ -1,6 +1,6 @@
<template>
    <div class="pipeline-file map-background" v-show="pipelineFile">
        <el-row style="margin: 0 15px">
        <el-row style="margin: 5px 15px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-col :span="12">
                    <el-form-item label="管线名称">
@@ -22,11 +22,32 @@
                </el-col>
            </el-form>
        </el-row>
        <div v-for="(item,index) in folderList" :key="index">
            <div class="fold-box">
                <img :src="item.fold" alt="" @click="fileAccord(item)"/>
                <span @click="fileAccord(item)">{{ item.introduce }}</span>
            </div>
            <div v-for="(ite,ind) in item.items" :key="ind" v-show="item.fileCode" class="file">
                <!--                <el-col :span="12">-->
                <div class="file-left">
                    <img :src="ite.file" alt="" @click="codeAccord(ite)"/>
                    <span @click="codeAccord(ite)">{{ite.introduce}}</span>
                </div>
                <div class="file-right">
                    <span v-show="ite.fileCode">{{item.code}}</span>
                </div>
                <!--                </el-col>-->
                <!--                <el-col :span="12">-->
                <!--                </el-col>-->
            </div>
        </div>
    </div>
</template>

<script>
import eventBus from '../../../eventBus'
import foldPng from '../../../../public/assets/images/map/emergency/fold.png'
import filePng from '../../../../public/assets/images/map/emergency/file.png'

export default {
  name: 'PipelineFile',
@@ -36,7 +57,49 @@
      form: {
        pipeName: '',
        pipeCode: ''
      }
      },
      folderList: [
        {
          fold: foldPng,
          introduce: '生产一区',
          code: '400001',
          fileCode: false,
          items: [
            {
              file: filePng,
              introduce: '管线A',
              code: '1000001',
              fileCode: false
            },
            {
              file: filePng,
              introduce: '管线B',
              code: '2000002',
              fileCode: false
            }
          ]
        },
        {
          fold: foldPng,
          introduce: '生产二区',
          code: '400002',
          fileCode: false,
          items: [
            {
              file: filePng,
              introduce: '管线C',
              code: '3000003',
              fileCode: false
            },
            {
              file: filePng,
              introduce: '管线D',
              code: '4000004',
              fileCode: false
            }
          ]
        }
      ]
    }
  },
  mounted () {
@@ -44,17 +107,27 @@
      // console.log(obj)
      this.pipelineFile = obj
    })
  },
  methods: {
    fileAccord (item) {
      item.fileCode = !item.fileCode
    },
    codeAccord (item) {
      item.fileCode = !item.fileCode
    }
  }
}
</script>

<style lang="less" scoped>
    .pipeline-file {
        min-width: 2.94532rem;
        min-width: 1.94532rem;
        max-width: 1.94532rem;
    }

    /*/deep/ .el-input {*/
    /*    width: 65%;*/
    /*    margin: 0 auto;*/
    /*}*/
    .file {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
</style>