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

yangdelong

2021-05-28 038d3b71ed121785df9476ea404dc4b12ad3ff8c

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

@@ -1,22 +1,120 @@
<template>
    <div class="pipeline-file map-background" v-show="pipelineFile">
        <span>管线文件选择</span>
        <el-row style="margin: 5px 15px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-col :span="12">
                    <el-form-item label="管线名称">
                        <el-input v-model="form.pipeName">
                            <el-button style="padding-right:10px;" slot="suffix" type="text">
                                <img src="../../../../public/assets/images/map/emergency/search.png" alt="">
                            </el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="管段编码">
                        <el-input v-model="form.pipeCode">
                            <el-button style="padding-right:10px;" slot="suffix" type="text">
                                <img src="../../../../public/assets/images/map/emergency/search.png" alt="">
                            </el-button>
                        </el-input>
                    </el-form-item>
                </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',
  data () {
    return {
      pipelineFile: false
      pipelineFile: false,
      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 () {
    eventBus.$on('pipelineFile-choose', (obj) => {
      // console.log(obj)
      this.pipelineFile = obj
    })
  },
  methods: {
    fileAccord (item) {
      item.fileCode = !item.fileCode
    },
    codeAccord (item) {
      item.fileCode = !item.fileCode
    }
  }
}
</script>
@@ -24,6 +122,12 @@
<style lang="less" scoped>
    .pipeline-file {
        min-width: 1.94532rem;
        max-height: 2.343213rem;
        max-width: 1.94532rem;
    }

    .file {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
</style>