综合展示，系统管理，授权管理，专题图，资料馆添加权限配置

Surpriseplus

2022-10-26 62ae55ae397b7997b147a7b946f7ad5f1c78a45d

 src/views/Thematic/index.vue

@@ -3,54 +3,98 @@
    <el-card style="height: 100%">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="th_title">专题地图</div>
          <div class="th_title">{{ $t('themaic.name') }}</div>
        </el-col>
        <el-col :span="4" :offset="14">
          <el-input size="small" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="input3">
          <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">地图名称:</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" />
          <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">按时间排序:</label>
            <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(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>
            <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">按浏览次数排序:</label>
            <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(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>
            <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">
            <label style="margin-right: 10px">共找到{{ listcount }}个结果</label>
            {{ $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">
        <div
          @click="showThematic(item)"
          v-for="(item, i) in middleList"
          class="midedle_div"
          :key="i"
        >
          <el-card class="middle_card">
            <!-- <div>
             
    
           



           </div> -->

            <table>
@@ -61,38 +105,50 @@
              </tr>
              <tr>
                <td>
                  <div class="middle_image"
                    :style="{ background: 'url(' + item.url + ') no-repeat center', 'background-size': '100% 100%', }">
                  </div>
                  <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>
                  <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-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">
    <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>
  </div>
</template>

<script>
import mapView from "@/components/mapviewTwo";
import mapView from '@/components/mapviewTwo';
export default {
  components: {
    mapView,
@@ -100,89 +156,98 @@
  data() {
    return {
      dialogVisible: false,
      input3: "",
      input3: '',
      listcount: 7,
      checkindex: 1,
      timeindex: 1,
      pagesize: 10,
      selvalue: "全部",
      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: '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: '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: '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: '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: '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",
          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: "全部",
          value: '全部',
          label: '全部',
        },
      ],
      typeIndex: "",
      typeIndex: '',
    };
  },
  mounted(){
     this.timeindex = 7888;
  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]);
      }
    }
  },
  methods: {
    close() {
      this.$confirm("确认关闭？")
      this.$confirm('确认关闭？')
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => { });
        .catch((_) => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
@@ -191,11 +256,11 @@
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => { });
        .catch((_) => {});
    },
    changeChecked(res) {
      if (this.checkindex != res) {
@@ -210,8 +275,6 @@
    showThematic(res) {
      this.typeIndex = res.index;
      this.dialogVisible = true;
     
   

      // var url = "http://localhost/" + res.pop;
      // window.open(