fix:修改播放⑦

web

2025-05-26 9f4609f4822222632ab2fcf85d58b0b4b8459160

fix:修改播放⑦

 package-lock.json

@@ -15,9 +15,9 @@
        "axios": "0.27.2",
        "echarts": "^5.5.1",
        "element-plus": "^2.5.0",
        "ezuikit-js": "^8.1.9-beta.3",
        "file-saver": "2.0.5",
        "fuse.js": "6.6.2",
        "html2canvas": "^1.4.1",
        "js-cookie": "3.0.5",
        "jsencrypt": "3.3.2",
        "moment": "^2.30.1",
@@ -445,67 +445,6 @@
        "node": ">=12"
      }
    },
    "node_modules/@ezuikit/player-ezopen": {
      "version": "8.1.9-beta.3",
      "resolved": "https://registry.npmjs.org/@ezuikit/player-ezopen/-/player-ezopen-8.1.9-beta.3.tgz",
      "integrity": "sha512-4YEA/Otp/lW8iiCOhgajhpkrbdFePUN3oMnSumrvYvDfiIMAKJLAiAmCCiXieoJ8hIzrCeXKjYUPgY5/HALHdg==",
      "dependencies": {
        "@ezuikit/player-plugin-record": "8.1.8-beta.3",
        "@ezuikit/utils-i18n": "^1.0.1",
        "@ezuikit/utils-logger": "^1.0.1",
        "@ezuikit/utils-service": "1.0.1",
        "@ezuikit/utils-tools": "^1.0.4",
        "@juggle/resize-observer": "^3.4.0",
        "dayjs": "^1.11.10",
        "deepmerge": "^4.3.1",
        "eventemitter3": "^5.0.1",
        "jquery": "^3.7.1",
        "screenfull": "^5.2.0",
        "ua-parser-js": "1.0.37"
      }
    },
    "node_modules/@ezuikit/player-ezopen/node_modules/eventemitter3": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
    },
    "node_modules/@ezuikit/player-plugin-record": {
      "version": "8.1.8-beta.3",
      "resolved": "https://registry.npmjs.org/@ezuikit/player-plugin-record/-/player-plugin-record-8.1.8-beta.3.tgz",
      "integrity": "sha512-YcQ5MR8zyg8b+o/ktr6r+YCXkiEX43HVmzVkfJsERgaokaHzoNIpOomEl51j/13gcemjSXuN6i1apCRC2v32pg=="
    },
    "node_modules/@ezuikit/utils-collect": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/@ezuikit/utils-collect/-/utils-collect-0.1.1.tgz",
      "integrity": "sha512-BgEOnTtAq8rQRBAKv5rLXbQLGOnfOZ6NS0QTmiviey80JbMJlxrLiqmjL5lxvkm4JtCcXCtSgPA4tskQKN4eDA=="
    },
    "node_modules/@ezuikit/utils-i18n": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@ezuikit/utils-i18n/-/utils-i18n-1.0.1.tgz",
      "integrity": "sha512-uUjN3ADHV2ZG4QznuA7FB89/ck8AGV4qS8hm/sqeSA6/ie4ryYw8MS4wIv71WgPBIgIVDfASuEapyLOwq7R2aQ==",
      "dependencies": {
        "i18n-js": "^4.3.2"
      }
    },
    "node_modules/@ezuikit/utils-logger": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@ezuikit/utils-logger/-/utils-logger-1.0.1.tgz",
      "integrity": "sha512-qak0MXh4vWZCji3aSCfHdWR3EbZCaqS0iMT8/QWuWPRr0vDmTRMP3kFOAw1MuMraR0ocjPBE2PaTEmUuwVqaAw=="
    },
    "node_modules/@ezuikit/utils-service": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@ezuikit/utils-service/-/utils-service-1.0.1.tgz",
      "integrity": "sha512-iNjYuU7AScBJxvKBM9PjiGI2y64QJNPT/H1Fy/Y7ZIAlw4DO//TP+x50qCho+i+EOUpWLtOqBQvtRb7a0O4X4Q==",
      "dependencies": {
        "@ezuikit/utils-tools": "^1.0.1",
        "dayjs": "^1.11.10"
      }
    },
    "node_modules/@ezuikit/utils-tools": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/@ezuikit/utils-tools/-/utils-tools-1.0.4.tgz",
      "integrity": "sha512-w+LZ03qowSqrSqDnuONKPpmEn0cuCaF2pkgHL1YicR0of/ZelCho5X8cy5TXQe7UsrQkIM2M7vVennv5KnAdpQ=="
    },
    "node_modules/@floating-ui/core": {
      "version": "1.6.4",
      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.4.tgz",
@@ -532,11 +471,6 @@
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
    },
    "node_modules/@juggle/resize-observer": {
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
@@ -1079,11 +1013,6 @@
        }
      }
    },
    "node_modules/abortcontroller-polyfill": {
      "version": "1.7.8",
      "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.8.tgz",
      "integrity": "sha512-9f1iZ2uWh92VcrU9Y8x+LdM4DLj75VE0MJB8zuF1iUnroEptStw+DQ8EQPMUdfe5k+PkB1uUfDQfWbhstH8LrQ=="
    },
    "node_modules/acorn": {
      "version": "8.12.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1295,19 +1224,19 @@
        "node": ">=0.10.0"
      }
    },
    "node_modules/base64-arraybuffer": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
      "engines": {
        "node": ">= 0.6.0"
      }
    },
    "node_modules/big.js": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
      "dev": true,
      "engines": {
        "node": "*"
      }
    },
    "node_modules/bignumber.js": {
      "version": "9.2.1",
      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.2.1.tgz",
      "integrity": "sha512-+NzaKgOUvInq9TIUZ1+DRspzf/HApkCwD4btfuasFTdrfnOxqx853TgDpMolp+uv4RpRp7bPcEU2zKr9+fRmyw==",
      "engines": {
        "node": "*"
      }
@@ -1589,6 +1518,14 @@
        "node": ">= 0.10"
      }
    },
    "node_modules/css-line-break": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
      "dependencies": {
        "utrie": "^1.0.2"
      }
    },
    "node_modules/css-select": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -1767,11 +1704,6 @@
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz",
      "integrity": "sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg=="
    },
    "node_modules/debounce-promise": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
      "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
    },
    "node_modules/debug": {
      "version": "4.3.5",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
@@ -1815,14 +1747,6 @@
      },
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
    },
    "node_modules/deepmerge": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/define-data-property": {
@@ -1876,11 +1800,6 @@
      "engines": {
        "node": ">=0.4.0"
      }
    },
    "node_modules/delegate": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
    },
    "node_modules/dom-serializer": {
      "version": "0.2.2",
@@ -2365,28 +2284,6 @@
        "node": ">=0.10.0"
      }
    },
    "node_modules/ezuikit-js": {
      "version": "8.1.9-beta.3",
      "resolved": "https://registry.npmjs.org/ezuikit-js/-/ezuikit-js-8.1.9-beta.3.tgz",
      "integrity": "sha512-BtpkKOafxRmZroVcol5yOpASVHi1ddUy7DGzFb/TLkoh3VER7xEOzJepiK0O7dOsXAMmxXwooMLO+DIfMXFXnw==",
      "dependencies": {
        "@ezuikit/player-ezopen": "8.1.9-beta.3",
        "@ezuikit/utils-collect": "0.1.1",
        "@ezuikit/utils-i18n": "^1.0.1",
        "@ezuikit/utils-logger": "^1.0.1",
        "@ezuikit/utils-tools": "^1.0.4",
        "@juggle/resize-observer": "^3.4.0",
        "abortcontroller-polyfill": "^1.7.5",
        "debounce-promise": "^3.1.2",
        "deepmerge": "^4.3.1",
        "delegate": "3.2.0",
        "formdata-polyfill": "^4.0.10",
        "jquery": "^3.3.1",
        "lodash-es": "^4.17.21",
        "screenfull": "^5.2.0",
        "uuid": "^8.3.0"
      }
    },
    "node_modules/fast-diff": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
@@ -2415,28 +2312,6 @@
      "dev": true,
      "dependencies": {
        "reusify": "^1.0.4"
      }
    },
    "node_modules/fetch-blob": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/jimmywarting"
        },
        {
          "type": "paypal",
          "url": "https://paypal.me/jimmywarting"
        }
      ],
      "dependencies": {
        "node-domexception": "^1.0.0",
        "web-streams-polyfill": "^3.0.3"
      },
      "engines": {
        "node": "^12.20 || >= 14.13"
      }
    },
    "node_modules/file-saver": {
@@ -2504,17 +2379,6 @@
      },
      "engines": {
        "node": ">= 6"
      }
    },
    "node_modules/formdata-polyfill": {
      "version": "4.0.10",
      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
      "dependencies": {
        "fetch-blob": "^3.1.2"
      },
      "engines": {
        "node": ">=12.20.0"
      }
    },
    "node_modules/fragment-cache": {
@@ -2857,6 +2721,18 @@
        "he": "bin/he"
      }
    },
    "node_modules/html2canvas": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
      "dependencies": {
        "css-line-break": "^2.1.0",
        "text-segmentation": "^1.0.3"
      },
      "engines": {
        "node": ">=8.0.0"
      }
    },
    "node_modules/htmlparser2": {
      "version": "3.10.1",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -2869,16 +2745,6 @@
        "entities": "^1.1.1",
        "inherits": "^2.0.1",
        "readable-stream": "^3.1.1"
      }
    },
    "node_modules/i18n-js": {
      "version": "4.5.1",
      "resolved": "https://registry.npmjs.org/i18n-js/-/i18n-js-4.5.1.tgz",
      "integrity": "sha512-n7jojFj1WC0tztgr0I8jqTXuIlY1xNzXnC3mjKX/YjJhimdM+jXM8vOmn9d3xQFNC6qDHJ4ovhdrGXrRXLIGkA==",
      "dependencies": {
        "bignumber.js": "*",
        "lodash": "*",
        "make-plural": "*"
      }
    },
    "node_modules/image-size": {
@@ -3284,11 +3150,6 @@
        "node": ">=0.10.0"
      }
    },
    "node_modules/jquery": {
      "version": "3.7.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
    },
    "node_modules/js-base64": {
      "version": "2.6.4",
      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -3414,11 +3275,6 @@
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.4.15"
      }
    },
    "node_modules/make-plural": {
      "version": "7.4.0",
      "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-7.4.0.tgz",
      "integrity": "sha512-4/gC9KVNTV6pvYg2gFeQYTW3mWaoJt7WZE5vrp1KnQDgW92JtYZnzmZT81oj/dUTqAIu0ufI2x3dkgu3bB1tYg=="
    },
    "node_modules/map-cache": {
      "version": "0.2.2",
@@ -3673,24 +3529,6 @@
      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/node-domexception": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/jimmywarting"
        },
        {
          "type": "github",
          "url": "https://paypal.me/jimmywarting"
        }
      ],
      "engines": {
        "node": ">=10.5.0"
      }
    },
    "node_modules/normalize-path": {
@@ -4488,17 +4326,6 @@
        "node": ">=14.0.0"
      }
    },
    "node_modules/screenfull": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
      "engines": {
        "node": ">=0.10.0"
      },
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/scule": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@@ -5149,6 +4976,14 @@
        "node": ">=10.13.0"
      }
    },
    "node_modules/text-segmentation": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
      "dependencies": {
        "utrie": "^1.0.2"
      }
    },
    "node_modules/to-object-path": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
@@ -5372,28 +5207,6 @@
      },
      "engines": {
        "node": ">=14.17"
      }
    },
    "node_modules/ua-parser-js": {
      "version": "1.0.37",
      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
      "funding": [
        {
          "type": "opencollective",
          "url": "https://opencollective.com/ua-parser-js"
        },
        {
          "type": "paypal",
          "url": "https://paypal.me/faisalman"
        },
        {
          "type": "github",
          "url": "https://github.com/sponsors/faisalman"
        }
      ],
      "engines": {
        "node": "*"
      }
    },
    "node_modules/ufo": {
@@ -5628,12 +5441,12 @@
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "dev": true
    },
    "node_modules/uuid": {
      "version": "8.3.2",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
      "bin": {
        "uuid": "dist/bin/uuid"
    "node_modules/utrie": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
      "dependencies": {
        "base64-arraybuffer": "^1.0.2"
      }
    },
    "node_modules/vary": {
@@ -5776,14 +5589,6 @@
      },
      "peerDependencies": {
        "vue": "^3.2.0"
      }
    },
    "node_modules/web-streams-polyfill": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
      "engines": {
        "node": ">= 8"
      }
    },
    "node_modules/webpack-sources": {

 package.json

@@ -22,9 +22,9 @@
    "axios": "0.27.2",
    "echarts": "^5.5.1",
    "element-plus": "^2.5.0",
    "ezuikit-js": "^8.1.9-beta.3",
    "file-saver": "2.0.5",
    "fuse.js": "6.6.2",
    "html2canvas": "^1.4.1",
    "js-cookie": "3.0.5",
    "jsencrypt": "3.3.2",
    "moment": "^2.30.1",

 src/components/VideoPlayer/VideoPlayer.vue

@@ -62,7 +62,7 @@
}

const handleEnter = () => {
    if(!showPlay.value && !showLoading.value) {
    if(props.item.deviceId && props.item.channelId && !showPlay.value && !showLoading.value) {
        showPause.value = true;
    }
}
@@ -92,10 +92,17 @@
                audio: true,
                recorder: false,
            },
            controlAutoHide: true,
            forceNoOffscreen: true,
            controlAutoHide: false,
            forceNoOffscreen: false,
            hasAudio: false,
            heartTimeout: 5,
            heartTimeoutReplay:true,
            heartTimeoutReplayTimes: 3,
            hiddenAutoPause: false,
            isNotMute: false,
            heartTimeoutReplay:false,
            hotKey: true,
            isFlv: false,
            recordType: "mp4",
        })
    );
}
@@ -107,6 +114,9 @@
    if(props.autoPlay && props.item.deviceId && props.item.channelId) {
        handlePlayer()
    }
    if(!props.item.deviceId || !props.item.channelId) {
        showPlay.value = false;
    }
};

onMounted(() => {

 src/views/screen/flow/graphic/components/FullScreenVideo.vue

文件已删除

 src/views/screen/flow/graphic/index.vue

@@ -1,11 +1,11 @@
<script setup>
import {onMounted, ref, onUnmounted} from "vue";
import {onMounted, ref} from "vue";
import {getUserType} from '@/utils/auth.js'
import {getFlowPointList} from '@/api/screen/index'
import {getFlowVideoData} from '@/api/screen/graphic/index.js'
import EZUIKit from 'ezuikit-js';
import {useRoute, useRouter} from "vue-router";
import FullScreenVideo from "./components/FullScreenVideo.vue";
import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
import html2canvas from 'html2canvas';

const route = useRoute();
const router = useRouter();
@@ -14,26 +14,28 @@
const userType = ref(getUserType())
const searchVal = ref('')
const playerData = ref([])
const hasFullScreen = ref(false)
const fullIndex = ref()
let ezKitList = []; //视频组件实例数组
let ezKitId = []; //视频盒子id数组
let timer = null;

// 全屏弹窗
const handleFullScreen = (index) => {
    fullIndex.value = index;
    hasFullScreen.value = true;
}

// 关闭全屏弹窗
const closeFullScreen = () => {
    hasFullScreen.value = false;
    const dom = document.getElementById(`player${index}`)
    dom.requestFullscreen()
}

// 抓拍
const handleSnap = (index) => {
    ezKitList[index].capturePicture(`capture-${new Date().getTime()}`, 0.8);
const handleSnap = async (index) => {
    const dom = document.getElementById(`player${index}`)
    const canvas = await html2canvas(dom, {
        backgroundColor: null, // 透明背景
        scale: 2, // 提高分辨率
        logging: false, // 关闭日志
        useCORS: true, // 允许跨域图片
        allowTaint: true, // 允许污染图片
    });
    const imgUrl = canvas.toDataURL('image/png');
    const adom = document.createElement("a");
    adom.download = `截图_${new Date().getTime()}.png`
    adom.href = imgUrl;
    adom.click()
}

// 获取监控点菜单
@@ -45,63 +47,27 @@

// 选择菜单
const handleSelect = (id) => {
    ezKitList = []
    ezKitId = []
    playerData.value = []
    clearInterval(timer)
    getPlayerList(id)
}

// 搜索
const handleSearch = () => {
    ezKitList = []
    ezKitId = []
    playerData.value = []
    clearInterval(timer)
    getPlayerList()
}

// 获取监控点
const getPlayerList = async (id) => {
    getFlowVideoData({pointId: id, pointName: searchVal.value}).then(async res => {
        res.data.forEach((item, index) => {
            ezKitId[index] = `ezuikitPlayer${index}`
        })
        playerData.value = res.data
        await nextTick()

        // 渲染视频
        res.data.forEach((item, index) => {
            ezKitList[index] = new EZUIKit.EZUIKitPlayer({
                id: ezKitId[index],
                url: item.url,
                accessToken: item.accessToken,
            })
        })
    })

    //  挂载定时器, 只获取数据，不重新渲染视频节点
    timer = setInterval(() => {
        getFlowVideoData({pointId: id, pointName: searchVal.value}).then(res => {
            playerData.value = res.data
        })
    }, 10000)
}


onMounted(() => {
    getMoitorList()
    getPlayerList(route.params.id || '')
})

onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
    // 停止播放
    ezKitList?.forEach(item => {
        item.stop();
    })
})
</script>

@@ -149,7 +115,9 @@
                <div class="monitor-list">
                    <div class="item" v-for="(item, index) in playerData" :key="index">
                        <div class="title">{{ item.pointName }}</div>
                        <div class="videoBox" :id="ezKitId[index]"></div>
                        <div class="item-video" :id="`player${index}`">
                            <VideoPlayer :item="item" :autoPlay="true" />
                        </div>
                        <div class="info">
                            <div class="info-list">
                                <div class="info-item">
@@ -197,11 +165,6 @@
                </div>
            </div>
        </div>
        <FullScreenVideo
            v-if="hasFullScreen"
            :data="playerData[fullIndex]"
            @close="closeFullScreen"
        />
    </div>
</template>

@@ -301,7 +264,7 @@
                        color: #fff;
                    }

                    .videoBox {
                    .item-video {
                        width: 100%;
                        height: 60%;
                        background-color: #000;