代码更新

surprise

2024-05-09 e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf

 src/views/Thematic/index.vue

@@ -1,393 +1,156 @@
<template>
  <div class="themaic">
    <el-card style="height: 100%">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="th_title">{{ $t('themaic.name') }}</div>
        </el-col>
        <el-col :span="4" :offset="14">
          <el-input
            size="small"
            :placeholder="$t('common.pleaseInput')"
            suffix-icon="el-icon-search"
            v-model="input3"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="5">
          <label style="margin-right: 10px"
            >{{ $t('themaic.maptltle') }}:</label
          >
          <el-select
            v-model="selvalue"
            class="m-2"
            placeholder="Select"
            style="width: 150px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            <label style="margin-right: 10px"
              >{{ $t('themaic.sortbytime') }}:</label
            >
    <mapsdk></mapsdk>
    <top class="title"
         ref="title"></top>
    <left class="mapleft"
          :style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
          ref="mapleft"></left>

            <i
              @click="changetime(1)"
              :class="{ active: timeindex == 1 }"
              class="el-icon-caret-bottom"
            ></i>
    <project-tree class="project-tree"
                  v-show="ProjectreeDisplay"></project-tree>

            <i
              @click="changetime(2)"
              :class="{ active: timeindex == 2 }"
              class="el-icon-caret-top"
            ></i>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            <label style="margin-right: 10px"
              >{{ $t('themaic.sortbyviews') }}:</label
            >

            <i
              @click="changeChecked(1)"
              :class="{ active: checkindex == 1 }"
              class="el-icon-caret-bottom"
            ></i>

            <i
              @click="changeChecked(2)"
              :class="{ active: checkindex == 2 }"
              class="el-icon-caret-top"
            ></i>
          </div>
        </el-col>
        <el-col :span="10"> </el-col>
        <el-col :span="3">
          <div style="margin-top: 5px">
            {{ $t('themaic.find') }}
            <label style="magin: 0% 15px">{{ listcount }}</label>
            {{ $t('themaic.record') }}
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <el-card shadow="never" class="themic_middle_card">
        <div
          @click="showThematic(item)"
          v-for="(item, i) in middleList"
          class="midedle_div"
          :key="i"
        >
          <el-card class="middle_card">
            <!-- <div>



           </div> -->

            <table>
              <tr>
                <td>
                  <div class="t1">{{ item.name }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div
                    class="middle_image"
                    :style="{
                      background: 'url(' + item.url + ') no-repeat center',
                      'background-size': '100% 100%',
                    }"
                  ></div>
                </td>
              </tr>
              <tr>
                <td>
                  <div style="position: absolute; bottom: 2%; right: 4%">
                    <label class="t2">{{ item.time }}</label
                    ><label class="t2">浏览{{ item.count }}次</label>
                  </div>
                </td>
              </tr>
            </table>
          </el-card>
        </div>
      </el-card>
      <el-pagination
        layout="prev, pager, next, jumper"
        :total="pagesize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      class="themaic_dialog"
      :modal-append-to-body="true"
      :append-to-body="true"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="99%"
      :before-close="handleClose"
    >
      <map-View @close="close" :typeIndex="typeIndex"></map-View>
    </el-dialog>
    <right class="mapright"
           :style="{ width: rightWidth }"
           ref="mapright"></right>
    <bottom class="mapbottom"
            ref="mapbottom"></bottom>
  </div>
</template>

<script>
import mapView from '@/components/mapviewTwo';
import mapsdk from "@/components/Screen/mapsdk.vue"
import top from "../../components/Screen/top.vue"
import left from "@/components/Screen/left.vue"
import right from "../../components/Screen/right.vue"
import bottom from "../../components/Screen/bottom.vue"
import ProjectTree from "../../components/Screen/ProjectTree.vue"
import axios from "axios"
export default {
  components: {
    mapView,
  },
  data() {
  components: { mapsdk,top,left,right,bottom,ProjectTree },
  data () {
    return {
      dialogVisible: false,
      input3: '',
      listcount: 7,
      checkindex: 1,
      timeindex: 1,
      pagesize: 10,
      selvalue: '全部',

      middleList: [
        {
          index: '1',
          name: '管道基础数据专题图',
          time: '2022-07-10',
          count: '28',
          url: require('../../assets/img/themic/a1.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj1.html',
        },
        {
          index: '2',
          name: '用户使用情况专题图',
          time: '2022-07-22',
          count: '6',
          url: require('../../assets/img/themic/a2.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj2.html',
        },
        {
          index: '3',
          name: '项目基本情况专题图',
          time: '2022-06-25',
          count: '23',
          url: require('../../assets/img/themic/a3.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj3.html',
        },
        {
          index: '4',
          name: '项目进度管理专题图',
          time: '2022-07-17',
          count: '15',
          url: require('../../assets/img/themic/a4.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj4.html',
        },
        {
          index: '5',
          name: '全球项目分布专题图',
          time: '2022-07-20',
          count: '7',
          url: require('../../assets/img/themic/a5.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
        {
          index: '6',
          name: '全国管网分布专题图',
          time: '2022-07-26',
          count: '5',
          url: require('../../assets/img/themic/a6.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
        {
          index: '7',
          name: '全国项目足迹专题图',
          time: '2022-06-30',
          count: '10',
          url: require('../../assets/img/themic/a7.jpg'),
          pop: '/LFWeb/content/right/xxtj/xxtj5.html',
        },
      ],
      options: [
        {
          value: '全部',
          label: '全部',
        },
      ],
      typeIndex: '',
    };
  },
  mounted() {},
  created() {
    var val = this.$store.state.currentPerms;
    var permsEntity = this.$store.state.permsEntity;
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        // this.showMenuChange(permsEntity[i], permsEntity);
        console.log('专题图', permsEntity[i]);
      }
      leftWidth: "22%",
      rightWidth: "22%",
      leftTree: false,
      currTree: false,
      ProjectreeDisplay: false,
    }
  },
  methods: {
    close() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeChecked(res) {
      if (this.checkindex != res) {
        this.checkindex = res;
      }
    },
    changetime(res) {
      if (this.timeindex != res) {
        this.timeindex = res;
      }
    },
    showThematic(res) {
      this.typeIndex = res.index;
      this.dialogVisible = true;
  mounted () {

      // var url = "http://localhost/" + res.pop;
      // window.open(
      //   url,
      //   "newwindow",
      //   "height=750, width=1400, top=150,left=400 "
      // );
  },
  created () {
    this.$bus.$on("changeTree",key => {
      this.ProjectreeDisplay=key
    })
  },
  methods: {
    //修改左侧宽度
    ChangeWidth (parm) {
      if(parm=="left") {
        if(this.leftWidth=="22%") {
          this.leftWidth="8px"
        } else {
          this.leftWidth="22%"
        }
      }

      if(parm=="leftView"||parm=="leftTree") {
        this.leftWidth="22%"
        this.rightWidth="22%"
      }
      // if (parm == "leftView") {
      //   this.leftTree = false
      // }
      // if (parm == "leftTree") {
      //   this.leftTree = true
      // }

      if(parm=="right") {
        if(this.rightWidth=="22%") {
          this.rightWidth="45px"
        } else {
          this.rightWidth="22%"
        }
      }
    },
  },
};
}
</script>

<style>
<style lang="less" scoped>
.themaic {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.themaic .el-divider--horizontal {
  margin: 10px 0 !important;
}

.themaic .th_title {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3b4d6e;
}

.radiusSearch .el-input__wrapper {
  border-radius: 50px;
}

.themaic .active {
  color: #409eff;
}

.themaic .themic_middle_card {
  border: transparent;
}

.themaic .themic_middle_card .el-card__body {
  padding: 0px;
}

.themaic .midedle_div {
  width: 23.5%;
  height: 250px;
  float: left;
  margin-right: 1%;
  margin-bottom: 1%;
  position: relative;
}

.themaic .midedle_div .middle_card {
  width: 100%;
  height: 100%;
}

.themaic .midedle_div .middle_card .el-card__body {
  padding: 10px;
}

.themaic .midedle_div .t1 {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
}

.themaic .midedle_div .t2 {
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #3f3f3f;
  margin-right: 10px;
}

.themaic .midedle_div .middle_image {
  width: 94%;
  /* margin-top: 10px; */
  height: 73%;
  position: absolute;
  display: flex;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  height: 86px;
  width: 100%;
  z-index: 999;
}

.mapleft {
  position: absolute;
  top: 90px;
  left: 0px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}

.mapright {
  position: absolute;
  top: 90px;
  right: -20px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}

.mapbottom {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 90px;
  width: 100%;
  z-index: 999;
}
.project-tree {
  position: absolute;
  top: 90px;
  right: 22%;
  width: 15%;
  height: calc(100% - 180px);
  z-index: 999;
}
</style>
<style>
.themaic_dialog .el-dialog {
  background: rgba(0, 0, 0, 0.8) !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  /* margin-top: 5px !important;
margin-top: 5px !important; */
}

.themaic_dialog .el-dialog__header {
  background: transparent !important;
  padding: 0;
  margin: 0;
  color: #fff;
}
<style lang="less">
.themaic {
  .aside-title {
    box-sizing: border-box;
    padding-left: 30px;
    // height: 27px;
    // line-height: 27px;
    // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
    font-size: 15px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
    // -webkit-background-clip: text;
    color: #fff;
    width: 100%;

.themaic_dialog .el-dialog__body {
  background: transparent !important;
  height: 98vh;
  padding: 0;
  margin: 0;
  font-size: 20px;
    height: 30px;
    line-height: 30px;
    background: url(~@/assets/img/Screen/asideTitleBg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

/* .themaic .el-dialog .el-dialog__header .el-dialog__headerbtn {
  color: #fff;
} */
</style>