更新

package-lock.json

@@ -19,6 +19,7 @@
         "hls.js": "^1.4.13",
         "mitt": "^3.0.1",
         "pinia": "^2.1.7",
+        "qrcode": "^1.5.3",
         "video.js": "^8.6.1",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5"
@@ -876,6 +877,25 @@
         "npm": ">=5"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@@ -925,6 +945,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
@@ -951,6 +979,32 @@
       "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
       "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
     },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -986,6 +1040,14 @@
         "date-fns": ">=2.0.0"
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -994,6 +1056,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
     "node_modules/dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz",
@@ -1020,6 +1087,16 @@
         "echarts": "^5.1.2"
       }
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
     "node_modules/es6-promise": {
       "version": "4.2.8",
       "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
@@ -1079,6 +1156,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/flv-h265.js": {
       "version": "1.7.4",
       "resolved": "https://registry.npmmirror.com/flv-h265.js/-/flv-h265.js-1.7.4.tgz",
@@ -1137,6 +1226,14 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -1195,6 +1292,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-function": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz",
@@ -1226,6 +1331,17 @@
       "resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.0.tgz",
       "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
     },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/m3u8-parser": {
       "version": "6.2.0",
       "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-6.2.0.tgz",
@@ -1357,6 +1473,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -1426,6 +1580,14 @@
         "pkcs7": "bin/cli.js"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
@@ -1452,6 +1614,23 @@
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/qrcode": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.3.tgz",
+      "integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
@@ -1469,6 +1648,19 @@
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
       "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
     "node_modules/rollup": {
       "version": "4.5.2",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.5.2.tgz",
@@ -1530,6 +1722,11 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -1538,6 +1735,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1697,6 +1918,62 @@
       "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
       "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/zrender": {
       "version": "5.4.4",
       "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",

package.json

@@ -20,6 +20,7 @@
     "hls.js": "^1.4.13",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",
+    "qrcode": "^1.5.3",
     "video.js": "^8.6.1",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"

src/api/api.js

@@ -15,3 +15,8 @@ export const getfarmCount = (data) => {
 export const getBreedTypeCount = (data) => {
     return axios.get('dataview.farm/breedTypeCount', { params: data });
 }
+
+// 养殖产品溯源
+export const getDeviceCount = (data) => {
+    return axios.get('dataview.device/deviceCount', { params: data });
+}

src/view/delivery/components/center.vue

@@ -326,30 +326,34 @@ const initMap = () => {
           },
         },
         tooltip: {
-          trigger: "item",
+          trigger: 'item',
           formatter: function (params) {
+            // console.log(params);
+            if (params.data) {
               return `<div 
-                    style="background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png');
+                        style="background-image: url(\'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png\');
                         background-size: 100% 100%;
                         display: flex;
-                    justify-content: space-around;
+                        justify-content: center;
                         align-items: center;
                         flex-direction: column;
                         width: 180px;
                         height: 80px;">
-                      <div style="font-size: 20px;font-family: 'ifonts';height: 50px;display: flex;
+                          <div style="font-size: 12px;height: 15px;">基地名称</div>
+                          <div style="font-size: 15px;font-family: 'ifonts';height: 40px;display: flex;
                         justify-content: center;
-                    align-items: center;">${params.name}</div>
+                        align-items: center;">${params.data.name}</div>
                         </div>`;
+            } else return '';
           },
-          position: "top",
+          position: 'top',
           // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
-          backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
+          backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
           borderColor: "rgba(0, 156, 255, 0)",
           padding: 0,
           textStyle: {
-            color: "#fff",
+            color: '#fff'
-          },
+          }
         },
       },
 
@@ -455,22 +459,23 @@ const initMap = () => {
     color: '#1f7df5',
     series: [
       {
-        name: "地点名称",
+        name: "",
-        type: "effectScatter",
+        type: "scatter",
         coordinateSystem: "geo",
-        colorBy: 'series',
-        rippleEffect: {
-          period: 4, //动画时间，值越小速度越快
-          brushType: "fill", //波纹绘制方式 stroke, fill
-          scale: 12, //波纹圆环最大限制，值越大波纹越大
-          number: 2,
-        },
-        // 发散点的大小
-        symbolSize: function (val) {
-          return 4;
-          // return val[2] / 10;
-        },
         data: dataValue,
+        symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
+        symbolSize: [30, 45],
+        hoverSymbolSize: [45, 60],
+        label: {
+          formatter: "",
+          position: "center",
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        }
       },
     ],
   };

src/view/index/components/bottom.vue

@@ -1,5 +1,26 @@
 <script setup>
 import { ref, reactive, onMounted } from "vue"
+import { getDeviceCount } from "@/api/api.js"
+import { useAppStore } from "@/store/app.js";
+
+const appStore = useAppStore();
+
+const leftInfo = ref({
+  offline: 0,
+  online: 0,
+  total: 0
+})
+const initDeviceCount = ()=>{
+  getDeviceCount({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode
+  }).then(res=>{
+    Object.keys(leftInfo.value).forEach(key=>{
+      if(res.data[key]) leftInfo.value[key] = res.data[key];
+    })
+  })
+}
+
 
 const initData = (data) => {
   let arr = [];
@@ -49,6 +70,7 @@ const clickList = (e) => {
 
 onMounted(() => {
   initData();
+  initDeviceCount();
 })
 
 </script>
@@ -65,13 +87,13 @@ onMounted(() => {
           <img src="/src/assets/index_img/ball.png" />
           <div class="count">
             <div>设备总数</div>
-            <div>12</div>
+            <div>{{ leftInfo.total }}</div>
           </div>
         </div>
         <div class="ball1 ball-item">
           <div class="count">
             <img src="/src/assets/index_img/ball1.png" />
-            <span>{{ 6 }}</span>
+            <span>{{ leftInfo.offline }}</span>
           </div>
           离线设备
         </div>
@@ -85,7 +107,7 @@ onMounted(() => {
         <div class="ball3 ball-item">
           <div class="count">
             <img src="/src/assets/index_img/ball1.png" />
-            <span>{{ 6 }}</span>
+            <span>{{ leftInfo.online }}</span>
           </div>
           在线设备
         </div>

src/view/index/components/left.vue

@@ -5,6 +5,7 @@ import videoFlv from "@/components/videoFlv.vue";
 import { getfarmCount, getBreedTypeCount } from "@/api/api.js";
 import { useAppStore } from "@/store/app.js";
 import { useDictStore } from "@/store/dict.js";
+import QRCode from 'qrcode';
 
 const appStore = useAppStore();
 const dictStore = useDictStore();
@@ -13,7 +14,7 @@ const farmInfo = ref({
   farmCount: 0,
   totalScale: 0
 });
-const farmList = ref([]);
+const farmList = ref([{},{},{},{}]);
 const initFarmCount = ()=>{
   getfarmCount({
     areaCode: appStore.address.areaCode,
@@ -35,6 +36,16 @@ const initBreedTypeCount = ()=>{
   }).then((res)=>{
     breedTypeRows.value = res.data.breedTypeRows;
     animalList.value = res.data.animalList;
+    animalList.value.forEach(item=>{
+      QRCode.toDataURL('d_' + item.sn, {
+        margin: 1.5
+      })
+        .then(url => {
+          item.qr_code_img = url;
+        }).catch(err => {  //异常时的处理
+          console.error(err)
+        })
+    })
   })
 }
 
@@ -273,22 +284,31 @@ onMounted(() => {
           <!-- <img src="/src/assets/index_img/video.png" /> -->
           <videoFlv
             style="width: 100%; height: 100%"
-            url="http://192.168.1.32/live/test.live.flv?secret=gqig2yfkkdpimic1uwzy1l5msio0eflm"
+            :url="farmList[0].video_url||''"
           />
-          <div class="title">泸县原生态养殖基地</div>
+          <div class="title">{{ farmList[0].farm_name }}</div>
         </div>
         <div class="right">
           <div class="item">
-            <img src="/src/assets/index_img/video.png" />
+            <videoFlv
-            <div class="title">泸县原生态养殖基地</div>
+              style="width: 100%; height: 100%"
+              :url="farmList[1].video_url||''"
+            />
+            <div class="title">{{ farmList[1].farm_name }}</div>
           </div>
           <div class="item">
-            <img src="/src/assets/index_img/video.png" />
+            <videoFlv
-            <div class="title">泸县原生态养殖基地</div>
+              style="width: 100%; height: 100%"
+              :url="farmList[2].video_url||''"
+            />
+            <div class="title">{{ farmList[2].farm_name }}</div>
           </div>
           <div class="item">
-            <img src="/src/assets/index_img/video.png" />
+            <videoFlv
-            <div class="title">泸县原生态养殖基地</div>
+              style="width: 100%; height: 100%"
+              :url="farmList[3].video_url||''"
+            />
+            <div class="title">{{ farmList[3].farm_name }}</div>
           </div>
           <div class="item">
             <img src="/src/assets/index_img/video.png" />
@@ -313,19 +333,24 @@ onMounted(() => {
             <div>品类名称: {{ item.brand }}</div>
             <div>溯源编码: {{ item.sn }}</div>
           </div>
-          <img src="/src/assets/index_img/icon1.png" />
+          <img class="img" :src="item.qr_code_img" />
         </div>
       </div>
     </div>
     <transition name="fade" appear>
       <div class="box4" v-show="show">
         <div class="vedio">
-          <div class="item" v-for="item in 4" :key="item">
+          <div class="item" v-for="(item, index) in farmList" :key="index">
             <div class="name">
               <img src="/src/assets/index_img/icon3.png" />
-              <span>泸县原生态养殖基地</span>
+              <span>{{ item.farm_name }}</span>
+            </div>
+            <div class="item-vedio">
+              <videoFlv
+                style="width: 100%; height: 100%"
+                :url="item.video_url||''"
+              />
             </div>
-            <img src="/src/assets/index_img/video.png" class="item-vedio" />
           </div>
         </div>
         <div class="btn" @click="show = false">关闭弹窗</div>
@@ -495,10 +520,11 @@ onMounted(() => {
         padding-left: 1.5rem;
         padding-right: 1rem;
         font-size: 0.7rem;
-        img {
+        .img {
           flex-shrink: 0;
           width: auto;
-          height: 80%;
+          height: 60%;
+          padding-right: 5px;
         }
         .name {
           text-align: left;

src/view/index/components/right.vue

@@ -3,27 +3,27 @@ import { ref, reactive, onMounted } from "vue"
 
 const dataList = ref([
   {
-    icon: '/src/assets/index_img/data1.png',
+    icon: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a1509202402051340429805.png',
     name: '噪音'
   },
   {
-    icon: '/src/assets/index_img/data2.png',
+    icon: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/898de202402051341067637.png',
     name: '防火'
   },
   {
-    icon: '/src/assets/index_img/data3.png',
+    icon: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/6a566202402051341226005.png',
     name: '空气湿度'
   },
   {
-    icon: '/src/assets/index_img/data4.png',
+    icon: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/031fc202402051341469763.png',
     name: '甲烷'
   },
   {
-    icon: '/src/assets/index_img/data5.png',
+    icon: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/02c05202402051342044841.png',
     name: '氮气'
   },
   {
-    icon: '/src/assets/index_img/data6.png',
+    icon: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/4667e202402051342207521.png',
     name: '空气温度'
   },
 ])