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

中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组件。

代码如下

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

2.日期选择器问题

1.先上正确代码

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

  1.separator="至"

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

---

3.图标问题

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

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

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

  

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

1.defineEmits举例

 为子组件绑定getTypeNum函数

在子组件申明 为他传指

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

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

2.defineExpose举例

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

defineExpose({
  showModal,
});

3.defineProps举例

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

子组件需要接收

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/[email protected]

上升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。地图切换也是如此。全部代码如下：