GShoutai/src/views/tab1/tab1_look.vue

<!--  -->
<template>
  <div class="template">
    <div class="top">
      <div class="location">数据管理 / 项目资料 / <span>查看</span></div>
    </div>
    <div class="conten">
      <div class="search">
        <div class="txt">{{ tab0Data.name }}</div>
        <ul>
          <li
            v-for="(item, index) in topTab"
            :key="index"
            :class="{ active: topTabInd === index }"
            @click="tabCut(index)"
          >
            <a href="javascript:;">{{ item.name }}</a>
          </li>
        </ul>
      </div>
      <div class="tabAll">
        <!-- 项目详情 -->
        <div id="tab0" class="conten_box">
          <div class="title">项目详情</div>
          <div class="row">
            <div>项 目 名 称：</div>
            {{ tab0Data.name }}
          </div>
          <div class="row">
            <div>项 目 时 间：</div>
            {{ tab0Data.age ? tab0Data.age : "-" }}
          </div>
          <div class="row">
            <div>项 目 分 类：</div>
            {{ tab0Data.projectTypeName }}
          </div>
          <div class="row">
            <div>展 示 形 式：</div>
            {{ tab0Data.application }}
          </div>
          <div class="row">
            <div>应 用 技 术：</div>
            {{ tab0Data.technology }}
          </div>
          <div class="row">
            <div>保 密 级 别：</div>
            {{ tab0Data.level }}
          </div>
          <div class="row">
            <div>项目合作方:&nbsp;&nbsp;</div>
            {{ tab0Data.cooperation ? tab0Data.cooperation : "-" }}
          </div>
        </div>
        <div id="tab1" class="conten_box">
          <div class="title">项目网址</div>
          <div
            class="row"
            v-show="item.name && item.url"
            v-for="item in tab1Data"
            :key="item.id"
          >
            <div :title='item.name'>{{ item.name }}：</div>
            <a :href="item.url" target="_blank">{{ item.url }}</a>
          </div>
          <div
            class="noData"
            v-if="
              tab1Data.length === 1 &&
              tab1Data[0].name === '' &&
              tab1Data[0].url === ''
            "
          >
            暂无数据
          </div>
        </div>
        <div id="tab2" class="conten_box">
          <div class="title">三维场景</div>
          <div
            class="row"
            v-show="item.name && item.url"
            v-for="item in tab2Data"
            :key="item.id"
          >
            <div :title='item.name'>{{ item.name }}：</div>
            <a :href="item.url" target="_blank">{{ item.url }}</a>
          </div>
          <div
            class="noData"
            v-if="
              tab2Data.length === 0"
          >
            暂无数据
          </div>
        </div>
        <div id="tab3" class="conten_box">
          <div class="title">资料文档</div>
          <div class="imgBox" v-if="tab3Data.length">
            <div class="wendang" v-for="item in tab3Data" :key="item.id">
              <a :href="baseURL + item.filePath" target="_blank" download>{{
                item.name
              }}</a>
            </div>
          </div>
          <div v-else class="noData">暂无数据</div>
        </div>
        <div id="tab4" class="conten_box">
          <div class="title">文物</div>
          <div class="imgBox" v-if="tab4Data.length">
            <div v-for="item in tab4Data" :key="item.id" :title="item.name">
              <a :href="item.url" target="_blank">
                <img :src="baseURL + item.thumb" :onerror="defaultImg" alt="" />
              </a>
              <p>{{ item.name }}</p>
              <!-- 点击详细信息 -->
              <div class="details" @click="lookDetail(item.id)">详细信息</div>
            </div>
          </div>
          <div v-else class="noData">暂无数据</div>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="button_btn">
        <div @click="$router.go(-1)">返 回</div>
        <div class="edit" @click="projecEdit" v-if="userLogo">编 辑</div>
      </div>
    </div>
    <!-- 点击文详细信息的弹窗 -->
    <el-dialog title="详细信息" :visible.sync="isShow" @close="isShow = false">
      <el-form
        :model="addForm"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称：">
          <el-input
            disabled
            v-model="addForm.name"
            placeholder="请输入名称"
            style="width: 500px"
          ></el-input>
        </el-form-item>
        <el-form-item label="链接：">
          <el-input
            disabled
            style="width: 500px"
            v-model="addForm.url"
            placeholder="请输入网址链接"
          ></el-input>
        </el-form-item>
        <el-form-item label="文物类别：">
          <el-select v-model="addForm.goodsTypeId" disabled>
            <el-option
              v-for="item in antiqueArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文物图片：" class="myImgBox">
          <div class="upImgBox" v-if="imgList.length">
            <div
              class="imgdiv"
              :class="{ active: item.isIndex === 1 }"
              v-for="(item, index) in imgList"
              :key="index"
              @mouseenter="imgIconInd = index"
              @mouseleave="imgIconInd = null"
            >
              <img
                style="width: 100%; height: 100%"
                :src="baseURL + item.filePath"
                :onerror="defaultImg"
              />
              <div class="imgIcon" v-show="index === imgIconInd">
                <i class="el-icon-zoom-in" @click="lookImg(item.filePath)"></i>
                <a :href="baseURL + item.filePath" target="_blank" download
                  ><i class="el-icon-download"></i
                ></a>
              </div>
            </div>
          </div>
          <div v-else style="font-weight: 700;">暂 无</div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isShow = false">确 定</el-button>
      </div>
    </el-dialog>
        <!-- 点击查看图片 -->
    <div class="lookImg" v-if="dialogImageIshow">
      <img :src="baseURL + dialogImageUrl" alt="" :onerror="defaultImg" />
      <div class="imgBtnX" @click="dialogImageIshow = false">关 闭</div>
    </div>

  </div>
</template>

<script>
import axios from '@/utils/request'
import { getDetail, getGoodsType, getAntiqueById } from '@/apis/tab1'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'tab1Look',
  components: {},
  data () {
    // 这里存放数据
    return {
      dialogImageUrl: '',
      dialogImageIshow: false,
      imgIconInd: null,
      isShow: false,
      antiqueArr: [],
      addForm: {},
      imgList: [],
      // --------------查看详情的数据 👆————————————————————————————————
      userLogo: true, // 用户标识
      baseURL: '',
      tab0Data: {},
      tab1Data: [],
      tab2Data: [],
      tab3Data: [],
      tab4Data: [],
      myId: null, // 项目总id
      topTabInd: 0,
      topTab: [
        { name: '项目详情', id: '#tab0' },
        { name: '项目网址', id: '#tab1' },
        { name: '三维场景', id: '#tab2' },
        { name: '资料文档', id: '#tab3' },
        { name: '文物', id: '#tab4' }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 文物详情弹窗里面的查看图片
    lookImg (url) {
      this.dialogImageUrl = url
      this.dialogImageIshow = true
    },
    // 点击查看详情
    async lookDetail (id) {
      const res = await getAntiqueById(id)
      this.addForm = res.data.entity
      this.imgList = res.data.file
      this.isShow = true
      // console.log(999, res)
    },
    // 点击编辑调整编辑页面
    projecEdit () {
      this.$router.push({
        path: '/layout/tab1_edit',
        query: { id: this.myId }
      })
    },
    tabCut (index) {
      const tabAll = document.querySelector('.tabAll')
      const tab0 = document.querySelector('#tab0')
      const tab1 = document.querySelector('#tab1')
      const tab2 = document.querySelector('#tab2')
      const tab3 = document.querySelector('#tab3')
      if (index === 0 && this.topTabInd !== index) {
        tabAll.scrollTop = 0
      } else if (index === 1 && this.topTabInd !== index) {
        tabAll.scrollTop = tab0.offsetHeight + 10
      } else if (index === 2 && this.topTabInd !== index) {
        tabAll.scrollTop = tab0.offsetHeight + tab1.offsetHeight + 20
      } else if (index === 3 && this.topTabInd !== index) {
        tabAll.scrollTop =
          tab0.offsetHeight + tab1.offsetHeight + tab2.offsetHeight + 30
      } else if (index === 4 && this.topTabInd !== index) {
        tabAll.scrollTop =
          tab0.offsetHeight +
          tab1.offsetHeight +
          tab2.offsetHeight +
          tab3.offsetHeight +
          40
      }
      this.topTabInd = index
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created () {
    // 获取文物类别
    const res1 = await getGoodsType()
    this.antiqueArr = res1.data
    this.antiqueArr.unshift({ id: null, name: ' ' })

    // 获取服务器前缀地址
    this.baseURL = axios.defaults.baseURL
    // 拿到路由跳转传过来的数据
    this.myId = this.$route.query.id
    const res = await getDetail(this.myId)
    // console.log(999, res)
    this.tab0Data = res.data.entity
    this.tab0Data.technology = this.myTechnology(this.tab0Data.technology)
    this.tab0Data.application = this.myApplication(this.tab0Data.application)
    this.tab0Data.level = this.myLevel(this.tab0Data.level)
    this.tab1Data = res.data.website
    // console.log(999, this.tab1Data.length, this.tab1Data[0].name, this.tab1Data[0].url)
    this.tab2Data = res.data.scene
    this.tab3Data = res.data.doc
    this.tab4Data = res.data.goods
    // 获取用户信息
    const aaa = localStorage.getItem('SWKK_userInfo')
    // console.log(999, JSON.parse(res))
    const userData = JSON.parse(aaa)
    // 如果是普通用户---删掉场景案例
    if (userData.roleId === 2) {
      this.userLogo = false
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.template {
   .lookImg {
    padding-top: 15px;
    display: flex;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.7);
    img {
      max-width: 80vw;
      max-height: 80vh;
    }
    .imgBtnX {
      cursor: pointer;
      width: 100px;
      height: 30px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
      background-color: #fff;
      border-radius: 8px;
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .myImgBox {
    /deep/.el-form-item__content {
      display: flex;
      flex-wrap: wrap;
    }
    /deep/.el-upload-dragger {
      width: 135px;
      height: 135px;
      border: 1px solid #ccc;
    }
  }
  .upImgBox {
    display: flex;
    flex-wrap: wrap;
    .active {
      border: 2px solid #dc3545;
    }
  }
  .imgdiv {
    position: relative;
    margin: 0 10px 10px 0;
    border: 1px solid #ccc;
    width: 135px;
    height: 135px;
    & > img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .imgIcon {
      justify-content: space-around;
      align-items: center;
      display: flex;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.6);
      i {
        color: #fff;
        font-size: 24px;
        cursor: pointer;
      }
      a {
        i {
          margin-top: 10px;
        }
      }
      i:hover {
        color: #dc3545;
      }
      & > span {
        cursor: pointer;
        color: #fff;
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
      }
      & > span:hover {
        color: #dc3545;
      }
    }
  }

  .noData {
    font-weight: 700;
    margin-top: 10px;
  }
  position: relative;
  padding: 0px 30px;
  .top {
    display: flex;
    align-items: center;
    height: 58px;
    width: 100%;

    .location {
      font-size: 22px;
      color: #999;
      & > span {
        color: black;
      }
    }
  }
  .conten {
    width: 100%;
    height: 720px;
    .txt {
      font-weight: 700;
      height: 40px;
      border-bottom: 1px solid #a3a2a9;
    }
    .search {
      margin-bottom: 10px;
      position: relative;
      padding: 15px 20px 0;
      border-radius: 5px;
      box-shadow: 0px 0px 5px 0px;
      height: 110px;
      background-color: #d8dadc;
      ul {
        margin-top: 15px;
        display: flex;
        li {
          padding-bottom: 5px;
          cursor: pointer;
          margin-right: 100px;
          a {
            color: #666;
          }
        }
        li:hover {
          border-bottom: 2px solid #dc3545;
          a {
            color: black;
          }
        }
        .active {
          border-bottom: 2px solid #dc3545;
          a {
            color: black;
          }
        }
      }
    }
      #tab1{
        .row{
          width: 60%;
        }
      }
      #tab2{
        .row{
          width: 60%;
        }
      }
    .conten_box {
      padding: 15px 30px;
      background-color: #fff;
      margin-top: 10px;
      .title {
        font-weight: 700;
        padding-bottom: 8px;
        font-size: 20px;
        color: #c82333;
        border-bottom: 1px solid #ccc;
      }
      .row {
        display: flex;
        align-items: center;
        margin: 15px 0 0;
        & > div {
          font-weight: 700;
        }
        a {
          flex: 1;
          // width: 700px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          background-color: #e7e9eb;
          padding: 5px 10px;
        }
      }
      .imgBox {
        display: flex;
        flex-wrap: wrap;
        & > div {
          word-wrap: break-word;
          text-align: center;
          width: 85px;
          margin-right: 20px;
        }
        img {
          width: 68px;
          height: 75px;
          object-fit: contain;
        }
        .wendang {
          text-align: left;
          margin-top: 10px;
          width: 100%;
          a:hover {
            color: #dc3545;
          }
        }
      }
    }
    #tab4 {
      .imgBox {
        & > div {
          position: relative;
          word-wrap: break-word;
          text-align: center;
          display: block;
          width: 120px;
          height: auto;
          margin-top: 10px;
          margin-right: 20px;
          padding: 15px 0 35px 0;
          img {
            transition: all 0.3s;
          }
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        img {
          &:hover {
            transform: translate(2px, -2px);
          }
          border: 1px solid #ccc;
          box-shadow: 1px 1px 3px 0px;
          padding: 5px;
          width: 120px;
          height: 120px;
          margin-bottom: 10px;
          object-fit: contain;
        }
        .details {
          width: 100%;
          position: absolute;
          bottom: 5px;
          left: 50%;
          transform: translateX(-50%);
          cursor: pointer;
          color: #dc3545;
        }
      }
    }
    .tabAll {
      border-radius: 10px;
      max-height: 600px;
      overflow-y: auto;
    }
  }
  .button_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 100px;
    bottom: 30px;
    width: 300px;
    height: 40px;
    div {
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 40px;
      background-color: #fff;
      cursor: pointer;
    }
    .edit {
      color: #fff;
      background-color: #dc3545;
    }
  }
}
</style>