CaiYuanYiTiHua/src/components/CloudQueryContent/index.vue

<template>
  <div class="modal-content-div">
    <div class="title-text">
      {{ compare ? '国家云查询结果(对比模式)' : '国家云查询结果' }}
      <Icon
        class="split-button"
        style="font-size: 20px"
        icon="bi:layout-split"
        @click="changeCompare"
      />
    </div>
    <div style="display: flex; width: 100%">
      <div :style="`display: block; width: ${compare ? '50%' : '100%'};`">
        <CloudQueryModal :info="info"/>
      </div>
      <div style="display: block; width: 50%; margin-left: 20px" v-if="compare">
        <CloudQueryModal :info="info"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from "vue"
import Icon from '@/components/Icon/Icon.vue';
import CloudQueryModal from './CloudQueryModal/index.vue';
import { useCloudQueryStore } from '@/store/modules/cloudquery';
import { LoadCloudQueryById } from '@/api/demo/cloudQuery'

const useCloudQuery = useCloudQueryStore();
const emits = defineEmits(['changeCompare'])
const compare = ref(false);
const info = ref()
const changeCompare = () => {
  compare.value = !compare.value;
  console.log('compare.value', compare.value);
  emits('changeCompare', compare.value)
};
onMounted(() => {
  let id = useCloudQuery.getCloudQueryInfo.id
  LoadCloudQueryById({id}).then(res => {
    info.value = {
      basicQuery:{
        landClassify:{
          image:'http://60.213.14.14:8060/geoserver/feixian/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&LAYERS=feixian%3Ayingxiang&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4527&STYLES=&WIDTH=1024&HEIGHT=1024&BBOX=39591762.54875996%2C3908085.3169043385%2C39592654.90645946%2C3909001.5344353705',
          screenshotImage:'https://t0.tianditu.gov.cn/DataServer?T=img_w&x=216982&y=103419&l=18&tk=b6585bc41ee16251dbe6b1af64f375d9',
          list:[
            {landName: '乔木林地-0331',type: '限制建设区(030)',stats: '-',area: 3.05,},
            {landName: '乔木林地-0332',type: '限制建设区(031)',stats: '-',area: 4.05,},
            {landName: '乔木林地-0331',type: '建设区(030)',stats: '-',area: 3.05,},
            {landName: '乔木林地-0332',type: '建设区(031)',stats: '-',area: 4.05,},
            {landName: '乔木林地-0331',type: '限制(030)',stats: '-',area: 3.05,},
            {landName: '乔木林地-0332',type: '限制(031)',stats: '-',area: 4.05,}
          ]
        },
        plowLandOccupy:{
          image:'https://t0.tianditu.gov.cn/DataServer?T=img_w&x=217550&y=104260&l=18&tk=b6585bc41ee16251dbe6b1af64f375d9',
          screenshotImage: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x=108774&y=52128&l=17&tk=b6585bc41ee16251dbe6b1af64f375d9',
          list:[
            {landName: '乔木林地-0331',type: '限制建设区(030)',stats: '-',area: 3.05,},
            {landName: '乔木林地-0332',type: '限制建设区(031)',stats: '-',area: 4.05,},
            {landName: '乔木林地-0331',type: '建设区(030)',stats: '-',area: 3.05,},
            {landName: '乔木林地-0332',type: '建设区(031)',stats: '-',area: 4.05,},
            {landName: '乔木林地-0331',type: '限制(030)',stats: '-',area: 3.05,},
            {landName: '乔木林地-0332',type: '限制(031)',stats: '-',area: 4.05,}
          ]
        },
      },
      timeImages:[
        {
          time: '20210111',
          specialText: '卫星：GF2',
          specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
          screenshotText: '截图1',
          screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
        },
        {
          time: '20210112',
          specialText: '卫星：GF3',
          specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
          screenshotText: '截图2',
          screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
        },
        {
          time: '20210113',
          specialText: '卫星：GF4',
          specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
          screenshotText: '截图34',
          screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
        },
        {
          time: '20210114',
          specialText: '卫星：GF5',
          specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
          screenshotText: '截图4',
          screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
        },
      ],
    }
  })
})
</script>

<style lang="scss" scoped>
.modal-content-div {
  padding: 53px 20px 10px 20px;
  width: 100%;
  .title-text {
    display: flex;
    justify-content: center;
    font-size: 18px;
    color: #2f83d9;
    text-decoration: underline;
    font-weight: 600;
    position: relative;
  }
  .split-button {
    font-size: 20px;
    display: inline-flex;
    position: absolute;
    right: 8px;
    top: 2px;
    color: #000000a3;
    cursor: pointer;
  }
}
</style>