宁德烟草大屏问题与解决方法总结vue3+vite5

_斯洛伐克

已于 2024-02-08 10:36:51 修改

阅读量918

点赞数 21

文章标签： javascript 前端 html

于 2024-02-05 10:24:31 首次发布

本文链接：https://blog.csdn.net/weixin_42348009/article/details/135628950

版权

中css里添加postcss代码如下

1.样式总结：

1.非标准屏幕时要完整展示大屏内容

当大屏不是1920*1080屏幕时，两侧可以滑动。当1920*1080正常时，不会滑动，可以设置高度和滚动。91和35分别是我的头部和尾部高度。同时配合postcsspxtoviewport8plugin插件保证宽度自适应

 .left {
      width: 436px;
      height: calc(100vh - 91px - 35px);
      overflow-y: auto;
      z-index: 999;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .right {
      width: 436px;
      height: calc(100vh - 91px - 40px);
      overflow-y: auto;
      z-index: 999;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

2.postcsspxtoviewport8plugin插件安装和使用

使用postcss-px-to-viewport-8-plugin进行屏幕适配-CSDN博客

1.安装

npm install postcss-px-to-viewport-8-plugin --save-dev

2.在vite.config.js导入

import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';

   css: {
      preprocessorOptions: {
        scss: {
          // charest:false,
          additionalData: `@import './src/assets/scss/vaiable.scss';`
        }
      },
      postcss: {
        plugins: [
          postcsspxtoviewport8plugin({
            unitToConvert: 'px',
            // viewportWidth: file => {
            //     let num = 1920;
            //     if (file.indexOf('m_') !== -1) {
            //         num = 375;
            //     }
            //     return num;
            // },
            viewportWidth: 1920,
            viewportHeight: 1080,
            unitPrecision: 5, // 单位转换后保留的精度
            propList: ['*'], // 能转化为vw的属性列表
            viewportUnit: 'vw', // 希望使用的视口单位
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: true, // 媒体查询里的单位是否需要转换单位
            replace: true, //  是否直接更换属性值，而不添加备用属性
            exclude: [/node_modules\/ant-design-vue/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
            landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
            landscapeUnit: 'vw', // 横屏时使用的单位
            landscapeWidth: 1024, // 横屏时使用的视口宽度
          }),
        ],
      },
}

2.语法问题

由于我是vue3的大屏我的vue3语法不是很熟练，响应式的问题还有promise,async和await问题。

promise语法看：promise.all的用法（简洁易懂）-CSDN博客

async和await：async和await的用法_async await用法-CSDN博客

vue3赋值：vue3 数组如何赋值_vue3 数组赋值-CSDN博客

const tableData = reactive([ ]) //表格数据

const res = [1,2,3] //假设是接口返回的数据

const load = () => {

        tableData = res

 }

错误

reactive若要赋值不是这么赋值的因为失去了响应式下面正确

const tableData = ref([ ]) //表格数据

const res = [1,2,3] //假设是接口返回的数据

const load = () => {

tableData.value = res

}

或者将tableData改为=ref([])

tableData.value=res

或者tableData为reactive时

tableData.push(...res) 注意不要套了一层又一层。

const model=ref({

a:''

})

model.value.a=....

3.日期选择器和分页问题还有图标问题

1.分页问题

由于是大屏，用table比组件改样式更加方便。但是table的话就没有了分页功能，所以是分页用组件结合table。错误在于分页组件和表格组件写法不一致，分页函数的参数，组件封装是不一样的，我这里是用antd组件。

代码如下

 <a-pagination
        :current="pagination.current"
        :total="pagination.total"
        :pageSize="pagination.pageSize"
        @change="onShowSizeChange"
      />

// 分页
const onShowSizeChange = (current, pageSize) => {
  pagination.current = current;
  pagination.pageSize = pageSize;
  getDate();
};

2.日期选择器问题

1.先上正确代码

  <a-range-picker
        v-model:value="date"
        :placeholder="[str, end]"
        separator="至"
        valueFormat="YYYY-MM-DD"
      >
        <template #suffixIcon>
          <down-outlined />
          <!-- <img src="../../assets/dispatch/arrow-down.png" /> -->
        </template>
      </a-range-picker>

2.需求是中间的-改成至，日历图标改成down图标,还有个vue3图标重点

1.separator="至"

2.图标可以直接导入和使用以上。重点在于template

<template #suffixIcon>
          <down-outlined />
          <!-- <img src="../../assets/dispatch/arrow-down.png" /> -->
        </template>

3.图标问题

3.重点：vue3已经把<a-icon type="xxxx"/>给踢出去了，解决VUE3使用Ant-Design的图标组件＜a-icon＞使用报错，自己写组件这个组件命名为DynamicIcon.vue

<template>
  <component :is="iconComponent" style="margin-right: 10px" />
</template>

<script setup>
import {
  HomeOutlined,
  BarsOutlined,
  CalendarOutlined,
  ProjectOutlined,
  CaretDownOutlined,
  DownOutlined,
  UpOutlined,
  WechatOutlined,
  IdcardOutlined,
  PhoneOutlined,
  SearchOutlined,
  FireOutlined,
  QuestionCircleOutlined,
  DoubleRightOutlined,
  DoubleLeftOutlined,
  CameraOutlined,
  UnorderedListOutlined,
  ContactsOutlined,
} from "@ant-design/icons-vue";
import { computed } from "vue";

const props = defineProps({
  type: {
    type: String,
    required: true,
  },
});

const iconComponent = computed(() => {
  switch (props.type) {
    case "HomeOutlined":
      return HomeOutlined;
    case "BarsOutlined":
      return BarsOutlined;
    case "CalendarOutlined":
      return CalendarOutlined;
    case "ProjectOutlined":
      return ProjectOutlined;
    case "CaretDownOutlined":
      return CaretDownOutlined;
    case "down":
      return DownOutlined;
    case "up":
      return UpOutlined;
    case "wechat":
      return WechatOutlined;
    case "idcard":
      return IdcardOutlined;
    case "phone":
      return PhoneOutlined;
    case "search":
      return SearchOutlined;
    case "fire":
      return FireOutlined;
    case "question":
      return QuestionCircleOutlined;
    case "right":
      return DoubleRightOutlined;
    case "left":
      return DoubleLeftOutlined;
    case "camera":
      return CameraOutlined;
    case "UnorderedList":
      return UnorderedListOutlined;
    case "Contacts":
      return ContactsOutlined;
    default:
      return HomeOutlined;
  }
});
</script>

引入的时候直接引入这个组件

 import DynamicIconVue from "@/components/DynamicIcon.vue";

  <DynamicIcon type="search" />

4.关于vue3的defineEmits，defineExpose，defineProps问题

1.defineEmits举例

为子组件绑定getTypeNum函数

  <mapPointVue v-if="isType === true" @getTypeNum="getTypeNum"></mapPointVue>

在子组件申明为他传指

const emits = defineEmits(["getTypeNum"]);

const getType = (type) => {
  emits("getTypeNum", type);
};

2.defineExpose举例

在vue3组件中需要在父组件引用子组件的方法需要引用子组件的方法，需要子组件defineExpose方法，父组件才可以使用

defineExpose({
  showModal,
});

3.defineProps举例

在vue3中父组件给子组件传值

 <areaVue :type="type" :isClick="isClick"></areaVue>

子组件需要接收

const props = defineProps({
  // type: { type: Number, default: 1 },
  type: { type: Object, default: {} },
  isClick: { type: Boolean, default: () => true },
});

5.打包时候出现问题

代码回退发现是ant-design-vue依赖有问题，同时我将vite下降到了4.4.11，不清楚什么问题。

怀疑是vite5版本和ant-design-vue起冲突了。下面是我最后打包的配置。

  "dependencies": {
    "@rollup/plugin-commonjs": "^25.0.7",
    "ant-design-vue": "^4.0.7",
    "axios": "^1.6.3",
    "dayjs": "^1.11.10",
    "echarts": "^5.4.3",
    "js-cookie": "^3.0.5",
    "md5": "^2.3.0",
    "postcss-px-to-viewport-8-plugin": "^1.2.3",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.4.0",
    "vite": "^4.4.11",
    "vite-plugin-require-transform": "^1.0.21"
  }

6.关于vite打包的命令

npm run serve项目跑起来

npm run build 打包

npm run preview可以预览打包的样子

7.关于vite版本过高需要下降版本

vite.createFilter is not a function 问题解决-CSDN博客

下降vite 版本自己指定

npm i @vitejs/plugin-vue@2.3.3

上升vite

npm install -D vite@^3.0.0

8.关于天地图地图无法拖拽问题

思路是先把地图先建好，因为图标的数据是动态的，但是在地图上要做好清除覆盖物的代码。

地图代码：

const onLoad = () => {
  map = new T.Map("mapDiv", {
    projection: "EPSG:4326",
  });
  // 卫星图图层

  map.setMapType(window.TMAP_HYBRID_MAP);

  // if (props.isClick) {
  //   console.log("props.isClick存在", props.isClick);
  //   map.setMapType(window.TMAP_HYBRID_MAP);
  // } else {
  //   console.log("props.isClick不存在");
  //   map.clearMapType(window.TMAP_HYBRID_MAP);
  //   map.setMapType(window.TMAP_NORMAL_MAP);
  // }

  //这一步设置的是地图的初始化后的中心点坐标以及缩放级别
  map.centerAndZoom(new T.LngLat(119.537347276, 26.644120822), zoom);
  //允许鼠标滚轮缩放地图
  map.enableScrollWheelZoom();
  // 清楚覆盖物
  map.clearOverLays();
  // 点的图标样式
  var icon = new T.Icon({
    // iconUrl: datalist5[i].iconUrls,
    // iconUrl: require("@/assets/images/Frame10386.png"),
    iconUrl: require("@/assets/images/Frame10386.png"),
    iconSize: new T.Point(40, 40),
    iconAnchor: new T.Point(10, 25), //图标的定位锚点
  });
  var pointArray = new Array();
  // console.log("datalist3.length", datalist3.value.length);
  for (var i = 0; i < datalist5.value.length; i++) {
    var marker = new T.Marker(
      // new T.LngLat(datalist3.value[i], datalist3.value[i]),
      new T.LngLat(datalist5.value[i].longitude, datalist5.value[i].latitude),
      {
        icon: icon,
      }
    );
    marker.id = datalist5.value[i].id;
    map.addOverLay(marker); //增加点
    pointArray[i] = new T.LngLat(
      datalist5.value[i].longitude,
      datalist5.value[i].latitude
    );
    marker.addEventListener("click", clickEvent); //点击事件
  }
  map.setViewport(pointArray); //让所有点在视野范围内
  // map.addOverLay(marker);
};

图标代码

const addIcon = () => {
  console.log("添加点位啦");
  map.clearOverLays();
  // 点的图标样式
  var icon = new T.Icon({
    // iconUrl: datalist5[i].iconUrls,
    // iconUrl: require("@/assets/images/Frame10386.png"),
    iconUrl: require("@/assets/images/Frame10386.png"),
    iconSize: new T.Point(40, 40),
    iconAnchor: new T.Point(10, 25), //图标的定位锚点
  });
  var pointArray = new Array();
  // console.log("datalist3.length", datalist3.value.length);
  for (var i = 0; i < datalist5.value.length; i++) {
    var marker = new T.Marker(
      // new T.LngLat(datalist3.value[i], datalist3.value[i]),
      new T.LngLat(datalist5.value[i].longitude, datalist5.value[i].latitude),
      {
        icon: icon,
      }
    );
    marker.id = datalist5.value[i].id;
    map.addOverLay(marker); //增加点
    pointArray[i] = new T.LngLat(
      datalist5.value[i].longitude,
      datalist5.value[i].latitude
    );
    marker.addEventListener("click", clickEvent); //点击事件
  }
};

一个地图有好几个坐标，datalist5就是我存放地图的坐标的数组，在我的dataList5得到，再调用addIcon。地图切换也是如此。全部代码如下：

<template>
  <div id="mapDiv"></div>
  <!-- <tanchuanVue ref="tanchuan"></tanchuanVue> -->
  <electricVue ref="electric"></electricVue>
  <!-- <mapPointVue @getList="getList"></mapPointVue> -->
</template>
    
<script setup>
import { onMounted, ref, reactive, watch, onBeforeMount } from "vue";
import tanchuanVue from "@/views/largeScreen/tanchuan.vue";
import electricVue from "@/views/mapPoints/electric.vue";
import mapPointVue from "@/views/mapPoints/index.vue";
import { mapPoint, Point } from "@/api/api";

let datalist = ref([]);
let datalist2 = ref([]);
let datalist3 = ref([]);
let datalist4 = ref([]);
let datalist5 = ref([]);
let value = ref();

var map;
var zoom = 12;
const tanchuan = ref(null);
const electric = ref(null);

const props = defineProps({
  // type: { type: Number, default: 1 },
  type: { type: Object, default: {} },
  isClick: { type: Boolean, default: () => true },
});

const mapTypes = [window.TMAP_HYBRID_MAP, window.TMAP_HYBRID_MAP];
let imgUrls = [
  { img: "@/assets/images/Frame10386.png" },
  { img: "@/assets/images/Frame1031.png" },
  { img: "@/assets/images/Frame10375.png" },
];

onMounted(async () => {
  await getDHData();
  await getLSDate();
  getData();
  onLoad();
});
// 大华电气
const getDHData = () => {
  return new Promise(function (resolve, reject) {
    mapPoint()
      .then((res) => {
        // console.log("DHPoint", res);
        datalist.value = res;
        // console.log("datalist.value", datalist.value);
        datalist3.value = [];
        datalist3.value.push(
          ...datalist.value.map((item) => ({
            id: item.id,
            longitude: item.longitude,
            latitude: item.latitude,
            name: item.name, //	设备类型名称
            typeCode: item.typeCode, //	设备类型编码
            institutionCode: item.organName, //所属机构名称
            bindStatus: item.onOffLineName, //设备在线、离线、未激活 名称
            address: item.address, //设备位置
            iconUrls: imgUrls[0].img,
          }))
        );
        console.log("datalist3.value333333333", datalist3.value);
        resolve(datalist3.value);
        // getLSDate();
      })
      .catch((error) => {
        reject([]);
      });
  });
};
// 灵思电气
const getLSDate = () => {
  return new Promise(function (resolve, reject) {
    Point({ current: 1, size: 9999999 })
      .then((res) => {
        const { records } = res?.data ?? {};
        datalist2.value = records;
        // console.log("datalist2.value", datalist2.value);
        // console.log("datalist3.value111111111", datalist3.value);
        datalist4.value = [];
        datalist4.value.push(
          ...datalist2.value.map((item) => ({
            id: item.id, //	传感器ID
            longitude: item.deployment.lnglat[0],
            latitude: item.deployment.lnglat[1],
            name: item.deployment.name,
            typeCode: item.sn,
            institutionCode: item.orgName, //所属组织
            bindStatus: item.networkStatus, //网络在线状态
            address: item.deployment.location, //地址
            iconUrls: imgUrls[0].img,
          }))
        );
        console.log("datalist4.value2222222222222222222222", datalist4.value);
        resolve(datalist4.value);
      })
      .catch((error) => {
        reject([]);
      });
  });
};
const onLoad = () => {
  map = new T.Map("mapDiv", {
    projection: "EPSG:4326",
  });
  // 卫星图图层

  map.setMapType(window.TMAP_HYBRID_MAP);

  //这一步设置的是地图的初始化后的中心点坐标以及缩放级别
  map.centerAndZoom(new T.LngLat(119.537347276, 26.644120822), zoom);
  //允许鼠标滚轮缩放地图
  map.enableScrollWheelZoom();
  // 清楚覆盖物
  map.clearOverLays();
  // 点的图标样式
  var icon = new T.Icon({
    // iconUrl: datalist5[i].iconUrls,
    // iconUrl: require("@/assets/images/Frame10386.png"),
    iconUrl: require("@/assets/images/Frame10386.png"),
    iconSize: new T.Point(40, 40),
    iconAnchor: new T.Point(10, 25), //图标的定位锚点
  });
  var pointArray = new Array();
  // console.log("datalist3.length", datalist3.value.length);
  for (var i = 0; i < datalist5.value.length; i++) {
    var marker = new T.Marker(
      // new T.LngLat(datalist3.value[i], datalist3.value[i]),
      new T.LngLat(datalist5.value[i].longitude, datalist5.value[i].latitude),
      {
        icon: icon,
      }
    );
    marker.id = datalist5.value[i].id;
    map.addOverLay(marker); //增加点
    pointArray[i] = new T.LngLat(
      datalist5.value[i].longitude,
      datalist5.value[i].latitude
    );
    marker.addEventListener("click", clickEvent); //点击事件
  }
  map.setViewport(pointArray); //让所有点在视野范围内
  // map.addOverLay(marker);
};

const addIcon = () => {
  console.log("添加点位啦");
  map.clearOverLays();
  // 点的图标样式
  var icon = new T.Icon({
    // iconUrl: datalist5[i].iconUrls,
    // iconUrl: require("@/assets/images/Frame10386.png"),
    iconUrl: require("@/assets/images/Frame10386.png"),
    iconSize: new T.Point(40, 40),
    iconAnchor: new T.Point(10, 25), //图标的定位锚点
  });
  var pointArray = new Array();
  // console.log("datalist3.length", datalist3.value.length);
  for (var i = 0; i < datalist5.value.length; i++) {
    var marker = new T.Marker(
      // new T.LngLat(datalist3.value[i], datalist3.value[i]),
      new T.LngLat(datalist5.value[i].longitude, datalist5.value[i].latitude),
      {
        icon: icon,
      }
    );
    marker.id = datalist5.value[i].id;
    map.addOverLay(marker); //增加点
    pointArray[i] = new T.LngLat(
      datalist5.value[i].longitude,
      datalist5.value[i].latitude
    );
    marker.addEventListener("click", clickEvent); //点击事件
  }
};
const clickEvent = (e) => {
  // console.log(e);
  var p = e.target;
  let data = datalist5.value.filter((item) => {
    return item.id === p.id;
  });
  // console.log(data);
  // tanchuan.value.showModal();
  electric.value.showModal(data);
};
async function getData() {
  // let datalist5 = [];
  try {
    if (props.type.a && props.type.b && props.type.c) {
      datalist5.value = [];
      let data4 = [
        {
          address: "浙江省宁波市海曙区古林镇青云桥东北约96米",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "653224549252f93e8e50124",
          institutionCode: "福鼎市",
          latitude: 26.644120875,
          longitude: 119.537347183,
          name: "九楼电梯间",
          typeCode: null,
        },
        {
          address: "上海",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "65322411da19365920a3911c",
          institutionCode: "福安市",
          latitude: 26.643946672,
          longitude: 119.536923848,
          name: "八楼配电室",
          typeCode: null,
        },
      ];
      let data5 = [
        {
          address: "浙江省宁波市海曙区古林镇青云桥东北约56米",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "653224549212f93e8e50d514",
          institutionCode: "福鼎市",
          latitude: 26.64412085,
          longitude: 119.53734729,
          name: "九楼电梯间",
          typeCode: null,
        },
      ];
      console.log("datalist3监听", datalist3.value);
      console.log("datalist4监听", datalist4.value);
      datalist5.value = datalist5.value.concat(
        datalist3.value,
        datalist4.value,
        data4,
        data5
      );
      console.log("datalist5aaaaaa", datalist5.value);
    } else if (props.type.a && props.type.b) {
      datalist5.value = [];
      let data4 = [
        {
          address: "浙江省宁波市海曙区古林镇青云桥东北约96米",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "653224549252f93e8e50124",
          institutionCode: "福鼎市",
          latitude: 26.644120875,
          longitude: 119.537347183,
          name: "九楼电梯间",
          typeCode: null,
        },
        {
          address: "上海",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "65322411da19365920a3911c",
          institutionCode: "福安市",
          latitude: 26.643946672,
          longitude: 119.536923848,
          name: "八楼配电室",
          typeCode: null,
        },
      ];
      datalist5.value = datalist5.value.concat(
        datalist3.value,
        datalist4.value,
        data4
      );
      console.log("datalist5aaaaaa", datalist5.value);
    } else if (props.type.a && props.type.c) {
      datalist5.value = [];
      let data5 = [
        {
          address: "浙江省宁波市海曙区古林镇青云桥东北约56米",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "653224549212f93e8e50d514",
          institutionCode: "福鼎市",
          latitude: 26.64412085,
          longitude: 119.53734729,
          name: "九楼电梯间",
          typeCode: null,
        },
      ];
      datalist5.value = datalist5.value.concat(
        datalist3.value,
        datalist4.value,
        data5
      );
      console.log("datalist5aaaaaa", datalist5.value);
    } else if (props.type.b && props.type.c) {
      datalist5.value = [];
      let data4 = [
        {
          address: "浙江省宁波市海曙区古林镇青云桥东北约96米",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "653224549252f93e8e50124",
          institutionCode: "福鼎市",
          latitude: 26.644120875,
          longitude: 119.537347183,
          name: "九楼电梯间",
          typeCode: null,
        },
        {
          address: "上海",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "65322411da19365920a3911c",
          institutionCode: "福安市",
          latitude: 26.643946672,
          longitude: 119.536923848,
          name: "八楼配电室",
          typeCode: null,
        },
      ];
      let data5 = [
        {
          address: "浙江省宁波市海曙区古林镇青云桥东北约56米",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "653224549212f93e8e50d514",
          institutionCode: "福鼎市",
          latitude: 26.64412085,
          longitude: 119.53734729,
          name: "九楼电梯间",
          typeCode: null,
        },
      ];
      datalist5.value = datalist5.value.concat(data4, data5);
      console.log("datalist5aaaaaa", datalist5.value);
    } else if (props.type.a) {
      datalist5.value = [];
      console.log("datalist3监听", datalist3.value);
      console.log("datalist4监听", datalist4.value);
      datalist5.value = datalist5.value.concat(
        datalist3.value,
        datalist4.value
      );
      console.log("datalist5aaaaaa", datalist5.value);
    } else if (props.type.c) {
      datalist5.value = [];
      let data5 = [
        {
          address: "浙江省宁波市海曙区古林镇青云桥东北约56米",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "653224549212f93e8e50d514",
          institutionCode: "福鼎市",
          latitude: 26.64412085,
          longitude: 119.53734729,
          name: "九楼电梯间",
          typeCode: null,
        },
      ];

      datalist5.value = datalist5.value.concat(data5);
      console.log("datalist5aaaaaa", datalist5.value);
    } else if (props.type.b) {
      datalist5.value = [];
      let data4 = [
        {
          address: "浙江省宁波市海曙区古林镇青云桥东北约96米",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "653224549252f93e8e50124",
          institutionCode: "福鼎市",
          latitude: 26.644120875,
          longitude: 119.537347183,
          name: "九楼电梯间",
          typeCode: null,
        },
        {
          address: "上海",
          bindStatus: "在线",
          iconUrls: "/src/assets/images/Frame1031.png",
          id: "65322411da19365920a3911c",
          institutionCode: "福安市",
          latitude: 26.643946672,
          longitude: 119.536923848,
          name: "八楼配电室",
          typeCode: null,
        },
      ];

      datalist5.value = datalist5.value.concat(data4);
      console.log("datalist5aaaaaa", datalist5.value);
    } else {
      datalist5.value = [];
    }
 
    console.log("datalist5.value9999999", datalist5.value);
    if (props.isClick) {
      console.log("props.isClick存在", props.isClick);
      map.setMapType(window.TMAP_HYBRID_MAP);
    } else {
      console.log("props.isClick不存在");
      map.clearMapType(window.TMAP_HYBRID_MAP);
      map.setMapType(window.TMAP_NORMAL_MAP);
    }
    addIcon();
  } catch (error) {
    // console.error(error);
  }
}


// 消防设备
const getFire = () => {
  // console.log(3333333);
};
const getCars = () => {
  // console.log(22222222);
};

watch(
  [
    () => props.type.a,
    () => props.type.b,
    () => props.type.c,
    () => props.isClick,
  ],
  (newValue, oldValue) => {
    console.log("props.type监听", newValue);
    // console.log("props.isClick监听111111111111111111", newValue);
    getData();
  },
  { immediate: true }
);
</script>
    
<style lang="scss" scoped>
#mapDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 850;
}
</style>

_斯洛伐克

关注

21
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
宁德烟草大屏问题与解决方法总结vue3+vite5

当大屏不是1920*1080屏幕时，两侧可以滑动。当1920*1080正常时，不会滑动，可以设置高度和滚动。91和35分别是我的头部和尾部高度。同时配合postcsspxtoviewport8plugin插件保证宽度自适应.left {.right {
复制链接

扫一扫