'一张图页面整体编写'

TreeWish

2023-02-16 af8e5d35d64f9ca894cd933d0cfbea8f067abcbf

 src/views/Thematic/index.vue

@@ -1,393 +1,90 @@
<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
            >

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

            <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>
    <mapsdk></mapsdk>
    <top class="title" ref="title"></top>
    <left class="mapleft" :style="{ width: leftWidth }"></left>
    <right class="mapright" :style="{ width: rightWidth }"></right>
    <bottom class="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 axios from "axios"
export default {
  components: {
    mapView,
  },
  components: { mapsdk, top, left, right, bottom },
  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: "20%",
      rightWidth: "20%",
    }
  },
  mounted() {},
  created() {},
  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;
    //修改左侧宽度
    ChangeWidth(parm) {
      if (parm == "left") {
        if (this.leftWidth == "20%") {
          this.leftWidth = "36px"
        } else {
          this.leftWidth = "20%"
        }
      }
    },
    changetime(res) {
      if (this.timeindex != res) {
        this.timeindex = res;
      if (parm == "right") {
        if (this.rightWidth == "20%") {
          this.rightWidth = "36px"
        } else {
          this.rightWidth = "20%"
        }
      }
    },
    showThematic(res) {
      this.typeIndex = res.index;
      this.dialogVisible = true;

      // var url = "http://localhost/" + res.pop;
      // window.open(
      //   url,
      //   "newwindow",
      //   "height=750, width=1400, top=150,left=400 "
      // );
    },
  },
};
}
</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;
}
</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; */
.title {
  position: absolute;
  top: 0;
  left: 0;
  height: 86px;
  width: 100%;
  z-index: 999;
}

.themaic_dialog .el-dialog__header {
  background: transparent !important;
  padding: 0;
  margin: 0;
  color: #fff;
.mapleft {
  position: absolute;
  top: 90px;
  left: 0px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}

.themaic_dialog .el-dialog__body {
  background: transparent !important;
  height: 98vh;
  padding: 0;
  margin: 0;
  font-size: 20px;
.mapright {
  position: absolute;
  top: 90px;
  right: 0px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
}

/* .themaic .el-dialog .el-dialog__header .el-dialog__headerbtn {
  color: #fff;
} */
.mapbottom {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 90px;
  width: 100%;
  z-index: 999;
}
</style>