二维码打印下载、地图默认点

package-lock.json

@@ -51,6 +51,7 @@
         "vue-i18n": "9.10.2",
         "vue-router": "4.3.2",
         "vue-types": "5.1.1",
+        "vue3-print-nb": "^0.1.4",
         "vuex": "^4.1.0",
         "vxe-table": "4.5.22",
         "xlsx": "^0.18.5"
@@ -13550,6 +13551,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/vue3-print-nb": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/vue3-print-nb/-/vue3-print-nb-0.1.4.tgz",
+      "integrity": "sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==",
+      "dependencies": {
+        "vue": "^3.0.5"
+      }
+    },
     "node_modules/vuex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",

package.json

@@ -59,6 +59,7 @@
     "vue-i18n": "9.10.2",
     "vue-router": "4.3.2",
     "vue-types": "5.1.1",
+    "vue3-print-nb": "^0.1.4",
     "vuex": "^4.1.0",
     "vxe-table": "4.5.22",
     "xlsx": "^0.18.5"

public/print.css

@@ -0,0 +1,4 @@
+.print-title {
+  color: #000000 !important;
+  font-size: 24px;
+}

src/main.ts

@@ -37,6 +37,9 @@ import 'vxe-table/lib/style.css';
 VXETable.config({
   zIndex: 999999
 });
+// 打印插件
+import print from 'vue3-print-nb';
+
 
 // 修改 el-dialog 默认点击遮照为不关闭
 import { ElDialog } from 'element-plus';
@@ -51,6 +54,7 @@ app.use(store);
 app.use(i18n);
 app.use(VXETable);
 app.use(plugins);
+app.use(print);
 // 自定义指令
 directive(app);
 

src/types/components.d.ts

@@ -20,6 +20,8 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -40,17 +42,28 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -61,6 +74,7 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
@@ -93,6 +107,10 @@ declare module 'vue' {
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -27,15 +27,25 @@
     </div>
   </div>
   <Dialog v-model="showQrCode" title="签到码" type="sm" hide-footer>
-    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%">
-      <img :src="qrCodeUrl" alt="" style="width: 900px; height: 900px" />
+    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%">
+      <div id="qrCodeBox" style="display: flex; flex-direction: column; justify-content: center; align-items: center">
+        <div class="print-title" style="margin: 30px 0; color: #ffffff">请联合值守人员通过粤政易扫描二维码进行签到、签退</div>
+        <img :src="qrCodeUrl" alt="" style="width: 800px; height: 800px" />
+      </div>
+      <div class="flex" style="margin-top: 20px">
+        <div class="common-btn-primary" v-print="printObj">打印</div>
+        <div class="common-btn-primary" @click="handleDownLoad">下载</div>
+      </div>
     </div>
   </Dialog>
 </template>
 
 <script lang="ts" setup>
 import { getCheckinList } from '@/api/emergencyCommandMap/JointDuty';
-
+import print from 'vue3-print-nb';
+directives: {
+  print;
+}
 const route = useRoute();
 const tableHeader = reactive([
   {
@@ -54,11 +64,46 @@ const tableHeader = reactive([
 const listData = ref([]);
 let eventId = ref('');
 let qrCodeUrl = ref('');
+let printObj = reactive({
+  id: 'qrCodeBox', // 这里是要打印元素的ID
+  popTitle: '',
+  extraCss: '/print.css'
+});
 const showQrCode = ref(false);
 const handleShowQrCode = () => {
   showQrCode.value = true;
 };
-
+const base64ToBlob = (code) => {
+  let parts = code.split(';base64,');
+  let contentType = parts[0].split(':')[1];
+  let raw = window.atob(parts[1]);
+  let rawLength = raw.length;
+  let uInt8Array = new Uint8Array(rawLength);
+  for (let i = 0; i < rawLength; ++i) {
+    uInt8Array[i] = raw.charCodeAt(i);
+  }
+  return new Blob([uInt8Array], { type: contentType });
+};
+// 下载
+const handleDownLoad = () => {
+  let image = new Image();
+  image.crossOrigin = '';
+  image.src = qrCodeUrl.value;
+  image.onload = () => {
+    let canvas = document.createElement('canvas');
+    canvas.width = 370;
+    canvas.height = 370;
+    let ctx = canvas.getContext('2d');
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+    let dataUrl = canvas.toDataURL();
+    const a = document.createElement('a');
+    a.href = dataUrl;
+    a.download = '签到码.png';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+};
 onMounted(() => {
   eventId.value = route.query.event_id as string;
   /*

src/views/routineCommandMap/PositionMap.vue

@@ -163,8 +163,8 @@ function handleInput(flag) {
 
   if (!placeSearch) {
     placeSearch = new amap.PlaceSearch({
-      pageSize: 10, // 每页条数，默认10，范围1-50
-      pageIndex: 1, // 页码
+      pageSize: pageSize.value, // 每页条数，默认10，范围1-50
+      pageIndex: pageNum.value, // 页码
       extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
     });
   }
@@ -214,27 +214,32 @@ function handlePanTo(index) {
   setMarks(lnglat);
   closeSearchList();
 }
-const initMap = async () => {
-  let position = [110.93154257997, 21.669064031332];
-  const AMap = await AMapLoader.load({
+const initMap = () => {
+  let position = [110.925175, 21.678955];
+  AMapLoader.load({
     key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder'] // 插件列表
+  }).then((res) => {
+    AMap = res;
+    map = new AMap.Map('map', {
+      viewMode: '3D', //是否为3D地图模式
+      center: position,
+      zoom: 15
+    });
+    amap = AMap;
+    geocoder = new AMap.Geocoder({
+      // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+      city: '010'
+    });
+    // 创建右键菜单
+    ContextMenu();
+    map.on('rightclick', handleRightclick);
+    handleResize();
+    map.on('complete', () => {
+      setMarks(position);
+    });
   });
-  map = new AMap.Map('map', {
-    viewMode: '3D', //是否为3D地图模式
-    center: position,
-    zoom: 15
-  });
-  amap = AMap;
-  geocoder = new AMap.Geocoder({
-    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
-    city: '010'
-  });
-  // 创建右键菜单
-  ContextMenu();
-  map.on('rightclick', handleRightclick);
-  handleResize();
 };
 function ContextMenu() {
   contextMenu = new AMap.ContextMenu();
@@ -286,9 +291,7 @@ function handleResize() {
   const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
-  nextTick(() => {
-    map.resize();
-  });
+  map.resize();
 }
 function submit() {
   queryFormRef.value.validate((valid) => {