增加叫号接口，代码逻辑，canvas生成图片

public/index.html

@@ -16,6 +16,7 @@
   </title>
   <script type="text/javascript" src="./static/config/config.js"></script>
   <script type="text/javascript" src="./static/config/config2.js"></script>
+  <script type="text/javascript" src="./static/config/config3.js"></script>
   <script type="text/javascript" src="./static/config/globalVariable.js"></script>
 
   <link rel="stylesheet" href="./static/plugins/Cesium/Widgets/widgets.css">

public/static/config/config3.js

@@ -0,0 +1,155 @@
+var serviceAuth = "/proxy_oauth/proxy_qpData/qpData/api/getToken?username=shujuke&password=shujuke!@%23";
+var serviceWindowInfo = "/proxy_oauth/proxy_qpData/qpData/api/getCollectWindow";
+var serviceWindowQYM = "310000310100310118001"
+/*
+共67个，除去H01 H02 H07无叫号功能，可叫号窗口共计64个
+一层(27)：
+A01 A02 A03 A04 A05 A06 A07 A08 F01 F02 F03 F04 F05 F06 F07 F08 B01 B02 B03 B04 B05 B07 B08 B09 B10 B11 B12 
+二层(19)：
+H01 H02 H03 H04 H05 H06 H07 K01 K02 K03 K04 K05 K06 K07 K08 K09 K10 K11 K12
+三层(21)：
+M01 M02 M03 M04 M05 M06 M07 M08 M09 M10 M11 M12 M13 M14 M15 M16 D01 D02 D03 D04 17
+*/
+var serviceWindowDefault = {
+    open: "欢迎光临",
+    close: "暂停服务"
+}
+
+var serviceWindow = [
+    {
+        id: "A01",
+        name: "税务综合受理",
+        topPoint: [
+            {
+                lon: 121.12273519090121,
+                lat: 31.153827313511016,
+                height: 3.280499471365055
+            },
+            {
+                lon: 121.12273815983032,
+                lat: 31.153814774429165,
+                height: 3.281036567079009
+            }
+        ],
+        endHeight: [2.807028457880749, 2.807028457880749],
+    },
+    {
+        id: "A02",
+        name: "税务综合受理",
+        topPoint: [
+            {
+                lon: 121.12273897717168 - 0.0000001,
+                lat: 31.153811345528098,
+                height: 3.2791738218688917
+            },
+            {
+                lon: 121.1227419995449 - 0.0000001,
+                lat: 31.153798306016835,
+                height: 3.2795319205059834
+            }
+        ],
+        endHeight: [2.807028457880749, 2.807028457880749],
+    },
+    {
+        id: "A03",
+        name: "税务综合受理",
+        topPoint: [
+            {
+                lon: 121.12274257274815 - 0.0000001,
+                lat: 31.1537958329151,
+                height: 3.2792784151920804
+            },
+            {
+                lon: 121.12274539946175 - 0.0000001,
+                lat: 31.1537836402599,
+                height: 3.2816677369155056
+            }
+        ],
+        endHeight: [2.807028457880749, 2.807028457880749],
+    },
+    {
+        id: "A04",
+        name: "税务综合受理",
+        topPoint: [
+            {
+                lon: 121.12274568374592 - 0.0000001,
+                lat: 31.153782416589316,
+                height: 3.2835717855324202
+            },
+            {
+                lon: 121.12274859072618 - 0.0000001,
+                lat: 31.15376987529124,
+                height: 3.281987808869649
+            }
+        ],
+        endHeight: [2.807028457880749, 2.807028457880749],
+    },
+    {
+        id: "A05",
+        name: "税务综合受理",
+        topPoint: [
+            {
+                lon: 121.12275042977554 - 0.0000001,
+                lat: 31.153761940842827,
+                height: 3.2813517545316118
+            },
+            {
+                lon: 121.1227528856178 - 0.0000001,
+                lat: 31.153751345326732,
+                height: 3.27452352321032
+            }
+        ],
+        endHeight: [2.807028457880749, 2.807028457880749],
+    },
+    {
+        id: "A06",
+        name: "税务综合受理",
+        topPoint: [
+            {
+                lon: 121.122753186265 - 0.0000001,
+                lat: 31.153750049949874,
+                height: 3.281760674174032
+            },
+            {
+                lon: 121.12275562735218 - 0.0000001,
+                lat: 31.153739517644198,
+                height: 3.2823100936256715
+            }
+        ],
+        endHeight: [2.807028457880749, 2.807028457880749],
+    },
+    {
+        id: "A07",
+        name: "税务综合受理",
+        topPoint: [
+            {
+                lon: 121.12275625753628 - 0.0000001,
+                lat: 31.153736798549087,
+                height: 3.2819050396071288
+            },
+            {
+                lon: 121.12275867619543 - 0.0000001,
+                lat: 31.15372636474087,
+                height: 3.279470436541821
+            }
+        ],
+        endHeight: [2.807028457880749, 2.807028457880749],
+    },
+    {
+        id: "A08",
+        name: "税务综合受理",
+        topPoint: [
+            {
+                lon: 121.12275923673195 - 0.0000001,
+                lat: 31.153723945082202,
+                height: 3.2787424229740374
+            },
+            {
+                lon: 121.12276180530093 - 0.0000001,
+                lat: 31.153712864955146,
+                height: 3.275053754921275
+            }
+        ],
+        endHeight: [2.807028457880749, 2.807028457880749],
+    },
+]

src/api/content.js

@@ -0,0 +1,24 @@
+import {
+  get,
+  post
+} from '../utils/request'
+
+// 获取token
+const getToken = () => {
+  return get(serviceAuth)
+}
+
+// 获取窗口信息
+// 获取单个用户的权限
+const getWindowInfo = (params) => {
+  let data = {
+    area_id: "310000310100310118001",
+    win_code: params.id
+  }
+  return post(serviceWindowInfo, data);
+}
+
+export default {
+  getToken,
+  getWindowInfo
+}

src/components2/MainMap.vue

@@ -19,12 +19,7 @@
       </div>
     </van-popup> -->
     </div>
-    <canvas
-      id="canvas-b"
-      class="canvas"
-      width="500"
-      height="180"
-    ></canvas>
+    <canvas id="canvas-b" class="canvas" width="500" height="180"></canvas>
     <Tool></Tool>
   </div>
 </template>
@@ -33,10 +28,12 @@
 // import Clipboard from "clipboard";
 import { defineAsyncComponent } from "vue";
 import Water from "@/utils/Water";
+import api from "@/api/content";
 
 export default {
   data() {
     return {
+      JHEntityObj: {},
       dialogVisible: false,
       dialogInfoStr: "",
       clipboard: null,
@@ -152,15 +149,15 @@ export default {
       });
     };
 
-    window.addImage = this.addImage;
-    window.changeImage = this.changeImage;
-    addImage(globalVariable.viewer, {
-      arr: [
-        121.12273519090121, 31.153827313511016, 3.280499471365055,
-        121.12273815983032, 31.153814774429165, 3.281036567079009,
-      ],
-      minH: [2.807028457880749, 2.807028457880749],
-    });
+    // window.addImage = this.addImage;
+    // window.changeImage = this.changeImage;
+    // addImage(globalVariable.viewer, {
+    //   arr: [
+    //     121.12273519090121, 31.153827313511016, 3.280499471365055,
+    //     121.12273815983032, 31.153814774429165, 3.281036567079009,
+    //   ],
+    //   minH: [2.807028457880749, 2.807028457880749],
+    // });
     // window.tp =
     // this.addImage(globalVariable.viewer, {
     //   arr: [
@@ -178,7 +175,7 @@ export default {
     //   ],
     //   minH: [2.8569308025328994, 2.8529680784118310]
     // }, '../static/images/ceshi.png');
-
+    this.initJH();
     return;
   },
 
@@ -294,7 +291,8 @@ export default {
       //     }
       //   );
       // }
-      window.changeImage = this.changeImage;
+      // window.changeImage = this.changeImage;
+
       // 水面加载
       setTimeout(() => {
         that.addWaterPanel();
@@ -367,7 +365,7 @@ export default {
         container.addEventListener("pointermove", mousemove);
       }
       function mousemove(event) {
-        var touch = event; 
+        var touch = event;
         //手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
         endX = touch.pageX;
         distanceX = endX - startX;
@@ -660,8 +658,8 @@ export default {
           // cartesian = Cesium.Cartesian3.fromDegrees(lng, lat, height);
           // console.log("模型高度点", cartesian);
           let str = `
-          lon:${lon}
-          lat:${lat}
+          lon:${lon},
+          lat:${lat},
           height:${height}
           `;
           console.log(str);
@@ -678,6 +676,134 @@ export default {
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
 
+    initJH() {
+      let that = this;
+      window.getToken = function () {
+        return that.$store.getters.getToken;
+      };
+      this.getToken().then(() => {
+        serviceWindow.map(function (item, index) {
+          let pointArr = item.topPoint
+            .map(function (item_) {
+              return [item_.lon, item_.lat, item_.height];
+            })
+            .join()
+            .split(",")
+            .map((num) => Number(num));
+          that.getWindowInfo(item).then((info) => {
+            let image = that.createJHImage(item, info);
+            let entity = globalVariable.viewer.entities.add({
+              wall: {
+                positions: Cesium.Cartesian3.fromDegreesArrayHeights(pointArr),
+                minimumHeights: item.endHeight,
+                material: new Cesium.ImageMaterialProperty({
+                  image: image,
+                  transparent: true,
+                }),
+              },
+            });
+            that.JHEntityObj[item.id] = {
+              item: item,
+              entity: entity,
+            };
+          });
+        });
+      });
+
+      // 开始循环访问
+      setInterval(() => {
+        that.loopJH();
+      }, 5000); //3 * 60 * 1000
+    },
+    getToken() {
+      let that = this;
+      return new Promise((resolve, reject) => {
+        api.getToken().then(function (result) {
+          that.$store.commit("setToken", result.data);
+          resolve();
+        });
+      });
+    },
+    getWindowInfo(params) {
+      return new Promise((resolve, reject) => {
+        api.getWindowInfo({ id: params.id }).then(function (result) {
+          resolve(result.data);
+        });
+      });
+    },
+    createJHImage(item, info) {
+      // win_code: "A02",
+      // win_id: "102",
+      // area_id: "310000310100310118001",
+      // win_status: "STOP",
+      // user_code: "742",
+      // user_name: "谢晨 ",
+      // ticket_uuid: "",
+      // ticket_code: "",
+      let width = 300,
+        height = 100;
+      var canvas = document.createElement("canvas");
+      canvas.width = 300;
+      canvas.height = 100;
+      var ctx = canvas.getContext("2d");
+      ctx.clearRect(0, 0, width, height);
+
+      ctx.fillStyle = "#000000";
+      ctx.fillRect(0, 0, width, height);
+
+      ctx.fillStyle = "#FF0000";
+      ctx.font = "30px Arial";
+      // ctx.fillText(item.id, 15, 60);
+      ctx.fillText(info.win_code, 15, 60);
+
+      ctx.fillStyle = "#FF0000";
+      ctx.beginPath();
+      ctx.lineWidth = "2";
+      ctx.strokeStyle = "#FF0000"; // Green path
+      ctx.moveTo(83, 10);
+      ctx.lineTo(83, 90);
+      ctx.stroke(); // Draw it
+
+      ctx.fillStyle = "#FF0000";
+      ctx.font = "30px Arial";
+      ctx.fillText(item.name, 100, 37);
+
+      if (info.win_status == "STOP") {
+        ctx.fillStyle = "#FF0000";
+        ctx.font = "30px Arial";
+        ctx.fillText("暂停服务", 116, 83);
+      } else {
+        if (info.ticket_code == "") {
+          ctx.fillStyle = "#FF0000";
+          ctx.font = "30px Arial";
+          ctx.fillText("欢迎光临", 116, 83);
+        } else {
+          ctx.fillStyle = "#FF0000";
+          ctx.font = "30px Arial";
+          ctx.fillText("请" + info.ticket_code + "号", 116, 83);
+        }
+      }
+
+      return canvas.toDataURL("image/png");
+    },
+    loopJH() {
+      let that = this;
+      this.getToken().then(() => {
+        let arr = Object.getOwnPropertyNames(that.JHEntityObj);
+        arr.map(function (index) {
+          let obj = that.JHEntityObj[index];
+          let item = obj.item;
+          that.getWindowInfo(obj.item).then((info) => {
+            let image = that.createJHImage(item, info);
+            obj.entity.wall.material = new Cesium.ImageMaterialProperty({
+              image: image,
+              transparent: true,
+            });
+          });
+        });
+      });
+    },
+
     // 地图添加图片
     addImage(viewer, pObj, imgUrl) {
       // // 顺时针

src/store/index.js

@@ -2,11 +2,19 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
+    token: "",
     fenceng: false
   },
   getters: {
+    getToken: function (state) {
+      return state.token
+    },
   },
   mutations: {
+    setToken(state, str) {
+      state.token = str;
+      // Vue.ls.set("token", str);
+    },
     changeFenceng(state, value) {
       state.fenceng = value
     }

src/utils/request.js

@@ -23,13 +23,13 @@ const err = (error) => {
   return Promise.reject(error)
 }
 
-// // request interceptor
-// service.interceptors.request.use(config => {
-//   // 可在此处添加请求自定义 token 请根据实际情况自行修改
-//   // const token = Vue.ls.get('Access-Token')
-//   // config.headers.token = Vue.ls.get('token')
-//   // return config
-// }, err)
+// request interceptor
+service.interceptors.request.use(config => {
+  // 可在此处添加请求自定义 token 请根据实际情况自行修改
+  // const token = Vue.ls.get('Access-Token')
+  config.headers.Authorization = getToken('token')
+  return config
+}, err)
 
 // response interceptor
 service.interceptors.response.use(response => response.data, err)

vue.config.js

@@ -4,8 +4,6 @@ const path = require('path')
 const webpack = require('webpack')
 const CompressionWebpackPlugin = require("compression-webpack-plugin");
 
-// import postCssPxToRem from 'postcss-pxtorem'
-
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
@@ -85,8 +83,17 @@ module.exports = defineConfig({
       ]
     },
   },
- 
+
   devServer: {
     port: 2011,
+    proxy: {
+      '/proxy_oauth/': {
+        target: "http://szlszxdt.qpservice.org.cn",
+        changeOrigin: true,
+        pathRewrite: {
+          '^/proxy_oauth': ''
+        }
+      }
+    }
   }
 })