提交

ruoyi-ui/package.json

@@ -50,6 +50,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "mqtt": "^2.18.9",
     "nprogress": "0.2.0",
     "quill": "2.0.2",
     "screenfull": "5.0.2",

ruoyi-ui/public/index.html

@@ -7,6 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
+    <script src="./static/webrtcstreamer.js" charset="utf-8"></script>
+    <script src="./static/adapter.min.js" charset="utf-8"></script>
+    <!-- <div>123</div> -->
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>
     html,
@@ -118,7 +121,9 @@
       top: 0;
       width: 51%;
       height: 100%;
-      background: #7171C6;
+      /* background: #7171C6; */
+      background: linear-gradient(to top,#c7f2b9,#aadae6);
+
       z-index: 1000;
       -webkit-transform: translateX(0);
       -ms-transform: translateX(0);

ruoyi-ui/public/static/adapter.min.js

@@ -0,0 +1,3514 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.adapter = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+/*
+ *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+
+'use strict';
+
+var _adapter_factory = require('./adapter_factory.js');
+
+var adapter = (0, _adapter_factory.adapterFactory)({ window: typeof window === 'undefined' ? undefined : window });
+module.exports = adapter; // this is the difference from adapter_core.
+
+},{"./adapter_factory.js":2}],2:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.adapterFactory = adapterFactory;
+
+var _utils = require('./utils');
+
+var utils = _interopRequireWildcard(_utils);
+
+var _chrome_shim = require('./chrome/chrome_shim');
+
+var chromeShim = _interopRequireWildcard(_chrome_shim);
+
+var _firefox_shim = require('./firefox/firefox_shim');
+
+var firefoxShim = _interopRequireWildcard(_firefox_shim);
+
+var _safari_shim = require('./safari/safari_shim');
+
+var safariShim = _interopRequireWildcard(_safari_shim);
+
+var _common_shim = require('./common_shim');
+
+var commonShim = _interopRequireWildcard(_common_shim);
+
+var _sdp = require('sdp');
+
+var sdp = _interopRequireWildcard(_sdp);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+// Shimming starts here.
+/*
+ *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+function adapterFactory() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      window = _ref.window;
+
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    shimChrome: true,
+    shimFirefox: true,
+    shimSafari: true
+  };
+
+  // Utils.
+  var logging = utils.log;
+  var browserDetails = utils.detectBrowser(window);
+
+  var adapter = {
+    browserDetails: browserDetails,
+    commonShim: commonShim,
+    extractVersion: utils.extractVersion,
+    disableLog: utils.disableLog,
+    disableWarnings: utils.disableWarnings,
+    // Expose sdp as a convenience. For production apps include directly.
+    sdp: sdp
+  };
+
+  // Shim browser if found.
+  switch (browserDetails.browser) {
+    case 'chrome':
+      if (!chromeShim || !chromeShim.shimPeerConnection || !options.shimChrome) {
+        logging('Chrome shim is not included in this adapter release.');
+        return adapter;
+      }
+      if (browserDetails.version === null) {
+        logging('Chrome shim can not determine version, not shimming.');
+        return adapter;
+      }
+      logging('adapter.js shimming chrome.');
+      // Export to the adapter global object visible in the browser.
+      adapter.browserShim = chromeShim;
+
+      // Must be called before shimPeerConnection.
+      commonShim.shimAddIceCandidateNullOrEmpty(window, browserDetails);
+      commonShim.shimParameterlessSetLocalDescription(window, browserDetails);
+
+      chromeShim.shimGetUserMedia(window, browserDetails);
+      chromeShim.shimMediaStream(window, browserDetails);
+      chromeShim.shimPeerConnection(window, browserDetails);
+      chromeShim.shimOnTrack(window, browserDetails);
+      chromeShim.shimAddTrackRemoveTrack(window, browserDetails);
+      chromeShim.shimGetSendersWithDtmf(window, browserDetails);
+      chromeShim.shimGetStats(window, browserDetails);
+      chromeShim.shimSenderReceiverGetStats(window, browserDetails);
+      chromeShim.fixNegotiationNeeded(window, browserDetails);
+
+      commonShim.shimRTCIceCandidate(window, browserDetails);
+      commonShim.shimRTCIceCandidateRelayProtocol(window, browserDetails);
+      commonShim.shimConnectionState(window, browserDetails);
+      commonShim.shimMaxMessageSize(window, browserDetails);
+      commonShim.shimSendThrowTypeError(window, browserDetails);
+      commonShim.removeExtmapAllowMixed(window, browserDetails);
+      break;
+    case 'firefox':
+      if (!firefoxShim || !firefoxShim.shimPeerConnection || !options.shimFirefox) {
+        logging('Firefox shim is not included in this adapter release.');
+        return adapter;
+      }
+      logging('adapter.js shimming firefox.');
+      // Export to the adapter global object visible in the browser.
+      adapter.browserShim = firefoxShim;
+
+      // Must be called before shimPeerConnection.
+      commonShim.shimAddIceCandidateNullOrEmpty(window, browserDetails);
+      commonShim.shimParameterlessSetLocalDescription(window, browserDetails);
+
+      firefoxShim.shimGetUserMedia(window, browserDetails);
+      firefoxShim.shimPeerConnection(window, browserDetails);
+      firefoxShim.shimOnTrack(window, browserDetails);
+      firefoxShim.shimRemoveStream(window, browserDetails);
+      firefoxShim.shimSenderGetStats(window, browserDetails);
+      firefoxShim.shimReceiverGetStats(window, browserDetails);
+      firefoxShim.shimRTCDataChannel(window, browserDetails);
+      firefoxShim.shimAddTransceiver(window, browserDetails);
+      firefoxShim.shimGetParameters(window, browserDetails);
+      firefoxShim.shimCreateOffer(window, browserDetails);
+      firefoxShim.shimCreateAnswer(window, browserDetails);
+
+      commonShim.shimRTCIceCandidate(window, browserDetails);
+      commonShim.shimConnectionState(window, browserDetails);
+      commonShim.shimMaxMessageSize(window, browserDetails);
+      commonShim.shimSendThrowTypeError(window, browserDetails);
+      break;
+    case 'safari':
+      if (!safariShim || !options.shimSafari) {
+        logging('Safari shim is not included in this adapter release.');
+        return adapter;
+      }
+      logging('adapter.js shimming safari.');
+      // Export to the adapter global object visible in the browser.
+      adapter.browserShim = safariShim;
+
+      // Must be called before shimCallbackAPI.
+      commonShim.shimAddIceCandidateNullOrEmpty(window, browserDetails);
+      commonShim.shimParameterlessSetLocalDescription(window, browserDetails);
+
+      safariShim.shimRTCIceServerUrls(window, browserDetails);
+      safariShim.shimCreateOfferLegacy(window, browserDetails);
+      safariShim.shimCallbacksAPI(window, browserDetails);
+      safariShim.shimLocalStreamsAPI(window, browserDetails);
+      safariShim.shimRemoteStreamsAPI(window, browserDetails);
+      safariShim.shimTrackEventTransceiver(window, browserDetails);
+      safariShim.shimGetUserMedia(window, browserDetails);
+      safariShim.shimAudioContext(window, browserDetails);
+
+      commonShim.shimRTCIceCandidate(window, browserDetails);
+      commonShim.shimRTCIceCandidateRelayProtocol(window, browserDetails);
+      commonShim.shimMaxMessageSize(window, browserDetails);
+      commonShim.shimSendThrowTypeError(window, browserDetails);
+      commonShim.removeExtmapAllowMixed(window, browserDetails);
+      break;
+    default:
+      logging('Unsupported browser!');
+      break;
+  }
+
+  return adapter;
+}
+
+// Browser shims.
+
+},{"./chrome/chrome_shim":3,"./common_shim":6,"./firefox/firefox_shim":7,"./safari/safari_shim":10,"./utils":11,"sdp":12}],3:[function(require,module,exports){
+/*
+ *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shimGetDisplayMedia = exports.shimGetUserMedia = undefined;
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _getusermedia = require('./getusermedia');
+
+Object.defineProperty(exports, 'shimGetUserMedia', {
+  enumerable: true,
+  get: function get() {
+    return _getusermedia.shimGetUserMedia;
+  }
+});
+
+var _getdisplaymedia = require('./getdisplaymedia');
+
+Object.defineProperty(exports, 'shimGetDisplayMedia', {
+  enumerable: true,
+  get: function get() {
+    return _getdisplaymedia.shimGetDisplayMedia;
+  }
+});
+exports.shimMediaStream = shimMediaStream;
+exports.shimOnTrack = shimOnTrack;
+exports.shimGetSendersWithDtmf = shimGetSendersWithDtmf;
+exports.shimGetStats = shimGetStats;
+exports.shimSenderReceiverGetStats = shimSenderReceiverGetStats;
+exports.shimAddTrackRemoveTrackWithNative = shimAddTrackRemoveTrackWithNative;
+exports.shimAddTrackRemoveTrack = shimAddTrackRemoveTrack;
+exports.shimPeerConnection = shimPeerConnection;
+exports.fixNegotiationNeeded = fixNegotiationNeeded;
+
+var _utils = require('../utils.js');
+
+var utils = _interopRequireWildcard(_utils);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function shimMediaStream(window) {
+  window.MediaStream = window.MediaStream || window.webkitMediaStream;
+}
+
+function shimOnTrack(window) {
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection && !('ontrack' in window.RTCPeerConnection.prototype)) {
+    Object.defineProperty(window.RTCPeerConnection.prototype, 'ontrack', {
+      get: function get() {
+        return this._ontrack;
+      },
+      set: function set(f) {
+        if (this._ontrack) {
+          this.removeEventListener('track', this._ontrack);
+        }
+        this.addEventListener('track', this._ontrack = f);
+      },
+
+      enumerable: true,
+      configurable: true
+    });
+    var origSetRemoteDescription = window.RTCPeerConnection.prototype.setRemoteDescription;
+    window.RTCPeerConnection.prototype.setRemoteDescription = function setRemoteDescription() {
+      var _this = this;
+
+      if (!this._ontrackpoly) {
+        this._ontrackpoly = function (e) {
+          // onaddstream does not fire when a track is added to an existing
+          // stream. But stream.onaddtrack is implemented so we use that.
+          e.stream.addEventListener('addtrack', function (te) {
+            var receiver = void 0;
+            if (window.RTCPeerConnection.prototype.getReceivers) {
+              receiver = _this.getReceivers().find(function (r) {
+                return r.track && r.track.id === te.track.id;
+              });
+            } else {
+              receiver = { track: te.track };
+            }
+
+            var event = new Event('track');
+            event.track = te.track;
+            event.receiver = receiver;
+            event.transceiver = { receiver: receiver };
+            event.streams = [e.stream];
+            _this.dispatchEvent(event);
+          });
+          e.stream.getTracks().forEach(function (track) {
+            var receiver = void 0;
+            if (window.RTCPeerConnection.prototype.getReceivers) {
+              receiver = _this.getReceivers().find(function (r) {
+                return r.track && r.track.id === track.id;
+              });
+            } else {
+              receiver = { track: track };
+            }
+            var event = new Event('track');
+            event.track = track;
+            event.receiver = receiver;
+            event.transceiver = { receiver: receiver };
+            event.streams = [e.stream];
+            _this.dispatchEvent(event);
+          });
+        };
+        this.addEventListener('addstream', this._ontrackpoly);
+      }
+      return origSetRemoteDescription.apply(this, arguments);
+    };
+  } else {
+    // even if RTCRtpTransceiver is in window, it is only used and
+    // emitted in unified-plan. Unfortunately this means we need
+    // to unconditionally wrap the event.
+    utils.wrapPeerConnectionEvent(window, 'track', function (e) {
+      if (!e.transceiver) {
+        Object.defineProperty(e, 'transceiver', { value: { receiver: e.receiver } });
+      }
+      return e;
+    });
+  }
+}
+
+function shimGetSendersWithDtmf(window) {
+  // Overrides addTrack/removeTrack, depends on shimAddTrackRemoveTrack.
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection && !('getSenders' in window.RTCPeerConnection.prototype) && 'createDTMFSender' in window.RTCPeerConnection.prototype) {
+    var shimSenderWithDtmf = function shimSenderWithDtmf(pc, track) {
+      return {
+        track: track,
+        get dtmf() {
+          if (this._dtmf === undefined) {
+            if (track.kind === 'audio') {
+              this._dtmf = pc.createDTMFSender(track);
+            } else {
+              this._dtmf = null;
+            }
+          }
+          return this._dtmf;
+        },
+        _pc: pc
+      };
+    };
+
+    // augment addTrack when getSenders is not available.
+    if (!window.RTCPeerConnection.prototype.getSenders) {
+      window.RTCPeerConnection.prototype.getSenders = function getSenders() {
+        this._senders = this._senders || [];
+        return this._senders.slice(); // return a copy of the internal state.
+      };
+      var origAddTrack = window.RTCPeerConnection.prototype.addTrack;
+      window.RTCPeerConnection.prototype.addTrack = function addTrack(track, stream) {
+        var sender = origAddTrack.apply(this, arguments);
+        if (!sender) {
+          sender = shimSenderWithDtmf(this, track);
+          this._senders.push(sender);
+        }
+        return sender;
+      };
+
+      var origRemoveTrack = window.RTCPeerConnection.prototype.removeTrack;
+      window.RTCPeerConnection.prototype.removeTrack = function removeTrack(sender) {
+        origRemoveTrack.apply(this, arguments);
+        var idx = this._senders.indexOf(sender);
+        if (idx !== -1) {
+          this._senders.splice(idx, 1);
+        }
+      };
+    }
+    var origAddStream = window.RTCPeerConnection.prototype.addStream;
+    window.RTCPeerConnection.prototype.addStream = function addStream(stream) {
+      var _this2 = this;
+
+      this._senders = this._senders || [];
+      origAddStream.apply(this, [stream]);
+      stream.getTracks().forEach(function (track) {
+        _this2._senders.push(shimSenderWithDtmf(_this2, track));
+      });
+    };
+
+    var origRemoveStream = window.RTCPeerConnection.prototype.removeStream;
+    window.RTCPeerConnection.prototype.removeStream = function removeStream(stream) {
+      var _this3 = this;
+
+      this._senders = this._senders || [];
+      origRemoveStream.apply(this, [stream]);
+
+      stream.getTracks().forEach(function (track) {
+        var sender = _this3._senders.find(function (s) {
+          return s.track === track;
+        });
+        if (sender) {
+          // remove sender
+          _this3._senders.splice(_this3._senders.indexOf(sender), 1);
+        }
+      });
+    };
+  } else if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection && 'getSenders' in window.RTCPeerConnection.prototype && 'createDTMFSender' in window.RTCPeerConnection.prototype && window.RTCRtpSender && !('dtmf' in window.RTCRtpSender.prototype)) {
+    var origGetSenders = window.RTCPeerConnection.prototype.getSenders;
+    window.RTCPeerConnection.prototype.getSenders = function getSenders() {
+      var _this4 = this;
+
+      var senders = origGetSenders.apply(this, []);
+      senders.forEach(function (sender) {
+        return sender._pc = _this4;
+      });
+      return senders;
+    };
+
+    Object.defineProperty(window.RTCRtpSender.prototype, 'dtmf', {
+      get: function get() {
+        if (this._dtmf === undefined) {
+          if (this.track.kind === 'audio') {
+            this._dtmf = this._pc.createDTMFSender(this.track);
+          } else {
+            this._dtmf = null;
+          }
+        }
+        return this._dtmf;
+      }
+    });
+  }
+}
+
+function shimGetStats(window) {
+  if (!window.RTCPeerConnection) {
+    return;
+  }
+
+  var origGetStats = window.RTCPeerConnection.prototype.getStats;
+  window.RTCPeerConnection.prototype.getStats = function getStats() {
+    var _this5 = this;
+
+    var _arguments = Array.prototype.slice.call(arguments),
+        selector = _arguments[0],
+        onSucc = _arguments[1],
+        onErr = _arguments[2];
+
+    // If selector is a function then we are in the old style stats so just
+    // pass back the original getStats format to avoid breaking old users.
+
+
+    if (arguments.length > 0 && typeof selector === 'function') {
+      return origGetStats.apply(this, arguments);
+    }
+
+    // When spec-style getStats is supported, return those when called with
+    // either no arguments or the selector argument is null.
+    if (origGetStats.length === 0 && (arguments.length === 0 || typeof selector !== 'function')) {
+      return origGetStats.apply(this, []);
+    }
+
+    var fixChromeStats_ = function fixChromeStats_(response) {
+      var standardReport = {};
+      var reports = response.result();
+      reports.forEach(function (report) {
+        var standardStats = {
+          id: report.id,
+          timestamp: report.timestamp,
+          type: {
+            localcandidate: 'local-candidate',
+            remotecandidate: 'remote-candidate'
+          }[report.type] || report.type
+        };
+        report.names().forEach(function (name) {
+          standardStats[name] = report.stat(name);
+        });
+        standardReport[standardStats.id] = standardStats;
+      });
+
+      return standardReport;
+    };
+
+    // shim getStats with maplike support
+    var makeMapStats = function makeMapStats(stats) {
+      return new Map(Object.keys(stats).map(function (key) {
+        return [key, stats[key]];
+      }));
+    };
+
+    if (arguments.length >= 2) {
+      var successCallbackWrapper_ = function successCallbackWrapper_(response) {
+        onSucc(makeMapStats(fixChromeStats_(response)));
+      };
+
+      return origGetStats.apply(this, [successCallbackWrapper_, selector]);
+    }
+
+    // promise-support
+    return new Promise(function (resolve, reject) {
+      origGetStats.apply(_this5, [function (response) {
+        resolve(makeMapStats(fixChromeStats_(response)));
+      }, reject]);
+    }).then(onSucc, onErr);
+  };
+}
+
+function shimSenderReceiverGetStats(window) {
+  if (!((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection && window.RTCRtpSender && window.RTCRtpReceiver)) {
+    return;
+  }
+
+  // shim sender stats.
+  if (!('getStats' in window.RTCRtpSender.prototype)) {
+    var origGetSenders = window.RTCPeerConnection.prototype.getSenders;
+    if (origGetSenders) {
+      window.RTCPeerConnection.prototype.getSenders = function getSenders() {
+        var _this6 = this;
+
+        var senders = origGetSenders.apply(this, []);
+        senders.forEach(function (sender) {
+          return sender._pc = _this6;
+        });
+        return senders;
+      };
+    }
+
+    var origAddTrack = window.RTCPeerConnection.prototype.addTrack;
+    if (origAddTrack) {
+      window.RTCPeerConnection.prototype.addTrack = function addTrack() {
+        var sender = origAddTrack.apply(this, arguments);
+        sender._pc = this;
+        return sender;
+      };
+    }
+    window.RTCRtpSender.prototype.getStats = function getStats() {
+      var sender = this;
+      return this._pc.getStats().then(function (result) {
+        return (
+          /* Note: this will include stats of all senders that
+           *   send a track with the same id as sender.track as
+           *   it is not possible to identify the RTCRtpSender.
+           */
+          utils.filterStats(result, sender.track, true)
+        );
+      });
+    };
+  }
+
+  // shim receiver stats.
+  if (!('getStats' in window.RTCRtpReceiver.prototype)) {
+    var origGetReceivers = window.RTCPeerConnection.prototype.getReceivers;
+    if (origGetReceivers) {
+      window.RTCPeerConnection.prototype.getReceivers = function getReceivers() {
+        var _this7 = this;
+
+        var receivers = origGetReceivers.apply(this, []);
+        receivers.forEach(function (receiver) {
+          return receiver._pc = _this7;
+        });
+        return receivers;
+      };
+    }
+    utils.wrapPeerConnectionEvent(window, 'track', function (e) {
+      e.receiver._pc = e.srcElement;
+      return e;
+    });
+    window.RTCRtpReceiver.prototype.getStats = function getStats() {
+      var receiver = this;
+      return this._pc.getStats().then(function (result) {
+        return utils.filterStats(result, receiver.track, false);
+      });
+    };
+  }
+
+  if (!('getStats' in window.RTCRtpSender.prototype && 'getStats' in window.RTCRtpReceiver.prototype)) {
+    return;
+  }
+
+  // shim RTCPeerConnection.getStats(track).
+  var origGetStats = window.RTCPeerConnection.prototype.getStats;
+  window.RTCPeerConnection.prototype.getStats = function getStats() {
+    if (arguments.length > 0 && arguments[0] instanceof window.MediaStreamTrack) {
+      var track = arguments[0];
+      var sender = void 0;
+      var receiver = void 0;
+      var err = void 0;
+      this.getSenders().forEach(function (s) {
+        if (s.track === track) {
+          if (sender) {
+            err = true;
+          } else {
+            sender = s;
+          }
+        }
+      });
+      this.getReceivers().forEach(function (r) {
+        if (r.track === track) {
+          if (receiver) {
+            err = true;
+          } else {
+            receiver = r;
+          }
+        }
+        return r.track === track;
+      });
+      if (err || sender && receiver) {
+        return Promise.reject(new DOMException('There are more than one sender or receiver for the track.', 'InvalidAccessError'));
+      } else if (sender) {
+        return sender.getStats();
+      } else if (receiver) {
+        return receiver.getStats();
+      }
+      return Promise.reject(new DOMException('There is no sender or receiver for the track.', 'InvalidAccessError'));
+    }
+    return origGetStats.apply(this, arguments);
+  };
+}
+
+function shimAddTrackRemoveTrackWithNative(window) {
+  // shim addTrack/removeTrack with native variants in order to make
+  // the interactions with legacy getLocalStreams behave as in other browsers.
+  // Keeps a mapping stream.id => [stream, rtpsenders...]
+  window.RTCPeerConnection.prototype.getLocalStreams = function getLocalStreams() {
+    var _this8 = this;
+
+    this._shimmedLocalStreams = this._shimmedLocalStreams || {};
+    return Object.keys(this._shimmedLocalStreams).map(function (streamId) {
+      return _this8._shimmedLocalStreams[streamId][0];
+    });
+  };
+
+  var origAddTrack = window.RTCPeerConnection.prototype.addTrack;
+  window.RTCPeerConnection.prototype.addTrack = function addTrack(track, stream) {
+    if (!stream) {
+      return origAddTrack.apply(this, arguments);
+    }
+    this._shimmedLocalStreams = this._shimmedLocalStreams || {};
+
+    var sender = origAddTrack.apply(this, arguments);
+    if (!this._shimmedLocalStreams[stream.id]) {
+      this._shimmedLocalStreams[stream.id] = [stream, sender];
+    } else if (this._shimmedLocalStreams[stream.id].indexOf(sender) === -1) {
+      this._shimmedLocalStreams[stream.id].push(sender);
+    }
+    return sender;
+  };
+
+  var origAddStream = window.RTCPeerConnection.prototype.addStream;
+  window.RTCPeerConnection.prototype.addStream = function addStream(stream) {
+    var _this9 = this;
+
+    this._shimmedLocalStreams = this._shimmedLocalStreams || {};
+
+    stream.getTracks().forEach(function (track) {
+      var alreadyExists = _this9.getSenders().find(function (s) {
+        return s.track === track;
+      });
+      if (alreadyExists) {
+        throw new DOMException('Track already exists.', 'InvalidAccessError');
+      }
+    });
+    var existingSenders = this.getSenders();
+    origAddStream.apply(this, arguments);
+    var newSenders = this.getSenders().filter(function (newSender) {
+      return existingSenders.indexOf(newSender) === -1;
+    });
+    this._shimmedLocalStreams[stream.id] = [stream].concat(newSenders);
+  };
+
+  var origRemoveStream = window.RTCPeerConnection.prototype.removeStream;
+  window.RTCPeerConnection.prototype.removeStream = function removeStream(stream) {
+    this._shimmedLocalStreams = this._shimmedLocalStreams || {};
+    delete this._shimmedLocalStreams[stream.id];
+    return origRemoveStream.apply(this, arguments);
+  };
+
+  var origRemoveTrack = window.RTCPeerConnection.prototype.removeTrack;
+  window.RTCPeerConnection.prototype.removeTrack = function removeTrack(sender) {
+    var _this10 = this;
+
+    this._shimmedLocalStreams = this._shimmedLocalStreams || {};
+    if (sender) {
+      Object.keys(this._shimmedLocalStreams).forEach(function (streamId) {
+        var idx = _this10._shimmedLocalStreams[streamId].indexOf(sender);
+        if (idx !== -1) {
+          _this10._shimmedLocalStreams[streamId].splice(idx, 1);
+        }
+        if (_this10._shimmedLocalStreams[streamId].length === 1) {
+          delete _this10._shimmedLocalStreams[streamId];
+        }
+      });
+    }
+    return origRemoveTrack.apply(this, arguments);
+  };
+}
+
+function shimAddTrackRemoveTrack(window, browserDetails) {
+  if (!window.RTCPeerConnection) {
+    return;
+  }
+  // shim addTrack and removeTrack.
+  if (window.RTCPeerConnection.prototype.addTrack && browserDetails.version >= 65) {
+    return shimAddTrackRemoveTrackWithNative(window);
+  }
+
+  // also shim pc.getLocalStreams when addTrack is shimmed
+  // to return the original streams.
+  var origGetLocalStreams = window.RTCPeerConnection.prototype.getLocalStreams;
+  window.RTCPeerConnection.prototype.getLocalStreams = function getLocalStreams() {
+    var _this11 = this;
+
+    var nativeStreams = origGetLocalStreams.apply(this);
+    this._reverseStreams = this._reverseStreams || {};
+    return nativeStreams.map(function (stream) {
+      return _this11._reverseStreams[stream.id];
+    });
+  };
+
+  var origAddStream = window.RTCPeerConnection.prototype.addStream;
+  window.RTCPeerConnection.prototype.addStream = function addStream(stream) {
+    var _this12 = this;
+
+    this._streams = this._streams || {};
+    this._reverseStreams = this._reverseStreams || {};
+
+    stream.getTracks().forEach(function (track) {
+      var alreadyExists = _this12.getSenders().find(function (s) {
+        return s.track === track;
+      });
+      if (alreadyExists) {
+        throw new DOMException('Track already exists.', 'InvalidAccessError');
+      }
+    });
+    // Add identity mapping for consistency with addTrack.
+    // Unless this is being used with a stream from addTrack.
+    if (!this._reverseStreams[stream.id]) {
+      var newStream = new window.MediaStream(stream.getTracks());
+      this._streams[stream.id] = newStream;
+      this._reverseStreams[newStream.id] = stream;
+      stream = newStream;
+    }
+    origAddStream.apply(this, [stream]);
+  };
+
+  var origRemoveStream = window.RTCPeerConnection.prototype.removeStream;
+  window.RTCPeerConnection.prototype.removeStream = function removeStream(stream) {
+    this._streams = this._streams || {};
+    this._reverseStreams = this._reverseStreams || {};
+
+    origRemoveStream.apply(this, [this._streams[stream.id] || stream]);
+    delete this._reverseStreams[this._streams[stream.id] ? this._streams[stream.id].id : stream.id];
+    delete this._streams[stream.id];
+  };
+
+  window.RTCPeerConnection.prototype.addTrack = function addTrack(track, stream) {
+    var _this13 = this;
+
+    if (this.signalingState === 'closed') {
+      throw new DOMException('The RTCPeerConnection\'s signalingState is \'closed\'.', 'InvalidStateError');
+    }
+    var streams = [].slice.call(arguments, 1);
+    if (streams.length !== 1 || !streams[0].getTracks().find(function (t) {
+      return t === track;
+    })) {
+      // this is not fully correct but all we can manage without
+      // [[associated MediaStreams]] internal slot.
+      throw new DOMException('The adapter.js addTrack polyfill only supports a single ' + ' stream which is associated with the specified track.', 'NotSupportedError');
+    }
+
+    var alreadyExists = this.getSenders().find(function (s) {
+      return s.track === track;
+    });
+    if (alreadyExists) {
+      throw new DOMException('Track already exists.', 'InvalidAccessError');
+    }
+
+    this._streams = this._streams || {};
+    this._reverseStreams = this._reverseStreams || {};
+    var oldStream = this._streams[stream.id];
+    if (oldStream) {
+      // this is using odd Chrome behaviour, use with caution:
+      // https://bugs.chromium.org/p/webrtc/issues/detail?id=7815
+      // Note: we rely on the high-level addTrack/dtmf shim to
+      // create the sender with a dtmf sender.
+      oldStream.addTrack(track);
+
+      // Trigger ONN async.
+      Promise.resolve().then(function () {
+        _this13.dispatchEvent(new Event('negotiationneeded'));
+      });
+    } else {
+      var newStream = new window.MediaStream([track]);
+      this._streams[stream.id] = newStream;
+      this._reverseStreams[newStream.id] = stream;
+      this.addStream(newStream);
+    }
+    return this.getSenders().find(function (s) {
+      return s.track === track;
+    });
+  };
+
+  // replace the internal stream id with the external one and
+  // vice versa.
+  function replaceInternalStreamId(pc, description) {
+    var sdp = description.sdp;
+    Object.keys(pc._reverseStreams || []).forEach(function (internalId) {
+      var externalStream = pc._reverseStreams[internalId];
+      var internalStream = pc._streams[externalStream.id];
+      sdp = sdp.replace(new RegExp(internalStream.id, 'g'), externalStream.id);
+    });
+    return new RTCSessionDescription({
+      type: description.type,
+      sdp: sdp
+    });
+  }
+  function replaceExternalStreamId(pc, description) {
+    var sdp = description.sdp;
+    Object.keys(pc._reverseStreams || []).forEach(function (internalId) {
+      var externalStream = pc._reverseStreams[internalId];
+      var internalStream = pc._streams[externalStream.id];
+      sdp = sdp.replace(new RegExp(externalStream.id, 'g'), internalStream.id);
+    });
+    return new RTCSessionDescription({
+      type: description.type,
+      sdp: sdp
+    });
+  }
+  ['createOffer', 'createAnswer'].forEach(function (method) {
+    var nativeMethod = window.RTCPeerConnection.prototype[method];
+    var methodObj = _defineProperty({}, method, function () {
+      var _this14 = this;
+
+      var args = arguments;
+      var isLegacyCall = arguments.length && typeof arguments[0] === 'function';
+      if (isLegacyCall) {
+        return nativeMethod.apply(this, [function (description) {
+          var desc = replaceInternalStreamId(_this14, description);
+          args[0].apply(null, [desc]);
+        }, function (err) {
+          if (args[1]) {
+            args[1].apply(null, err);
+          }
+        }, arguments[2]]);
+      }
+      return nativeMethod.apply(this, arguments).then(function (description) {
+        return replaceInternalStreamId(_this14, description);
+      });
+    });
+    window.RTCPeerConnection.prototype[method] = methodObj[method];
+  });
+
+  var origSetLocalDescription = window.RTCPeerConnection.prototype.setLocalDescription;
+  window.RTCPeerConnection.prototype.setLocalDescription = function setLocalDescription() {
+    if (!arguments.length || !arguments[0].type) {
+      return origSetLocalDescription.apply(this, arguments);
+    }
+    arguments[0] = replaceExternalStreamId(this, arguments[0]);
+    return origSetLocalDescription.apply(this, arguments);
+  };
+
+  // TODO: mangle getStats: https://w3c.github.io/webrtc-stats/#dom-rtcmediastreamstats-streamidentifier
+
+  var origLocalDescription = Object.getOwnPropertyDescriptor(window.RTCPeerConnection.prototype, 'localDescription');
+  Object.defineProperty(window.RTCPeerConnection.prototype, 'localDescription', {
+    get: function get() {
+      var description = origLocalDescription.get.apply(this);
+      if (description.type === '') {
+        return description;
+      }
+      return replaceInternalStreamId(this, description);
+    }
+  });
+
+  window.RTCPeerConnection.prototype.removeTrack = function removeTrack(sender) {
+    var _this15 = this;
+
+    if (this.signalingState === 'closed') {
+      throw new DOMException('The RTCPeerConnection\'s signalingState is \'closed\'.', 'InvalidStateError');
+    }
+    // We can not yet check for sender instanceof RTCRtpSender
+    // since we shim RTPSender. So we check if sender._pc is set.
+    if (!sender._pc) {
+      throw new DOMException('Argument 1 of RTCPeerConnection.removeTrack ' + 'does not implement interface RTCRtpSender.', 'TypeError');
+    }
+    var isLocal = sender._pc === this;
+    if (!isLocal) {
+      throw new DOMException('Sender was not created by this connection.', 'InvalidAccessError');
+    }
+
+    // Search for the native stream the senders track belongs to.
+    this._streams = this._streams || {};
+    var stream = void 0;
+    Object.keys(this._streams).forEach(function (streamid) {
+      var hasTrack = _this15._streams[streamid].getTracks().find(function (track) {
+        return sender.track === track;
+      });
+      if (hasTrack) {
+        stream = _this15._streams[streamid];
+      }
+    });
+
+    if (stream) {
+      if (stream.getTracks().length === 1) {
+        // if this is the last track of the stream, remove the stream. This
+        // takes care of any shimmed _senders.
+        this.removeStream(this._reverseStreams[stream.id]);
+      } else {
+        // relying on the same odd chrome behaviour as above.
+        stream.removeTrack(sender.track);
+      }
+      this.dispatchEvent(new Event('negotiationneeded'));
+    }
+  };
+}
+
+function shimPeerConnection(window, browserDetails) {
+  if (!window.RTCPeerConnection && window.webkitRTCPeerConnection) {
+    // very basic support for old versions.
+    window.RTCPeerConnection = window.webkitRTCPeerConnection;
+  }
+  if (!window.RTCPeerConnection) {
+    return;
+  }
+
+  // shim implicit creation of RTCSessionDescription/RTCIceCandidate
+  if (browserDetails.version < 53) {
+    ['setLocalDescription', 'setRemoteDescription', 'addIceCandidate'].forEach(function (method) {
+      var nativeMethod = window.RTCPeerConnection.prototype[method];
+      var methodObj = _defineProperty({}, method, function () {
+        arguments[0] = new (method === 'addIceCandidate' ? window.RTCIceCandidate : window.RTCSessionDescription)(arguments[0]);
+        return nativeMethod.apply(this, arguments);
+      });
+      window.RTCPeerConnection.prototype[method] = methodObj[method];
+    });
+  }
+}
+
+// Attempt to fix ONN in plan-b mode.
+function fixNegotiationNeeded(window, browserDetails) {
+  utils.wrapPeerConnectionEvent(window, 'negotiationneeded', function (e) {
+    var pc = e.target;
+    if (browserDetails.version < 72 || pc.getConfiguration && pc.getConfiguration().sdpSemantics === 'plan-b') {
+      if (pc.signalingState !== 'stable') {
+        return;
+      }
+    }
+    return e;
+  });
+}
+
+},{"../utils.js":11,"./getdisplaymedia":4,"./getusermedia":5}],4:[function(require,module,exports){
+/*
+ *  Copyright (c) 2018 The adapter.js project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shimGetDisplayMedia = shimGetDisplayMedia;
+function shimGetDisplayMedia(window, getSourceId) {
+  if (window.navigator.mediaDevices && 'getDisplayMedia' in window.navigator.mediaDevices) {
+    return;
+  }
+  if (!window.navigator.mediaDevices) {
+    return;
+  }
+  // getSourceId is a function that returns a promise resolving with
+  // the sourceId of the screen/window/tab to be shared.
+  if (typeof getSourceId !== 'function') {
+    console.error('shimGetDisplayMedia: getSourceId argument is not ' + 'a function');
+    return;
+  }
+  window.navigator.mediaDevices.getDisplayMedia = function getDisplayMedia(constraints) {
+    return getSourceId(constraints).then(function (sourceId) {
+      var widthSpecified = constraints.video && constraints.video.width;
+      var heightSpecified = constraints.video && constraints.video.height;
+      var frameRateSpecified = constraints.video && constraints.video.frameRate;
+      constraints.video = {
+        mandatory: {
+          chromeMediaSource: 'desktop',
+          chromeMediaSourceId: sourceId,
+          maxFrameRate: frameRateSpecified || 3
+        }
+      };
+      if (widthSpecified) {
+        constraints.video.mandatory.maxWidth = widthSpecified;
+      }
+      if (heightSpecified) {
+        constraints.video.mandatory.maxHeight = heightSpecified;
+      }
+      return window.navigator.mediaDevices.getUserMedia(constraints);
+    });
+  };
+}
+
+},{}],5:[function(require,module,exports){
+/*
+ *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.shimGetUserMedia = shimGetUserMedia;
+
+var _utils = require('../utils.js');
+
+var utils = _interopRequireWildcard(_utils);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+var logging = utils.log;
+
+function shimGetUserMedia(window, browserDetails) {
+  var navigator = window && window.navigator;
+
+  if (!navigator.mediaDevices) {
+    return;
+  }
+
+  var constraintsToChrome_ = function constraintsToChrome_(c) {
+    if ((typeof c === 'undefined' ? 'undefined' : _typeof(c)) !== 'object' || c.mandatory || c.optional) {
+      return c;
+    }
+    var cc = {};
+    Object.keys(c).forEach(function (key) {
+      if (key === 'require' || key === 'advanced' || key === 'mediaSource') {
+        return;
+      }
+      var r = _typeof(c[key]) === 'object' ? c[key] : { ideal: c[key] };
+      if (r.exact !== undefined && typeof r.exact === 'number') {
+        r.min = r.max = r.exact;
+      }
+      var oldname_ = function oldname_(prefix, name) {
+        if (prefix) {
+          return prefix + name.charAt(0).toUpperCase() + name.slice(1);
+        }
+        return name === 'deviceId' ? 'sourceId' : name;
+      };
+      if (r.ideal !== undefined) {
+        cc.optional = cc.optional || [];
+        var oc = {};
+        if (typeof r.ideal === 'number') {
+          oc[oldname_('min', key)] = r.ideal;
+          cc.optional.push(oc);
+          oc = {};
+          oc[oldname_('max', key)] = r.ideal;
+          cc.optional.push(oc);
+        } else {
+          oc[oldname_('', key)] = r.ideal;
+          cc.optional.push(oc);
+        }
+      }
+      if (r.exact !== undefined && typeof r.exact !== 'number') {
+        cc.mandatory = cc.mandatory || {};
+        cc.mandatory[oldname_('', key)] = r.exact;
+      } else {
+        ['min', 'max'].forEach(function (mix) {
+          if (r[mix] !== undefined) {
+            cc.mandatory = cc.mandatory || {};
+            cc.mandatory[oldname_(mix, key)] = r[mix];
+          }
+        });
+      }
+    });
+    if (c.advanced) {
+      cc.optional = (cc.optional || []).concat(c.advanced);
+    }
+    return cc;
+  };
+
+  var shimConstraints_ = function shimConstraints_(constraints, func) {
+    if (browserDetails.version >= 61) {
+      return func(constraints);
+    }
+    constraints = JSON.parse(JSON.stringify(constraints));
+    if (constraints && _typeof(constraints.audio) === 'object') {
+      var remap = function remap(obj, a, b) {
+        if (a in obj && !(b in obj)) {
+          obj[b] = obj[a];
+          delete obj[a];
+        }
+      };
+      constraints = JSON.parse(JSON.stringify(constraints));
+      remap(constraints.audio, 'autoGainControl', 'googAutoGainControl');
+      remap(constraints.audio, 'noiseSuppression', 'googNoiseSuppression');
+      constraints.audio = constraintsToChrome_(constraints.audio);
+    }
+    if (constraints && _typeof(constraints.video) === 'object') {
+      // Shim facingMode for mobile & surface pro.
+      var face = constraints.video.facingMode;
+      face = face && ((typeof face === 'undefined' ? 'undefined' : _typeof(face)) === 'object' ? face : { ideal: face });
+      var getSupportedFacingModeLies = browserDetails.version < 66;
+
+      if (face && (face.exact === 'user' || face.exact === 'environment' || face.ideal === 'user' || face.ideal === 'environment') && !(navigator.mediaDevices.getSupportedConstraints && navigator.mediaDevices.getSupportedConstraints().facingMode && !getSupportedFacingModeLies)) {
+        delete constraints.video.facingMode;
+        var matches = void 0;
+        if (face.exact === 'environment' || face.ideal === 'environment') {
+          matches = ['back', 'rear'];
+        } else if (face.exact === 'user' || face.ideal === 'user') {
+          matches = ['front'];
+        }
+        if (matches) {
+          // Look for matches in label, or use last cam for back (typical).
+          return navigator.mediaDevices.enumerateDevices().then(function (devices) {
+            devices = devices.filter(function (d) {
+              return d.kind === 'videoinput';
+            });
+            var dev = devices.find(function (d) {
+              return matches.some(function (match) {
+                return d.label.toLowerCase().includes(match);
+              });
+            });
+            if (!dev && devices.length && matches.includes('back')) {
+              dev = devices[devices.length - 1]; // more likely the back cam
+            }
+            if (dev) {
+              constraints.video.deviceId = face.exact ? { exact: dev.deviceId } : { ideal: dev.deviceId };
+            }
+            constraints.video = constraintsToChrome_(constraints.video);
+            logging('chrome: ' + JSON.stringify(constraints));
+            return func(constraints);
+          });
+        }
+      }
+      constraints.video = constraintsToChrome_(constraints.video);
+    }
+    logging('chrome: ' + JSON.stringify(constraints));
+    return func(constraints);
+  };
+
+  var shimError_ = function shimError_(e) {
+    if (browserDetails.version >= 64) {
+      return e;
+    }
+    return {
+      name: {
+        PermissionDeniedError: 'NotAllowedError',
+        PermissionDismissedError: 'NotAllowedError',
+        InvalidStateError: 'NotAllowedError',
+        DevicesNotFoundError: 'NotFoundError',
+        ConstraintNotSatisfiedError: 'OverconstrainedError',
+        TrackStartError: 'NotReadableError',
+        MediaDeviceFailedDueToShutdown: 'NotAllowedError',
+        MediaDeviceKillSwitchOn: 'NotAllowedError',
+        TabCaptureError: 'AbortError',
+        ScreenCaptureError: 'AbortError',
+        DeviceCaptureError: 'AbortError'
+      }[e.name] || e.name,
+      message: e.message,
+      constraint: e.constraint || e.constraintName,
+      toString: function toString() {
+        return this.name + (this.message && ': ') + this.message;
+      }
+    };
+  };
+
+  var getUserMedia_ = function getUserMedia_(constraints, onSuccess, onError) {
+    shimConstraints_(constraints, function (c) {
+      navigator.webkitGetUserMedia(c, onSuccess, function (e) {
+        if (onError) {
+          onError(shimError_(e));
+        }
+      });
+    });
+  };
+  navigator.getUserMedia = getUserMedia_.bind(navigator);
+
+  // Even though Chrome 45 has navigator.mediaDevices and a getUserMedia
+  // function which returns a Promise, it does not accept spec-style
+  // constraints.
+  if (navigator.mediaDevices.getUserMedia) {
+    var origGetUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
+    navigator.mediaDevices.getUserMedia = function (cs) {
+      return shimConstraints_(cs, function (c) {
+        return origGetUserMedia(c).then(function (stream) {
+          if (c.audio && !stream.getAudioTracks().length || c.video && !stream.getVideoTracks().length) {
+            stream.getTracks().forEach(function (track) {
+              track.stop();
+            });
+            throw new DOMException('', 'NotFoundError');
+          }
+          return stream;
+        }, function (e) {
+          return Promise.reject(shimError_(e));
+        });
+      });
+    };
+  }
+}
+
+},{"../utils.js":11}],6:[function(require,module,exports){
+/*
+ *  Copyright (c) 2017 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.shimRTCIceCandidate = shimRTCIceCandidate;
+exports.shimRTCIceCandidateRelayProtocol = shimRTCIceCandidateRelayProtocol;
+exports.shimMaxMessageSize = shimMaxMessageSize;
+exports.shimSendThrowTypeError = shimSendThrowTypeError;
+exports.shimConnectionState = shimConnectionState;
+exports.removeExtmapAllowMixed = removeExtmapAllowMixed;
+exports.shimAddIceCandidateNullOrEmpty = shimAddIceCandidateNullOrEmpty;
+exports.shimParameterlessSetLocalDescription = shimParameterlessSetLocalDescription;
+
+var _sdp = require('sdp');
+
+var _sdp2 = _interopRequireDefault(_sdp);
+
+var _utils = require('./utils');
+
+var utils = _interopRequireWildcard(_utils);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shimRTCIceCandidate(window) {
+  // foundation is arbitrarily chosen as an indicator for full support for
+  // https://w3c.github.io/webrtc-pc/#rtcicecandidate-interface
+  if (!window.RTCIceCandidate || window.RTCIceCandidate && 'foundation' in window.RTCIceCandidate.prototype) {
+    return;
+  }
+
+  var NativeRTCIceCandidate = window.RTCIceCandidate;
+  window.RTCIceCandidate = function RTCIceCandidate(args) {
+    // Remove the a= which shouldn't be part of the candidate string.
+    if ((typeof args === 'undefined' ? 'undefined' : _typeof(args)) === 'object' && args.candidate && args.candidate.indexOf('a=') === 0) {
+      args = JSON.parse(JSON.stringify(args));
+      args.candidate = args.candidate.substr(2);
+    }
+
+    if (args.candidate && args.candidate.length) {
+      // Augment the native candidate with the parsed fields.
+      var nativeCandidate = new NativeRTCIceCandidate(args);
+      var parsedCandidate = _sdp2.default.parseCandidate(args.candidate);
+      var augmentedCandidate = Object.assign(nativeCandidate, parsedCandidate);
+
+      // Add a serializer that does not serialize the extra attributes.
+      augmentedCandidate.toJSON = function toJSON() {
+        return {
+          candidate: augmentedCandidate.candidate,
+          sdpMid: augmentedCandidate.sdpMid,
+          sdpMLineIndex: augmentedCandidate.sdpMLineIndex,
+          usernameFragment: augmentedCandidate.usernameFragment
+        };
+      };
+      return augmentedCandidate;
+    }
+    return new NativeRTCIceCandidate(args);
+  };
+  window.RTCIceCandidate.prototype = NativeRTCIceCandidate.prototype;
+
+  // Hook up the augmented candidate in onicecandidate and
+  // addEventListener('icecandidate', ...)
+  utils.wrapPeerConnectionEvent(window, 'icecandidate', function (e) {
+    if (e.candidate) {
+      Object.defineProperty(e, 'candidate', {
+        value: new window.RTCIceCandidate(e.candidate),
+        writable: 'false'
+      });
+    }
+    return e;
+  });
+}
+
+function shimRTCIceCandidateRelayProtocol(window) {
+  if (!window.RTCIceCandidate || window.RTCIceCandidate && 'relayProtocol' in window.RTCIceCandidate.prototype) {
+    return;
+  }
+
+  // Hook up the augmented candidate in onicecandidate and
+  // addEventListener('icecandidate', ...)
+  utils.wrapPeerConnectionEvent(window, 'icecandidate', function (e) {
+    if (e.candidate) {
+      var parsedCandidate = _sdp2.default.parseCandidate(e.candidate.candidate);
+      if (parsedCandidate.type === 'relay') {
+        // This is a libwebrtc-specific mapping of local type preference
+        // to relayProtocol.
+        e.candidate.relayProtocol = {
+          0: 'tls',
+          1: 'tcp',
+          2: 'udp'
+        }[parsedCandidate.priority >> 24];
+      }
+    }
+    return e;
+  });
+}
+
+function shimMaxMessageSize(window, browserDetails) {
+  if (!window.RTCPeerConnection) {
+    return;
+  }
+
+  if (!('sctp' in window.RTCPeerConnection.prototype)) {
+    Object.defineProperty(window.RTCPeerConnection.prototype, 'sctp', {
+      get: function get() {
+        return typeof this._sctp === 'undefined' ? null : this._sctp;
+      }
+    });
+  }
+
+  var sctpInDescription = function sctpInDescription(description) {
+    if (!description || !description.sdp) {
+      return false;
+    }
+    var sections = _sdp2.default.splitSections(description.sdp);
+    sections.shift();
+    return sections.some(function (mediaSection) {
+      var mLine = _sdp2.default.parseMLine(mediaSection);
+      return mLine && mLine.kind === 'application' && mLine.protocol.indexOf('SCTP') !== -1;
+    });
+  };
+
+  var getRemoteFirefoxVersion = function getRemoteFirefoxVersion(description) {
+    // TODO: Is there a better solution for detecting Firefox?
+    var match = description.sdp.match(/mozilla...THIS_IS_SDPARTA-(\d+)/);
+    if (match === null || match.length < 2) {
+      return -1;
+    }
+    var version = parseInt(match[1], 10);
+    // Test for NaN (yes, this is ugly)
+    return version !== version ? -1 : version;
+  };
+
+  var getCanSendMaxMessageSize = function getCanSendMaxMessageSize(remoteIsFirefox) {
+    // Every implementation we know can send at least 64 KiB.
+    // Note: Although Chrome is technically able to send up to 256 KiB, the
+    //       data does not reach the other peer reliably.
+    //       See: https://bugs.chromium.org/p/webrtc/issues/detail?id=8419
+    var canSendMaxMessageSize = 65536;
+    if (browserDetails.browser === 'firefox') {
+      if (browserDetails.version < 57) {
+        if (remoteIsFirefox === -1) {
+          // FF < 57 will send in 16 KiB chunks using the deprecated PPID
+          // fragmentation.
+          canSendMaxMessageSize = 16384;
+        } else {
+          // However, other FF (and RAWRTC) can reassemble PPID-fragmented
+          // messages. Thus, supporting ~2 GiB when sending.
+          canSendMaxMessageSize = 2147483637;
+        }
+      } else if (browserDetails.version < 60) {
+        // Currently, all FF >= 57 will reset the remote maximum message size
+        // to the default value when a data channel is created at a later
+        // stage. :(
+        // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1426831
+        canSendMaxMessageSize = browserDetails.version === 57 ? 65535 : 65536;
+      } else {
+        // FF >= 60 supports sending ~2 GiB
+        canSendMaxMessageSize = 2147483637;
+      }
+    }
+    return canSendMaxMessageSize;
+  };
+
+  var getMaxMessageSize = function getMaxMessageSize(description, remoteIsFirefox) {
+    // Note: 65536 bytes is the default value from the SDP spec. Also,
+    //       every implementation we know supports receiving 65536 bytes.
+    var maxMessageSize = 65536;
+
+    // FF 57 has a slightly incorrect default remote max message size, so
+    // we need to adjust it here to avoid a failure when sending.
+    // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1425697
+    if (browserDetails.browser === 'firefox' && browserDetails.version === 57) {
+      maxMessageSize = 65535;
+    }
+
+    var match = _sdp2.default.matchPrefix(description.sdp, 'a=max-message-size:');
+    if (match.length > 0) {
+      maxMessageSize = parseInt(match[0].substr(19), 10);
+    } else if (browserDetails.browser === 'firefox' && remoteIsFirefox !== -1) {
+      // If the maximum message size is not present in the remote SDP and
+      // both local and remote are Firefox, the remote peer can receive
+      // ~2 GiB.
+      maxMessageSize = 2147483637;
+    }
+    return maxMessageSize;
+  };
+
+  var origSetRemoteDescription = window.RTCPeerConnection.prototype.setRemoteDescription;
+  window.RTCPeerConnection.prototype.setRemoteDescription = function setRemoteDescription() {
+    this._sctp = null;
+    // Chrome decided to not expose .sctp in plan-b mode.
+    // As usual, adapter.js has to do an 'ugly worakaround'
+    // to cover up the mess.
+    if (browserDetails.browser === 'chrome' && browserDetails.version >= 76) {
+      var _getConfiguration = this.getConfiguration(),
+          sdpSemantics = _getConfiguration.sdpSemantics;
+
+      if (sdpSemantics === 'plan-b') {
+        Object.defineProperty(this, 'sctp', {
+          get: function get() {
+            return typeof this._sctp === 'undefined' ? null : this._sctp;
+          },
+
+          enumerable: true,
+          configurable: true
+        });
+      }
+    }
+
+    if (sctpInDescription(arguments[0])) {
+      // Check if the remote is FF.
+      var isFirefox = getRemoteFirefoxVersion(arguments[0]);
+
+      // Get the maximum message size the local peer is capable of sending
+      var canSendMMS = getCanSendMaxMessageSize(isFirefox);
+
+      // Get the maximum message size of the remote peer.
+      var remoteMMS = getMaxMessageSize(arguments[0], isFirefox);
+
+      // Determine final maximum message size
+      var maxMessageSize = void 0;
+      if (canSendMMS === 0 && remoteMMS === 0) {
+        maxMessageSize = Number.POSITIVE_INFINITY;
+      } else if (canSendMMS === 0 || remoteMMS === 0) {
+        maxMessageSize = Math.max(canSendMMS, remoteMMS);
+      } else {
+        maxMessageSize = Math.min(canSendMMS, remoteMMS);
+      }
+
+      // Create a dummy RTCSctpTransport object and the 'maxMessageSize'
+      // attribute.
+      var sctp = {};
+      Object.defineProperty(sctp, 'maxMessageSize', {
+        get: function get() {
+          return maxMessageSize;
+        }
+      });
+      this._sctp = sctp;
+    }
+
+    return origSetRemoteDescription.apply(this, arguments);
+  };
+}
+
+function shimSendThrowTypeError(window) {
+  if (!(window.RTCPeerConnection && 'createDataChannel' in window.RTCPeerConnection.prototype)) {
+    return;
+  }
+
+  // Note: Although Firefox >= 57 has a native implementation, the maximum
+  //       message size can be reset for all data channels at a later stage.
+  //       See: https://bugzilla.mozilla.org/show_bug.cgi?id=1426831
+
+  function wrapDcSend(dc, pc) {
+    var origDataChannelSend = dc.send;
+    dc.send = function send() {
+      var data = arguments[0];
+      var length = data.length || data.size || data.byteLength;
+      if (dc.readyState === 'open' && pc.sctp && length > pc.sctp.maxMessageSize) {
+        throw new TypeError('Message too large (can send a maximum of ' + pc.sctp.maxMessageSize + ' bytes)');
+      }
+      return origDataChannelSend.apply(dc, arguments);
+    };
+  }
+  var origCreateDataChannel = window.RTCPeerConnection.prototype.createDataChannel;
+  window.RTCPeerConnection.prototype.createDataChannel = function createDataChannel() {
+    var dataChannel = origCreateDataChannel.apply(this, arguments);
+    wrapDcSend(dataChannel, this);
+    return dataChannel;
+  };
+  utils.wrapPeerConnectionEvent(window, 'datachannel', function (e) {
+    wrapDcSend(e.channel, e.target);
+    return e;
+  });
+}
+
+/* shims RTCConnectionState by pretending it is the same as iceConnectionState.
+ * See https://bugs.chromium.org/p/webrtc/issues/detail?id=6145#c12
+ * for why this is a valid hack in Chrome. In Firefox it is slightly incorrect
+ * since DTLS failures would be hidden. See
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1265827
+ * for the Firefox tracking bug.
+ */
+function shimConnectionState(window) {
+  if (!window.RTCPeerConnection || 'connectionState' in window.RTCPeerConnection.prototype) {
+    return;
+  }
+  var proto = window.RTCPeerConnection.prototype;
+  Object.defineProperty(proto, 'connectionState', {
+    get: function get() {
+      return {
+        completed: 'connected',
+        checking: 'connecting'
+      }[this.iceConnectionState] || this.iceConnectionState;
+    },
+
+    enumerable: true,
+    configurable: true
+  });
+  Object.defineProperty(proto, 'onconnectionstatechange', {
+    get: function get() {
+      return this._onconnectionstatechange || null;
+    },
+    set: function set(cb) {
+      if (this._onconnectionstatechange) {
+        this.removeEventListener('connectionstatechange', this._onconnectionstatechange);
+        delete this._onconnectionstatechange;
+      }
+      if (cb) {
+        this.addEventListener('connectionstatechange', this._onconnectionstatechange = cb);
+      }
+    },
+
+    enumerable: true,
+    configurable: true
+  });
+
+  ['setLocalDescription', 'setRemoteDescription'].forEach(function (method) {
+    var origMethod = proto[method];
+    proto[method] = function () {
+      if (!this._connectionstatechangepoly) {
+        this._connectionstatechangepoly = function (e) {
+          var pc = e.target;
+          if (pc._lastConnectionState !== pc.connectionState) {
+            pc._lastConnectionState = pc.connectionState;
+            var newEvent = new Event('connectionstatechange', e);
+            pc.dispatchEvent(newEvent);
+          }
+          return e;
+        };
+        this.addEventListener('iceconnectionstatechange', this._connectionstatechangepoly);
+      }
+      return origMethod.apply(this, arguments);
+    };
+  });
+}
+
+function removeExtmapAllowMixed(window, browserDetails) {
+  /* remove a=extmap-allow-mixed for webrtc.org < M71 */
+  if (!window.RTCPeerConnection) {
+    return;
+  }
+  if (browserDetails.browser === 'chrome' && browserDetails.version >= 71) {
+    return;
+  }
+  if (browserDetails.browser === 'safari' && browserDetails.version >= 605) {
+    return;
+  }
+  var nativeSRD = window.RTCPeerConnection.prototype.setRemoteDescription;
+  window.RTCPeerConnection.prototype.setRemoteDescription = function setRemoteDescription(desc) {
+    if (desc && desc.sdp && desc.sdp.indexOf('\na=extmap-allow-mixed') !== -1) {
+      var sdp = desc.sdp.split('\n').filter(function (line) {
+        return line.trim() !== 'a=extmap-allow-mixed';
+      }).join('\n');
+      // Safari enforces read-only-ness of RTCSessionDescription fields.
+      if (window.RTCSessionDescription && desc instanceof window.RTCSessionDescription) {
+        arguments[0] = new window.RTCSessionDescription({
+          type: desc.type,
+          sdp: sdp
+        });
+      } else {
+        desc.sdp = sdp;
+      }
+    }
+    return nativeSRD.apply(this, arguments);
+  };
+}
+
+function shimAddIceCandidateNullOrEmpty(window, browserDetails) {
+  // Support for addIceCandidate(null or undefined)
+  // as well as addIceCandidate({candidate: "", ...})
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=978582
+  // Note: must be called before other polyfills which change the signature.
+  if (!(window.RTCPeerConnection && window.RTCPeerConnection.prototype)) {
+    return;
+  }
+  var nativeAddIceCandidate = window.RTCPeerConnection.prototype.addIceCandidate;
+  if (!nativeAddIceCandidate || nativeAddIceCandidate.length === 0) {
+    return;
+  }
+  window.RTCPeerConnection.prototype.addIceCandidate = function addIceCandidate() {
+    if (!arguments[0]) {
+      if (arguments[1]) {
+        arguments[1].apply(null);
+      }
+      return Promise.resolve();
+    }
+    // Firefox 68+ emits and processes {candidate: "", ...}, ignore
+    // in older versions.
+    // Native support for ignoring exists for Chrome M77+.
+    // Safari ignores as well, exact version unknown but works in the same
+    // version that also ignores addIceCandidate(null).
+    if ((browserDetails.browser === 'chrome' && browserDetails.version < 78 || browserDetails.browser === 'firefox' && browserDetails.version < 68 || browserDetails.browser === 'safari') && arguments[0] && arguments[0].candidate === '') {
+      return Promise.resolve();
+    }
+    return nativeAddIceCandidate.apply(this, arguments);
+  };
+}
+
+// Note: Make sure to call this ahead of APIs that modify
+// setLocalDescription.length
+function shimParameterlessSetLocalDescription(window, browserDetails) {
+  if (!(window.RTCPeerConnection && window.RTCPeerConnection.prototype)) {
+    return;
+  }
+  var nativeSetLocalDescription = window.RTCPeerConnection.prototype.setLocalDescription;
+  if (!nativeSetLocalDescription || nativeSetLocalDescription.length === 0) {
+    return;
+  }
+  window.RTCPeerConnection.prototype.setLocalDescription = function setLocalDescription() {
+    var _this = this;
+
+    var desc = arguments[0] || {};
+    if ((typeof desc === 'undefined' ? 'undefined' : _typeof(desc)) !== 'object' || desc.type && desc.sdp) {
+      return nativeSetLocalDescription.apply(this, arguments);
+    }
+    // The remaining steps should technically happen when SLD comes off the
+    // RTCPeerConnection's operations chain (not ahead of going on it), but
+    // this is too difficult to shim. Instead, this shim only covers the
+    // common case where the operations chain is empty. This is imperfect, but
+    // should cover many cases. Rationale: Even if we can't reduce the glare
+    // window to zero on imperfect implementations, there's value in tapping
+    // into the perfect negotiation pattern that several browsers support.
+    desc = { type: desc.type, sdp: desc.sdp };
+    if (!desc.type) {
+      switch (this.signalingState) {
+        case 'stable':
+        case 'have-local-offer':
+        case 'have-remote-pranswer':
+          desc.type = 'offer';
+          break;
+        default:
+          desc.type = 'answer';
+          break;
+      }
+    }
+    if (desc.sdp || desc.type !== 'offer' && desc.type !== 'answer') {
+      return nativeSetLocalDescription.apply(this, [desc]);
+    }
+    var func = desc.type === 'offer' ? this.createOffer : this.createAnswer;
+    return func.apply(this).then(function (d) {
+      return nativeSetLocalDescription.apply(_this, [d]);
+    });
+  };
+}
+
+},{"./utils":11,"sdp":12}],7:[function(require,module,exports){
+/*
+ *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shimGetDisplayMedia = exports.shimGetUserMedia = undefined;
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _getusermedia = require('./getusermedia');
+
+Object.defineProperty(exports, 'shimGetUserMedia', {
+  enumerable: true,
+  get: function get() {
+    return _getusermedia.shimGetUserMedia;
+  }
+});
+
+var _getdisplaymedia = require('./getdisplaymedia');
+
+Object.defineProperty(exports, 'shimGetDisplayMedia', {
+  enumerable: true,
+  get: function get() {
+    return _getdisplaymedia.shimGetDisplayMedia;
+  }
+});
+exports.shimOnTrack = shimOnTrack;
+exports.shimPeerConnection = shimPeerConnection;
+exports.shimSenderGetStats = shimSenderGetStats;
+exports.shimReceiverGetStats = shimReceiverGetStats;
+exports.shimRemoveStream = shimRemoveStream;
+exports.shimRTCDataChannel = shimRTCDataChannel;
+exports.shimAddTransceiver = shimAddTransceiver;
+exports.shimGetParameters = shimGetParameters;
+exports.shimCreateOffer = shimCreateOffer;
+exports.shimCreateAnswer = shimCreateAnswer;
+
+var _utils = require('../utils');
+
+var utils = _interopRequireWildcard(_utils);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function shimOnTrack(window) {
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCTrackEvent && 'receiver' in window.RTCTrackEvent.prototype && !('transceiver' in window.RTCTrackEvent.prototype)) {
+    Object.defineProperty(window.RTCTrackEvent.prototype, 'transceiver', {
+      get: function get() {
+        return { receiver: this.receiver };
+      }
+    });
+  }
+}
+
+function shimPeerConnection(window, browserDetails) {
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== 'object' || !(window.RTCPeerConnection || window.mozRTCPeerConnection)) {
+    return; // probably media.peerconnection.enabled=false in about:config
+  }
+  if (!window.RTCPeerConnection && window.mozRTCPeerConnection) {
+    // very basic support for old versions.
+    window.RTCPeerConnection = window.mozRTCPeerConnection;
+  }
+
+  if (browserDetails.version < 53) {
+    // shim away need for obsolete RTCIceCandidate/RTCSessionDescription.
+    ['setLocalDescription', 'setRemoteDescription', 'addIceCandidate'].forEach(function (method) {
+      var nativeMethod = window.RTCPeerConnection.prototype[method];
+      var methodObj = _defineProperty({}, method, function () {
+        arguments[0] = new (method === 'addIceCandidate' ? window.RTCIceCandidate : window.RTCSessionDescription)(arguments[0]);
+        return nativeMethod.apply(this, arguments);
+      });
+      window.RTCPeerConnection.prototype[method] = methodObj[method];
+    });
+  }
+
+  var modernStatsTypes = {
+    inboundrtp: 'inbound-rtp',
+    outboundrtp: 'outbound-rtp',
+    candidatepair: 'candidate-pair',
+    localcandidate: 'local-candidate',
+    remotecandidate: 'remote-candidate'
+  };
+
+  var nativeGetStats = window.RTCPeerConnection.prototype.getStats;
+  window.RTCPeerConnection.prototype.getStats = function getStats() {
+    var _arguments = Array.prototype.slice.call(arguments),
+        selector = _arguments[0],
+        onSucc = _arguments[1],
+        onErr = _arguments[2];
+
+    return nativeGetStats.apply(this, [selector || null]).then(function (stats) {
+      if (browserDetails.version < 53 && !onSucc) {
+        // Shim only promise getStats with spec-hyphens in type names
+        // Leave callback version alone; misc old uses of forEach before Map
+        try {
+          stats.forEach(function (stat) {
+            stat.type = modernStatsTypes[stat.type] || stat.type;
+          });
+        } catch (e) {
+          if (e.name !== 'TypeError') {
+            throw e;
+          }
+          // Avoid TypeError: "type" is read-only, in old versions. 34-43ish
+          stats.forEach(function (stat, i) {
+            stats.set(i, Object.assign({}, stat, {
+              type: modernStatsTypes[stat.type] || stat.type
+            }));
+          });
+        }
+      }
+      return stats;
+    }).then(onSucc, onErr);
+  };
+}
+
+function shimSenderGetStats(window) {
+  if (!((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection && window.RTCRtpSender)) {
+    return;
+  }
+  if (window.RTCRtpSender && 'getStats' in window.RTCRtpSender.prototype) {
+    return;
+  }
+  var origGetSenders = window.RTCPeerConnection.prototype.getSenders;
+  if (origGetSenders) {
+    window.RTCPeerConnection.prototype.getSenders = function getSenders() {
+      var _this = this;
+
+      var senders = origGetSenders.apply(this, []);
+      senders.forEach(function (sender) {
+        return sender._pc = _this;
+      });
+      return senders;
+    };
+  }
+
+  var origAddTrack = window.RTCPeerConnection.prototype.addTrack;
+  if (origAddTrack) {
+    window.RTCPeerConnection.prototype.addTrack = function addTrack() {
+      var sender = origAddTrack.apply(this, arguments);
+      sender._pc = this;
+      return sender;
+    };
+  }
+  window.RTCRtpSender.prototype.getStats = function getStats() {
+    return this.track ? this._pc.getStats(this.track) : Promise.resolve(new Map());
+  };
+}
+
+function shimReceiverGetStats(window) {
+  if (!((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection && window.RTCRtpSender)) {
+    return;
+  }
+  if (window.RTCRtpSender && 'getStats' in window.RTCRtpReceiver.prototype) {
+    return;
+  }
+  var origGetReceivers = window.RTCPeerConnection.prototype.getReceivers;
+  if (origGetReceivers) {
+    window.RTCPeerConnection.prototype.getReceivers = function getReceivers() {
+      var _this2 = this;
+
+      var receivers = origGetReceivers.apply(this, []);
+      receivers.forEach(function (receiver) {
+        return receiver._pc = _this2;
+      });
+      return receivers;
+    };
+  }
+  utils.wrapPeerConnectionEvent(window, 'track', function (e) {
+    e.receiver._pc = e.srcElement;
+    return e;
+  });
+  window.RTCRtpReceiver.prototype.getStats = function getStats() {
+    return this._pc.getStats(this.track);
+  };
+}
+
+function shimRemoveStream(window) {
+  if (!window.RTCPeerConnection || 'removeStream' in window.RTCPeerConnection.prototype) {
+    return;
+  }
+  window.RTCPeerConnection.prototype.removeStream = function removeStream(stream) {
+    var _this3 = this;
+
+    utils.deprecated('removeStream', 'removeTrack');
+    this.getSenders().forEach(function (sender) {
+      if (sender.track && stream.getTracks().includes(sender.track)) {
+        _this3.removeTrack(sender);
+      }
+    });
+  };
+}
+
+function shimRTCDataChannel(window) {
+  // rename DataChannel to RTCDataChannel (native fix in FF60):
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1173851
+  if (window.DataChannel && !window.RTCDataChannel) {
+    window.RTCDataChannel = window.DataChannel;
+  }
+}
+
+function shimAddTransceiver(window) {
+  // https://github.com/webrtcHacks/adapter/issues/998#issuecomment-516921647
+  // Firefox ignores the init sendEncodings options passed to addTransceiver
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1396918
+  if (!((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection)) {
+    return;
+  }
+  var origAddTransceiver = window.RTCPeerConnection.prototype.addTransceiver;
+  if (origAddTransceiver) {
+    window.RTCPeerConnection.prototype.addTransceiver = function addTransceiver() {
+      this.setParametersPromises = [];
+      // WebIDL input coercion and validation
+      var sendEncodings = arguments[1] && arguments[1].sendEncodings;
+      if (sendEncodings === undefined) {
+        sendEncodings = [];
+      }
+      sendEncodings = [].concat(_toConsumableArray(sendEncodings));
+      var shouldPerformCheck = sendEncodings.length > 0;
+      if (shouldPerformCheck) {
+        // If sendEncodings params are provided, validate grammar
+        sendEncodings.forEach(function (encodingParam) {
+          if ('rid' in encodingParam) {
+            var ridRegex = /^[a-z0-9]{0,16}$/i;
+            if (!ridRegex.test(encodingParam.rid)) {
+              throw new TypeError('Invalid RID value provided.');
+            }
+          }
+          if ('scaleResolutionDownBy' in encodingParam) {
+            if (!(parseFloat(encodingParam.scaleResolutionDownBy) >= 1.0)) {
+              throw new RangeError('scale_resolution_down_by must be >= 1.0');
+            }
+          }
+          if ('maxFramerate' in encodingParam) {
+            if (!(parseFloat(encodingParam.maxFramerate) >= 0)) {
+              throw new RangeError('max_framerate must be >= 0.0');
+            }
+          }
+        });
+      }
+      var transceiver = origAddTransceiver.apply(this, arguments);
+      if (shouldPerformCheck) {
+        // Check if the init options were applied. If not we do this in an
+        // asynchronous way and save the promise reference in a global object.
+        // This is an ugly hack, but at the same time is way more robust than
+        // checking the sender parameters before and after the createOffer
+        // Also note that after the createoffer we are not 100% sure that
+        // the params were asynchronously applied so we might miss the
+        // opportunity to recreate offer.
+        var sender = transceiver.sender;
+
+        var params = sender.getParameters();
+        if (!('encodings' in params) ||
+        // Avoid being fooled by patched getParameters() below.
+        params.encodings.length === 1 && Object.keys(params.encodings[0]).length === 0) {
+          params.encodings = sendEncodings;
+          sender.sendEncodings = sendEncodings;
+          this.setParametersPromises.push(sender.setParameters(params).then(function () {
+            delete sender.sendEncodings;
+          }).catch(function () {
+            delete sender.sendEncodings;
+          }));
+        }
+      }
+      return transceiver;
+    };
+  }
+}
+
+function shimGetParameters(window) {
+  if (!((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCRtpSender)) {
+    return;
+  }
+  var origGetParameters = window.RTCRtpSender.prototype.getParameters;
+  if (origGetParameters) {
+    window.RTCRtpSender.prototype.getParameters = function getParameters() {
+      var params = origGetParameters.apply(this, arguments);
+      if (!('encodings' in params)) {
+        params.encodings = [].concat(this.sendEncodings || [{}]);
+      }
+      return params;
+    };
+  }
+}
+
+function shimCreateOffer(window) {
+  // https://github.com/webrtcHacks/adapter/issues/998#issuecomment-516921647
+  // Firefox ignores the init sendEncodings options passed to addTransceiver
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1396918
+  if (!((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection)) {
+    return;
+  }
+  var origCreateOffer = window.RTCPeerConnection.prototype.createOffer;
+  window.RTCPeerConnection.prototype.createOffer = function createOffer() {
+    var _this4 = this,
+        _arguments2 = arguments;
+
+    if (this.setParametersPromises && this.setParametersPromises.length) {
+      return Promise.all(this.setParametersPromises).then(function () {
+        return origCreateOffer.apply(_this4, _arguments2);
+      }).finally(function () {
+        _this4.setParametersPromises = [];
+      });
+    }
+    return origCreateOffer.apply(this, arguments);
+  };
+}
+
+function shimCreateAnswer(window) {
+  // https://github.com/webrtcHacks/adapter/issues/998#issuecomment-516921647
+  // Firefox ignores the init sendEncodings options passed to addTransceiver
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1396918
+  if (!((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCPeerConnection)) {
+    return;
+  }
+  var origCreateAnswer = window.RTCPeerConnection.prototype.createAnswer;
+  window.RTCPeerConnection.prototype.createAnswer = function createAnswer() {
+    var _this5 = this,
+        _arguments3 = arguments;
+
+    if (this.setParametersPromises && this.setParametersPromises.length) {
+      return Promise.all(this.setParametersPromises).then(function () {
+        return origCreateAnswer.apply(_this5, _arguments3);
+      }).finally(function () {
+        _this5.setParametersPromises = [];
+      });
+    }
+    return origCreateAnswer.apply(this, arguments);
+  };
+}
+
+},{"../utils":11,"./getdisplaymedia":8,"./getusermedia":9}],8:[function(require,module,exports){
+/*
+ *  Copyright (c) 2018 The adapter.js project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shimGetDisplayMedia = shimGetDisplayMedia;
+function shimGetDisplayMedia(window, preferredMediaSource) {
+  if (window.navigator.mediaDevices && 'getDisplayMedia' in window.navigator.mediaDevices) {
+    return;
+  }
+  if (!window.navigator.mediaDevices) {
+    return;
+  }
+  window.navigator.mediaDevices.getDisplayMedia = function getDisplayMedia(constraints) {
+    if (!(constraints && constraints.video)) {
+      var err = new DOMException('getDisplayMedia without video ' + 'constraints is undefined');
+      err.name = 'NotFoundError';
+      // from https://heycam.github.io/webidl/#idl-DOMException-error-names
+      err.code = 8;
+      return Promise.reject(err);
+    }
+    if (constraints.video === true) {
+      constraints.video = { mediaSource: preferredMediaSource };
+    } else {
+      constraints.video.mediaSource = preferredMediaSource;
+    }
+    return window.navigator.mediaDevices.getUserMedia(constraints);
+  };
+}
+
+},{}],9:[function(require,module,exports){
+/*
+ *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.shimGetUserMedia = shimGetUserMedia;
+
+var _utils = require('../utils');
+
+var utils = _interopRequireWildcard(_utils);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function shimGetUserMedia(window, browserDetails) {
+  var navigator = window && window.navigator;
+  var MediaStreamTrack = window && window.MediaStreamTrack;
+
+  navigator.getUserMedia = function (constraints, onSuccess, onError) {
+    // Replace Firefox 44+'s deprecation warning with unprefixed version.
+    utils.deprecated('navigator.getUserMedia', 'navigator.mediaDevices.getUserMedia');
+    navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);
+  };
+
+  if (!(browserDetails.version > 55 && 'autoGainControl' in navigator.mediaDevices.getSupportedConstraints())) {
+    var remap = function remap(obj, a, b) {
+      if (a in obj && !(b in obj)) {
+        obj[b] = obj[a];
+        delete obj[a];
+      }
+    };
+
+    var nativeGetUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
+    navigator.mediaDevices.getUserMedia = function (c) {
+      if ((typeof c === 'undefined' ? 'undefined' : _typeof(c)) === 'object' && _typeof(c.audio) === 'object') {
+        c = JSON.parse(JSON.stringify(c));
+        remap(c.audio, 'autoGainControl', 'mozAutoGainControl');
+        remap(c.audio, 'noiseSuppression', 'mozNoiseSuppression');
+      }
+      return nativeGetUserMedia(c);
+    };
+
+    if (MediaStreamTrack && MediaStreamTrack.prototype.getSettings) {
+      var nativeGetSettings = MediaStreamTrack.prototype.getSettings;
+      MediaStreamTrack.prototype.getSettings = function () {
+        var obj = nativeGetSettings.apply(this, arguments);
+        remap(obj, 'mozAutoGainControl', 'autoGainControl');
+        remap(obj, 'mozNoiseSuppression', 'noiseSuppression');
+        return obj;
+      };
+    }
+
+    if (MediaStreamTrack && MediaStreamTrack.prototype.applyConstraints) {
+      var nativeApplyConstraints = MediaStreamTrack.prototype.applyConstraints;
+      MediaStreamTrack.prototype.applyConstraints = function (c) {
+        if (this.kind === 'audio' && (typeof c === 'undefined' ? 'undefined' : _typeof(c)) === 'object') {
+          c = JSON.parse(JSON.stringify(c));
+          remap(c, 'autoGainControl', 'mozAutoGainControl');
+          remap(c, 'noiseSuppression', 'mozNoiseSuppression');
+        }
+        return nativeApplyConstraints.apply(this, [c]);
+      };
+    }
+  }
+}
+
+},{"../utils":11}],10:[function(require,module,exports){
+/*
+ *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.shimLocalStreamsAPI = shimLocalStreamsAPI;
+exports.shimRemoteStreamsAPI = shimRemoteStreamsAPI;
+exports.shimCallbacksAPI = shimCallbacksAPI;
+exports.shimGetUserMedia = shimGetUserMedia;
+exports.shimConstraints = shimConstraints;
+exports.shimRTCIceServerUrls = shimRTCIceServerUrls;
+exports.shimTrackEventTransceiver = shimTrackEventTransceiver;
+exports.shimCreateOfferLegacy = shimCreateOfferLegacy;
+exports.shimAudioContext = shimAudioContext;
+
+var _utils = require('../utils');
+
+var utils = _interopRequireWildcard(_utils);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function shimLocalStreamsAPI(window) {
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== 'object' || !window.RTCPeerConnection) {
+    return;
+  }
+  if (!('getLocalStreams' in window.RTCPeerConnection.prototype)) {
+    window.RTCPeerConnection.prototype.getLocalStreams = function getLocalStreams() {
+      if (!this._localStreams) {
+        this._localStreams = [];
+      }
+      return this._localStreams;
+    };
+  }
+  if (!('addStream' in window.RTCPeerConnection.prototype)) {
+    var _addTrack = window.RTCPeerConnection.prototype.addTrack;
+    window.RTCPeerConnection.prototype.addStream = function addStream(stream) {
+      var _this = this;
+
+      if (!this._localStreams) {
+        this._localStreams = [];
+      }
+      if (!this._localStreams.includes(stream)) {
+        this._localStreams.push(stream);
+      }
+      // Try to emulate Chrome's behaviour of adding in audio-video order.
+      // Safari orders by track id.
+      stream.getAudioTracks().forEach(function (track) {
+        return _addTrack.call(_this, track, stream);
+      });
+      stream.getVideoTracks().forEach(function (track) {
+        return _addTrack.call(_this, track, stream);
+      });
+    };
+
+    window.RTCPeerConnection.prototype.addTrack = function addTrack(track) {
+      var _this2 = this;
+
+      for (var _len = arguments.length, streams = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        streams[_key - 1] = arguments[_key];
+      }
+
+      if (streams) {
+        streams.forEach(function (stream) {
+          if (!_this2._localStreams) {
+            _this2._localStreams = [stream];
+          } else if (!_this2._localStreams.includes(stream)) {
+            _this2._localStreams.push(stream);
+          }
+        });
+      }
+      return _addTrack.apply(this, arguments);
+    };
+  }
+  if (!('removeStream' in window.RTCPeerConnection.prototype)) {
+    window.RTCPeerConnection.prototype.removeStream = function removeStream(stream) {
+      var _this3 = this;
+
+      if (!this._localStreams) {
+        this._localStreams = [];
+      }
+      var index = this._localStreams.indexOf(stream);
+      if (index === -1) {
+        return;
+      }
+      this._localStreams.splice(index, 1);
+      var tracks = stream.getTracks();
+      this.getSenders().forEach(function (sender) {
+        if (tracks.includes(sender.track)) {
+          _this3.removeTrack(sender);
+        }
+      });
+    };
+  }
+}
+
+function shimRemoteStreamsAPI(window) {
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== 'object' || !window.RTCPeerConnection) {
+    return;
+  }
+  if (!('getRemoteStreams' in window.RTCPeerConnection.prototype)) {
+    window.RTCPeerConnection.prototype.getRemoteStreams = function getRemoteStreams() {
+      return this._remoteStreams ? this._remoteStreams : [];
+    };
+  }
+  if (!('onaddstream' in window.RTCPeerConnection.prototype)) {
+    Object.defineProperty(window.RTCPeerConnection.prototype, 'onaddstream', {
+      get: function get() {
+        return this._onaddstream;
+      },
+      set: function set(f) {
+        var _this4 = this;
+
+        if (this._onaddstream) {
+          this.removeEventListener('addstream', this._onaddstream);
+          this.removeEventListener('track', this._onaddstreampoly);
+        }
+        this.addEventListener('addstream', this._onaddstream = f);
+        this.addEventListener('track', this._onaddstreampoly = function (e) {
+          e.streams.forEach(function (stream) {
+            if (!_this4._remoteStreams) {
+              _this4._remoteStreams = [];
+            }
+            if (_this4._remoteStreams.includes(stream)) {
+              return;
+            }
+            _this4._remoteStreams.push(stream);
+            var event = new Event('addstream');
+            event.stream = stream;
+            _this4.dispatchEvent(event);
+          });
+        });
+      }
+    });
+    var origSetRemoteDescription = window.RTCPeerConnection.prototype.setRemoteDescription;
+    window.RTCPeerConnection.prototype.setRemoteDescription = function setRemoteDescription() {
+      var pc = this;
+      if (!this._onaddstreampoly) {
+        this.addEventListener('track', this._onaddstreampoly = function (e) {
+          e.streams.forEach(function (stream) {
+            if (!pc._remoteStreams) {
+              pc._remoteStreams = [];
+            }
+            if (pc._remoteStreams.indexOf(stream) >= 0) {
+              return;
+            }
+            pc._remoteStreams.push(stream);
+            var event = new Event('addstream');
+            event.stream = stream;
+            pc.dispatchEvent(event);
+          });
+        });
+      }
+      return origSetRemoteDescription.apply(pc, arguments);
+    };
+  }
+}
+
+function shimCallbacksAPI(window) {
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== 'object' || !window.RTCPeerConnection) {
+    return;
+  }
+  var prototype = window.RTCPeerConnection.prototype;
+  var origCreateOffer = prototype.createOffer;
+  var origCreateAnswer = prototype.createAnswer;
+  var setLocalDescription = prototype.setLocalDescription;
+  var setRemoteDescription = prototype.setRemoteDescription;
+  var addIceCandidate = prototype.addIceCandidate;
+
+  prototype.createOffer = function createOffer(successCallback, failureCallback) {
+    var options = arguments.length >= 2 ? arguments[2] : arguments[0];
+    var promise = origCreateOffer.apply(this, [options]);
+    if (!failureCallback) {
+      return promise;
+    }
+    promise.then(successCallback, failureCallback);
+    return Promise.resolve();
+  };
+
+  prototype.createAnswer = function createAnswer(successCallback, failureCallback) {
+    var options = arguments.length >= 2 ? arguments[2] : arguments[0];
+    var promise = origCreateAnswer.apply(this, [options]);
+    if (!failureCallback) {
+      return promise;
+    }
+    promise.then(successCallback, failureCallback);
+    return Promise.resolve();
+  };
+
+  var withCallback = function withCallback(description, successCallback, failureCallback) {
+    var promise = setLocalDescription.apply(this, [description]);
+    if (!failureCallback) {
+      return promise;
+    }
+    promise.then(successCallback, failureCallback);
+    return Promise.resolve();
+  };
+  prototype.setLocalDescription = withCallback;
+
+  withCallback = function withCallback(description, successCallback, failureCallback) {
+    var promise = setRemoteDescription.apply(this, [description]);
+    if (!failureCallback) {
+      return promise;
+    }
+    promise.then(successCallback, failureCallback);
+    return Promise.resolve();
+  };
+  prototype.setRemoteDescription = withCallback;
+
+  withCallback = function withCallback(candidate, successCallback, failureCallback) {
+    var promise = addIceCandidate.apply(this, [candidate]);
+    if (!failureCallback) {
+      return promise;
+    }
+    promise.then(successCallback, failureCallback);
+    return Promise.resolve();
+  };
+  prototype.addIceCandidate = withCallback;
+}
+
+function shimGetUserMedia(window) {
+  var navigator = window && window.navigator;
+
+  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+    // shim not needed in Safari 12.1
+    var mediaDevices = navigator.mediaDevices;
+    var _getUserMedia = mediaDevices.getUserMedia.bind(mediaDevices);
+    navigator.mediaDevices.getUserMedia = function (constraints) {
+      return _getUserMedia(shimConstraints(constraints));
+    };
+  }
+
+  if (!navigator.getUserMedia && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+    navigator.getUserMedia = function getUserMedia(constraints, cb, errcb) {
+      navigator.mediaDevices.getUserMedia(constraints).then(cb, errcb);
+    }.bind(navigator);
+  }
+}
+
+function shimConstraints(constraints) {
+  if (constraints && constraints.video !== undefined) {
+    return Object.assign({}, constraints, { video: utils.compactObject(constraints.video) });
+  }
+
+  return constraints;
+}
+
+function shimRTCIceServerUrls(window) {
+  if (!window.RTCPeerConnection) {
+    return;
+  }
+  // migrate from non-spec RTCIceServer.url to RTCIceServer.urls
+  var OrigPeerConnection = window.RTCPeerConnection;
+  window.RTCPeerConnection = function RTCPeerConnection(pcConfig, pcConstraints) {
+    if (pcConfig && pcConfig.iceServers) {
+      var newIceServers = [];
+      for (var i = 0; i < pcConfig.iceServers.length; i++) {
+        var server = pcConfig.iceServers[i];
+        if (!server.hasOwnProperty('urls') && server.hasOwnProperty('url')) {
+          utils.deprecated('RTCIceServer.url', 'RTCIceServer.urls');
+          server = JSON.parse(JSON.stringify(server));
+          server.urls = server.url;
+          delete server.url;
+          newIceServers.push(server);
+        } else {
+          newIceServers.push(pcConfig.iceServers[i]);
+        }
+      }
+      pcConfig.iceServers = newIceServers;
+    }
+    return new OrigPeerConnection(pcConfig, pcConstraints);
+  };
+  window.RTCPeerConnection.prototype = OrigPeerConnection.prototype;
+  // wrap static methods. Currently just generateCertificate.
+  if ('generateCertificate' in OrigPeerConnection) {
+    Object.defineProperty(window.RTCPeerConnection, 'generateCertificate', {
+      get: function get() {
+        return OrigPeerConnection.generateCertificate;
+      }
+    });
+  }
+}
+
+function shimTrackEventTransceiver(window) {
+  // Add event.transceiver member over deprecated event.receiver
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object' && window.RTCTrackEvent && 'receiver' in window.RTCTrackEvent.prototype && !('transceiver' in window.RTCTrackEvent.prototype)) {
+    Object.defineProperty(window.RTCTrackEvent.prototype, 'transceiver', {
+      get: function get() {
+        return { receiver: this.receiver };
+      }
+    });
+  }
+}
+
+function shimCreateOfferLegacy(window) {
+  var origCreateOffer = window.RTCPeerConnection.prototype.createOffer;
+  window.RTCPeerConnection.prototype.createOffer = function createOffer(offerOptions) {
+    if (offerOptions) {
+      if (typeof offerOptions.offerToReceiveAudio !== 'undefined') {
+        // support bit values
+        offerOptions.offerToReceiveAudio = !!offerOptions.offerToReceiveAudio;
+      }
+      var audioTransceiver = this.getTransceivers().find(function (transceiver) {
+        return transceiver.receiver.track.kind === 'audio';
+      });
+      if (offerOptions.offerToReceiveAudio === false && audioTransceiver) {
+        if (audioTransceiver.direction === 'sendrecv') {
+          if (audioTransceiver.setDirection) {
+            audioTransceiver.setDirection('sendonly');
+          } else {
+            audioTransceiver.direction = 'sendonly';
+          }
+        } else if (audioTransceiver.direction === 'recvonly') {
+          if (audioTransceiver.setDirection) {
+            audioTransceiver.setDirection('inactive');
+          } else {
+            audioTransceiver.direction = 'inactive';
+          }
+        }
+      } else if (offerOptions.offerToReceiveAudio === true && !audioTransceiver) {
+        this.addTransceiver('audio', { direction: 'recvonly' });
+      }
+
+      if (typeof offerOptions.offerToReceiveVideo !== 'undefined') {
+        // support bit values
+        offerOptions.offerToReceiveVideo = !!offerOptions.offerToReceiveVideo;
+      }
+      var videoTransceiver = this.getTransceivers().find(function (transceiver) {
+        return transceiver.receiver.track.kind === 'video';
+      });
+      if (offerOptions.offerToReceiveVideo === false && videoTransceiver) {
+        if (videoTransceiver.direction === 'sendrecv') {
+          if (videoTransceiver.setDirection) {
+            videoTransceiver.setDirection('sendonly');
+          } else {
+            videoTransceiver.direction = 'sendonly';
+          }
+        } else if (videoTransceiver.direction === 'recvonly') {
+          if (videoTransceiver.setDirection) {
+            videoTransceiver.setDirection('inactive');
+          } else {
+            videoTransceiver.direction = 'inactive';
+          }
+        }
+      } else if (offerOptions.offerToReceiveVideo === true && !videoTransceiver) {
+        this.addTransceiver('video', { direction: 'recvonly' });
+      }
+    }
+    return origCreateOffer.apply(this, arguments);
+  };
+}
+
+function shimAudioContext(window) {
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) !== 'object' || window.AudioContext) {
+    return;
+  }
+  window.AudioContext = window.webkitAudioContext;
+}
+
+},{"../utils":11}],11:[function(require,module,exports){
+/*
+ *  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+/* eslint-env node */
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.extractVersion = extractVersion;
+exports.wrapPeerConnectionEvent = wrapPeerConnectionEvent;
+exports.disableLog = disableLog;
+exports.disableWarnings = disableWarnings;
+exports.log = log;
+exports.deprecated = deprecated;
+exports.detectBrowser = detectBrowser;
+exports.compactObject = compactObject;
+exports.walkStats = walkStats;
+exports.filterStats = filterStats;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var logDisabled_ = true;
+var deprecationWarnings_ = true;
+
+/**
+ * Extract browser version out of the provided user agent string.
+ *
+ * @param {!string} uastring userAgent string.
+ * @param {!string} expr Regular expression used as match criteria.
+ * @param {!number} pos position in the version string to be returned.
+ * @return {!number} browser version.
+ */
+function extractVersion(uastring, expr, pos) {
+  var match = uastring.match(expr);
+  return match && match.length >= pos && parseInt(match[pos], 10);
+}
+
+// Wraps the peerconnection event eventNameToWrap in a function
+// which returns the modified event object (or false to prevent
+// the event).
+function wrapPeerConnectionEvent(window, eventNameToWrap, wrapper) {
+  if (!window.RTCPeerConnection) {
+    return;
+  }
+  var proto = window.RTCPeerConnection.prototype;
+  var nativeAddEventListener = proto.addEventListener;
+  proto.addEventListener = function (nativeEventName, cb) {
+    if (nativeEventName !== eventNameToWrap) {
+      return nativeAddEventListener.apply(this, arguments);
+    }
+    var wrappedCallback = function wrappedCallback(e) {
+      var modifiedEvent = wrapper(e);
+      if (modifiedEvent) {
+        if (cb.handleEvent) {
+          cb.handleEvent(modifiedEvent);
+        } else {
+          cb(modifiedEvent);
+        }
+      }
+    };
+    this._eventMap = this._eventMap || {};
+    if (!this._eventMap[eventNameToWrap]) {
+      this._eventMap[eventNameToWrap] = new Map();
+    }
+    this._eventMap[eventNameToWrap].set(cb, wrappedCallback);
+    return nativeAddEventListener.apply(this, [nativeEventName, wrappedCallback]);
+  };
+
+  var nativeRemoveEventListener = proto.removeEventListener;
+  proto.removeEventListener = function (nativeEventName, cb) {
+    if (nativeEventName !== eventNameToWrap || !this._eventMap || !this._eventMap[eventNameToWrap]) {
+      return nativeRemoveEventListener.apply(this, arguments);
+    }
+    if (!this._eventMap[eventNameToWrap].has(cb)) {
+      return nativeRemoveEventListener.apply(this, arguments);
+    }
+    var unwrappedCb = this._eventMap[eventNameToWrap].get(cb);
+    this._eventMap[eventNameToWrap].delete(cb);
+    if (this._eventMap[eventNameToWrap].size === 0) {
+      delete this._eventMap[eventNameToWrap];
+    }
+    if (Object.keys(this._eventMap).length === 0) {
+      delete this._eventMap;
+    }
+    return nativeRemoveEventListener.apply(this, [nativeEventName, unwrappedCb]);
+  };
+
+  Object.defineProperty(proto, 'on' + eventNameToWrap, {
+    get: function get() {
+      return this['_on' + eventNameToWrap];
+    },
+    set: function set(cb) {
+      if (this['_on' + eventNameToWrap]) {
+        this.removeEventListener(eventNameToWrap, this['_on' + eventNameToWrap]);
+        delete this['_on' + eventNameToWrap];
+      }
+      if (cb) {
+        this.addEventListener(eventNameToWrap, this['_on' + eventNameToWrap] = cb);
+      }
+    },
+
+    enumerable: true,
+    configurable: true
+  });
+}
+
+function disableLog(bool) {
+  if (typeof bool !== 'boolean') {
+    return new Error('Argument type: ' + (typeof bool === 'undefined' ? 'undefined' : _typeof(bool)) + '. Please use a boolean.');
+  }
+  logDisabled_ = bool;
+  return bool ? 'adapter.js logging disabled' : 'adapter.js logging enabled';
+}
+
+/**
+ * Disable or enable deprecation warnings
+ * @param {!boolean} bool set to true to disable warnings.
+ */
+function disableWarnings(bool) {
+  if (typeof bool !== 'boolean') {
+    return new Error('Argument type: ' + (typeof bool === 'undefined' ? 'undefined' : _typeof(bool)) + '. Please use a boolean.');
+  }
+  deprecationWarnings_ = !bool;
+  return 'adapter.js deprecation warnings ' + (bool ? 'disabled' : 'enabled');
+}
+
+function log() {
+  if ((typeof window === 'undefined' ? 'undefined' : _typeof(window)) === 'object') {
+    if (logDisabled_) {
+      return;
+    }
+    if (typeof console !== 'undefined' && typeof console.log === 'function') {
+      console.log.apply(console, arguments);
+    }
+  }
+}
+
+/**
+ * Shows a deprecation warning suggesting the modern and spec-compatible API.
+ */
+function deprecated(oldMethod, newMethod) {
+  if (!deprecationWarnings_) {
+    return;
+  }
+  console.warn(oldMethod + ' is deprecated, please use ' + newMethod + ' instead.');
+}
+
+/**
+ * Browser detector.
+ *
+ * @return {object} result containing browser and version
+ *     properties.
+ */
+function detectBrowser(window) {
+  // Returned result object.
+  var result = { browser: null, version: null };
+
+  // Fail early if it's not a browser
+  if (typeof window === 'undefined' || !window.navigator) {
+    result.browser = 'Not a browser.';
+    return result;
+  }
+
+  var navigator = window.navigator;
+
+
+  if (navigator.mozGetUserMedia) {
+    // Firefox.
+    result.browser = 'firefox';
+    result.version = extractVersion(navigator.userAgent, /Firefox\/(\d+)\./, 1);
+  } else if (navigator.webkitGetUserMedia || window.isSecureContext === false && window.webkitRTCPeerConnection) {
+    // Chrome, Chromium, Webview, Opera.
+    // Version matches Chrome/WebRTC version.
+    // Chrome 74 removed webkitGetUserMedia on http as well so we need the
+    // more complicated fallback to webkitRTCPeerConnection.
+    result.browser = 'chrome';
+    result.version = extractVersion(navigator.userAgent, /Chrom(e|ium)\/(\d+)\./, 2);
+  } else if (window.RTCPeerConnection && navigator.userAgent.match(/AppleWebKit\/(\d+)\./)) {
+    // Safari.
+    result.browser = 'safari';
+    result.version = extractVersion(navigator.userAgent, /AppleWebKit\/(\d+)\./, 1);
+    result.supportsUnifiedPlan = window.RTCRtpTransceiver && 'currentDirection' in window.RTCRtpTransceiver.prototype;
+  } else {
+    // Default fallthrough: not supported.
+    result.browser = 'Not a supported browser.';
+    return result;
+  }
+
+  return result;
+}
+
+/**
+ * Checks if something is an object.
+ *
+ * @param {*} val The something you want to check.
+ * @return true if val is an object, false otherwise.
+ */
+function isObject(val) {
+  return Object.prototype.toString.call(val) === '[object Object]';
+}
+
+/**
+ * Remove all empty objects and undefined values
+ * from a nested object -- an enhanced and vanilla version
+ * of Lodash's `compact`.
+ */
+function compactObject(data) {
+  if (!isObject(data)) {
+    return data;
+  }
+
+  return Object.keys(data).reduce(function (accumulator, key) {
+    var isObj = isObject(data[key]);
+    var value = isObj ? compactObject(data[key]) : data[key];
+    var isEmptyObject = isObj && !Object.keys(value).length;
+    if (value === undefined || isEmptyObject) {
+      return accumulator;
+    }
+    return Object.assign(accumulator, _defineProperty({}, key, value));
+  }, {});
+}
+
+/* iterates the stats graph recursively. */
+function walkStats(stats, base, resultSet) {
+  if (!base || resultSet.has(base.id)) {
+    return;
+  }
+  resultSet.set(base.id, base);
+  Object.keys(base).forEach(function (name) {
+    if (name.endsWith('Id')) {
+      walkStats(stats, stats.get(base[name]), resultSet);
+    } else if (name.endsWith('Ids')) {
+      base[name].forEach(function (id) {
+        walkStats(stats, stats.get(id), resultSet);
+      });
+    }
+  });
+}
+
+/* filter getStats for a sender/receiver track. */
+function filterStats(result, track, outbound) {
+  var streamStatsType = outbound ? 'outbound-rtp' : 'inbound-rtp';
+  var filteredResult = new Map();
+  if (track === null) {
+    return filteredResult;
+  }
+  var trackStats = [];
+  result.forEach(function (value) {
+    if (value.type === 'track' && value.trackIdentifier === track.id) {
+      trackStats.push(value);
+    }
+  });
+  trackStats.forEach(function (trackStat) {
+    result.forEach(function (stats) {
+      if (stats.type === streamStatsType && stats.trackId === trackStat.id) {
+        walkStats(result, stats, filteredResult);
+      }
+    });
+  });
+  return filteredResult;
+}
+
+},{}],12:[function(require,module,exports){
+/* eslint-env node */
+'use strict';
+
+// SDP helpers.
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var SDPUtils = {};
+
+// Generate an alphanumeric identifier for cname or mids.
+// TODO: use UUIDs instead? https://gist.github.com/jed/982883
+SDPUtils.generateIdentifier = function () {
+  return Math.random().toString(36).substr(2, 10);
+};
+
+// The RTCP CNAME used by all peerconnections from the same JS.
+SDPUtils.localCName = SDPUtils.generateIdentifier();
+
+// Splits SDP into lines, dealing with both CRLF and LF.
+SDPUtils.splitLines = function (blob) {
+  return blob.trim().split('\n').map(function (line) {
+    return line.trim();
+  });
+};
+// Splits SDP into sessionpart and mediasections. Ensures CRLF.
+SDPUtils.splitSections = function (blob) {
+  var parts = blob.split('\nm=');
+  return parts.map(function (part, index) {
+    return (index > 0 ? 'm=' + part : part).trim() + '\r\n';
+  });
+};
+
+// Returns the session description.
+SDPUtils.getDescription = function (blob) {
+  var sections = SDPUtils.splitSections(blob);
+  return sections && sections[0];
+};
+
+// Returns the individual media sections.
+SDPUtils.getMediaSections = function (blob) {
+  var sections = SDPUtils.splitSections(blob);
+  sections.shift();
+  return sections;
+};
+
+// Returns lines that start with a certain prefix.
+SDPUtils.matchPrefix = function (blob, prefix) {
+  return SDPUtils.splitLines(blob).filter(function (line) {
+    return line.indexOf(prefix) === 0;
+  });
+};
+
+// Parses an ICE candidate line. Sample input:
+// candidate:702786350 2 udp 41819902 8.8.8.8 60769 typ relay raddr 8.8.8.8
+// rport 55996"
+// Input can be prefixed with a=.
+SDPUtils.parseCandidate = function (line) {
+  var parts = void 0;
+  // Parse both variants.
+  if (line.indexOf('a=candidate:') === 0) {
+    parts = line.substring(12).split(' ');
+  } else {
+    parts = line.substring(10).split(' ');
+  }
+
+  var candidate = {
+    foundation: parts[0],
+    component: { 1: 'rtp', 2: 'rtcp' }[parts[1]] || parts[1],
+    protocol: parts[2].toLowerCase(),
+    priority: parseInt(parts[3], 10),
+    ip: parts[4],
+    address: parts[4], // address is an alias for ip.
+    port: parseInt(parts[5], 10),
+    // skip parts[6] == 'typ'
+    type: parts[7]
+  };
+
+  for (var i = 8; i < parts.length; i += 2) {
+    switch (parts[i]) {
+      case 'raddr':
+        candidate.relatedAddress = parts[i + 1];
+        break;
+      case 'rport':
+        candidate.relatedPort = parseInt(parts[i + 1], 10);
+        break;
+      case 'tcptype':
+        candidate.tcpType = parts[i + 1];
+        break;
+      case 'ufrag':
+        candidate.ufrag = parts[i + 1]; // for backward compatibility.
+        candidate.usernameFragment = parts[i + 1];
+        break;
+      default:
+        // extension handling, in particular ufrag. Don't overwrite.
+        if (candidate[parts[i]] === undefined) {
+          candidate[parts[i]] = parts[i + 1];
+        }
+        break;
+    }
+  }
+  return candidate;
+};
+
+// Translates a candidate object into SDP candidate attribute.
+// This does not include the a= prefix!
+SDPUtils.writeCandidate = function (candidate) {
+  var sdp = [];
+  sdp.push(candidate.foundation);
+
+  var component = candidate.component;
+  if (component === 'rtp') {
+    sdp.push(1);
+  } else if (component === 'rtcp') {
+    sdp.push(2);
+  } else {
+    sdp.push(component);
+  }
+  sdp.push(candidate.protocol.toUpperCase());
+  sdp.push(candidate.priority);
+  sdp.push(candidate.address || candidate.ip);
+  sdp.push(candidate.port);
+
+  var type = candidate.type;
+  sdp.push('typ');
+  sdp.push(type);
+  if (type !== 'host' && candidate.relatedAddress && candidate.relatedPort) {
+    sdp.push('raddr');
+    sdp.push(candidate.relatedAddress);
+    sdp.push('rport');
+    sdp.push(candidate.relatedPort);
+  }
+  if (candidate.tcpType && candidate.protocol.toLowerCase() === 'tcp') {
+    sdp.push('tcptype');
+    sdp.push(candidate.tcpType);
+  }
+  if (candidate.usernameFragment || candidate.ufrag) {
+    sdp.push('ufrag');
+    sdp.push(candidate.usernameFragment || candidate.ufrag);
+  }
+  return 'candidate:' + sdp.join(' ');
+};
+
+// Parses an ice-options line, returns an array of option tags.
+// Sample input:
+// a=ice-options:foo bar
+SDPUtils.parseIceOptions = function (line) {
+  return line.substr(14).split(' ');
+};
+
+// Parses a rtpmap line, returns RTCRtpCoddecParameters. Sample input:
+// a=rtpmap:111 opus/48000/2
+SDPUtils.parseRtpMap = function (line) {
+  var parts = line.substr(9).split(' ');
+  var parsed = {
+    payloadType: parseInt(parts.shift(), 10) // was: id
+  };
+
+  parts = parts[0].split('/');
+
+  parsed.name = parts[0];
+  parsed.clockRate = parseInt(parts[1], 10); // was: clockrate
+  parsed.channels = parts.length === 3 ? parseInt(parts[2], 10) : 1;
+  // legacy alias, got renamed back to channels in ORTC.
+  parsed.numChannels = parsed.channels;
+  return parsed;
+};
+
+// Generates a rtpmap line from RTCRtpCodecCapability or
+// RTCRtpCodecParameters.
+SDPUtils.writeRtpMap = function (codec) {
+  var pt = codec.payloadType;
+  if (codec.preferredPayloadType !== undefined) {
+    pt = codec.preferredPayloadType;
+  }
+  var channels = codec.channels || codec.numChannels || 1;
+  return 'a=rtpmap:' + pt + ' ' + codec.name + '/' + codec.clockRate + (channels !== 1 ? '/' + channels : '') + '\r\n';
+};
+
+// Parses a extmap line (headerextension from RFC 5285). Sample input:
+// a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
+// a=extmap:2/sendonly urn:ietf:params:rtp-hdrext:toffset
+SDPUtils.parseExtmap = function (line) {
+  var parts = line.substr(9).split(' ');
+  return {
+    id: parseInt(parts[0], 10),
+    direction: parts[0].indexOf('/') > 0 ? parts[0].split('/')[1] : 'sendrecv',
+    uri: parts[1]
+  };
+};
+
+// Generates an extmap line from RTCRtpHeaderExtensionParameters or
+// RTCRtpHeaderExtension.
+SDPUtils.writeExtmap = function (headerExtension) {
+  return 'a=extmap:' + (headerExtension.id || headerExtension.preferredId) + (headerExtension.direction && headerExtension.direction !== 'sendrecv' ? '/' + headerExtension.direction : '') + ' ' + headerExtension.uri + '\r\n';
+};
+
+// Parses a fmtp line, returns dictionary. Sample input:
+// a=fmtp:96 vbr=on;cng=on
+// Also deals with vbr=on; cng=on
+SDPUtils.parseFmtp = function (line) {
+  var parsed = {};
+  var kv = void 0;
+  var parts = line.substr(line.indexOf(' ') + 1).split(';');
+  for (var j = 0; j < parts.length; j++) {
+    kv = parts[j].trim().split('=');
+    parsed[kv[0].trim()] = kv[1];
+  }
+  return parsed;
+};
+
+// Generates a fmtp line from RTCRtpCodecCapability or RTCRtpCodecParameters.
+SDPUtils.writeFmtp = function (codec) {
+  var line = '';
+  var pt = codec.payloadType;
+  if (codec.preferredPayloadType !== undefined) {
+    pt = codec.preferredPayloadType;
+  }
+  if (codec.parameters && Object.keys(codec.parameters).length) {
+    var params = [];
+    Object.keys(codec.parameters).forEach(function (param) {
+      if (codec.parameters[param] !== undefined) {
+        params.push(param + '=' + codec.parameters[param]);
+      } else {
+        params.push(param);
+      }
+    });
+    line += 'a=fmtp:' + pt + ' ' + params.join(';') + '\r\n';
+  }
+  return line;
+};
+
+// Parses a rtcp-fb line, returns RTCPRtcpFeedback object. Sample input:
+// a=rtcp-fb:98 nack rpsi
+SDPUtils.parseRtcpFb = function (line) {
+  var parts = line.substr(line.indexOf(' ') + 1).split(' ');
+  return {
+    type: parts.shift(),
+    parameter: parts.join(' ')
+  };
+};
+
+// Generate a=rtcp-fb lines from RTCRtpCodecCapability or RTCRtpCodecParameters.
+SDPUtils.writeRtcpFb = function (codec) {
+  var lines = '';
+  var pt = codec.payloadType;
+  if (codec.preferredPayloadType !== undefined) {
+    pt = codec.preferredPayloadType;
+  }
+  if (codec.rtcpFeedback && codec.rtcpFeedback.length) {
+    // FIXME: special handling for trr-int?
+    codec.rtcpFeedback.forEach(function (fb) {
+      lines += 'a=rtcp-fb:' + pt + ' ' + fb.type + (fb.parameter && fb.parameter.length ? ' ' + fb.parameter : '') + '\r\n';
+    });
+  }
+  return lines;
+};
+
+// Parses a RFC 5576 ssrc media attribute. Sample input:
+// a=ssrc:3735928559 cname:something
+SDPUtils.parseSsrcMedia = function (line) {
+  var sp = line.indexOf(' ');
+  var parts = {
+    ssrc: parseInt(line.substr(7, sp - 7), 10)
+  };
+  var colon = line.indexOf(':', sp);
+  if (colon > -1) {
+    parts.attribute = line.substr(sp + 1, colon - sp - 1);
+    parts.value = line.substr(colon + 1);
+  } else {
+    parts.attribute = line.substr(sp + 1);
+  }
+  return parts;
+};
+
+// Parse a ssrc-group line (see RFC 5576). Sample input:
+// a=ssrc-group:semantics 12 34
+SDPUtils.parseSsrcGroup = function (line) {
+  var parts = line.substr(13).split(' ');
+  return {
+    semantics: parts.shift(),
+    ssrcs: parts.map(function (ssrc) {
+      return parseInt(ssrc, 10);
+    })
+  };
+};
+
+// Extracts the MID (RFC 5888) from a media section.
+// Returns the MID or undefined if no mid line was found.
+SDPUtils.getMid = function (mediaSection) {
+  var mid = SDPUtils.matchPrefix(mediaSection, 'a=mid:')[0];
+  if (mid) {
+    return mid.substr(6);
+  }
+};
+
+// Parses a fingerprint line for DTLS-SRTP.
+SDPUtils.parseFingerprint = function (line) {
+  var parts = line.substr(14).split(' ');
+  return {
+    algorithm: parts[0].toLowerCase(), // algorithm is case-sensitive in Edge.
+    value: parts[1].toUpperCase() // the definition is upper-case in RFC 4572.
+  };
+};
+
+// Extracts DTLS parameters from SDP media section or sessionpart.
+// FIXME: for consistency with other functions this should only
+//   get the fingerprint line as input. See also getIceParameters.
+SDPUtils.getDtlsParameters = function (mediaSection, sessionpart) {
+  var lines = SDPUtils.matchPrefix(mediaSection + sessionpart, 'a=fingerprint:');
+  // Note: a=setup line is ignored since we use the 'auto' role in Edge.
+  return {
+    role: 'auto',
+    fingerprints: lines.map(SDPUtils.parseFingerprint)
+  };
+};
+
+// Serializes DTLS parameters to SDP.
+SDPUtils.writeDtlsParameters = function (params, setupType) {
+  var sdp = 'a=setup:' + setupType + '\r\n';
+  params.fingerprints.forEach(function (fp) {
+    sdp += 'a=fingerprint:' + fp.algorithm + ' ' + fp.value + '\r\n';
+  });
+  return sdp;
+};
+
+// Parses a=crypto lines into
+//   https://rawgit.com/aboba/edgertc/master/msortc-rs4.html#dictionary-rtcsrtpsdesparameters-members
+SDPUtils.parseCryptoLine = function (line) {
+  var parts = line.substr(9).split(' ');
+  return {
+    tag: parseInt(parts[0], 10),
+    cryptoSuite: parts[1],
+    keyParams: parts[2],
+    sessionParams: parts.slice(3)
+  };
+};
+
+SDPUtils.writeCryptoLine = function (parameters) {
+  return 'a=crypto:' + parameters.tag + ' ' + parameters.cryptoSuite + ' ' + (_typeof(parameters.keyParams) === 'object' ? SDPUtils.writeCryptoKeyParams(parameters.keyParams) : parameters.keyParams) + (parameters.sessionParams ? ' ' + parameters.sessionParams.join(' ') : '') + '\r\n';
+};
+
+// Parses the crypto key parameters into
+//   https://rawgit.com/aboba/edgertc/master/msortc-rs4.html#rtcsrtpkeyparam*
+SDPUtils.parseCryptoKeyParams = function (keyParams) {
+  if (keyParams.indexOf('inline:') !== 0) {
+    return null;
+  }
+  var parts = keyParams.substr(7).split('|');
+  return {
+    keyMethod: 'inline',
+    keySalt: parts[0],
+    lifeTime: parts[1],
+    mkiValue: parts[2] ? parts[2].split(':')[0] : undefined,
+    mkiLength: parts[2] ? parts[2].split(':')[1] : undefined
+  };
+};
+
+SDPUtils.writeCryptoKeyParams = function (keyParams) {
+  return keyParams.keyMethod + ':' + keyParams.keySalt + (keyParams.lifeTime ? '|' + keyParams.lifeTime : '') + (keyParams.mkiValue && keyParams.mkiLength ? '|' + keyParams.mkiValue + ':' + keyParams.mkiLength : '');
+};
+
+// Extracts all SDES parameters.
+SDPUtils.getCryptoParameters = function (mediaSection, sessionpart) {
+  var lines = SDPUtils.matchPrefix(mediaSection + sessionpart, 'a=crypto:');
+  return lines.map(SDPUtils.parseCryptoLine);
+};
+
+// Parses ICE information from SDP media section or sessionpart.
+// FIXME: for consistency with other functions this should only
+//   get the ice-ufrag and ice-pwd lines as input.
+SDPUtils.getIceParameters = function (mediaSection, sessionpart) {
+  var ufrag = SDPUtils.matchPrefix(mediaSection + sessionpart, 'a=ice-ufrag:')[0];
+  var pwd = SDPUtils.matchPrefix(mediaSection + sessionpart, 'a=ice-pwd:')[0];
+  if (!(ufrag && pwd)) {
+    return null;
+  }
+  return {
+    usernameFragment: ufrag.substr(12),
+    password: pwd.substr(10)
+  };
+};
+
+// Serializes ICE parameters to SDP.
+SDPUtils.writeIceParameters = function (params) {
+  var sdp = 'a=ice-ufrag:' + params.usernameFragment + '\r\n' + 'a=ice-pwd:' + params.password + '\r\n';
+  if (params.iceLite) {
+    sdp += 'a=ice-lite\r\n';
+  }
+  return sdp;
+};
+
+// Parses the SDP media section and returns RTCRtpParameters.
+SDPUtils.parseRtpParameters = function (mediaSection) {
+  var description = {
+    codecs: [],
+    headerExtensions: [],
+    fecMechanisms: [],
+    rtcp: []
+  };
+  var lines = SDPUtils.splitLines(mediaSection);
+  var mline = lines[0].split(' ');
+  for (var i = 3; i < mline.length; i++) {
+    // find all codecs from mline[3..]
+    var pt = mline[i];
+    var rtpmapline = SDPUtils.matchPrefix(mediaSection, 'a=rtpmap:' + pt + ' ')[0];
+    if (rtpmapline) {
+      var codec = SDPUtils.parseRtpMap(rtpmapline);
+      var fmtps = SDPUtils.matchPrefix(mediaSection, 'a=fmtp:' + pt + ' ');
+      // Only the first a=fmtp:<pt> is considered.
+      codec.parameters = fmtps.length ? SDPUtils.parseFmtp(fmtps[0]) : {};
+      codec.rtcpFeedback = SDPUtils.matchPrefix(mediaSection, 'a=rtcp-fb:' + pt + ' ').map(SDPUtils.parseRtcpFb);
+      description.codecs.push(codec);
+      // parse FEC mechanisms from rtpmap lines.
+      switch (codec.name.toUpperCase()) {
+        case 'RED':
+        case 'ULPFEC':
+          description.fecMechanisms.push(codec.name.toUpperCase());
+          break;
+        default:
+          // only RED and ULPFEC are recognized as FEC mechanisms.
+          break;
+      }
+    }
+  }
+  SDPUtils.matchPrefix(mediaSection, 'a=extmap:').forEach(function (line) {
+    description.headerExtensions.push(SDPUtils.parseExtmap(line));
+  });
+  // FIXME: parse rtcp.
+  return description;
+};
+
+// Generates parts of the SDP media section describing the capabilities /
+// parameters.
+SDPUtils.writeRtpDescription = function (kind, caps) {
+  var sdp = '';
+
+  // Build the mline.
+  sdp += 'm=' + kind + ' ';
+  sdp += caps.codecs.length > 0 ? '9' : '0'; // reject if no codecs.
+  sdp += ' UDP/TLS/RTP/SAVPF ';
+  sdp += caps.codecs.map(function (codec) {
+    if (codec.preferredPayloadType !== undefined) {
+      return codec.preferredPayloadType;
+    }
+    return codec.payloadType;
+  }).join(' ') + '\r\n';
+
+  sdp += 'c=IN IP4 0.0.0.0\r\n';
+  sdp += 'a=rtcp:9 IN IP4 0.0.0.0\r\n';
+
+  // Add a=rtpmap lines for each codec. Also fmtp and rtcp-fb.
+  caps.codecs.forEach(function (codec) {
+    sdp += SDPUtils.writeRtpMap(codec);
+    sdp += SDPUtils.writeFmtp(codec);
+    sdp += SDPUtils.writeRtcpFb(codec);
+  });
+  var maxptime = 0;
+  caps.codecs.forEach(function (codec) {
+    if (codec.maxptime > maxptime) {
+      maxptime = codec.maxptime;
+    }
+  });
+  if (maxptime > 0) {
+    sdp += 'a=maxptime:' + maxptime + '\r\n';
+  }
+
+  if (caps.headerExtensions) {
+    caps.headerExtensions.forEach(function (extension) {
+      sdp += SDPUtils.writeExtmap(extension);
+    });
+  }
+  // FIXME: write fecMechanisms.
+  return sdp;
+};
+
+// Parses the SDP media section and returns an array of
+// RTCRtpEncodingParameters.
+SDPUtils.parseRtpEncodingParameters = function (mediaSection) {
+  var encodingParameters = [];
+  var description = SDPUtils.parseRtpParameters(mediaSection);
+  var hasRed = description.fecMechanisms.indexOf('RED') !== -1;
+  var hasUlpfec = description.fecMechanisms.indexOf('ULPFEC') !== -1;
+
+  // filter a=ssrc:... cname:, ignore PlanB-msid
+  var ssrcs = SDPUtils.matchPrefix(mediaSection, 'a=ssrc:').map(function (line) {
+    return SDPUtils.parseSsrcMedia(line);
+  }).filter(function (parts) {
+    return parts.attribute === 'cname';
+  });
+  var primarySsrc = ssrcs.length > 0 && ssrcs[0].ssrc;
+  var secondarySsrc = void 0;
+
+  var flows = SDPUtils.matchPrefix(mediaSection, 'a=ssrc-group:FID').map(function (line) {
+    var parts = line.substr(17).split(' ');
+    return parts.map(function (part) {
+      return parseInt(part, 10);
+    });
+  });
+  if (flows.length > 0 && flows[0].length > 1 && flows[0][0] === primarySsrc) {
+    secondarySsrc = flows[0][1];
+  }
+
+  description.codecs.forEach(function (codec) {
+    if (codec.name.toUpperCase() === 'RTX' && codec.parameters.apt) {
+      var encParam = {
+        ssrc: primarySsrc,
+        codecPayloadType: parseInt(codec.parameters.apt, 10)
+      };
+      if (primarySsrc && secondarySsrc) {
+        encParam.rtx = { ssrc: secondarySsrc };
+      }
+      encodingParameters.push(encParam);
+      if (hasRed) {
+        encParam = JSON.parse(JSON.stringify(encParam));
+        encParam.fec = {
+          ssrc: primarySsrc,
+          mechanism: hasUlpfec ? 'red+ulpfec' : 'red'
+        };
+        encodingParameters.push(encParam);
+      }
+    }
+  });
+  if (encodingParameters.length === 0 && primarySsrc) {
+    encodingParameters.push({
+      ssrc: primarySsrc
+    });
+  }
+
+  // we support both b=AS and b=TIAS but interpret AS as TIAS.
+  var bandwidth = SDPUtils.matchPrefix(mediaSection, 'b=');
+  if (bandwidth.length) {
+    if (bandwidth[0].indexOf('b=TIAS:') === 0) {
+      bandwidth = parseInt(bandwidth[0].substr(7), 10);
+    } else if (bandwidth[0].indexOf('b=AS:') === 0) {
+      // use formula from JSEP to convert b=AS to TIAS value.
+      bandwidth = parseInt(bandwidth[0].substr(5), 10) * 1000 * 0.95 - 50 * 40 * 8;
+    } else {
+      bandwidth = undefined;
+    }
+    encodingParameters.forEach(function (params) {
+      params.maxBitrate = bandwidth;
+    });
+  }
+  return encodingParameters;
+};
+
+// parses http://draft.ortc.org/#rtcrtcpparameters*
+SDPUtils.parseRtcpParameters = function (mediaSection) {
+  var rtcpParameters = {};
+
+  // Gets the first SSRC. Note that with RTX there might be multiple
+  // SSRCs.
+  var remoteSsrc = SDPUtils.matchPrefix(mediaSection, 'a=ssrc:').map(function (line) {
+    return SDPUtils.parseSsrcMedia(line);
+  }).filter(function (obj) {
+    return obj.attribute === 'cname';
+  })[0];
+  if (remoteSsrc) {
+    rtcpParameters.cname = remoteSsrc.value;
+    rtcpParameters.ssrc = remoteSsrc.ssrc;
+  }
+
+  // Edge uses the compound attribute instead of reducedSize
+  // compound is !reducedSize
+  var rsize = SDPUtils.matchPrefix(mediaSection, 'a=rtcp-rsize');
+  rtcpParameters.reducedSize = rsize.length > 0;
+  rtcpParameters.compound = rsize.length === 0;
+
+  // parses the rtcp-mux attrіbute.
+  // Note that Edge does not support unmuxed RTCP.
+  var mux = SDPUtils.matchPrefix(mediaSection, 'a=rtcp-mux');
+  rtcpParameters.mux = mux.length > 0;
+
+  return rtcpParameters;
+};
+
+SDPUtils.writeRtcpParameters = function (rtcpParameters) {
+  var sdp = '';
+  if (rtcpParameters.reducedSize) {
+    sdp += 'a=rtcp-rsize\r\n';
+  }
+  if (rtcpParameters.mux) {
+    sdp += 'a=rtcp-mux\r\n';
+  }
+  if (rtcpParameters.ssrc !== undefined && rtcpParameters.cname) {
+    sdp += 'a=ssrc:' + rtcpParameters.ssrc + ' cname:' + rtcpParameters.cname + '\r\n';
+  }
+  return sdp;
+};
+
+// parses either a=msid: or a=ssrc:... msid lines and returns
+// the id of the MediaStream and MediaStreamTrack.
+SDPUtils.parseMsid = function (mediaSection) {
+  var parts = void 0;
+  var spec = SDPUtils.matchPrefix(mediaSection, 'a=msid:');
+  if (spec.length === 1) {
+    parts = spec[0].substr(7).split(' ');
+    return { stream: parts[0], track: parts[1] };
+  }
+  var planB = SDPUtils.matchPrefix(mediaSection, 'a=ssrc:').map(function (line) {
+    return SDPUtils.parseSsrcMedia(line);
+  }).filter(function (msidParts) {
+    return msidParts.attribute === 'msid';
+  });
+  if (planB.length > 0) {
+    parts = planB[0].value.split(' ');
+    return { stream: parts[0], track: parts[1] };
+  }
+};
+
+// SCTP
+// parses draft-ietf-mmusic-sctp-sdp-26 first and falls back
+// to draft-ietf-mmusic-sctp-sdp-05
+SDPUtils.parseSctpDescription = function (mediaSection) {
+  var mline = SDPUtils.parseMLine(mediaSection);
+  var maxSizeLine = SDPUtils.matchPrefix(mediaSection, 'a=max-message-size:');
+  var maxMessageSize = void 0;
+  if (maxSizeLine.length > 0) {
+    maxMessageSize = parseInt(maxSizeLine[0].substr(19), 10);
+  }
+  if (isNaN(maxMessageSize)) {
+    maxMessageSize = 65536;
+  }
+  var sctpPort = SDPUtils.matchPrefix(mediaSection, 'a=sctp-port:');
+  if (sctpPort.length > 0) {
+    return {
+      port: parseInt(sctpPort[0].substr(12), 10),
+      protocol: mline.fmt,
+      maxMessageSize: maxMessageSize
+    };
+  }
+  var sctpMapLines = SDPUtils.matchPrefix(mediaSection, 'a=sctpmap:');
+  if (sctpMapLines.length > 0) {
+    var parts = sctpMapLines[0].substr(10).split(' ');
+    return {
+      port: parseInt(parts[0], 10),
+      protocol: parts[1],
+      maxMessageSize: maxMessageSize
+    };
+  }
+};
+
+// SCTP
+// outputs the draft-ietf-mmusic-sctp-sdp-26 version that all browsers
+// support by now receiving in this format, unless we originally parsed
+// as the draft-ietf-mmusic-sctp-sdp-05 format (indicated by the m-line
+// protocol of DTLS/SCTP -- without UDP/ or TCP/)
+SDPUtils.writeSctpDescription = function (media, sctp) {
+  var output = [];
+  if (media.protocol !== 'DTLS/SCTP') {
+    output = ['m=' + media.kind + ' 9 ' + media.protocol + ' ' + sctp.protocol + '\r\n', 'c=IN IP4 0.0.0.0\r\n', 'a=sctp-port:' + sctp.port + '\r\n'];
+  } else {
+    output = ['m=' + media.kind + ' 9 ' + media.protocol + ' ' + sctp.port + '\r\n', 'c=IN IP4 0.0.0.0\r\n', 'a=sctpmap:' + sctp.port + ' ' + sctp.protocol + ' 65535\r\n'];
+  }
+  if (sctp.maxMessageSize !== undefined) {
+    output.push('a=max-message-size:' + sctp.maxMessageSize + '\r\n');
+  }
+  return output.join('');
+};
+
+// Generate a session ID for SDP.
+// https://tools.ietf.org/html/draft-ietf-rtcweb-jsep-20#section-5.2.1
+// recommends using a cryptographically random +ve 64-bit value
+// but right now this should be acceptable and within the right range
+SDPUtils.generateSessionId = function () {
+  return Math.random().toString().substr(2, 21);
+};
+
+// Write boiler plate for start of SDP
+// sessId argument is optional - if not supplied it will
+// be generated randomly
+// sessVersion is optional and defaults to 2
+// sessUser is optional and defaults to 'thisisadapterortc'
+SDPUtils.writeSessionBoilerplate = function (sessId, sessVer, sessUser) {
+  var sessionId = void 0;
+  var version = sessVer !== undefined ? sessVer : 2;
+  if (sessId) {
+    sessionId = sessId;
+  } else {
+    sessionId = SDPUtils.generateSessionId();
+  }
+  var user = sessUser || 'thisisadapterortc';
+  // FIXME: sess-id should be an NTP timestamp.
+  return 'v=0\r\n' + 'o=' + user + ' ' + sessionId + ' ' + version + ' IN IP4 127.0.0.1\r\n' + 's=-\r\n' + 't=0 0\r\n';
+};
+
+// Gets the direction from the mediaSection or the sessionpart.
+SDPUtils.getDirection = function (mediaSection, sessionpart) {
+  // Look for sendrecv, sendonly, recvonly, inactive, default to sendrecv.
+  var lines = SDPUtils.splitLines(mediaSection);
+  for (var i = 0; i < lines.length; i++) {
+    switch (lines[i]) {
+      case 'a=sendrecv':
+      case 'a=sendonly':
+      case 'a=recvonly':
+      case 'a=inactive':
+        return lines[i].substr(2);
+      default:
+      // FIXME: What should happen here?
+    }
+  }
+  if (sessionpart) {
+    return SDPUtils.getDirection(sessionpart);
+  }
+  return 'sendrecv';
+};
+
+SDPUtils.getKind = function (mediaSection) {
+  var lines = SDPUtils.splitLines(mediaSection);
+  var mline = lines[0].split(' ');
+  return mline[0].substr(2);
+};
+
+SDPUtils.isRejected = function (mediaSection) {
+  return mediaSection.split(' ', 2)[1] === '0';
+};
+
+SDPUtils.parseMLine = function (mediaSection) {
+  var lines = SDPUtils.splitLines(mediaSection);
+  var parts = lines[0].substr(2).split(' ');
+  return {
+    kind: parts[0],
+    port: parseInt(parts[1], 10),
+    protocol: parts[2],
+    fmt: parts.slice(3).join(' ')
+  };
+};
+
+SDPUtils.parseOLine = function (mediaSection) {
+  var line = SDPUtils.matchPrefix(mediaSection, 'o=')[0];
+  var parts = line.substr(2).split(' ');
+  return {
+    username: parts[0],
+    sessionId: parts[1],
+    sessionVersion: parseInt(parts[2], 10),
+    netType: parts[3],
+    addressType: parts[4],
+    address: parts[5]
+  };
+};
+
+// a very naive interpretation of a valid SDP.
+SDPUtils.isValidSDP = function (blob) {
+  if (typeof blob !== 'string' || blob.length === 0) {
+    return false;
+  }
+  var lines = SDPUtils.splitLines(blob);
+  for (var i = 0; i < lines.length; i++) {
+    if (lines[i].length < 2 || lines[i].charAt(1) !== '=') {
+      return false;
+    }
+    // TODO: check the modifier a bit more.
+  }
+  return true;
+};
+
+// Expose public methods.
+if ((typeof module === 'undefined' ? 'undefined' : _typeof(module)) === 'object') {
+  module.exports = SDPUtils;
+}
+},{}]},{},[1])(1)
+});

ruoyi-ui/public/static/webrtcstreamer.js

@@ -0,0 +1,370 @@
+var WebRtcStreamer = (function() {
+
+/** 
+ * Interface with WebRTC-streamer API
+ * @constructor
+ * @param {string} videoElement - id of the video element tag
+ * @param {string} srvurl -  url of webrtc-streamer (default is current location)
+*/
+var WebRtcStreamer = function WebRtcStreamer (videoElement, srvurl) {
+	if (typeof videoElement === "string") {
+		this.videoElement = document.getElementById(videoElement);
+	} else {
+		this.videoElement = videoElement;
+	}
+	this.srvurl           = srvurl || location.protocol+"//"+window.location.hostname+":"+window.location.port;
+	this.pc               = null;    
+
+	this.mediaConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: true };
+
+	this.iceServers = null;
+	this.earlyCandidates = [];
+}
+
+WebRtcStreamer.prototype._handleHttpErrors = function (response) {
+    if (!response.ok) {
+        throw Error(response.statusText);
+    }
+    return response;
+}
+
+/** 
+ * Connect a WebRTC Stream to videoElement 
+ * @param {string} videourl - id of WebRTC video stream
+ * @param {string} audiourl - id of WebRTC audio stream
+ * @param {string} options  -  options of WebRTC call
+ * @param {string} stream   -  local stream to send
+ * @param {string} prefmime -  prefered mime
+*/
+WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream, prefmime) {
+	this.disconnect();
+	
+	// getIceServers is not already received
+	if (!this.iceServers) {
+		console.log("Get IceServers");
+		
+		fetch(this.srvurl + "/api/getIceServers")
+			.then(this._handleHttpErrors)
+			.then( (response) => (response.json()) )
+			.then( (response) =>  this.onReceiveGetIceServers(response, videourl, audiourl, options, localstream, prefmime))
+			.catch( (error) => this.onError("getIceServers " + error ))
+				
+	} else {
+		this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream, prefmime);
+	}
+}
+
+/** 
+ * Disconnect a WebRTC Stream and clear videoElement source
+*/
+WebRtcStreamer.prototype.disconnect = function() {		
+	if (this.videoElement?.srcObject) {
+		this.videoElement.srcObject.getTracks().forEach(track => {
+			track.stop()
+			this.videoElement.srcObject.removeTrack(track);
+		});
+	}
+	if (this.pc) {
+		fetch(this.srvurl + "/api/hangup?peerid=" + this.pc.peerid)
+			.then(this._handleHttpErrors)
+			.catch( (error) => this.onError("hangup " + error ))
+
+		
+		try {
+			this.pc.close();
+		}
+		catch (e) {
+			console.log ("Failure close peer connection:" + e);
+		}
+		this.pc = null;
+	}
+}    
+
+WebRtcStreamer.prototype.filterPreferredCodec = function(sdp, prefmime) {
+    const lines = sdp.split('\n');
+    const [prefkind, prefcodec] = prefmime.toLowerCase().split('/');
+    let currentMediaType = null;
+    let sdpSections = [];
+    let currentSection = [];
+
+    // Group lines into sections
+    lines.forEach(line => {
+        if (line.startsWith('m=')) {
+            if (currentSection.length) {
+                sdpSections.push(currentSection);
+            }
+            currentSection = [line];
+        } else {
+            currentSection.push(line);
+        }
+    });
+    sdpSections.push(currentSection);
+
+    // Process each section
+    const processedSections = sdpSections.map(section => {
+        const firstLine = section[0];
+        if (!firstLine.startsWith('m=' + prefkind)) {
+            return section.join('\n');
+        }
+
+        // Get payload types for preferred codec
+        const rtpLines = section.filter(line => line.startsWith('a=rtpmap:'));
+        const preferredPayloads = rtpLines
+            .filter(line => line.toLowerCase().includes(prefcodec))
+            .map(line => line.split(':')[1].split(' ')[0]);
+
+        if (preferredPayloads.length === 0) {
+            return section.join('\n');
+        }
+
+        // Modify m= line to only include preferred payloads
+        const mLine = firstLine.split(' ');
+        const newMLine = [...mLine.slice(0,3), ...preferredPayloads].join(' ');
+
+        // Filter related attributes
+        const filteredLines = section.filter(line => {
+            if (line === firstLine) return false;
+            if (line.startsWith('a=rtpmap:')) {
+                return preferredPayloads.some(payload => line.startsWith(`a=rtpmap:${payload}`));
+            }
+            if (line.startsWith('a=fmtp:') || line.startsWith('a=rtcp-fb:')) {
+                return preferredPayloads.some(payload => line.startsWith(`a=${line.split(':')[0].split('a=')[1]}:${payload}`));
+            }
+            return true;
+        });
+
+        return [newMLine, ...filteredLines].join('\n');
+    });
+
+    return processedSections.join('\n');
+}
+
+/*
+* GetIceServers callback
+*/
+WebRtcStreamer.prototype.onReceiveGetIceServers = function(iceServers, videourl, audiourl, options, stream, prefmime) {
+	this.iceServers       = iceServers;
+	this.pcConfig         = iceServers || {"iceServers": [] };
+	try {            
+		this.createPeerConnection();
+
+		let callurl = this.srvurl + "/api/call?peerid=" + this.pc.peerid + "&url=" + encodeURIComponent(videourl);
+		if (audiourl) {
+			callurl += "&audiourl="+encodeURIComponent(audiourl);
+		}
+		if (options) {
+			callurl += "&options="+encodeURIComponent(options);
+		}
+		
+		if (stream) {
+			this.pc.addStream(stream);
+		}
+
+                // clear early candidates
+		this.earlyCandidates.length = 0;	
+	
+		// create Offer
+		this.pc.createOffer(this.mediaConstraints).then((sessionDescription) => {
+			console.log("Create offer:" + JSON.stringify(sessionDescription));
+
+			console.log(`video codecs:${Array.from(new Set(RTCRtpReceiver.getCapabilities("video")?.codecs?.map(codec => codec.mimeType)))}`)
+			console.log(`audio codecs:${Array.from(new Set(RTCRtpReceiver.getCapabilities("audio")?.codecs?.map(codec => codec.mimeType)))}`)
+	
+			if (prefmime != undefined) {
+				//set prefered codec
+				let [prefkind] = prefmime.split('/');
+				if (prefkind != "video" && prefkind != "audio") {
+					prefkind = "video";
+					prefmime = prefkind + "/" + prefmime;
+				}
+				console.log("sdp:" + sessionDescription.sdp);
+				sessionDescription.sdp = this.filterPreferredCodec(sessionDescription.sdp, prefmime);
+				console.log("sdp:" + sessionDescription.sdp);
+			}
+	
+			
+			this.pc.setLocalDescription(sessionDescription)
+				.then(() => {
+					fetch(callurl, { method: "POST", body: JSON.stringify(sessionDescription) })
+						.then(this._handleHttpErrors)
+						.then( (response) => (response.json()) )
+						.catch( (error) => this.onError("call " + error ))
+						.then( (response) =>  this.onReceiveCall(response) )
+						.catch( (error) => this.onError("call " + error ))
+				
+				}, (error) => {
+					console.log ("setLocalDescription error:" + JSON.stringify(error)); 
+				});
+			
+		}, (error) => { 
+			alert("Create offer error:" + JSON.stringify(error));
+		});
+
+	} catch (e) {
+		this.disconnect();
+		alert("connect error: " + e);
+	}	    
+}
+
+
+WebRtcStreamer.prototype.getIceCandidate = function() {
+	fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid)
+		.then(this._handleHttpErrors)
+		.then( (response) => (response.json()) )
+		.then( (response) =>  this.onReceiveCandidate(response))
+		.catch( (error) => this.onError("getIceCandidate " + error ))
+}
+					
+/*
+* create RTCPeerConnection 
+*/
+WebRtcStreamer.prototype.createPeerConnection = function() {
+	console.log("createPeerConnection  config: " + JSON.stringify(this.pcConfig));
+	this.pc = new RTCPeerConnection(this.pcConfig);
+	let pc = this.pc;
+	pc.peerid = Math.random();			
+	
+	pc.onicecandidate = (evt) => this.onIceCandidate(evt);
+	pc.onaddstream    = (evt) => this.onAddStream(evt);
+	pc.oniceconnectionstatechange = (evt) => {  
+		console.log("oniceconnectionstatechange  state: " + pc.iceConnectionState);
+		if (this.videoElement) {
+			if (pc.iceConnectionState === "connected") {
+				this.videoElement.style.opacity = "1.0";
+			}			
+			else if (pc.iceConnectionState === "disconnected") {
+				this.videoElement.style.opacity = "0.25";
+			}			
+			else if ( (pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed") )  {
+				this.videoElement.style.opacity = "0.5";
+			} else if (pc.iceConnectionState === "new") {
+				this.getIceCandidate();
+			}
+		}
+	}
+	pc.ondatachannel = function(evt) {  
+		console.log("remote datachannel created:"+JSON.stringify(evt));
+		
+		evt.channel.onopen = function () {
+			console.log("remote datachannel open");
+			this.send("remote channel openned");
+		}
+		evt.channel.onmessage = function (event) {
+			console.log("remote datachannel recv:"+JSON.stringify(event.data));
+		}
+	}
+
+	try {
+		let dataChannel = pc.createDataChannel("ClientDataChannel");
+		dataChannel.onopen = function() {
+			console.log("local datachannel open");
+			this.send("local channel openned");
+		}
+		dataChannel.onmessage = function(evt) {
+			console.log("local datachannel recv:"+JSON.stringify(evt.data));
+		}
+	} catch (e) {
+		console.log("Cannor create datachannel error: " + e);
+	}	
+	
+	console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig) );
+	return pc;
+}
+
+
+/*
+* RTCPeerConnection IceCandidate callback
+*/
+WebRtcStreamer.prototype.onIceCandidate = function (event) {
+	if (event.candidate) {
+		if (this.pc.currentRemoteDescription)  {
+			this.addIceCandidate(this.pc.peerid, event.candidate);					
+		} else {
+			this.earlyCandidates.push(event.candidate);
+		}
+	} 
+	else {
+		console.log("End of candidates.");
+	}
+}
+
+
+WebRtcStreamer.prototype.addIceCandidate = function(peerid, candidate) {
+	fetch(this.srvurl + "/api/addIceCandidate?peerid="+peerid, { method: "POST", body: JSON.stringify(candidate) })
+		.then(this._handleHttpErrors)
+		.then( (response) => (response.json()) )
+		.then( (response) =>  {console.log("addIceCandidate ok:" + response)})
+		.catch( (error) => this.onError("addIceCandidate " + error ))
+}
+				
+/*
+* RTCPeerConnection AddTrack callback
+*/
+WebRtcStreamer.prototype.onAddStream = function(event) {
+	console.log("Remote track added:" +  JSON.stringify(event));
+	
+	this.videoElement.srcObject = event.stream;
+	let promise = this.videoElement.play();
+	if (promise !== undefined) {
+	  promise.catch((error) => {
+		console.warn("error:"+error);
+		this.videoElement.setAttribute("controls", true);
+	  });
+	}
+}
+		
+/*
+* AJAX /call callback
+*/
+WebRtcStreamer.prototype.onReceiveCall = function(dataJson) {
+
+	console.log("offer: " + JSON.stringify(dataJson));
+	let descr = new RTCSessionDescription(dataJson);
+	this.pc.setRemoteDescription(descr).then(() =>  { 
+			console.log ("setRemoteDescription ok");
+			while (this.earlyCandidates.length) {
+				let candidate = this.earlyCandidates.shift();
+				this.addIceCandidate(this.pc.peerid, candidate);				
+			}
+		
+			this.getIceCandidate()
+		}
+		, (error) => { 
+			console.log ("setRemoteDescription error:" + JSON.stringify(error)); 
+		});
+}	
+
+/*
+* AJAX /getIceCandidate callback
+*/
+WebRtcStreamer.prototype.onReceiveCandidate = function(dataJson) {
+	console.log("candidate: " + JSON.stringify(dataJson));
+	if (dataJson) {
+		for (let i=0; i<dataJson.length; i++) {
+			let candidate = new RTCIceCandidate(dataJson[i]);
+			
+			console.log("Adding ICE candidate :" + JSON.stringify(candidate) );
+			this.pc.addIceCandidate(candidate).then( () =>      { console.log ("addIceCandidate OK"); }
+				, (error) => { console.log ("addIceCandidate error:" + JSON.stringify(error)); } );
+		}
+		this.pc.addIceCandidate();
+	}
+}
+
+
+/*
+* AJAX callback for Error
+*/
+WebRtcStreamer.prototype.onError = function(status) {
+	console.log("onError:" + status);
+}
+
+return WebRtcStreamer;
+})();
+
+if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
+	window.WebRtcStreamer = WebRtcStreamer;
+}
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+	module.exports = WebRtcStreamer;
+}

ruoyi-ui/src/api/manage/equipmentManage.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询设备管理列表
 export function listEquipmentManage(query) {
   return request({
-    url: '/system/equipmentManage/list',
+    url: '/manage/equipmentManage/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listEquipmentManage(query) {
 // 查询设备管理详细
 export function getEquipmentManage(equipmentId) {
   return request({
-    url: '/system/equipmentManage/' + equipmentId,
+    url: '/manage/equipmentManage/' + equipmentId,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getEquipmentManage(equipmentId) {
 // 新增设备管理
 export function addEquipmentManage(data) {
   return request({
-    url: '/system/equipmentManage',
+    url: '/manage/equipmentManage',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addEquipmentManage(data) {
 // 修改设备管理
 export function updateEquipmentManage(data) {
   return request({
-    url: '/system/equipmentManage/put',
+    url: '/manage/equipmentManage/put',
     method: 'post',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateEquipmentManage(data) {
 // 删除设备管理
 export function delEquipmentManage(equipmentId) {
   return request({
-    url: '/system/equipmentManage/delete/' + equipmentId,
+    url: '/manage/equipmentManage/delete/' + equipmentId,
     method: 'get'
   })
 }

ruoyi-ui/src/api/system/channelNumber.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询通道管理列表
 export function listChannelNumber(query) {
   return request({
-    url: '/system/channelNumber/list',
+    url: '/manage/channelNumber/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listChannelNumber(query) {
 // 查询通道管理详细
 export function getChannelNumber(channelId) {
   return request({
-    url: '/system/channelNumber/' + channelId,
+    url: '/manage/channelNumber/' + channelId,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getChannelNumber(channelId) {
 // 新增通道管理
 export function addChannelNumber(data) {
   return request({
-    url: '/system/channelNumber',
+    url: '/manage/channelNumber',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addChannelNumber(data) {
 // 修改通道管理
 export function updateChannelNumber(data) {
   return request({
-    url: '/system/channelNumber/put',
+    url: '/manage/channelNumber/put',
     method: 'post',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateChannelNumber(data) {
 // 删除通道管理
 export function delChannelNumber(channelId) {
   return request({
-    url: '/system/channelNumber/delete/' + channelId,
+    url: '/manage/channelNumber/delete/' + channelId,
     method: 'get'
   })
 }

ruoyi-ui/src/assets/styles/index.scss

@@ -122,8 +122,8 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
-  // background: linear-gradient(180deg, #E7F5F1, #F6F9FA) !important;
-  background-color: #f8f8f8;
+  background: linear-gradient(180deg, #E7F5F1, #F6F9FA) !important;
+  // background-color: #E7F5F1;
   padding-top: 0;
 }
 

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -34,6 +34,7 @@
 
     .scrollbar-wrapper {
       overflow-x: hidden !important;
+      background-color:#e7f5f1;
     }
 
     .el-scrollbar__bar.is-vertical {

ruoyi-ui/src/components/Mqttzj/index.vue

@@ -0,0 +1,175 @@
+<template>
+<div class="mqtt-client">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <h2>MQTT Client</h2>
+          <el-tag :type="connectionStatus === 'Connected' ? 'success' : 'danger'">
+            {{ connectionStatus }}
+          </el-tag>
+        </div>
+      </template>
+
+      <!-- 连接配置 -->
+      <div class="connection-settings">
+        <el-form :model="mqttConfig" label-width="120px">
+          <el-form-item label="Broker URL">
+            <el-input v-model="mqttConfig.url" :disabled="isConnected" />
+          </el-form-item>
+          <el-form-item label="Topic">
+            <el-input v-model="mqttConfig.topic" :disabled="isConnected" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toggleConnection" :loading="connecting">
+              {{ isConnected ? 'Disconnect' : 'Connect' }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 消息发送 -->
+      <div class="message-sender" v-if="isConnected">
+        <el-input
+          v-model="messageToSend"
+          placeholder="Enter message to send"
+          :rows="3"
+          type="textarea"
+        />
+        <el-button type="primary" @click="sendMessage" :disabled="!messageToSend" class="send-btn">
+          Send Message
+        </el-button>
+      </div>
+
+      <!-- 消息列表 -->
+      <div class="message-list">
+        <h3>Messages</h3>
+        <el-timeline>
+          <el-timeline-item
+            v-for="(msg, index) in messages"
+            :key="index"
+            :type="msg.type === 'sent' ? 'primary' : 'success'"
+            :timestamp="msg.timestamp"
+          >
+            <el-card class="message-card">
+              <p><strong>{{ msg.type === 'sent' ? 'Sent' : 'Received' }}:</strong></p>
+              <p>{{ msg.content }}</p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+/**
+ * 引入 npm install mqtt --save
+ * 父组件用法介绍
+ * 引入该组件
+ * 使用 <MqttClinent v-model="mqttThemeName" @input="mqttArrived" @mqttError="mqttError" ref="mqttName" />
+ * v-model 里面写入订阅的主题（mqttThemeName）
+ * mqttArrived(val){} 方法用来处理消息返回的事件方法
+ * mqtt链接异常方法的接受 mqttError(error){}
+ * 父组件手动调用重连方法 this.$refs.mqttName.mqttReconnect()
+ */
+import mqtt from "mqtt"
+var client
+const options = {
+  connectTimeout: 40 * 1000,
+  clean: true,
+  clientId: "clientId",
+  username: "MQTT_USERNAME",
+  password: "MQTT_PASSWORD"
+}
+client = mqtt.connect('MQTT_SERVICE', options)
+
+export default {
+  name: "MqttClient",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  created() {
+    // this.initConnect()
+  },
+  methods: {
+    initConnect() {
+      console.log(2)
+      // 订阅消息
+      client.on("connect", (e) => {
+        client.subscribe(this.value, { qos: 0 }, (error) => {
+          if (!error) {
+            console.log("消息订阅成功！")
+          } else {
+            console.log("消息订阅失败！")
+          }
+        });
+      });
+      //  接收消息
+      client.on("message", (topic, message) => {
+        // 消息内容 我这里后台返回的是Json的所以转了一下， 有的是[object object] 就用 message.toString() 转化
+        this.$emit("input", JSON.parse(message))
+        console.log(`来自:${topic}的消息:${JSON.parse(message)}`)
+      })
+      // 断开发起重连（非必须）
+      client.on("reconnect", (error) => {
+        console.log("正在重连:", error)
+      })
+      // 链接异常处理（非必须）
+      client.on("error", (error) => {
+        this.$emit("mqttError", error)
+        console.log("连接失败:", error)
+      })
+    },
+    // 如果手动发起重连 【 父组件手动调用重连方法 this.$refs.mqttName.mqttReconnect() 】
+    mqttReconnect(){
+      client.on("reconnect", (error) => {
+        console.log("正在手动重连:", error)
+      })
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.mqtt-client {
+  width: 800px;
+  margin: 20px auto;
+  padding: 0 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.connection-settings {
+  margin-bottom: 20px;
+}
+
+.message-sender {
+  margin-bottom: 20px;
+}
+
+.send-btn {
+  margin-top: 10px;
+}
+
+.message-list {
+  margin-top: 20px;
+}
+
+.message-card {
+  margin-bottom: 10px;
+}
+
+.el-timeline-item {
+  margin-bottom: 20px;
+}
+</style>
+

ruoyi-ui/src/main.js

@@ -42,6 +42,8 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+// import Mqttzj from '@/components/Mqttzj'
+
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -64,6 +66,8 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImageUploadr', ImageUploadr)
 Vue.component('Photo', Photo)
+// Vue.component('Mqttzj', Mqttzj)
+
 
 
 Vue.component('ImagePreview', ImagePreview)

ruoyi-ui/src/settings.js

@@ -1,7 +1,7 @@
 module.exports = {
   urls: `http://192.168.101.32:8099`,
   // 10.90.90.52 192.168.101.245
-  // urls:`https://xygl.qs163.cn`,
+  // urls:`https://zxygj.qs163.cn`,
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */

ruoyi-ui/src/utils/mqttHandler.js

@@ -0,0 +1,65 @@
+import mqtt from "mqtt";
+import Vue from 'vue'
+var vm = new Vue();
+class mqttHandle {
+    constructor(subscribe) {
+        this.connect = {
+            host: vm.mqttHost,
+            port: vm.mqttPort,
+            endpoint: "/mqtt",
+            clean: true, // 保留会话
+            cleanSession: true,
+            connectTimeout: 7000, // 超时时间
+            reconnectPeriod: 7000, // 重连时间间隔
+            // 认证信息
+            clientId: Number(new Date()).toString(),
+            username: "emqx_t",
+            password: "emqx_t",
+        }
+        this.subscription = {
+            topic: subscribe,  //需要传入数组的包含订阅的名称
+            qos: 2,
+        }
+        this.mqttClient = null;
+    }
+    /**
+     * 创建链接
+     * @returns client
+     */
+    createConnect() {
+        //配置链接
+        const { host, port, endpoint, ...options } = this.connect;
+        const connectUrl = `ws://13.229.167.76:1884/mqtt`;
+        try {
+            this._client = mqtt.connect(connectUrl, options);
+
+        } catch (error) {
+            console.log("mqtt.connect error", error);
+        }
+        this._client.on("connect", () => {
+            console.log("Connection succeeded!");
+
+        });
+        this._client.on('reconnect', (error) => {
+            console.log('正在重连', error)
+        })
+        this._client.on("error", (error) => {
+            console.log("Connection failed", error);
+        });
+
+        //配置topic
+        const { topic, qos } = this.subscription;
+        this._client.subscribe(topic, { qos: qos }, (error, res) => {
+            if (error) {
+                console.log("Subscribe to topics error", error);
+                return;
+            }
+            this.subscribeSuccess = true;
+            // console.log("Subscribe to topics res", res[0].qos, res[0].topic);
+        });
+        this.mqttClient = this._client;
+        return this.mqttClient;
+    }
+}
+
+export default mqttHandle;

ruoyi-ui/src/views/dashboard/PieChart.vue

@@ -146,8 +146,8 @@ watch: {
                                    hoverAnimation: false,
                                    itemStyle: {
                                        normal: {
-                                           // borderWidth: 5, // 为两个颜色之间那个宽度
-                                           // borderColor: '#fff',  // 边框颜色白色
+                                           borderWidth: 5, // 为两个颜色之间那个宽度
+                                           borderColor: '#fff',  // 边框颜色白色
                                            color: colors[0]
                                        }
                                    }
@@ -158,8 +158,8 @@ watch: {
                                    hoverAnimation: false,
                                    itemStyle: {
                                        normal: {
-                                           // borderWidth: 5,
-                                           // borderColor: '#fff',
+                                           borderWidth: 5,
+                                           borderColor: '#fff',
                                            color: colors[1]
                                        }
                                    }
@@ -170,8 +170,8 @@ watch: {
                                    hoverAnimation: false,
                                    itemStyle: {
                                        normal: {
-                                           // borderWidth: 5,
-                                           // borderColor: '#fff',
+                                           borderWidth: 5,
+                                           borderColor: '#fff',
                                            color: colors[2]
                                        }
                                    }

ruoyi-ui/src/views/dashboard/RaddarChart.vue

@@ -47,68 +47,75 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
 
       this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        radar: {
-          radius: '66%',
-          center: ['50%', '42%'],
-          splitNumber: 8,
-          splitArea: {
-            areaStyle: {
-              color: 'rgba(127,95,132,.3)',
-              opacity: 1,
-              shadowBlur: 45,
-              shadowColor: 'rgba(0,0,0,.5)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 15
-            }
+        title: {
+            text: ''
           },
-          indicator: [
-            { name: 'Sales', max: 10000 },
-            { name: 'Administration', max: 20000 },
-            { name: 'Information Techology', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
-            { name: 'Development', max: 20000 },
-            { name: 'Marketing', max: 20000 }
-          ]
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
-        },
-        series: [{
-          type: 'radar',
-          symbolSize: 0,
-          areaStyle: {
-            normal: {
-              shadowBlur: 13,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1
-            }
+          tooltip:{trigger:'item',backgroundColor:'#f2f2f2'},
+          legend: {
+            data:[]
           },
-          data: [
-            {
-              value: [5000, 7000, 12000, 11000, 15000, 14000],
-              name: 'Allocated Budget'
-            },
-            {
-              value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
-            },
+           splitArea : {
+                       show : false,
+                       areaStyle : {
+                           color: 'rgba(255,0,0,0)', // 图表背景的颜色
+                       },
+                   },
+
+              // 设置雷达图中间射线的颜色
+                      axisLine: {
+                          lineStyle: {
+                              color: 'rgba(131,141,158,.1)',
+                              },
+                      },
+            splitLine : {
+                        show : true,
+                        lineStyle : {
+                            width : 1,
+                            color : 'rgba(131,141,158,.1)', // 设置网格的颜色
+                        },
+                    },
+          radar: {
+            // shape: 'circle',
+            indicator: [
+              { name: 'Sales', max: 6500 },
+              { name: 'Administration', max: 16000 },
+              { name: 'Information Technology', max: 30000 },
+              { name: 'Customer Support', max: 38000 },
+              { name: 'Development', max: 52000 },
+              { name: 'Marketing', max: 25000 }
+            ]
+          },
+          series: [
             {
-              value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
+              name: 'Budget vs spending',
+              type: 'radar',
+              areaStyle: {
+                          normal: {
+                              width: 1,
+                              opacity: 0.2,
+                          },
+                      },
+              data: [
+                {
+                  value: [4200, 3000, 20000, 35000, 50000, 18000],
+                  name: 'Allocated Budget',
+                  // 设置区域边框和区域的颜色
+                                  itemStyle: {
+                                      normal: {
+                                          color: 'rgba(255,171,43,1)',
+                                          lineStyle: {
+                                              color: 'rgba(255,171,43,0.17)',
+                                          },
+                                      },
+                                      },
+                  areaStyle: {
+                              color: 'rgba(255,171,43,1)'
+                            }
+                },
+
+              ]
             }
-          ],
-          animationDuration: animationDuration
-        }]
+          ]
       })
     }
   }

ruoyi-ui/src/views/index.vue

@@ -3,13 +3,14 @@
     <div>
     <el-row :gutter="20">
       <el-col :span="16">
-         <el-col :span="24" style="padding-left: 0;padding-right: 0; border-radius: 10px;" >
+        <!-- 数据居 -->
+         <el-col :span="12" style="padding-left: 0; border-radius: 10px;" v-if="shoue" v-hasPermi="['manage:index:shuju']">
            <div class="block_4 flex-col">
                      <div class="group_2 flex-row justify-between">
                        <img
                          class="thumbnail_5"
                          referrerpolicy="no-referrer"
-                         src="https://lanhu-oss-2537-2.lanhuapp.com/pszcoe3n1ol6darv33oo7yk46dkwxg567200e550-246c-41b3-9049-dfa3474dbd43"
+                         src="../assets/images/icon_htgl_hp_gjtj.png"
                        />
                        <span class="text_3">告警内容统计</span>
                      </div>
@@ -22,17 +23,17 @@
                            <img
                              class="thumbnail_6"
                              referrerpolicy="no-referrer"
-                             src="https://lanhu-oss-2537-2.lanhuapp.com/pszkc6daufldtde73fdjkalphsh76mlo57ed58e47ba-0deb-4ffd-9e4e-86592762cdf6"
+                             src="../assets/images/icon_htgl_hp_tjss.png"
                            />
                            <span class="text_15">28%</span>
                          </div>
                        </div>
-                       <!-- <img
-                         class="image_2"
-                         referrerpolicy="no-referrer"
-                         src="https://lanhu-oss-2537-2.lanhuapp.com/ps7mxkzc5neit681xsy8xznba7hm35r4ttv08926882-7cd0-4694-a312-ebee13b874e7"
-                       /> -->
-                       <div class="text-wrapper_2 flex-col justify-between">
+                      <img
+                                                                 class="image_2"
+                                                                 referrerpolicy="no-referrer"
+                                                                 src="../assets/images/pic_gjpt_hp_sfgx.png"
+                                                               />
+                       <div class="text-wrapper_2 flex-col justify-between" style="width: 84px;">
                          <span class="text_6">越线告警</span>
                          <span class="text_7">08</span>
                          <div style="display: flex; margin-top:20px;">
@@ -40,13 +41,13 @@
                                                    <img
                                                      class="thumbnail_6"
                                                      referrerpolicy="no-referrer"
-                                                     src="https://lanhu-oss-2537-2.lanhuapp.com/pszkc6daufldtde73fdjkalphsh76mlo57ed58e47ba-0deb-4ffd-9e4e-86592762cdf6"
+                                                     src="../assets/images/icon_htgl_hp_tjss.png"
                                                    />
                                                    <span class="text_15">28%</span>
                                                  </div>
 
                        </div>
-                       <div class="text-wrapper_3 flex-col justify-between">
+                       <div class="text-wrapper_3 flex-col justify-between" style="width: 84px;">
                          <span class="text_8">徘徊告警</span>
                          <span class="text_9">06</span>
                           <div style="display: flex; margin-top:20px;">
@@ -54,41 +55,169 @@
                                                     <img
                                                       class="thumbnail_6"
                                                       referrerpolicy="no-referrer"
-                                                      src="https://lanhu-oss-2537-2.lanhuapp.com/pszkc6daufldtde73fdjkalphsh76mlo57ed58e47ba-0deb-4ffd-9e4e-86592762cdf6"
+                                                      src="../assets/images/icon_htgl_hp_tjss.png"
                                                     />
                                                     <span class="text_15">28%</span>
                                                   </div>
                        </div>
-                       <div class="text-wrapper_4 flex-col justify-between">
-                         <span class="text_10">陌生人告警</span>
-                         <span class="text_11">02</span>
+
+
+                     </div>
+
+                   </div>
+         </el-col>
+         <el-col :span="12" style="padding-left: 0; padding-right: 0;border-radius: 10px;" v-if="shoue"  v-hasPermi="['manage:index:shuju']">
+           <div class="block_4 flex-col">
+                     <div class="group_2 flex-row justify-between">
+                       <img
+                         class="thumbnail_5"
+                         referrerpolicy="no-referrer"
+                         src="../assets/images/icon_htgl_hp_bmgj.png"
+                       />
+                       <span class="text_3">部门告警频次统计</span>
+                     </div>
+                     <div class="group_3 flex-row">
+                       <div class="text-wrapper_1 flex-col justify-between">
+                         <span class="text_4">宣传部</span>
+                         <span class="text_5">38</span>
                          <div style="display: flex; margin-top:20px;">
-                           <span class="text_14">较上月</span>
+                           <span class="text_14" style="width: 50px;">上月排名</span>
+
+                           <span class="text_15">28%</span>
                            <img
                              class="thumbnail_6"
                              referrerpolicy="no-referrer"
-                             src="https://lanhu-oss-2537-2.lanhuapp.com/pszkc6daufldtde73fdjkalphsh76mlo57ed58e47ba-0deb-4ffd-9e4e-86592762cdf6"
+                             src="../assets/images/icon_htgl_hp_tjss.png"
                            />
-                           <span class="text_15">28%</span>
                          </div>
                        </div>
-                       <div class="text-wrapper_5 flex-col justify-between">
-                         <span class="text_12">火焰/烟雾告警</span>
-                         <span class="text_13">01</span>
+                       <!-- <img
+                         class="image_2"
+                         referrerpolicy="no-referrer"
+                         src="https://lanhu-oss-2537-2.lanhuapp.com/ps7mxkzc5neit681xsy8xznba7hm35r4ttv08926882-7cd0-4694-a312-ebee13b874e7"
+                       /> -->
+                       <div class="text-wrapper_2 flex-col justify-between" style="width: 84px;">
+                         <span class="text_6">人事部</span>
+                         <span class="text_7">24</span>
                          <div style="display: flex; margin-top:20px;">
-                           <span class="text_14">较上月</span>
-                           <img
-                             class="thumbnail_6"
-                             referrerpolicy="no-referrer"
-                             src="https://lanhu-oss-2537-2.lanhuapp.com/pszkc6daufldtde73fdjkalphsh76mlo57ed58e47ba-0deb-4ffd-9e4e-86592762cdf6"
-                           />
-                           <span class="text_15">28%</span>
-                         </div>
+                                                   <span class="text_14" style="width: 50px;">上月排名</span>
+
+                                                   <span class="text_15">4</span>
+                                                   <img
+                                                     class="thumbnail_6"
+                                                     referrerpolicy="no-referrer"
+                                                     src="../assets/images/icon_htgl_hp_tjss.png"
+                                                   />
+                                                 </div>
+
                        </div>
+                       <div class="text-wrapper_3 flex-col justify-between" style="width: 84px;">
+                         <span class="text_8">档案部</span>
+                         <span class="text_9">6</span>
+                          <div style="display: flex; margin-top:20px;">
+                                                    <span class="text_14" style="width: 50px;">上月排名</span>
+
+                                                    <span class="text_15" style="color: #03BF8A;">1</span>
+                                                    <img
+                                                      class="thumbnail_6"
+                                                      referrerpolicy="no-referrer"
+                                                      src="../assets/images/icon_htgl_sjtj_xj.png"
+                                                    />
+                                                  </div>
+                       </div>
+
+
                      </div>
 
                    </div>
          </el-col>
+                  <!-- 全部 -->
+                  <el-col :span="24" style="padding-left: 0;padding-right: 0; border-radius: 10px;" v-if="!shoue" v-hasPermi="['manage:index:gongyong']">
+                             <div class="block_4 flex-col">
+                                       <div class="group_2 flex-row justify-between">
+                                         <img
+                                           class="thumbnail_5"
+                                           referrerpolicy="no-referrer"
+                                           src="../assets/images/icon_htgl_hp_gjtj.png"
+                                         />
+                                         <span class="text_3">告警内容统计</span>
+                                       </div>
+                                       <div class="group_3 flex-row">
+                                         <div class="text-wrapper_1 flex-col justify-between">
+                                           <span class="text_4">本月告警总数</span>
+                                           <span class="text_5">17</span>
+                                           <div style="display: flex; margin-top:20px;">
+                                             <span class="text_14">较上月</span>
+                                             <img
+                                               class="thumbnail_6"
+                                               referrerpolicy="no-referrer"
+                                               src="../assets/images/icon_htgl_hp_tjss.png"
+                                             />
+                                             <span class="text_15">28%</span>
+                                           </div>
+                                         </div>
+                                         <img
+                                           class="image_2"
+                                           referrerpolicy="no-referrer"
+                                           src="../assets/images/pic_gjpt_hp_sfgx.png"
+                                         />
+                                         <div class="text-wrapper_2 flex-col justify-between">
+                                           <span class="text_6">越线告警</span>
+                                           <span class="text_7">08</span>
+                                           <div style="display: flex; margin-top:20px;">
+                                                                     <span class="text_14">较上月</span>
+                                                                     <img
+                                                                       class="thumbnail_6"
+                                                                       referrerpolicy="no-referrer"
+                                                                       src="../assets/images/icon_htgl_hp_tjss.png"
+                                                                     />
+                                                                     <span class="text_15">28%</span>
+                                                                   </div>
+
+                                         </div>
+                                         <div class="text-wrapper_3 flex-col justify-between">
+                                           <span class="text_8">徘徊告警</span>
+                                           <span class="text_9">06</span>
+                                            <div style="display: flex; margin-top:20px;">
+                                                                      <span class="text_14">较上月</span>
+                                                                      <img
+                                                                        class="thumbnail_6"
+                                                                        referrerpolicy="no-referrer"
+                                                                        src="../assets/images/icon_htgl_hp_tjss.png"
+                                                                      />
+                                                                      <span class="text_15">28%</span>
+                                                                    </div>
+                                         </div>
+                                         <div class="text-wrapper_4 flex-col justify-between">
+                                           <span class="text_10">陌生人告警</span>
+                                           <span class="text_11">02</span>
+                                           <div style="display: flex; margin-top:20px;">
+                                             <span class="text_14">较上月</span>
+                                             <img
+                                               class="thumbnail_6"
+                                               referrerpolicy="no-referrer"
+                                               src="../assets/images/icon_htgl_hp_tjss.png"
+                                             />
+                                             <span class="text_15">28%</span>
+                                           </div>
+                                         </div>
+                                         <div class="text-wrapper_5 flex-col justify-between">
+                                           <span class="text_12">火焰/烟雾告警</span>
+                                           <span class="text_13">01</span>
+                                           <div style="display: flex; margin-top:20px;">
+                                             <span class="text_14">较上月</span>
+                                             <img
+                                               class="thumbnail_6"
+                                               referrerpolicy="no-referrer"
+                                               src="../assets/images/icon_htgl_sjtj_xj.png"
+                                             />
+                                             <span class="text_15">28%</span>
+                                           </div>
+                                         </div>
+                                       </div>
+
+                                     </div>
+                           </el-col>
          <el-col :span="24" style="padding-left: 0;padding-right: 0; border-radius: 10px;" >
            <div class="group_5 flex-col">
                        <div class="group_6 flex-row" style="justify-content: space-between;">
@@ -96,16 +225,18 @@
                            <img
                              class="thumbnail_19"
                              referrerpolicy="no-referrer"
-                             src="https://lanhu-oss-2537-2.lanhuapp.com/psu3p9pm6jypghx3f47jgjfy30ja3ykbq35346262-3398-4814-a521-bc9ac3e30ac7"
+                             src="../assets/images/icon_htgl_hp_ndtj.png"
                            />
                            <span class="text_30">年度告警统计</span>
                            <div class="section_1 flex-row">
-                             <span class="text_31">越线告警</span>
-                             <img
-                               class="thumbnail_20"
-                               referrerpolicy="no-referrer"
-                               src="https://lanhu-oss-2537-2.lanhuapp.com/psfm47lo8z2nwf9tptn20pziqjiho31pmd4090dc3-6956-408d-97cc-9432a673c69d"
-                             />
+                             <el-select v-model="value" placeholder="请选择">
+                                 <el-option
+                                   v-for="item in options"
+                                   :key="item.value"
+                                   :label="item.label"
+                                   :value="item.value">
+                                 </el-option>
+                               </el-select>
                            </div>
                          </div>
                          <span class="text_32">查看更多&nbsp;→</span>
@@ -130,63 +261,54 @@
 
                      </div>
            </el-col>
-           <el-col :span="12" style="padding-left: 0; border-radius: 10px; margin-top: 20px;" >
+           <el-col :span="12" style="padding-left: 0; border-radius: 10px; margin-top: 20px;"  v-if="!shoue" v-hasPermi="['manage:index:gongyong']">
              <div class="box_7 flex-col">
                            <div class="group_10 flex-row justify-between">
                              <div class="image-text_1 flex-row justify-between">
                                <img
                                  class="thumbnail_21"
                                  referrerpolicy="no-referrer"
-                                 src="https://lanhu-oss-2537-2.lanhuapp.com/psz7ip3r1lx39ddipa4t9asue3nlgizcr2m69352d25-9d7b-4b5f-a116-a8b1a9c63bad"
+                                 src="../assets/images/icon_htgl_hp_gjfx.png"
                                />
                                <span class="text-group_1">告警内容分析</span>
                              </div>
                              <div class="group_11 flex-row">
-                               <div class="image-text_2 flex-row justify-between">
-                                 <span class="text-group_2">2025</span>
-                                 <img
-                                   class="thumbnail_22"
-                                   referrerpolicy="no-referrer"
-                                   src="https://lanhu-oss-2537-2.lanhuapp.com/psddvdglysnl66rxvp2pzsrayivek3mvize28b1d838-4c12-4a87-b210-a41016d39338"
-                                 />
+                               <div class="section_1 flex-row">
+                                 <el-select v-model="value" placeholder="请选择">
+                                     <el-option
+                                       v-for="item in options"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                                     </el-option>
+                                   </el-select>
                                </div>
                              </div>
                            </div>
-                           <span class="text_51">烟雾告警</span>
-                           <div class="group_12 flex-row justify-between">
-                             <span class="text_52">越线告警</span>
-                             <img
-                               class="image_5"
-                               referrerpolicy="no-referrer"
-                               src="https://lanhu-oss-2537-2.lanhuapp.com/psl74u17tgk7nsrsy5bqoqo2tyzv1i3ws31f72a3a-f58e-48ac-878f-ee9ce9a87c15"
-                             />
-                             <span class="text_53">火焰告警</span>
-                           </div>
-                           <div class="text-wrapper_8 flex-row justify-between">
-                             <span class="text_54">徘徊告警</span>
-                             <span class="text_55">陌生人告警</span>
-                           </div>
+                           <raddar-chart />
                          </div>
              </el-col>
-             <el-col :span="12" style=" border-radius: 10px; padding-right: 0;margin-top: 20px;" >
+             <el-col :span="12" style=" border-radius: 10px; padding-right: 0;margin-top: 20px;" v-if="!shoue" v-hasPermi="['manage:index:gongyong']">
                <div class="box_8 flex-col">
                              <div class="block_7 flex-row justify-between">
                                <div class="image-text_3 flex-row justify-between">
                                  <img
                                    class="thumbnail_23"
                                    referrerpolicy="no-referrer"
-                                   src="https://lanhu-oss-2537-2.lanhuapp.com/psum99tr1vffjvtyeb4grcmlm3dnnjsksbd421be4-6aa6-46d8-b175-bb40b20e8992"
+                                   src="../assets/images/icon_htgl_hp_yzcd.png"
                                  />
                                  <span class="text-group_3">告警严重程度分析</span>
                                </div>
                                <div class="section_2 flex-row">
-                                 <div class="image-text_4 flex-row justify-between">
-                                   <span class="text-group_4">2025</span>
-                                   <img
-                                     class="thumbnail_24"
-                                     referrerpolicy="no-referrer"
-                                     src="https://lanhu-oss-2537-2.lanhuapp.com/psqt7s72rvrjlc6nlybwqk5bmvku09vdcp7090335a-a4a0-4522-953e-fb79361a0e68"
-                                   />
+                                 <div class="section_1 flex-row">
+                                   <el-select v-model="value" placeholder="请选择">
+                                       <el-option
+                                         v-for="item in options"
+                                         :key="item.value"
+                                         :label="item.label"
+                                         :value="item.value">
+                                       </el-option>
+                                     </el-select>
                                  </div>
                                </div>
                              </div>
@@ -236,6 +358,37 @@
                              </div>
                            </div>
                </el-col>
+               <el-col :span="24" v-hasPermi="['manage:index:shuju']" v-if="shoue" style="padding-left: 0;padding-right: 0; margin-top: 20px;">
+                   <div style="background: #FFFFFF; border-radius: 10px;padding: 15px 12px;">
+                     <div class="image-text_3 flex-row justify-between" style="width: 100%;">
+                       <div style="display: flex;align-items: center;">
+                         <img
+                           class="thumbnail_23"
+                           referrerpolicy="no-referrer"
+                           src="../assets/images/icon_htgl_hp_yxzt.png"
+                         />
+                         <span class="text-group_3" style="margin-left: 10px;">设备运行状态</span>
+                       </div>
+                       <div>
+                         查看更多 →
+                       </div>
+                     </div>
+                     <div style="display: flex;justify-content: space-between;">
+                       <div style="border: 1px solid #DADADA;border-radius: 8px; width: 24%;padding: 14px;margin-top: 20px;" v-for="(item,idnex) in 4" :key="item">
+                         <div style="display: flex; justify-content: space-between;align-items: center;">
+                           <div style="font-weight: 500;font-size: 16px;color: #333333;">设备0{{item}}</div>
+                           <div>
+                             <img referrerpolicy="no-referrer" src="../assets/images/icon_htgl_hp_sbkg_selected.png" v-if="item == 1 || item == 2 "/>
+                             <img referrerpolicy="no-referrer" src="../assets/images/icon_htgl_hp_sbkg_normal.png" v-if="item == 3 || item == 4 "/>
+                             </div>
+                         </div>
+                         <div style="font-weight: 500;font-size: 16px;color: #AAAAAA; margin-top: 10px;">
+                           业务部办公室
+                         </div>
+                       </div>
+                     </div>
+                   </div>
+               </el-col>
 
       </el-col>
       <el-col :span="8">
@@ -244,7 +397,7 @@
                     <img
                       class="thumbnail_11"
                       referrerpolicy="no-referrer"
-                      src="https://lanhu-oss-2537-2.lanhuapp.com/psrdw890zdgxp85irjoai1mlys955fw0rcqa9b3d048-b776-48a3-a084-07acc200736d"
+                      src="../assets/images/icon_htgl_hp_kjgn.png"
                     />
                     <span class="text_24">快捷功能</span>
                   </div>
@@ -253,7 +406,7 @@
                       <img
                         class="label_2"
                         referrerpolicy="no-referrer"
-                        src="https://lanhu-oss-2537-2.lanhuapp.com/psn6jwvwy8l2j1h16w1of82ohsn7v4wwn7gk8ab5d7b4-4138-4e15-af1d-4dd41b3f94b6"
+                        src="../assets/images/icon_hthp_kj_rygl.png"
                       />
                       <div style="margin-top: 10px;">
                          <span class="text_25">人员管理</span>
@@ -263,7 +416,7 @@
                       <img
                         class="label_3"
                         referrerpolicy="no-referrer"
-                        src="https://lanhu-oss-2537-2.lanhuapp.com/psdx8guqu2pc7qy9dec86q1p34cx76366gv94657d09-f3df-4daf-a8ab-772805d40279"
+                        src="../assets/images/icon_hthp_kj_sbgl.png"
                       />
                       <div style="margin-top: 10px;">
                          <span class="text_26">设备管理</span>
@@ -273,7 +426,7 @@
                       <img
                         class="label_4"
                         referrerpolicy="no-referrer"
-                        src="https://lanhu-oss-2537-2.lanhuapp.com/psbjpsfb3zmw6ts129i4b98d6kilysry37729c90a-1889-4617-9e11-55dfad50bd7b"
+                        src="../assets/images/icon_hthp_kj_jkgl.png"
                       />
                       <div style="margin-top: 10px;">
                          <span class="text_27">监控回放</span>
@@ -283,7 +436,7 @@
                       <img
                         class="label_5"
                         referrerpolicy="no-referrer"
-                        src="https://lanhu-oss-2537-2.lanhuapp.com/psp4wnnq3t9dmfg1ee9r3p87z6jj37w2ju668ffd6f-fea0-49b4-b6f5-2fe2807078c1"
+                        src="../assets/images/icon_hthp_kj_yjbk.png"
                       />
                       <div style="margin-top: 10px;">
                           <span class="text_28">一键布控</span>
@@ -293,7 +446,7 @@
                       <img
                         class="label_6"
                         referrerpolicy="no-referrer"
-                        src="https://lanhu-oss-2537-2.lanhuapp.com/pswcql79skat8m2hadqe0c2hrl664tdlk191dee3e56-41ea-47f3-9118-48384c61cbe0"
+                        src="../assets/images/icon_hthp_kj_yjcf.png"
                       />
                       <div style="margin-top: 10px;">
                          <span class="text_29">一键撤防</span>
@@ -302,17 +455,17 @@
                   </div>
                 </div>
         <!-- 日历 -->
-          <div style=" height: 431px; background-color: #fff; border-radius: 10px;padding: 20px;margin-top: 20px;">
+          <div style=" background-color: #fff; border-radius: 10px;padding: 20px;margin-top: 20px;" >
             <div class="box_11 flex-row">
                           <div class="box_12 flex-col justify-between">
                             <div class="text-wrapper_12 flex-row justify-between">
-                              <span class="text_73">2025(年)</span>
+                              <span class="text_73">{{getyer}}(年)</span>
                               <span class="text_74">Apr</span>
                             </div>
                             <div class="text-wrapper_13">
-                              <span class="text_75">0</span>
-                              <span class="text_76">4/</span>
-                              <span class="text_77">23</span>
+                              <!-- <span class="text_75">0</span> -->
+                              <span class="text_76">{{getmor}}/</span>
+                              <span class="text_77">{{getday}}</span>
                             </div>
                           </div>
                           <div class="flex-row">
@@ -323,7 +476,7 @@
                             <img
                               class="label_7"
                               referrerpolicy="no-referrer"
-                              src="https://lanhu-oss-2537-2.lanhuapp.com/ps2dkvgja0bj82ye5za7m6rjholjn017m3w2ea76a7a-9421-4be5-8b86-66181f103334"
+                              src="../assets/images/icon_htrl_tq_xy.png"
                             />
                           </div>
                         </div>
@@ -355,7 +508,7 @@
                                   <div><img
                                   class="thumbnail_27"
                                   referrerpolicy="no-referrer"
-                                  src="https://lanhu-oss-2537-2.lanhuapp.com/psdns8niqehwnqonehba3fupf1jks9bkmeba9dfa9d-80e7-483e-9ef6-abb696ae65f0"
+                                  src="../assets/images/icon_hthp_rl_enter.png"
                                 />
                               </div></div>
                                 </div>
@@ -363,14 +516,14 @@
                 </div>
           </div>
           <!-- 开关 -->
-          <div>
+          <div v-if="!shoue" v-hasPermi="['manage:index:gongyong']">
             <div class="box_16 flex-col">
                         <div class="section_9 flex-row justify-between">
                           <div class="image-text_5 flex-row justify-between">
                             <img
                               class="thumbnail_29"
                               referrerpolicy="no-referrer"
-                              src="https://lanhu-oss-2537-2.lanhuapp.com/psa27evgswubenvym1lop1v9fdundzbrw19c1850b51-939b-4d99-b5af-8745a5f6f954"
+                              src="../assets/images/icon_htgl_hp_yxzt.png"
                             />
                             <span class="text-group_5">设备运行状态</span>
                           </div>
@@ -381,7 +534,7 @@
                             <img
                               class="image_6"
                               referrerpolicy="no-referrer"
-                              src="https://lanhu-oss-2537-2.lanhuapp.com/ps88exyzo1tdikk9srdibcimyfl7toswujt8f98ae4d-a44c-42c8-b411-03a577d649f4"
+                              src="../assets/images/pic_htgl_sbyx_gb.png"
                             />
                             <span class="text-group_6">设备01</span>
                           </div>
@@ -389,32 +542,39 @@
                             <img
                               class="image_7"
                               referrerpolicy="no-referrer"
-                              src="https://lanhu-oss-2537-2.lanhuapp.com/psj4k7tsxe0dh0sc95kc1lnzf1frpd738z69de4a80a3-dcc1-4bd1-af71-cefbfe3cb6a9"
+                              src="../assets/images/pic_htgl_sbyx_dk.png"
                             />
                             <span class="text-group_7">设备02</span>
                           </div>
-                          <div class="box_17 flex-col justify-between">
-                            <div class="group_13 flex-col">
-                              <div class="section_11 flex-col"></div>
-                            </div>
-                            <span class="text_101">设备03</span>
-                          </div>
-                          <div class="box_18 flex-col justify-between">
-                            <div class="box_19 flex-col">
-                              <div class="block_12 flex-col"></div>
-                            </div>
-                            <span class="text_102">设备04</span>
-                          </div>
-                          <div class="box_20 flex-col justify-between">
-                            <div class="group_14 flex-col">
-                              <div class="group_15 flex-col"></div>
-                            </div>
-                            <span class="text_103">设备05</span>
-                          </div>
+                          <div class="image-text_6 flex-col justify-between">
+                                                      <img
+                                                        class="image_6"
+                                                        referrerpolicy="no-referrer"
+                                                        src="../assets/images/pic_htgl_sbyx_gb.png"
+                                                      />
+                                                      <span class="text-group_6">设备03</span>
+                                                    </div>
+                          <div class="image-text_6 flex-col justify-between">
+                                                      <img
+                                                        class="image_6"
+                                                        referrerpolicy="no-referrer"
+                                                        src="../assets/images/pic_htgl_sbyx_gb.png"
+                                                      />
+                                                      <span class="text-group_6">设备04</span>
+                                                    </div>
+                         <div class="image-text_6 flex-col justify-between">
+                                                     <img
+                                                       class="image_6"
+                                                       referrerpolicy="no-referrer"
+                                                       src="../assets/images/pic_htgl_sbyx_gb.png"
+                                                     />
+                                                     <span class="text-group_6">设备05</span>
+                                                   </div>
                         </div>
                       </div>
           </div>
       </el-col>
+
     </el-row>
     </div>
 
@@ -654,6 +814,8 @@
           }],
 
         },
+        value:'',
+        options:[{label:'测试',value:1},{label:'测试1',value:2}],
         rulesg:{
           tenantId: [
                             { required: true, message: "不能为空", trigger: "blur" }
@@ -694,7 +856,8 @@
                     weekDayArr:[],
                     weekAll: [
                       '星期一','星期二','星期三','星期四','星期五','星期六','星期日',
-                    ]
+                    ],
+        shoue:false
       };
     },
     created() {
@@ -715,7 +878,7 @@
         this.shouzu = true
         // this.getcharnae()
         // this.setTimer()
-        // this.gettime()
+        this.gettime()
         // this.getListtion()
         // this.getListpair()
         // this.getstaffManageList()
@@ -1689,7 +1852,7 @@ button:active {
 .image_2 {
   width: 1px;
   height: 46px;
-  margin: 13px 0 0 42px;
+  margin: 13px 0 0 0;
 }
 
 .text-wrapper_2 {
@@ -2244,12 +2407,34 @@ button:active {
 }
 
 .section_1 {
-  background-color: rgba(238, 248, 245, 1);
-  border-radius: 11px;
-  width: 102px;
-  height: 24px;
+  // background-color: rgba(238, 248, 245, 1);
+  // border-radius: 11px;
+  // width: 102px;
+  // height: 24px;
   margin-left: 12px;
+  .el-input--medium .el-input__inner{
+    background-color: rgba(238, 248, 245, 1);
+    border-radius: 11px;
+    border-color: rgba(238, 248, 245, 1);
+    width: 102px;
+    color: #333;
+    // height: 24px;
+  }
+  .el-input--medium .el-input__inner{
+    height: 24px;
+    line-height: 24px;
+  }
+  .el-input--medium .el-input__icon{
+    line-height: 24px;
+  }
+  .el-select .el-input.is-focus .el-input__inner{
+    border-color: #03BF8A;
+  }
+
 }
+.el-select-dropdown__item .selected{
+    color: #03BF8A !important;
+  }
 
 .text_31 {
   width: 55px;
@@ -2639,7 +2824,7 @@ button:active {
 .group_11 {
   background-color: rgba(238, 248, 245, 1);
   border-radius: 11px;
-  width: 84px;
+  // width: 84px;
   height: 24px;
 }
 
@@ -2796,7 +2981,7 @@ button:active {
 .section_2 {
   background-color: rgba(238, 248, 245, 1);
   border-radius: 11px;
-  width: 84px;
+  // width: 84px;
   height: 24px;
 }
 
@@ -3737,7 +3922,8 @@ button:active {
 .section_10 {
   width: 100%;
   height: 149px;
-  padding: 30px 0 37px 20px;
+  padding: 30px 20px 37px 20px;
+  justify-content: space-between;
 }
 
 .image-text_6 {
@@ -3767,7 +3953,7 @@ button:active {
 .image-text_7 {
   width: 59px;
   height: 149px;
-  margin-left: 28px;
+  // margin-left: 28px;
 }
 
 .image_7 {

ruoyi-ui/src/views/index_v1.vue

@@ -1,98 +1,4124 @@
 <template>
-  <div class="dashboard-editor-container">
+  <div class="app-container home index">
+    <div>
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <!-- 数据居 -->
+         <el-col :span="12" style="padding-left: 0; border-radius: 10px;" v-if="shoue">
+           <div class="block_4 flex-col">
+                     <div class="group_2 flex-row justify-between">
+                       <img
+                         class="thumbnail_5"
+                         referrerpolicy="no-referrer"
+                         src="../assets/images/icon_htgl_hp_gjtj.png"
+                       />
+                       <span class="text_3">告警内容统计</span>
+                     </div>
+                     <div class="group_3 flex-row">
+                       <div class="text-wrapper_1 flex-col justify-between">
+                         <span class="text_4">本月告警总数</span>
+                         <span class="text_5">17</span>
+                         <div style="display: flex; margin-top:20px;">
+                           <span class="text_14">较上月</span>
+                           <img
+                             class="thumbnail_6"
+                             referrerpolicy="no-referrer"
+                             src="../assets/images/icon_htgl_hp_tjss.png"
+                           />
+                           <span class="text_15">28%</span>
+                         </div>
+                       </div>
+                      <img
+                                                                 class="image_2"
+                                                                 referrerpolicy="no-referrer"
+                                                                 src="../assets/images/pic_gjpt_hp_sfgx.png"
+                                                               />
+                       <div class="text-wrapper_2 flex-col justify-between" style="width: 84px;">
+                         <span class="text_6">越线告警</span>
+                         <span class="text_7">08</span>
+                         <div style="display: flex; margin-top:20px;">
+                                                   <span class="text_14">较上月</span>
+                                                   <img
+                                                     class="thumbnail_6"
+                                                     referrerpolicy="no-referrer"
+                                                     src="../assets/images/icon_htgl_hp_tjss.png"
+                                                   />
+                                                   <span class="text_15">28%</span>
+                                                 </div>
 
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+                       </div>
+                       <div class="text-wrapper_3 flex-col justify-between" style="width: 84px;">
+                         <span class="text_8">徘徊告警</span>
+                         <span class="text_9">06</span>
+                          <div style="display: flex; margin-top:20px;">
+                                                    <span class="text_14">较上月</span>
+                                                    <img
+                                                      class="thumbnail_6"
+                                                      referrerpolicy="no-referrer"
+                                                      src="../assets/images/icon_htgl_hp_tjss.png"
+                                                    />
+                                                    <span class="text_15">28%</span>
+                                                  </div>
+                       </div>
 
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
 
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
+                     </div>
+
+                   </div>
+         </el-col>
+         <el-col :span="12" style="padding-left: 0; padding-right: 0;border-radius: 10px;" v-if="shoue" >
+           <div class="block_4 flex-col">
+                     <div class="group_2 flex-row justify-between">
+                       <img
+                         class="thumbnail_5"
+                         referrerpolicy="no-referrer"
+                         src="../assets/images/icon_htgl_hp_bmgj.png"
+                       />
+                       <span class="text_3">部门告警频次统计</span>
+                     </div>
+                     <div class="group_3 flex-row">
+                       <div class="text-wrapper_1 flex-col justify-between">
+                         <span class="text_4">宣传部</span>
+                         <span class="text_5">38</span>
+                         <div style="display: flex; margin-top:20px;">
+                           <span class="text_14" style="width: 50px;">上月排名</span>
+
+                           <span class="text_15">28%</span>
+                           <img
+                             class="thumbnail_6"
+                             referrerpolicy="no-referrer"
+                             src="../assets/images/icon_htgl_hp_tjss.png"
+                           />
+                         </div>
+                       </div>
+                       <!-- <img
+                         class="image_2"
+                         referrerpolicy="no-referrer"
+                         src="https://lanhu-oss-2537-2.lanhuapp.com/ps7mxkzc5neit681xsy8xznba7hm35r4ttv08926882-7cd0-4694-a312-ebee13b874e7"
+                       /> -->
+                       <div class="text-wrapper_2 flex-col justify-between" style="width: 84px;">
+                         <span class="text_6">人事部</span>
+                         <span class="text_7">24</span>
+                         <div style="display: flex; margin-top:20px;">
+                                                   <span class="text_14" style="width: 50px;">上月排名</span>
+
+                                                   <span class="text_15">4</span>
+                                                   <img
+                                                     class="thumbnail_6"
+                                                     referrerpolicy="no-referrer"
+                                                     src="../assets/images/icon_htgl_hp_tjss.png"
+                                                   />
+                                                 </div>
+
+                       </div>
+                       <div class="text-wrapper_3 flex-col justify-between" style="width: 84px;">
+                         <span class="text_8">档案部</span>
+                         <span class="text_9">6</span>
+                          <div style="display: flex; margin-top:20px;">
+                                                    <span class="text_14" style="width: 50px;">上月排名</span>
+
+                                                    <span class="text_15" style="color: #03BF8A;">1</span>
+                                                    <img
+                                                      class="thumbnail_6"
+                                                      referrerpolicy="no-referrer"
+                                                      src="../assets/images/icon_htgl_sjtj_xj.png"
+                                                    />
+                                                  </div>
+                       </div>
+
+
+                     </div>
+
+                   </div>
+         </el-col>
+                  <!-- 全部 -->
+                  <!-- <el-col :span="24" style="padding-left: 0;padding-right: 0; border-radius: 10px;" v-if="!shoue">
+                             <div class="block_4 flex-col">
+                                       <div class="group_2 flex-row justify-between">
+                                         <img
+                                           class="thumbnail_5"
+                                           referrerpolicy="no-referrer"
+                                           src="../assets/images/icon_htgl_hp_gjtj.png"
+                                         />
+                                         <span class="text_3">告警内容统计</span>
+                                       </div>
+                                       <div class="group_3 flex-row">
+                                         <div class="text-wrapper_1 flex-col justify-between">
+                                           <span class="text_4">本月告警总数</span>
+                                           <span class="text_5">17</span>
+                                           <div style="display: flex; margin-top:20px;">
+                                             <span class="text_14">较上月</span>
+                                             <img
+                                               class="thumbnail_6"
+                                               referrerpolicy="no-referrer"
+                                               src="../assets/images/icon_htgl_hp_tjss.png"
+                                             />
+                                             <span class="text_15">28%</span>
+                                           </div>
+                                         </div>
+                                         <img
+                                           class="image_2"
+                                           referrerpolicy="no-referrer"
+                                           src="../assets/images/pic_gjpt_hp_sfgx.png"
+                                         />
+                                         <div class="text-wrapper_2 flex-col justify-between">
+                                           <span class="text_6">越线告警</span>
+                                           <span class="text_7">08</span>
+                                           <div style="display: flex; margin-top:20px;">
+                                                                     <span class="text_14">较上月</span>
+                                                                     <img
+                                                                       class="thumbnail_6"
+                                                                       referrerpolicy="no-referrer"
+                                                                       src="../assets/images/icon_htgl_hp_tjss.png"
+                                                                     />
+                                                                     <span class="text_15">28%</span>
+                                                                   </div>
+
+                                         </div>
+                                         <div class="text-wrapper_3 flex-col justify-between">
+                                           <span class="text_8">徘徊告警</span>
+                                           <span class="text_9">06</span>
+                                            <div style="display: flex; margin-top:20px;">
+                                                                      <span class="text_14">较上月</span>
+                                                                      <img
+                                                                        class="thumbnail_6"
+                                                                        referrerpolicy="no-referrer"
+                                                                        src="../assets/images/icon_htgl_hp_tjss.png"
+                                                                      />
+                                                                      <span class="text_15">28%</span>
+                                                                    </div>
+                                         </div>
+                                         <div class="text-wrapper_4 flex-col justify-between">
+                                           <span class="text_10">陌生人告警</span>
+                                           <span class="text_11">02</span>
+                                           <div style="display: flex; margin-top:20px;">
+                                             <span class="text_14">较上月</span>
+                                             <img
+                                               class="thumbnail_6"
+                                               referrerpolicy="no-referrer"
+                                               src="../assets/images/icon_htgl_hp_tjss.png"
+                                             />
+                                             <span class="text_15">28%</span>
+                                           </div>
+                                         </div>
+                                         <div class="text-wrapper_5 flex-col justify-between">
+                                           <span class="text_12">火焰/烟雾告警</span>
+                                           <span class="text_13">01</span>
+                                           <div style="display: flex; margin-top:20px;">
+                                             <span class="text_14">较上月</span>
+                                             <img
+                                               class="thumbnail_6"
+                                               referrerpolicy="no-referrer"
+                                               src="../assets/images/icon_htgl_sjtj_xj.png"
+                                             />
+                                             <span class="text_15">28%</span>
+                                           </div>
+                                         </div>
+                                       </div>
+
+                                     </div>
+                           </el-col> -->
+         <el-col :span="24" style="padding-left: 0;padding-right: 0; border-radius: 10px;" >
+           <div class="group_5 flex-col">
+                       <div class="group_6 flex-row" style="justify-content: space-between;">
+                         <div class="flex-row">
+                           <img
+                             class="thumbnail_19"
+                             referrerpolicy="no-referrer"
+                             src="../assets/images/icon_htgl_hp_ndtj.png"
+                           />
+                           <span class="text_30">年度告警统计</span>
+                           <div class="section_1 flex-row">
+                             <el-select v-model="value" placeholder="请选择">
+                                 <el-option
+                                   v-for="item in options"
+                                   :key="item.value"
+                                   :label="item.label"
+                                   :value="item.value">
+                                 </el-option>
+                               </el-select>
+                           </div>
+                         </div>
+                         <span class="text_32">查看更多&nbsp;→</span>
+                       </div>
+                       <div class="group_7 flex-row" style="justify-content: space-between;">
+                         <span class="text_33">2025年</span>
+                         <div class="flex-row">
+                           <div class="flex-row">
+                             <div class="box_5 flex-col"></div>
+                             <span class="text_34">告警总数</span>
+                           </div>
+                           <div class="flex-row">
+                            <div class="box_6 flex-col"></div>
+                            <span class="text_35">越线告警</span>
+                           </div>
+                         </div>
+                         <span class="text_36">告警数/件</span>
+                       </div>
+                       <div class="group_8 flex-row justify-between">
+                            <line-chart :chart-data="lineChartData" />
+                       </div>
+
+                     </div>
+           </el-col>
+           <el-col :span="12" style="padding-left: 0; border-radius: 10px; margin-top: 20px;"  v-if="!shoue">
+             <div class="box_7 flex-col">
+                           <div class="group_10 flex-row justify-between">
+                             <div class="image-text_1 flex-row justify-between">
+                               <img
+                                 class="thumbnail_21"
+                                 referrerpolicy="no-referrer"
+                                 src="../assets/images/icon_htgl_hp_gjfx.png"
+                               />
+                               <span class="text-group_1">告警内容分析</span>
+                             </div>
+                             <div class="group_11 flex-row">
+                               <div class="section_1 flex-row">
+                                 <el-select v-model="value" placeholder="请选择">
+                                     <el-option
+                                       v-for="item in options"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                                     </el-option>
+                                   </el-select>
+                               </div>
+                             </div>
+                           </div>
+                           <raddar-chart />
+                         </div>
+             </el-col>
+             <el-col :span="12" style=" border-radius: 10px; padding-right: 0;margin-top: 20px;" v-if="!shoue" >
+               <div class="box_8 flex-col">
+                             <div class="block_7 flex-row justify-between">
+                               <div class="image-text_3 flex-row justify-between">
+                                 <img
+                                   class="thumbnail_23"
+                                   referrerpolicy="no-referrer"
+                                   src="../assets/images/icon_htgl_hp_yzcd.png"
+                                 />
+                                 <span class="text-group_3">告警严重程度分析</span>
+                               </div>
+                               <div class="section_2 flex-row">
+                                 <div class="section_1 flex-row">
+                                   <el-select v-model="value" placeholder="请选择">
+                                       <el-option
+                                         v-for="item in options"
+                                         :key="item.value"
+                                         :label="item.label"
+                                         :value="item.value">
+                                       </el-option>
+                                     </el-select>
+                                 </div>
+                               </div>
+                             </div>
+
+                             <div class="block_8 flex-row" style="padding-right: 10px;">
+
+                               <div style="width: 50%;" >
+                                 <pie-chart />
+                                <!-- <div style="position: relative;top:-173px;">
+                                   <span class="text_56">总告警数</span>
+                                   <div class="text-wrapper_9">
+                                     <span class="text_57">146</span>
+                                     <span class="text_58"></span>
+                                     <span class="text_59">/次</span>
+                                   </div>
+                                 </div> -->
+                               </div>
+                               <div style="width: 50%;justify-content: flex-end;" class=" flex-row">
+                                 <div class="block_10 flex-col">
+                                   <div class="section_3 flex-col"></div>
+                                   <div class="section_4 flex-col"></div>
+                                   <div class="section_5 flex-col"></div>
+                                 </div>
+                                 <div class="text-wrapper_10 flex-col">
+                                   <span class="text_60">徘徊告警</span>
+                                   <span class="text_61">陌生人告警</span>
+                                   <span class="text_62">越线告警</span>
+                                   <span class="text_63">火焰告警</span>
+                                   <span class="text_64">烟雾告警</span>
+                                 </div>
+                                 <div class="text-wrapper_11 flex-col">
+                                   <span class="text_65">44</span>
+                                   <span class="text_66">42</span>
+                                   <span class="text_67">26</span>
+                                   <span class="text_68">13</span>
+                                   <span class="text_69">21</span>
+                                 </div>
+                               </div>
+                             </div>
+                             <div class="block_11 flex-row">
+                               <div class="section_6 flex-col"></div>
+                               <span class="text_70">低等级</span>
+                               <div class="section_7 flex-col"></div>
+                               <span class="text_71">中等级</span>
+                               <div class="section_8 flex-col"></div>
+                               <span class="text_72">高等级</span>
+                             </div>
+                           </div>
+               </el-col>
+
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
+      <el-col :span="8">
+        <div class="block_5 flex-col" style="background-color: #fff;">
+                  <div class="box_3 flex-row justify-between">
+                    <img
+                      class="thumbnail_11"
+                      referrerpolicy="no-referrer"
+                      src="../assets/images/icon_htgl_hp_kjgn.png"
+                    />
+                    <span class="text_24">快捷功能</span>
+                  </div>
+                  <div class="image-wrapper_1 flex-row justify-between">
+                    <div style="text-align: center;">
+                      <img
+                        class="label_2"
+                        referrerpolicy="no-referrer"
+                        src="../assets/images/icon_hthp_kj_rygl.png"
+                      />
+                      <div style="margin-top: 10px;">
+                         <span class="text_25">人员管理</span>
+                      </div>
+                    </div>
+                    <div style="text-align: center;">
+                      <img
+                        class="label_3"
+                        referrerpolicy="no-referrer"
+                        src="../assets/images/icon_hthp_kj_sbgl.png"
+                      />
+                      <div style="margin-top: 10px;">
+                         <span class="text_26">设备管理</span>
+                      </div>
+                    </div>
+                    <div style="text-align: center;">
+                      <img
+                        class="label_4"
+                        referrerpolicy="no-referrer"
+                        src="../assets/images/icon_hthp_kj_jkgl.png"
+                      />
+                      <div style="margin-top: 10px;">
+                         <span class="text_27">监控回放</span>
+                      </div>
+                    </div>
+                    <div style="text-align: center;">
+                      <img
+                        class="label_5"
+                        referrerpolicy="no-referrer"
+                        src="../assets/images/icon_hthp_kj_yjbk.png"
+                      />
+                      <div style="margin-top: 10px;">
+                          <span class="text_28">一键布控</span>
+                      </div>
+                    </div>
+                    <div style="text-align: center;">
+                      <img
+                        class="label_6"
+                        referrerpolicy="no-referrer"
+                        src="../assets/images/icon_hthp_kj_yjcf.png"
+                      />
+                      <div style="margin-top: 10px;">
+                         <span class="text_29">一键撤防</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+        <!-- 日历 -->
+          <div style=" height: 431px; background-color: #fff; border-radius: 10px;padding: 20px;margin-top: 20px;">
+            <div class="box_11 flex-row">
+                          <div class="box_12 flex-col justify-between">
+                            <div class="text-wrapper_12 flex-row justify-between">
+                              <span class="text_73">2025(年)</span>
+                              <span class="text_74">Apr</span>
+                            </div>
+                            <div class="text-wrapper_13">
+                              <span class="text_75">0</span>
+                              <span class="text_76">4/</span>
+                              <span class="text_77">23</span>
+                            </div>
+                          </div>
+                          <div class="flex-row">
+                            <div class="text-wrapper_14 flex-col justify-between">
+                              <span class="text_78">潜山</span>
+                              <span class="text_79">27℃</span>
+                            </div>
+                            <img
+                              class="label_7"
+                              referrerpolicy="no-referrer"
+                              src="../assets/images/icon_htrl_tq_xy.png"
+                            />
+                          </div>
+                        </div>
+            <!-- 日历-->
+            <div class="timeall">
+                    <i class="el-icon-arrow-left lastbt" @click="lastclick"></i>
+                    <div class="table_header">
+                        <div class="weekday" v-for="(item,index) in weekAll" :key="index">
+                             <span>{{item}}</span>
+                        </div>
+                    </div>
+                    <div class="table_header">
+                        <div class="weekday test"   v-for="(item,index) in weekDayArr" :key="index">
+                             <span :class="item.adate==todayDate?'finish':''"   @click="getAdate(item)">{{item.adate.slice(8,10)}}</span>
+                        </div>
+                    </div>
+
+                    <i class="el-icon-arrow-right nextbt" @click="nextclick"></i>
+                  </div>
+            <!-- 内容 -->
+                <div>
+                  <div v-for="(item,index) in 2" :key="index" class="box_14 flex-row" style="justify-content: space-between;padding: 0 20px;">
+                                <div class="text-wrapper_17 flex-col justify-between">
+                                  <span class="text_94">25/04/23&nbsp;&nbsp;10:31:46</span>
+                                  <span class="text_95">通道001</span>
+                                </div>
+                                <div class="text-wrapper_18 ">
+                                  <div class="text_96">越线告警</div>
+                                  <div><img
+                                  class="thumbnail_27"
+                                  referrerpolicy="no-referrer"
+                                  src="../assets/images/icon_hthp_rl_enter.png"
+                                />
+                              </div></div>
+                                </div>
+
+                </div>
+          </div>
+          <!-- 开关 -->
+          <div v-if="!shoue">
+            <div class="box_16 flex-col">
+                        <div class="section_9 flex-row justify-between">
+                          <div class="image-text_5 flex-row justify-between">
+                            <img
+                              class="thumbnail_29"
+                              referrerpolicy="no-referrer"
+                              src="../assets/images/icon_htgl_hp_yxzt.png"
+                            />
+                            <span class="text-group_5">设备运行状态</span>
+                          </div>
+                          <span class="text_100">查看更多&nbsp;→</span>
+                        </div>
+                        <div class="section_10 flex-row">
+                          <div class="image-text_6 flex-col justify-between">
+                            <img
+                              class="image_6"
+                              referrerpolicy="no-referrer"
+                              src="../assets/images/pic_htgl_sbyx_gb.png"
+                            />
+                            <span class="text-group_6">设备01</span>
+                          </div>
+                          <div class="image-text_7 flex-col justify-between">
+                            <img
+                              class="image_7"
+                              referrerpolicy="no-referrer"
+                              src="../assets/images/pic_htgl_sbyx_dk.png"
+                            />
+                            <span class="text-group_7">设备02</span>
+                          </div>
+                          <div class="image-text_6 flex-col justify-between">
+                                                      <img
+                                                        class="image_6"
+                                                        referrerpolicy="no-referrer"
+                                                        src="../assets/images/pic_htgl_sbyx_gb.png"
+                                                      />
+                                                      <span class="text-group_6">设备03</span>
+                                                    </div>
+                          <div class="image-text_6 flex-col justify-between">
+                                                      <img
+                                                        class="image_6"
+                                                        referrerpolicy="no-referrer"
+                                                        src="../assets/images/pic_htgl_sbyx_gb.png"
+                                                      />
+                                                      <span class="text-group_6">设备04</span>
+                                                    </div>
+                         <div class="image-text_6 flex-col justify-between">
+                                                     <img
+                                                       class="image_6"
+                                                       referrerpolicy="no-referrer"
+                                                       src="../assets/images/pic_htgl_sbyx_gb.png"
+                                                     />
+                                                     <span class="text-group_6">设备05</span>
+                                                   </div>
+                        </div>
+                      </div>
+          </div>
       </el-col>
     </el-row>
+    </div>
+
+
+
+    <!-- 添加或修改投诉建议对话框 -->
+    <el-dialog title="回复建议" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="回复内容" prop="replyContent">
+              <!-- <editor v-model="form.replyContent" :min-height="192"/> -->
+              <el-input v-model="form.replyContent" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="上传附件">
+              <fileUploadh :limit="20" v-model="form.suggestionFjList" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="指派" :visible.sync="openz" width="640px" append-to-body>
+      <el-form ref="formz" :model="formz" :rules="rulesz" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="选择人员" prop="staffName">
+              <el-select style="width: 100%;" v-model="formz.staffName" placeholder="请选择维修人员">
+                <el-option @click.native="xuanse(dict)" v-for="dict in staffManageList" :key="dict.staffId"
+                  :label="dict.staffName + '('+ (dict.status == null?'' : dict.status == 1?'空闲中' : '指派中') + ')'"
+                  :value="dict.staffId"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFormz">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="完善信息" :visible.sync="openg" width="640px" append-to-body>
+      <el-form ref="formg" :model="formg" :rules="rulesg" label-width="80px">
+        <el-row>
+          <el-col :span="24" class="ngeshimg" >
+            <el-form-item label="身份证号" prop="idCard" style="position: relative;">
+                  <el-input v-model="formg.idCard" placeholder="请输入身份证号码" />
+                  <!-- <image-upload :limit="1" v-model="form.idCardBack"/> -->
+                  <image-uploadshib @uploadedSuccessfully="uploadedSuccessfully" :typeg = "1" :limit="1" v-model="formg.idCardBack"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="选择小区" prop="tenantId">
+               <el-select
+               style="width:100%;"
+               			  v-model="formg.tenantId"
+               			  clearable
+               			  filterable
+               			  reserve-keyword
+               			  placeholder="选择物业"
+               			>
+                    <!-- @click.native="chahue(item)" -->
+               			  <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId" > </el-option>
+               			  <template ><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
+               			</el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="人员性别" prop="gender">
+                      <el-select v-model="formg.gender" placeholder="请选择员工性别">
+                        <el-option
+                          v-for="dict in dict.type.gender"
+                          :key="dict.value"
+                          :label="dict.label"
+                          :value="dict.value"
+                        ></el-option>
+                      </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+                     <el-form-item label="员工类别" prop="staffCategory">
+                                           <el-select v-model="formg.staffCategory" placeholder="请选择员工类别">
+                                            <el-option
+                                            v-for="dict in dict.type.yaungong"
+                                            :key="dict.value"
+                                            :label="dict.label"
+                                            :value="dict.value"
+                                            ></el-option>
+                                           </el-select>
+                                         </el-form-item>
+                    </el-col>
+          <el-col :span="12">
+            <el-form-item label="维修分类" prop="maintenanceCategory">
+                      <el-select clearable v-model="formg.maintenanceCategory" placeholder="请选择维修分类">
+                        <el-option
+                          v-for="dict in dict.type.weixiutype"
+                          :key="dict.value"
+                          :label="dict.label"
+                          :value="dict.value"
+                        ></el-option>
+                      </el-select>
+                    </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phoneNumber">
+                <el-input v-model="formg.phoneNumber" placeholder="请输入手机号码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="15">
+            <el-form-item label="员工姓名" prop="staffName">
+               <el-input v-model="formg.staffName" placeholder="请输入员工姓名" />
+            </el-form-item>
+          </el-col>
+
+
+          <el-col :span="12" class="shefnze" >
+              <el-form-item label="头像" prop="avatarPhoto">
+            <image-upload :limit="1" v-model="formg.avatarPhoto"/>
+          </el-form-item>
+            </el-col>
+          <el-col :span="12" class="shefnze">
+             <el-form-item label="身份证国徽面" prop="idCardFront">
+               <image-upload :limit="1" v-model="formg.idCardFront"/>
+             </el-form-item>
+          </el-col>
+
+          <el-col :span="24" >
+              <el-form-item label="相关证件" prop="certificate">
+                        <file-upload v-model="formg.certificate"/>
+             </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFormg">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- <el-dialog title="完善信息" :visible.sync="openg" width="640px" append-to-body>
+
+    </el-dialog> -->
+
 
-    
   </div>
 </template>
 
 <script>
-import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
-
-export default {
-  name: 'Index',
-  components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart
-  },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+  import PanelGroup from './dashboard/PanelGroup'
+  import LineChart from './dashboard/LineChart'
+  import RaddarChart from './dashboard/RaddarChart'
+  import PieChart from './dashboard/PieChart'
+  import BarChart from './dashboard/BarChart'
+  const lineChartData = {
+    newVisitis: {
+      expectedData: [100, 120, 161, 134, 105, 160, 165],
+      actualData: [120, 82, 91, 154, 162, 140, 145]
+    },
+    messages: {
+      expectedData: [200, 192, 120, 144, 160, 130, 140],
+      actualData: [180, 160, 151, 106, 145, 150, 130]
+    },
+    purchases: {
+      expectedData: [80, 100, 121, 104, 105, 90, 100],
+      actualData: [120, 90, 100, 138, 142, 130, 130]
+    },
+    shoppings: {
+      expectedData: [130, 140, 141, 142, 145, 150, 160],
+      actualData: [120, 82, 91, 154, 162, 140, 130]
     }
   }
-}
+
+
+
+  import { getTenantList} from "@/api/login";
+  import {listNoPage} from "@/api/system/role";
+  export default {
+    name: "Index",
+    dicts: ['baoxiutype', 'repair_status', 'patrol_type','yaungong', 'gender', 'weixiutype'],
+    components: {
+      PanelGroup,
+      LineChart,
+      RaddarChart,
+      PieChart,
+      BarChart,
+    },
+    data() {
+      return {
+        // 版本号
+        version: "3.8.9",
+        customColor: '#FFCB62',
+        lineChartData: lineChartData.newVisitis,
+        getyer: '',
+        getmor: '',
+        getday: '',
+        getshifL: '',
+        getweek: '',
+        open: false,
+        openz: false,
+        openg:false,
+        shouzu:false,
+        // 投诉建议表格数据
+        suggestionList: [],
+        repairList: [],
+        // 巡检点记录表格数据
+        checkPointRecordList: [],
+        // 表单参数
+        form: {},
+        formz: {},
+        formg: {
+          name:null,
+          card:null,
+          phonenumber:null,
+          boundary:null,
+          unit:null,
+          partyAffiliation:null,
+        },
+        // 表单校验
+        rules: {
+          replyContent: [{
+            required: true,
+            message: "不能为空",
+            trigger: "blur"
+          }],
+        },
+        rulesz: {
+          staffName: [{
+            required: true,
+            message: "不能为空",
+            trigger: "blur"
+          }],
+
+        },
+        value:'',
+        options:[{label:'测试',value:1},{label:'测试1',value:2}],
+        rulesg:{
+          tenantId: [
+                            { required: true, message: "不能为空", trigger: "blur" }
+                          ],
+          staffName: [
+                            { required: true, message: "姓名不能为空", trigger: "blur" }
+                          ],
+                          // staffCategory: [
+                          //   { required: true, message: "员工类别", trigger: "change" }
+                          // ],
+
+                          phoneNumber: [
+                            { required: true, message: "手机号码不能为空", trigger: "blur" }
+                          ],
+        },
+        staffManageList: [],
+        xunjiantj: {},
+        tatse: 0,
+        yifhufe: 0,
+        isxug: false,
+        bafe: 0,
+        timer: null,
+        zhexian: {},
+        userid: 0,
+        chelisngguan: {},
+        isacr: 0,
+        carNume:{},
+        tenantList:[],
+        ishsoe:false,
+        forewg:{},
+        tesrtw:'',
+        // 角色表格数据
+        roleList: [],
+        // 日历
+        currentFirstDate:"",
+                    clen:7,
+                    todayDate:"",
+                    weekDayArr:[],
+                    weekAll: [
+                      '星期一','星期二','星期三','星期四','星期五','星期六','星期日',
+                    ],
+        shoue:true
+      };
+    },
+    created() {
+      // 移交 日历
+      this.todayDate=this.formatDate(new Date())
+      this.setDate(new Date())
+      // 旧的
+      this.userid = this.$store.getters.userId
+      if(this.$store.getters.authenticationUser =='1' || this.$store.getters.authenticationUser =='2'){
+        // 认证未通过或者未认证
+        this.shouzu = false
+        // this.getxinaqren()
+        // this.getrou(this.$store.getters.tenantId)
+      }else{
+        // if(){
+
+        // }
+        this.shouzu = true
+        // this.getcharnae()
+        // this.setTimer()
+        // this.gettime()
+        // this.getListtion()
+        // this.getListpair()
+        // this.getstaffManageList()
+        // this.getListRecord()
+        // this.getListRecordcun()
+        // this.baozhe()
+        // this.getche()
+      }
+      clearInterval(this.timer)
+      this.timer = null
+      this.getnhgwzuhue()
+      console.log(this.shouzu)
+    },
+    methods: {
+      // 日历
+       // 日期格式处理
+              formatDate(date){
+
+                var year = date.getFullYear() + '-'
+                var month = (date.getMonth()+1) ;
+                if(month<10){
+                  month = '0' + month
+                }
+                month = month + '-'
+                var day = date.getDate();
+                if(day<10){
+                  day = '0' + day
+                }
+                console.log(year+month+day)
+                return year+month+day;
+              },
+              //
+              addDate(date,n){
+                date.setDate(date.getDate()+n);
+                console.log(date,5)
+                return date;
+              },
+              //
+              setDate(date){
+                  var week = date.getDay()-1;
+                  date = this.addDate(date,week*-1);
+                  this.currentFirstDate = new Date(date);
+                  for(var i = 0;i<this.clen; i++){
+                      this.weekDayArr.push({"adate":this.formatDate(i==0 ? date : this.addDate(date,1))})
+                  }
+                  console.log(this.weekDayArr)
+              },
+              //上一周
+              lastclick(){
+                  this.weekDayArr=[]
+                  this.setDate(this.addDate(this.currentFirstDate,-7));
+              },
+              //下一周
+              nextclick(){
+                  this.weekDayArr=[]
+                  this.setDate(this.addDate(this.currentFirstDate,7));
+              },
+              getAdate (item) {
+                 this.todayDate = item.adate
+                console.log(item)
+              },
+      // 日历结束
+      // 小区切换
+         chahue(row){
+           this.getrou(row.tenantId)
+         },
+         // 查询角色信息
+         getrou(row){
+           let pade={'tenantId':row}
+           listNoPage(pade).then(response => {
+               this.roleList = response.rows;
+               this.roleList.filter(rou=>{
+                 rou.dictValue=rou.roleKey
+                 rou.dictLabel=rou.roleName
+               })
+               if(response.rows.length !=0){
+                 this.formg.staffCategory = response.rows[0].roleKey
+               }
+             }
+           );
+         },
+      getxinaqren(){
+        staffManagexq(this.$store.getters.userId).then(response => {
+          if(response.data == null){
+            this.ishsoe = true
+          }else{
+            this.ishsoe = false
+            this.forewg = response.data
+            this.tesrtw = response.data.tenantId
+          }
+          // this.tenantEnabled = response.data.tenantEnabled
+          // this.tenantList = response.data.voList;
+          // this.loading = false;
+        });
+
+      },
+      getnhgwzuhue(){
+        // this.loading = true;
+        getTenantList().then(response => {
+      	  // this.tenantEnabled = response.data.tenantEnabled
+          this.tenantList = response.data.voList;
+          // this.loading = false;
+        });
+      },
+      zhuhuet(){
+          this.reset()
+          this.formg.phoneNumber =  this.$store.getters.phonenumber
+          this.formg.userId = this.userid
+          if(this.tenantList.length !=0){
+             this.formg.tenantId = this.tenantList[0].tenantId
+             // this.getrou(this.$store.getters.tenantId)
+                 this.openg = true
+          }else{
+            this.openg = true
+          }
+
+        console.log(this.formg)
+        // console.log(this.formg.userId)
+        // console.log(this.formg.phoneNumber,this.$store.getters.user.phonenumber)
+
+      },
+      // 车辆进入\
+      getcharnae(){
+        car().then(response => {
+          this.carNume = response.data;
+        });
+      },
+      // 车辆管控
+      getche() {
+        vehicleControl().then(response => {
+          this.chelisngguan = response.data;
+        });
+      },
+      // 车辆管控点击
+      iszhe(val){
+        this.isacr = val
+      },
+      // 报修折线
+      baozhe() {
+        qx().then(response => {
+          this.zhexian = response.data;
+        });
+      },
+
+      // 巡更记录
+      getListRecord() {
+        let sgmse = {
+          'pageNum': 1,
+          'pageSize': 2,
+          'params':{
+            'createTime':this.getyer + '-' + this.getmor + '-' + this.getday,
+          },
+          // params:{'checkTime': this.getyer + '-' + this.getmor + '-' + this.getday},
+          // 'createTime': this.getyer + '-' + this.getmor + '-' + this.getday,
+          'checkStatus': 2,
+          'userId': this.userid
+        }
+        this.isxug = false
+        listCheckPointRecord(sgmse).then(response => {
+          this.checkPointRecordList = response.rows;
+          // this.checkPointRecordList .filter(rou=>{
+          //   rou.imges = []
+          //   if(rou.checkResultPhoto != null && rou.checkResultPhoto != ''){
+          //     rou.imges = rou.checkResultPhoto.split(',')
+          //   }
+          // })
+          if (this.checkPointRecordList.length == 0) {
+            let gh = {
+              'checkTime': '暂无数据',
+              'checkAddress': '暂无数据',
+              'checkUserName': '暂无数据',
+              'checkResult': '暂无数据',
+              'checkType': '暂无数据'
+            }
+            this.checkPointRecordList.push(gh)
+            this.checkPointRecordList.push(gh)
+          }
+          if (this.checkPointRecordList.length == 1) {
+            let gh = {
+              'checkTime': '暂无数据',
+              'checkAddress': '暂无数据',
+              'checkUserName': '暂无数据',
+              'checkResult': '暂无数据',
+              'checkType': '暂无数据'
+            }
+            this.checkPointRecordList.push(gh)
+          }
+          this.isxug = true
+        });
+      },
+      getListRecordcun() {
+        count().then(response => {
+          this.xunjiantj = response.data
+        });
+      },
+      // 报修列表
+      getListpair() {
+        let sgmse = {
+          'pageNum': 1,
+          'pageSize': 2,
+          'userId': this.userid
+        }
+        listRepair(sgmse).then(response => {
+          this.repairList = response.rows;
+          if (this.repairList.length == 0) {
+            let gnsh = {
+              'repairTitle': '暂无数据',
+              'phoneNumber': '暂无数据',
+              'houseAddress': '暂无数据',
+              'repairTime': '暂无数据',
+              'repairStatus': null
+            }
+            this.repairList.push(gnsh)
+            this.repairList.push(gnsh)
+          }
+          if (this.repairList.length == 1) {
+            let gnsh = {
+              'repairTitle': '暂无数据',
+              'phoneNumber': '暂无数据',
+              'houseAddress': '暂无数据',
+              'repairTime': '暂无数据',
+              'repairStatus': null
+            }
+            this.repairList.push(gnsh)
+
+          }
+
+        });
+      },
+      // 待分配
+      daifeng(row) {
+        if (row.repairStatus == 1) {
+          // 待分配
+          // this.formz.maintenanceCategory = row.maintenanceCategory
+          this.openz = true
+          this.formz.repairId = row.repairId
+        }
+      },
+      // 待分配提交
+      submitFormz() {
+        this.$refs["formz"].validate(valid => {
+          if (valid) {
+            assign(this.formz).then(response => {
+              this.$modal.msgSuccess("操作成功");
+              this.openz = false;
+              this.getList();
+            });
+          }
+        })
+      },
+      xuanse(val) {
+        console.log(val)
+        this.formz.staffName = val.staffName
+        this.formz.staffId = val.staffId
+        this.formz.staffPhone = val.phoneNumber
+      },
+      getstaffManageList(row) {
+        let bsdf = {
+          'staffCategory': 2
+        }
+        listStaffManageNoPage(bsdf).then(response => {
+          this.staffManageList = response.rows;
+          // this.staffManageList.filrter(rout=>{
+          //   rout.lable = rout.staffName + '<p>'
+          // })
+        });
+      },
+      /** 查询投诉建议列表 */
+      getListtion() {
+        let sgmse = {
+          'pageNum': 1,
+          'pageSize': 10,
+          'isPublic':'Y',
+          'userId': this.userid
+        }
+        listSuggestion(sgmse).then(response => {
+        if(response.rows.length !=0){
+           if(response.rows.length > 2){
+              this.suggestionList = response.rows.slice(0, 2);
+           }else{
+              this.suggestionList = response.rows;
+           }
+        }else{
+          this.suggestionList = response.rows;
+        }
+          if (this.suggestionList.length == 0) {
+            let gnsh = {
+              'title': '暂无数据',
+              'content': '暂无数据',
+              'createTime': '暂无数据',
+            }
+            this.suggestionList.push(gnsh)
+            this.suggestionList.push(gnsh)
+          }
+          if (this.suggestionList.length == 1) {
+            let gnsh = {
+              'title': '暂无数据',
+              'content': '暂无数据',
+              'createTime': '暂无数据',
+            }
+            this.suggestionList.push(gnsh)
+          }
+
+
+          this.getListtionesTOTL()
+        });
+      },
+      getListtiones() {
+        let sgmse = {
+          'pageNum': 1,
+          'pageSize': 2,
+          'status': 2,
+        }
+        listSuggestion(sgmse).then(response => {
+          this.yifhufe = response.total
+          this.bafe = this.percentage() - 0
+        });
+      },
+      getListtionesTOTL() {
+        let sgmse = {
+          'pageNum': 1,
+           'pageSize': 10,
+        }
+        listSuggestion(sgmse).then(response => {
+          this.tatse = response.total
+          this.getListtiones()
+        });
+      },
+
+      // 投诉隐藏
+      yinange(row,index){
+        row.isPublic = 'N'
+        updateSuggestion(row).then(response => {
+          this.$modal.msgSuccess("操作成功");
+          // this.open = false;
+          // this.getList();
+        });
+      },
+      percentage() {
+        return (this.yifhufe / this.tatse * 100).toFixed(0);
+      },
+
+      tousuhuif(row) {
+        // this.form.suggestionId  =  row.suggestionId
+        this.form = {
+          'replyContent': null,
+          'suggestionFjList': null,
+          'suggestionId': row.suggestionId,
+          'status': 2
+        }
+        // this.$set('replyContent',this.form,null)
+        // this.form.replyContent = null
+        // this.form.suggestionFjList = null
+        this.open = true
+      },
+      cancel() {
+        this.open = false
+        this.openz = false
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            // console.log(this.form)
+            if (this.form.suggestionFjList != null) {
+              this.form.suggestionFjList.filter(rou => {
+                rou.suggestionId = this.form.suggestionId
+              })
+            }
+            updateSuggestion(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getListtion();
+            });
+
+          }
+        });
+      },
+
+      /** 注册认证提交按钮 */
+      submitFormg: function() {
+        this.$refs["formg"].validate(valid => {
+         if (valid) {
+           if(this.ishsoe == false){
+             if(this.tesrtw == this.formg.tenantId){
+               updateStaffManage(this.formg).then(response => {
+                 this.$modal.msgSuccess("修改成功,等待管理员审核");
+                 this.openg = false;
+               });
+             }else{
+               addStaffManage(this.formg).then(response => {
+                 this.$modal.msgSuccess("操作成功,等待管理员审核");
+                 this.openg = false;
+                 // this.getList();
+               });
+             }
+           }else{
+              addStaffManage(this.formg).then(response => {
+                this.$modal.msgSuccess("操作成功,等待管理员审核");
+                this.openg = false;
+                // this.getList();
+              });
+           }
+
+
+          }
+        });
+      },
+      handleSetLineChartData(type) {
+        this.lineChartData = lineChartData[type]
+      },
+      goTarget(href) {
+        window.open(href, "_blank");
+      },
+      format(percentage) {
+        return percentage === 100 ? '${percentage}' : `${percentage}`;
+      },
+      gettime() {
+        var _this = this;
+        let wk = new Date().getDay()
+        let yy = new Date().getFullYear();
+        let mm = new Date().getMonth() + 1;
+        if(mm < 10){
+          mm = '0'+mm
+        }
+        let dd = new Date().getDate();
+        if(dd < 10){
+          dd = '0'+dd
+        }
+        let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
+        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
+        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
+        let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        let week = weeks[wk]
+        _this.getyer = yy;
+        _this.getmor = mm;
+        _this.getday = dd;
+        _this.getshifL = hh + ':' + mf;
+        _this.getweek = week;
+        // console.log(this.gettime)
+      },
+      setTimer() {
+        if (this.timer == null) {
+          this.timer = setInterval(() => {
+            this.gettime()
+          }, 30000)
+        }
+      },
+      tiahe(row) {
+        if (row == 1) {
+          // 房屋管理
+          this.$router.push({
+            path: '/housesassets/fagnwuguanli',
+          })
+        } else if (row == 2) {
+          // 居住人员管理
+          this.$router.push({
+            path: '/renyuanxiangguan/renyuan',
+          })
+        } else if (row == 3) {
+          // 车辆管控
+          this.$router.push({
+            path: '/communityservicesfacilities/cheliangguank',
+          })
+        } else if (row == 4) {
+          // 违停管理
+          this.$router.push({
+            path: '/communitysecurityorder/weitingchel',
+          })
+        } else if (row == 5) {
+          // 来访管理
+          this.$router.push({
+            path: '/communicationmanagement/visitorManage',
+          })
+        } else if (row == 6) {
+          // 物业报修
+          this.$router.push({
+            path: '/communityservicesfacilities/baoxiuguanli/index',
+          })
+        } else if (row == 7) {
+          // 投诉建议
+          this.$router.push({
+            path: '/communityservicesfacilities/suggestion',
+          })
+        } else if (row == 8) {
+          // 今日巡更
+          this.$router.push({
+            path: '/communitysecurityorder/xungengxinx',
+          })
+        }
+
+      },
+      uploadedSuccessfully(row){
+        // console.log('上传重构员工',row)
+        if(row.length !=0){
+          row.filter(ru=>{
+            this.formg.staffName = ru.realName
+            this.formg.idCard = ru.idCard
+            let sge = this.getInfo( this.formg.idCard)
+            // this.form.yearsOld = sge.age
+            this.formg.gender = sge.sex + ''
+            // this.form.residentBirthday = sge.birth
+          })
+
+        }
+      },
+      getInfo(idCard) {
+              let sex = null;
+              let birth = null;
+              let myDate = new Date();
+              let month = myDate.getMonth() + 1;
+              let day = myDate.getDate();
+              let age = 0;
+
+              if (idCard.length === 18) {
+                age = myDate.getFullYear() - idCard.substring(6, 10) - 1;
+                sex = idCard.substring(16, 17);
+                birth = idCard.substring(6, 10) + "-" + idCard.substring(10, 12) + "-" + idCard.substring(12, 14);
+                if (idCard.substring(10, 12) < month || idCard.substring(10, 12) === month && idCard.substring(12, 14) <= day)
+                  age++;
+
+              }
+              if (idCard.length === 15) {
+                age = myDate.getFullYear() - idCard.substring(6, 8) - 1901;
+                sex = idCard.substring(13, 14);
+                birth = "19" + idCard.substring(6, 8) + "-" + idCard.substring(8, 10) + "-" + idCard.substring(10, 12);
+                if (idCard.substring(8, 10) < month || idCard.substring(8, 10) === month && idCard.substring(10, 12) <= day)
+                  age++;
+              }
+
+              if (sex % 2 === 0)
+                sex = 2; // 性别代码 1代表男，0代表女，暂时不涉及其他类型性别
+              else
+                sex = 1;
+              return {
+                age,
+                sex,
+                birth
+              }
+            },
+            // 表单重置
+            reset() {
+              this.formg = {
+                      staffId: null,
+                      staffName: null,
+                      gender: null,
+                      staffCategory: null,
+                      maintenanceCategory: null,
+                      phoneNumber: null,
+                      avatarPhoto: null,
+                      idCard: null,
+                      idCardFront: null,
+                      idCardBack: null,
+                      certificate: null,
+                      status: null,
+                      createBy: null,
+                      createTime: null,
+                      updateBy: null,
+                      updateTime: null,
+                      remark: null,
+                      tenantId:null,
+                      userId:this.userid,
+                      userType:'pc_user'
+                    };
+              this.resetForm("formg");
+            },
+
+    }
+  };
 </script>
 
-<style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
+<style  lang="scss">
+  .quce{
+    .el-form-item__content{
+      margin-left: 0 !important;
+    }
+    .el-upload--picture-card{
+      margin-left:50%;
+      transform:translateX(-50%);
+    }
+  }
+  .shefnze{
+    .el-upload--picture-card{
+      width: 80px;
+      height: 80px;
+      line-height: 80px;
+    }
+    .el-upload-list--picture-card .el-upload-list__item{
+      width: 80px;
+      height: 80px;
+    }
+    .el-upload__tip{
+      overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+  }
+  .ngeshimg{
+    .el-upload--picture-card{
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      position: absolute;
+      top:0;
+      right: 0;
+    }
+    .component-upload-image{
+      position: absolute;
+      top:0;
+      right: 0;
+    }
+    .el-upload--picture-card i{
+      font-size: 20px;
+    }
+    .el-upload-list--picture-card .el-upload-list__item{
+      width: 58px;
+      height: 36px;
+      position: absolute;
+      top:0;
+      right: -10px;
+    }
+  }
+  .unimg{
+    .el-upload--picture-card{
+      width:102px;
+      height: 102px;
+      line-height: 102px;
+    }
+    .el-upload-list--picture-card .el-upload-list__item{
+      width:102px;
+      height: 102px;
+      line-height: 102px;
+    }
+  }
 
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
+  </style>
+
+<style scoped lang="scss">
+  .index {
+    // padding-right: 10px !important;
   }
-}
 
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
+  .home {
+    blockquote {
+      padding: 10px 20px;
+      margin: 0 0 20px;
+      font-size: 17.5px;
+      border-left: 5px solid #eee;
+    }
+
+    hr {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      border: 0;
+      border-top: 1px solid #eee;
+    }
+
+    .col-item {
+      margin-bottom: 20px;
+    }
+
+    ul {
+      padding: 0;
+      margin: 0;
+    }
+
+    font-family: "open sans",
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+    font-size: 13px;
+    color: #676a6c;
+    overflow-x: hidden;
+
+    ul {
+      list-style-type: none;
+    }
+
+    h4 {
+      margin-top: 0px;
+    }
+
+    h2 {
+      margin-top: 10px;
+      font-size: 26px;
+      font-weight: 100;
+    }
+
+    p {
+      margin-top: 10px;
+
+      b {
+        font-weight: 700;
+      }
+    }
+
+    .update-log {
+      ol {
+        display: block;
+        list-style-type: decimal;
+        margin-block-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+        padding-inline-start: 40px;
+      }
+    }
   }
+
+</style>
+<style lang="scss">
+// 蓝湖样式粘贴
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
+    Arial, PingFang SC-Light, Microsoft YaHei;
+}
+input {
+  background-color: transparent;
+  border: 0;
+}
+button {
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  outline: none;
+  background-color: transparent;
+}
+
+button:active {
+  opacity: 0.6;
+}
+.van-nav-bar__left:active,
+.van-nav-bar__right:active {
+  opacity: 1;
+}
+[class*='van-']::after {
+  border-bottom: 0;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+.justify-start {
+  display: flex;
+  justify-content: flex-start;
+}
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
+.justify-evenly {
+  display: flex;
+  justify-content: space-evenly;
+}
+.justify-around {
+  display: flex;
+  justify-content: space-around;
+}
+.justify-between {
+  display: flex;
+  justify-content: space-between;
+}
+.align-start {
+  display: flex;
+  align-items: flex-start;
+}
+.align-center {
+  display: flex;
+  align-items: center;
+}
+.align-end {
+  display: flex;
+  align-items: flex-end;
+}
+
+.page {
+  position: relative;
+  width: 1440px;
+  height: 934px;
+  overflow: hidden;
+}
+
+.box_1 {
+  height: 934px;
+  background: url(https://lanhu-oss-2537-2.lanhuapp.com/psupnp53zjsb6uumou8biiluuj3eul374afd762c56-ebbd-4c13-a938-1c346119c9ed)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 1440px;
+  position: relative;
+}
+
+.block_1 {
+  width: 1400px;
+  height: 30px;
+  margin: 25px 0 0 20px;
+}
+
+.image_1 {
+  width: 231px;
+  height: 30px;
+}
+
+.label_1 {
+  width: 26px;
+  height: 26px;
+  margin: 2px 0 0 1003px;
+}
+
+.text_1 {
+  width: 46px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(75, 90, 109, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 8px 0 0 7px;
+}
+
+.thumbnail_1 {
+  width: 8px;
+  height: 4px;
+  margin: 13px 0 0 11px;
+}
+
+.thumbnail_2 {
+  width: 1px;
+  height: 16px;
+  margin: 7px 0 0 18px;
+}
+
+.text_2 {
+  width: 31px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(75, 90, 109, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 6px 0 0 18px;
+}
+
+.block_2 {
+  width: 1399px;
+  height: 167px;
+  margin: 24px 0 0 20px;
+}
+
+.block_3 {
+  width: 180px;
+  height: 145px;
+  margin-top: 22px;
+}
+
+.group_1 {
+  background-color: rgba(221, 235, 231, 1);
+  border-radius: 4px;
+  height: 36px;
+  width: 180px;
+}
+
+.box_2 {
+  width: 14px;
+  height: 16px;
+  background: url(https://lanhu-oss-2537-2.lanhuapp.com/pssr9va0oenskc5702erondk4k6soy2sg3fcb86e5-1f9d-40ef-9503-d5785a4bf2be)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 10px 0 0 22px;
+}
+
+.thumbnail_3 {
+  width: 16px;
+  height: 15px;
+  margin: 35px 0 0 20px;
+}
+
+.thumbnail_4 {
+  width: 16px;
+  height: 16px;
+  margin: 43px 0 0 21px;
+}
+
+.block_4 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  height: 158px;
+  width: 100%;
+  // margin: 1px 0 0 19px;
+}
+
+.group_2 {
+  width: 118px;
+  height: 18px;
+  margin: 17px 0 0 13px;
+}
+
+.thumbnail_5 {
+  width: 16px;
+  height: 18px;
+}
+
+.text_3 {
+  width: 95px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin-top: 1px;
+}
+
+.group_3 {
+  width: 100%;
+  height: 59px;
+  margin: 26px 0 0 0;
+  justify-content: space-around;
+}
+
+.text-wrapper_1 {
+  width: 84px;
+  height: 44px;
+}
+
+.text_4 {
+  width: 84px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.text_5 {
+  width: 23px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 22px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 14px;
+}
+
+.image_2 {
+  width: 1px;
+  height: 46px;
+  margin: 13px 0 0 0;
+}
+
+.text-wrapper_2 {
+  width: 56px;
+  height: 45px;
+  // margin-left: 42px;
+}
+
+.text_6 {
+  width: 55px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 1px;
+}
+
+.text_7 {
+  width: 25px;
+  height: 17px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 22px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 14px;
+}
+
+.text-wrapper_3 {
+  width: 56px;
+  height: 45px;
+  // margin-left: 73px;
+}
+
+.text_8 {
+  width: 55px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 1px;
+}
+
+.text_9 {
+  width: 25px;
+  height: 17px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 22px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 14px;
+}
+
+.text-wrapper_4 {
+  width: 70px;
+  height: 45px;
+  // margin-left: 80px;
+}
+
+.text_10 {
+  width: 68px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 2px;
+}
+
+.text_11 {
+  width: 24px;
+  height: 17px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 22px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 14px;
+}
+
+.text-wrapper_5 {
+  width: 91px;
+  height: 45px;
+  // margin-left: 56px;
+}
+
+.text_12 {
+  width: 90px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 1px;
+}
+
+.text_13 {
+  width: 22px;
+  height: 17px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 22px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 14px;
+}
+
+.group_4 {
+  width: 100%;
+  height: 12px;
+  margin: 1px 0 25px 0;
+}
+
+.text_14 {
+  width: 34px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 12px;
+}
+
+.thumbnail_6 {
+  width: 14px;
+  height: 10px;
+  margin: 1px 0 0 4px;
+}
+
+.text_15 {
+  width: 26px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(254, 167, 27, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 12px;
+  margin: 1px 0 0 5px;
+}
+
+.text_16 {
+  width: 34px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 87px;
+}
+
+.thumbnail_7 {
+  width: 14px;
+  height: 10px;
+  margin: 1px 0 0 4px;
+}
+
+.text_17 {
+  width: 29px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(254, 167, 27, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 1px 0 0 5px;
+}
+
+.text_18 {
+  width: 34px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 43px;
+}
+
+.thumbnail_8 {
+  width: 14px;
+  height: 10px;
+  margin: 1px 0 0 5px;
+}
+
+.text_19 {
+  width: 36px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(3, 191, 138, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 1px 0 0 4px;
+}
+
+.text_20 {
+  width: 34px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 43px;
+}
+
+.thumbnail_9 {
+  width: 14px;
+  height: 10px;
+  margin: 1px 0 0 5px;
+}
+
+.text_21 {
+  width: 26px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(3, 191, 138, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 1px 0 0 4px;
+}
+
+.text_22 {
+  width: 34px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-left: 43px;
+}
+
+.thumbnail_10 {
+  width: 14px;
+  height: 10px;
+  margin: 1px 0 0 4px;
+}
+
+.text_23 {
+  width: 32px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(254, 167, 27, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 1px 0 0 6px;
+}
+
+.block_5 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  height: 159px;
+  // margin-left: 12px;
+  width: 100%;
+}
+
+.box_3 {
+  width: 86px;
+  height: 16px;
+  margin: 18px 0 0 13px;
+}
+
+.thumbnail_11 {
+  width: 18px;
+  height: 16px;
+}
+
+.text_24 {
+  width: 64px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin-left: 10px;
+}
+
+.image-wrapper_1 {
+  width: 100%;
+  // height: 48px;
+  margin: 21px 0 0 0;
+  justify-content: space-around;
+}
+
+.label_2 {
+  width: 48px;
+  height: 48px;
+}
+
+.label_3 {
+  width: 48px;
+  height: 48px;
+  // margin-left: 34px;
+}
+
+.label_4 {
+  width: 48px;
+  height: 48px;
+  // margin-left: 34px;
+}
+
+.label_5 {
+  width: 48px;
+  height: 48px;
+  // margin-left: 35px;
+}
+
+.label_6 {
+  width: 48px;
+  height: 48px;
+  // margin-left: 34px;
+}
+
+.text-wrapper_6 {
+  width: 392px;
+  height: 16px;
+  margin: 20px 0 20px 31px;
+}
+
+.text_25 {
+  width: 63px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 30px;
+}
+
+.text_26 {
+  width: 63px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 30px;
+  // margin-left: 19px;
+}
+
+.text_27 {
+  width: 64px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 30px;
+  // margin-left: 19px;
+}
+
+.text_28 {
+  width: 63px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 30px;
+  // margin-left: 19px;
+}
+
+.text_29 {
+  width: 63px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 30px;
+  // margin-left: 19px;
+}
+
+.block_6 {
+  width: 1380px;
+  height: 668px;
+  margin: 4px 0 16px 39px;
 }
+
+.image-wrapper_2 {
+  width: 18px;
+  height: 376px;
+  margin-top: 41px;
+}
+
+.thumbnail_12 {
+  width: 16px;
+  height: 15px;
+  margin-left: 1px;
+}
+
+.thumbnail_13 {
+  width: 16px;
+  height: 14px;
+  margin: 44px 0 0 1px;
+}
+
+.thumbnail_14 {
+  width: 16px;
+  height: 16px;
+  margin: 45px 0 0 1px;
+}
+
+.thumbnail_15 {
+  width: 15px;
+  height: 16px;
+  margin: 44px 0 0 2px;
+}
+
+.thumbnail_16 {
+  width: 18px;
+  height: 16px;
+  margin-top: 45px;
+}
+
+.thumbnail_17 {
+  width: 16px;
+  height: 16px;
+  margin: 44px 0 0 1px;
+}
+
+.thumbnail_18 {
+  width: 15px;
+  height: 15px;
+  margin: 46px 0 0 2px;
+}
+
+.box_4 {
+  width: 734px;
+  height: 668px;
+  margin-left: 162px;
+}
+
+.group_5 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  position: relative;
+  width: 100%;
+  height: 372px;
+  margin-top: 20px;
+}
+
+.group_6 {
+  width: 100%;
+  height: 24px;
+  padding: 14px 12px 0 12px;
+
+}
+
+.thumbnail_19 {
+  width: 17px;
+  height: 15px;
+  margin-top: 4px;
+}
+
+.text_30 {
+  width: 95px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 3px 0 0 6px;
+}
+
+.section_1 {
+  // background-color: rgba(238, 248, 245, 1);
+  // border-radius: 11px;
+  // width: 102px;
+  // height: 24px;
+  margin-left: 12px;
+  .el-input--medium .el-input__inner{
+    background-color: rgba(238, 248, 245, 1);
+    border-radius: 11px;
+    border-color: rgba(238, 248, 245, 1);
+    width: 102px;
+    color: #333;
+    // height: 24px;
+  }
+  .el-input--medium .el-input__inner{
+    height: 24px;
+    line-height: 24px;
+  }
+  .el-input--medium .el-input__icon{
+    line-height: 24px;
+  }
+  .el-select .el-input.is-focus .el-input__inner{
+    border-color: #03BF8A;
+  }
+
+}
+.el-select-dropdown__item .selected{
+    color: #03BF8A !important;
+  }
+
+.text_31 {
+  width: 55px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+  margin: 5px 0 0 13px;
+}
+
+.thumbnail_20 {
+  width: 9px;
+  height: 6px;
+  margin: 9px 14px 0 11px;
+}
+
+.text_32 {
+  width: 75px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+  // margin: 3px 0 0 402px;
+}
+
+.group_7 {
+  width: 100%;
+  // height: 13px;
+  padding: 23px 12px 0 12px;
+}
+
+.text_33 {
+  width: 40px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+}
+
+.box_5 {
+  background-color: rgba(255, 171, 43, 1);
+  width: 10px;
+  height: 10px;
+  margin: 2px 0 0 0;
+}
+
+.text_34 {
+  width: 47px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 12px;
+  margin: 1px 0 0 10px;
+}
+
+.box_6 {
+  background-color: rgba(3, 191, 138, 1);
+  width: 10px;
+  height: 10px;
+  margin: 2px 0 0 21px;
+}
+
+.text_35 {
+  width: 47px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 12px;
+  margin: 1px 0 0 10px;
+}
+
+.text_36 {
+  width: 54px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 0;
+}
+
+.group_8 {
+  width: 100%;
+  height: 234px;
+  padding: 23px 12px 0 19px;
+}
+
+.paragraph_1 {
+  width: 14px;
+  height: 234px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: right;
+  line-height: 45px;
+}
+
+.image_3 {
+  width: 671px;
+  height: 210px;
+  margin-top: 17px;
+}
+
+.text-wrapper_7 {
+  width: 655px;
+  height: 10px;
+  margin: 10px 0 21px 50px;
+}
+
+.text_37 {
+  width: 24px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+}
+
+.text_38 {
+  width: 17px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 26px;
+}
+
+.text_39 {
+  width: 16px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 27px;
+}
+
+.text_40 {
+  width: 24px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 27px;
+}
+
+.text_41 {
+  width: 24px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 26px;
+}
+
+.text_42 {
+  width: 21px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 27px;
+}
+
+.text_43 {
+  width: 24px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 27px;
+}
+
+.text_44 {
+  width: 17px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 25px;
+}
+
+.text_45 {
+  width: 25px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 26px;
+}
+
+.text_46 {
+  width: 25px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 26px;
+}
+
+.text_47 {
+  width: 25px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 26px;
+}
+
+.text_48 {
+  width: 22px;
+  height: 9px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin: 1px 0 0 25px;
+}
+
+.text_49 {
+  width: 25px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 27px;
+}
+
+.text_50 {
+  width: 25px;
+  height: 10px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 12px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 26px;
+}
+
+.image_4 {
+  position: absolute;
+  left: 43px;
+  top: 102px;
+  width: 669px;
+  height: 226px;
+}
+
+.group_9 {
+  width: 734px;
+  height: 284px;
+  margin-top: 12px;
+}
+
+.box_7 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  width: 100%;
+  height: 284px;
+}
+
+.group_10 {
+  width: 100%;
+  height: 24px;
+  padding: 12px 12px 0 12px;
+}
+
+.image-text_1 {
+  width: 118px;
+  height: 16px;
+  margin-top: 4px;
+}
+
+.thumbnail_21 {
+  width: 17px;
+  height: 16px;
+}
+
+.text-group_1 {
+  width: 95px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.group_11 {
+  background-color: rgba(238, 248, 245, 1);
+  border-radius: 11px;
+  // width: 84px;
+  height: 24px;
+}
+
+.image-text_2 {
+  width: 55px;
+  height: 11px;
+  margin: 6px 0 0 15px;
+}
+
+.text-group_2 {
+  width: 33px;
+  height: 11px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 11px;
+}
+
+.thumbnail_22 {
+  width: 9px;
+  height: 6px;
+  margin-top: 3px;
+}
+
+.text_51 {
+  width: 58px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+  margin: 23px 0 0 141px;
+}
+
+.group_12 {
+  width: 100%;
+  height: 161px;
+  padding: 6px 10px 0 10px;
+
+}
+
+.text_52 {
+  width: 58px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+  margin-top: 54px;
+}
+
+.image_5 {
+  width: 177px;
+  height: 161px;
+  margin-left: 5px;
+}
+
+.text_53 {
+  width: 58px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+  margin: 54px 0 0 5px;
+}
+
+.text-wrapper_8 {
+  width: 184px;
+  height: 14px;
+  margin: 4px 0 27px 82px;
+}
+
+.text_54 {
+  width: 58px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+}
+
+.text_55 {
+  width: 72px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+}
+
+.box_8 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  height: 284px;
+  width: 100%;
+  position: relative;
+}
+
+.block_7 {
+  width: 100%;
+  height: 24px;
+  padding: 12px 11px 0 11px;
+}
+
+.image-text_3 {
+  width: 151px;
+  height: 16px;
+  margin-top: 4px;
+}
+
+.thumbnail_23 {
+  width: 16px;
+  height: 16px;
+}
+
+.text-group_3 {
+  width: 127px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.section_2 {
+  background-color: rgba(238, 248, 245, 1);
+  border-radius: 11px;
+  // width: 84px;
+  height: 24px;
+}
+
+.image-text_4 {
+  width: 55px;
+  height: 11px;
+  margin: 6px 0 0 15px;
+}
+
+.text-group_4 {
+  width: 33px;
+  height: 11px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 11px;
+}
+
+.thumbnail_24 {
+  width: 9px;
+  height: 6px;
+  margin-top: 3px;
+}
+
+.block_8 {
+  width: 100%;
+  // height: 179px;
+  padding: 0 10px 0 10px;
+  position: relative;
+  top:32px;
+}
+
+.block_9 {
+  width: 167px;
+  height: 167px;
+  background: url(https://lanhu-oss-2537-2.lanhuapp.com/ps7hfzqonyh34q6htsu17cobje5wipuw9706925fc9-9116-494b-a413-4e48b0c75c37) -21px -14px
+    no-repeat;
+  background-size: 224px 195px;
+}
+
+.text_56 {
+  width: 64px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 59px 0 0 50px;
+}
+
+.text-wrapper_9 {
+  width: 68px;
+  height: 18px;
+  overflow-wrap: break-word;
+  font-size: 0;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin: 13px 0 61px 50px;
+}
+
+.text_57 {
+  width: 68px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 22px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.text_58 {
+  width: 68px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 24px;
+  font-family: Alibaba-PuHuiTi-M;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.text_59 {
+  width: 68px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.block_10 {
+  width: 10px;
+  height: 126px;
+  margin: 19px 0 0 26px;
+}
+
+.section_3 {
+  background-color: rgba(89, 212, 171, 1);
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+}
+
+.section_4 {
+  background-color: rgba(115, 197, 235, 1);
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  margin-top: 33px;
+}
+
+.section_5 {
+  background-color: rgba(252, 166, 96, 1);
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  margin-top: 63px;
+}
+
+.text-wrapper_10 {
+  width: 80px;
+  height: 163px;
+  margin: 16px 0 0 14px;
+}
+
+.text_60 {
+  width: 63px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin-left: 1px;
+}
+
+.text_61 {
+  width: 79px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 27px 0 0 1px;
+}
+
+.text_62 {
+  width: 64px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin-top: 15px;
+}
+
+.text_63 {
+  width: 63px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 26px 0 0 1px;
+}
+
+.text_64 {
+  width: 63px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 15px 0 0 1px;
+}
+
+.text-wrapper_11 {
+  width: 19px;
+  height: 158px;
+  margin: 19px 0 0 20px;
+}
+
+.text_65 {
+  width: 19px;
+  height: 11px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 11px;
+}
+
+.text_66 {
+  width: 19px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 12px;
+  margin-top: 31px;
+}
+
+.text_67 {
+  width: 18px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 13px;
+  margin: 19px 0 0 1px;
+}
+
+.text_68 {
+  width: 17px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 13px;
+  margin: 29px 0 0 1px;
+}
+
+.text_69 {
+  width: 16px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 12px;
+  margin: 18px 0 0 1px;
+}
+
+.block_11 {
+  width: 208px;
+  height: 13px;
+  margin: 20px 0 27px 14px;
+  position: absolute;
+  bottom: 0;
+}
+
+.section_6 {
+  background-color: rgba(89, 212, 171, 1);
+  width: 10px;
+  height: 10px;
+  margin-top: 1px;
+}
+
+.text_70 {
+  width: 42px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 13px;
+  margin-left: 7px;
+}
+
+.section_7 {
+  background-color: rgba(115, 197, 235, 1);
+  width: 10px;
+  height: 10px;
+  margin: 1px 0 0 15px;
+}
+
+.text_71 {
+  width: 41px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 13px;
+  margin-left: 8px;
+}
+
+.section_8 {
+  background-color: rgba(252, 166, 96, 1);
+  width: 10px;
+  height: 10px;
+  margin: 1px 0 0 16px;
+}
+
+.text_72 {
+  width: 42px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 13px;
+  margin-left: 7px;
+}
+
+.box_9 {
+  width: 454px;
+  height: 668px;
+  margin-left: 12px;
+}
+
+.box_10 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  width: 454px;
+  height: 416px;
+}
+
+.box_11 {
+  width: 100%;
+  height: 59px;
+  justify-content: space-between;
+  // margin: 21px 0 0 25px;
+}
+
+.box_12 {
+  width: 123px;
+  height: 59px;
+}
+
+.text-wrapper_12 {
+  width: 123px;
+  height: 17px;
+}
+
+.text_73 {
+  width: 65px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+}
+
+.text_74 {
+  width: 30px;
+  height: 17px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 18px;
+  font-family: PingFang-SC-Bold;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+}
+
+.text-wrapper_13 {
+  width: 122px;
+  height: 31px;
+  overflow-wrap: break-word;
+  font-size: 0;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 11px 0 0 1px;
+}
+
+.text_75 {
+  width: 122px;
+  height: 31px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 40px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 26px;
+}
+
+.text_76 {
+  width: 122px;
+  height: 31px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 40px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 26px;
+}
+
+.text_77 {
+  width: 122px;
+  height: 31px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 40px;
+  font-family: Alibaba-PuHuiTi-B;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 26px;
+}
+
+.text-wrapper_14 {
+  width: 30px;
+  height: 38px;
+  margin-top: 13px;
+  // margin: 13px 0 0 184px;
+}
+
+.text_78 {
+  width: 26px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 26px;
+}
+
+.text_79 {
+  width: 29px;
+  height: 13px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 12px 0 0 1px;
+}
+
+.label_7 {
+  width: 36px;
+  height: 38px;
+  margin: 13px 0 0 12px;
+}
+
+.text-wrapper_15 {
+  width: 391px;
+  height: 14px;
+  margin: 29px 0 0 32px;
+}
+
+.text_80 {
+  width: 41px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+}
+
+.text_81 {
+  width: 41px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin-left: 18px;
+}
+
+.text_82 {
+  width: 41px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin-left: 18px;
+}
+
+.text_83 {
+  width: 40px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin-left: 17px;
+}
+
+.text_84 {
+  width: 41px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin-left: 19px;
+}
+
+.text_85 {
+  width: 41px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin-left: 17px;
+}
+
+.text_86 {
+  width: 39px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin-left: 18px;
+}
+
+.box_13 {
+  width: 431px;
+  height: 31px;
+  margin: 20px 0 0 12px;
+}
+
+.thumbnail_25 {
+  width: 8px;
+  height: 12px;
+  margin-top: 10px;
+}
+
+.text_87 {
+  width: 13px;
+  height: 11px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 10px 0 0 23px;
+}
+
+.text_88 {
+  width: 15px;
+  height: 11px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 10px 0 0 46px;
+}
+
+.text-wrapper_16 {
+  height: 31px;
+  background: url(https://lanhu-oss-2537-2.lanhuapp.com/psj51mwd60ogrxhjjk6nh3da9ncnt0yrycq9e12ee7e-4335-48e6-b7b7-6fe63c92e06b)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-left: 36px;
+  width: 31px;
+}
+
+.text_89 {
+  width: 16px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 10px 0 0 8px;
+}
+
+.text_90 {
+  width: 16px;
+  height: 11px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 10px 0 0 38px;
+}
+
+.text_91 {
+  width: 16px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 10px 0 0 41px;
+}
+
+.text_92 {
+  width: 16px;
+  height: 12px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 10px 0 0 42px;
+}
+
+.text_93 {
+  width: 15px;
+  height: 11px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 10px 0 0 42px;
+}
+
+.thumbnail_26 {
+  width: 8px;
+  height: 12px;
+  margin: 10px 0 0 25px;
+}
+
+.box_14 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 5px 0px 0px 0px;
+  width: 100%;
+  height: 88px;
+  border: 2px solid rgba(238, 238, 238, 1);
+  margin: 30px 0 0 0;
+}
+
+.text-wrapper_17 {
+  width: 150px;
+  height: 44px;
+  margin: 22px 0 0 0;
+}
+
+.text_94 {
+  width: 150px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 15px;
+}
+
+.text_95 {
+  width: 59px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 13px 0 0 1px;
+}
+
+.text-wrapper_18 {
+
+  // width: 84px;
+  // margin: 31px 0 0 121px;
+  display: flex;
+  align-items: center;
+}
+
+.text_96 {
+  // width: 56px;
+  // height: 14px;
+  background-color: rgba(255, 242, 233, 1);
+  border-radius: 4px;
+  // height: 26px;
+  border: 1px solid rgba(255, 102, 0, 1);
+  overflow-wrap: break-word;
+  color: rgba(255, 102, 0, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+  padding: 5px;
+  margin-right: 10px;
+  // margin: 6px 0 0 14px;
+}
+
+.thumbnail_27 {
+  width: 18px;
+  height: 14px;
+  // margin: 37px 20px 0 18px;
+}
+
+.box_15 {
+  box-shadow: 0px 2px 20px 0px rgba(187, 187, 187, 0.1);
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 5px 0px 0px 0px;
+  width: 430px;
+  height: 88px;
+  border: 2px solid rgba(238, 238, 238, 1);
+  margin: 14px 0 22px 12px;
+}
+
+.text-wrapper_19 {
+  width: 150px;
+  height: 44px;
+  margin: 22px 0 0 19px;
+}
+
+.text_97 {
+  width: 150px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 26px;
+}
+
+.text_98 {
+  width: 59px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 13px 0 0 1px;
+}
+
+.text-wrapper_20 {
+  background-color: rgba(225, 242, 250, 1);
+  border-radius: 4px;
+  height: 26px;
+  border: 1px solid rgba(0, 159, 232, 1);
+  width: 84px;
+  margin: 31px 0 0 121px;
+}
+
+.text_99 {
+  width: 55px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(0, 159, 232, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 26px;
+  margin: 6px 0 0 15px;
+}
+
+.thumbnail_28 {
+  width: 18px;
+  height: 14px;
+  margin: 37px 20px 0 18px;
+}
+
+.box_16 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  height: 232px;
+  margin-top: 12px;
+  width: 100%;
+}
+
+.section_9 {
+  // width: 429px;
+  height: 16px;
+  padding: 18px 13px 0 13px;
+}
+
+.image-text_5 {
+  width: 118px;
+  height: 16px;
+}
+
+.thumbnail_29 {
+  width: 18px;
+  height: 16px;
+}
+
+.text-group_5 {
+  width: 96px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin-left: 10px;
+}
+
+.text_100 {
+  width: 75px;
+  height: 14px;
+  overflow-wrap: break-word;
+  color: rgba(170, 170, 170, 1);
+  font-size: 14px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 14px;
+  margin-top: 2px;
+}
+
+.section_10 {
+  width: 100%;
+  height: 149px;
+  padding: 30px 20px 37px 20px;
+  justify-content: space-between;
+}
+
+.image-text_6 {
+  width: 58px;
+  height: 149px;
+}
+
+.image_6 {
+  width: 58px;
+  height: 127px;
+}
+
+.text-group_6 {
+  width: 48px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 15px;
+  margin: 7px 0 0 5px;
+}
+
+.image-text_7 {
+  width: 59px;
+  height: 149px;
+  // margin-left: 28px;
+}
+
+.image_7 {
+  width: 59px;
+  height: 127px;
+}
+
+.text-group_7 {
+  width: 50px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 15px;
+  margin: 7px 0 0 5px;
+}
+
+.box_17 {
+  width: 51px;
+  height: 143px;
+  margin: 6px 0 0 35px;
+}
+
+.group_13 {
+  box-shadow: 0px 0px 8px 0px rgba(50, 74, 67, 0.68);
+  background-color: rgba(133, 225, 194, 1);
+  border-radius: 24px;
+  height: 116px;
+  margin-left: 2px;
+  width: 48px;
+}
+
+.section_11 {
+  box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.78);
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  margin: 73px 0 0 6px;
+}
+
+.text_101 {
+  width: 51px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 15px;
+  margin-top: 12px;
+}
+
+.box_18 {
+  width: 51px;
+  height: 143px;
+  margin: 6px 0 0 38px;
+}
+
+.box_19 {
+  box-shadow: 0px 0px 8px 0px rgba(50, 74, 67, 0.21);
+  background-color: rgba(238, 248, 245, 1);
+  border-radius: 24px;
+  height: 116px;
+  margin-left: 2px;
+  width: 48px;
+}
+
+.block_12 {
+  box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.78);
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  margin: 7px 0 0 6px;
+}
+
+.text_102 {
+  width: 51px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 15px;
+  margin-top: 12px;
+}
+
+.box_20 {
+  width: 51px;
+  height: 143px;
+  margin: 6px 0 0 38px;
+}
+
+.group_14 {
+  box-shadow: 0px 0px 8px 0px rgba(50, 74, 67, 0.68);
+  background-color: rgba(133, 225, 194, 1);
+  border-radius: 24px;
+  height: 116px;
+  margin-left: 2px;
+  width: 48px;
+}
+
+.group_15 {
+  box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.78);
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  margin: 73px 0 0 6px;
+}
+
+.text_103 {
+  width: 51px;
+  height: 15px;
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 15px;
+  margin-top: 12px;
+}
+
+.text-wrapper_21 {
+  position: absolute;
+  left: 68px;
+  top: 111px;
+  width: 63px;
+  height: 555px;
+  overflow-wrap: break-word;
+  font-size: 0;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  line-height: 60px;
+}
+
+.paragraph_2 {
+  width: 63px;
+  height: 555px;
+  overflow-wrap: break-word;
+  color: rgba(3, 191, 138, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Heavy;
+  font-weight: 900;
+  text-align: left;
+  line-height: 80px;
+}
+
+.paragraph_3 {
+  width: 63px;
+  height: 555px;
+  overflow-wrap: break-word;
+  color: rgba(75, 90, 109, 1);
+  font-size: 16px;
+  font-family: PingFang-SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  line-height: 80px;
+}
+.timeall{
+    position: relative;
+    width: 100%;
+    margin-top: 40px;
+  }
+  .lastbt,.nextbt{
+    position: absolute;
+    top:18px;
+  }
+  .lastbt{
+    left: -7px;
+  }
+  .nextbt{
+    right: -7px;
+  }
+.table_header{ display:flex; justify-content: center; color:#8e8e8e;}
+.week_one{ text-align: center; line-height: 50px; border-bottom:1px solid #f5f4f7; border-left:1px solid #f5f4f7; background: #e9f0fe;  width:200px; }
+.weekday{ flex:1; text-align: center; line-height: 25px; }
+.finish {
+  // background:#8ACBAD;
+  background: linear-gradient(135deg, #04E399, #00A36A);
+  padding: 5px;
+  border-radius: 50%;
+  color:#fff !important;
+}
+
+
 </style>

ruoyi-ui/src/views/login.vue

@@ -163,7 +163,7 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
   .shoue .el-input input{
-    background:#f2f2f2;
+    background:#fff;
     border: 0;
     color: #A7A7A7;
   }
@@ -190,7 +190,7 @@ export default {
   position: relative;
 }
 .title {
-  margin: 10px auto 20px auto;
+  margin: 20px auto 20px auto;
   text-align: center;
   color: #707070;
   font-family: PingFang SC;
@@ -203,7 +203,7 @@ export default {
  background-image: url("../assets/images/pic_htgl_srbg.png");
  background-size: cover;
   width: 400px;
-  padding: 25px 25px 5px 25px;
+  padding: 40px 25px 5px 25px;
   z-index: 1;
   position: absolute;
   top:25.5%;
@@ -219,6 +219,9 @@ export default {
     width: 14px;
     margin-left: 2px;
   }
+  .el-form-item{
+    margin-bottom: 32px;
+  }
 }
 .login-tip {
   font-size: 13px;

ruoyi-ui/src/views/shipinggaoj/NetworkManage/index.vue

@@ -18,29 +18,29 @@
               @keyup.enter.native="handleQuery" />
           </el-form-item>
 
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
+          <el-form-item style="border: 0;">
+                   <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary" size="mini"  @click="handleQuery">查询 </el-button>
+                  <el-button  size="mini" @click="resetQuery">重置</el-button>
+                </el-form-item>
         </el-form>
       </div>
     </div>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+        <el-button type="success" plain  size="mini" @click="handleAdd"
           v-hasPermi="['manage:NetworkManage:add']">新增</el-button>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
           v-hasPermi="['manage:NetworkManage:edit']">修改</el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+        <el-button type="danger" plain  size="mini" :disabled="multiple" @click="handleDelete"
           v-hasPermi="['manage:NetworkManage:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+        <el-button type="warning" plain  size="mini" @click="handleExport"
           v-hasPermi="['manage:NetworkManage:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

ruoyi-ui/src/views/shipinggaoj/channelNumber/index.vue

@@ -38,7 +38,7 @@
           plain
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['system:channelNumber:add']"
+          v-hasPermi="['manage:channelNumber:add']"
         >新增</el-button>
       </el-col>
       <!-- <el-col :span="1.5">
@@ -49,7 +49,7 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-          v-hasPermi="['system:channelNumber:edit']"
+          v-hasPermi="['manage:channelNumber:edit']"
         >修改</el-button>
       </el-col> -->
       <el-col :span="1.5">
@@ -59,7 +59,7 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['system:channelNumber:remove']"
+          v-hasPermi="['manage:channelNumber:remove']"
         >删除</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -68,7 +68,7 @@
           plain
           size="mini"
           @click="handleExport"
-          v-hasPermi="['system:channelNumber:export']"
+          v-hasPermi="['manage:channelNumber:export']"
         >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -98,7 +98,7 @@
                        type="text"
                        plain
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:channelNumber:edit']"
+            v-hasPermi="['manage:channelNumber:edit']"
           >修改</el-button>
           <el-button
             size="mini"
@@ -106,7 +106,7 @@
                        style="width: 42px;height: 26px;background: #FFF1EA;
                               border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:channelNumber:remove']"
+            v-hasPermi="['manage:channelNumber:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -122,7 +122,7 @@
 
     <!-- 添加或修改通道管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="通道编号" prop="channelNum">
           <el-input v-model="form.channelNum" placeholder="请输入通道编号" />
         </el-form-item>
@@ -130,7 +130,7 @@
           <el-input v-model="form.videoAddress" placeholder="请输入视频地址" />
         </el-form-item>
         <el-form-item label="探测协议类型" prop="protocolType">
-                  <el-select v-model="form.protocolType" placeholder="请选择探测协议类型">
+                  <el-select style="width:100%" v-model="form.protocolType" placeholder="请选择探测协议类型">
                     <el-option
                       v-for="dict in dict.type.probing_protocol"
                       :key="dict.value"

ruoyi-ui/src/views/shipinggaoj/gaojingguanli/index.vue

@@ -48,8 +48,8 @@
 
               </el-col>
               <el-col :span="12">
-                <el-form-item label="告警时间" prop="warnTime">
-                        <el-date-picker clearable
+                <el-form-item label="告警时间" prop="warnTime" style="width: 90%;">
+                        <el-date-picker style="width: 100%;" clearable
                           v-model="queryParams.warnTime"
                           type="date"
                           value-format="yyyy-MM-dd"
@@ -89,7 +89,7 @@
                     size="mini"
                     :disabled="singleg"
                     @click="handleUpdateg"
-                    v-hasPermi="['wuYe:manual:edits']"
+                    v-hasPermi="['manage:warnManage:edits']"
                   >修改</el-button>
                 </el-col> -->
                 <el-col :span="1.5">
@@ -115,18 +115,17 @@
               <div class=" infinite-list" :style="dynamicStyle">
                 <el-row :gutter="10" v-if="warnManageList.length !=0" style="width: 100%;margin-left: 0;">
                   <el-col :span="6" v-for="(item,index) in warnManageList" :key="index" style="cursor: pointer;">
-                    <div v-if="isshoe" @click="isac(item)" :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 10px;margin-bottom: 10px;height: 370px;">
+                    <div v-if="isshoe"  @click="isac(item)"  :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 10px;margin-bottom: 10px;height: 370px;">
                       <div class="quning">
                         <div class="shipige">
                           <div style="display: flex;align-items: center;">
                             <img src="../../../assets/images/icon_gjgl_gx_normal.png" alt="" v-if="item.isnum == false">
                             <img src="../../../assets/images/icon_gjgl_gx_selected.png" alt="" v-if="item.isnum == true">
-                            <p style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">告警任务2</p>
+                            <p style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">告警任务{{index + 1}}</p>
                           </div>
-                          <p style="font-size: 14px; color: #aaa;font-weight: 500;">详情→</p>
+                          <p style="font-size: 14px; color: #aaa;font-weight: 500;" @click="tiahzo(item)">详情→</p>
                         </div>
                         <image-preview :src="item.warnImage" :width="100 +'%'" :height="150"  style=""/>
-
                        <!-- <video
                                  :id="'myVideo' + (index+1)"
                                  data-setup="{}"
@@ -142,6 +141,7 @@
                                  <!-- <source  :src="defaultSettings.urls+ item.videoUrl " />
                                </video> -->
                       </div>
+
                       <div class="goe">
                         <div style="display: flex;align-items: center;margin-top: 8px;">
                           <p>视频通道：</p>
@@ -174,6 +174,7 @@
                    <img   src="../../../assets/images/zwshjbig.png" alt="" style="">
                 </div>
               </div>
+
       </div>
 
 
@@ -282,11 +283,20 @@ import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarn
 // import 'videojs-flash'
 import { listChannelNumber, getChannelNumber, delChannelNumber, addChannelNumber, updateChannelNumber } from "@/api/system/channelNumber"
 const defaultSettings = require("@/settings.js");
+import mqttHandle from "../../../utils/mqttHandler.js"
+import mqtt from 'mqtt';
+import { MqttClient } from 'mqtt'
+// 状态变量
+ const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
 export default {
   name: "WarnManage",
   dicts: ['gaojing_type', 'source_type','alarm_task','shagnt'],
   data() {
     return {
+      mqttThemeName:{
+      	url: 'ws://13.229.167.76:1884/mqtt',
+      	topic: 'test/topic'
+      },
       // 遮罩层
       loading: true,
       defaultSettings:defaultSettings,
@@ -350,6 +360,7 @@ export default {
        yutim:true,
        staffTrainTimeList:[],
        tableMaxHeight:'200',
+       receiveNews: "",
       };
     },
     computed: {
@@ -369,8 +380,11 @@ export default {
   	      this.changeTableMaxHeight()
   	    }
   	    this.changeTableMaxHeight()
+
+
   },
   mounted() {
+    // this.createMqtt() // 建立mqtt通信
   	window.onresize = () => {
   	          this.changeTableMaxHeight()
   	        }
@@ -382,19 +396,13 @@ export default {
       if (this.player) {
         this.player.dispose()
       }
+      if (client) {
+        console.log(4)
+        client.end()
+      }
+      // this.disconnect()
     },
   methods: {
-    convertMillisecondsToMinutes(milliseconds) {
-        if (milliseconds) {
-          var minutes = Math.floor(milliseconds / 60000);
-          if(minutes == 0){
-            minutes = 0
-          }
-          // console.log(minutes)
-          // this.minToHm(minutes)
-          return minutes;
-        }
-      },
        minToHm(min) {
           let h = Math.floor(min / 60);
           let m = min % 60;
@@ -407,6 +415,7 @@ export default {
     getList() {
       this.loading = true;
       this.isshoe = false
+
       listWarnManage(this.queryParams).then(response => {
         this.warnManageList   = response.rows;
         this.warnManageList.filter(rou=>{
@@ -418,6 +427,51 @@ export default {
         this.loading = false;
       });
     },
+    // 创mqtt最终版
+    mqttzz(){
+      // 创建一个连接到MQTT broker的客户端实例
+         // 连接成功后，订阅一个主题
+         client.on('connect', function () {
+           client.subscribe('test/topic', function (err) {
+             if (!err) {
+               console.log('成功订阅 test/topic 主题！')
+             }
+           })
+         })
+
+         // 监听订阅主题上的消息
+         client.on('message', function (topic, message) {
+           // 处理接收到的消息
+           console.log('收到主题 ' + topic + ' 的消息: ' + message.toString())
+         })
+    },
+    isac(val){
+      console.log(5,val)
+      val.isnum = !val.isnum
+      this.isshoe = false
+      this.isshoe = true
+      let nhde = []
+      let nsg = ''
+      this.warnManageList.filter(rou=>{
+        if(rou.isnum == true){
+          nhde.push(rou.manualId)
+        }
+      })
+      if(nhde.length == 1){
+        this.warnManageList.filter(rou=>{
+          if(rou.isnum == true){
+            console.log(rou.manualId)
+            this.manid = rou.manualId
+            console.log(this.manid)
+          }
+        })
+        this.singleg = false
+      }else{
+        // this.manid  = row.
+        this.singleg = true
+      }
+
+    },
     /** 查询通道管理列表 */
     getListt() {
       this.loading = true
@@ -498,7 +552,7 @@ export default {
                videoAddress: null,
                reportAddress: null,
                reportStatus: null,
-               warnTime: null,
+               warnTime: this.gettime(),
                warnImage: null,
                delFlag: null,
                createBy: null,
@@ -588,12 +642,17 @@ export default {
            console.log(nhde)
            nsg = nhde.join(',')
             // return
-            this.$modal.confirm('是否确认删除数据项？').then(function() {
-              return delManual(nsg);
-            }).then(() => {
-              this.getList();
-              this.$modal.msgSuccess("删除成功");
-            }).catch(() => {});
+            delWarnManage(nsg).then(response => {
+              this.$modal.msgSuccess("操作成功")
+              this.getList()
+            })
+            // delManual(nsg)
+            // this.$modal.confirm('是否确认删除数据项？').then(function() {
+            //   return delManual(nsg);
+            // }).then(() => {
+            //   this.getList();
+            //   this.$modal.msgSuccess("删除成功");
+            // }).catch(() => {});
           },
        /** 删除按钮操作 */
        handleDelete(row) {
@@ -626,7 +685,16 @@ export default {
             this.tableMaxHeight = height - 150
           // }
           console.log(height)
+        },
+    tiahzo(item){
+      this.$router.push({
+        path: '/shebe',
+        query: {
+        	'id':item.channelId,
         }
+      })
+    }
+
 
   }
 };

ruoyi-ui/src/views/shipinggaoj/mqtt/index - 副本.vue

@@ -0,0 +1,198 @@
+<template>
+<div class="mqtt-client">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <h2>MQTT Client</h2>
+          <el-tag :type="connectionStatus === 'Connected' ? 'success' : 'danger'">
+            {{ connectionStatus }}
+          </el-tag>
+        </div>
+      </template>
+
+      <!-- 连接配置 -->
+      <div class="connection-settings">
+        <el-form :model="mqttConfig" label-width="120px">
+          <el-form-item label="Broker URL">
+            <el-input v-model="mqttConfig.url" :disabled="isConnected" />
+          </el-form-item>
+          <el-form-item label="Topic">
+            <el-input v-model="mqttConfig.topic" :disabled="isConnected" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toggleConnection" :loading="connecting">
+              {{ isConnected ? 'Disconnect' : 'Connect' }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 消息发送 -->
+      <div class="message-sender" v-if="isConnected">
+        <el-input
+          v-model="messageToSend"
+          placeholder="Enter message to send"
+          :rows="3"
+          type="textarea"
+        />
+        <el-button type="primary" @click="sendMessage" :disabled="!messageToSend" class="send-btn">
+          Send Message
+        </el-button>
+      </div>
+
+      <!-- 消息列表 -->
+      <div class="message-list">
+        <h3>Messages</h3>
+        <el-timeline>
+          <el-timeline-item
+            v-for="(msg, index) in messages"
+            :key="index"
+            :type="msg.type === 'sent' ? 'primary' : 'success'"
+            :timestamp="msg.timestamp"
+          >
+            <el-card class="message-card">
+              <p><strong>{{ msg.type === 'sent' ? 'Sent' : 'Received' }}:</strong></p>
+              <p>{{ msg.content }}</p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import mqtt from 'mqtt';
+import { MqttClient } from 'mqtt'
+// 状态变量
+var client = MqttClient||null
+export default {
+	components: {},
+  data() {
+    return {
+		connectionStatus:'',
+		isConnected:false,
+		connecting:false,
+		messages:[{ type: 'sent' , content: '', timestamp: '' }],
+		messageToSend:'',
+		mqttConfig:{
+			url: 'ws://13.229.167.76:1884/mqtt',
+			topic: 'test/topic'
+		},
+	};
+  },
+
+  mounted(){
+   this.toggleConnection()
+  },
+ destroyed() {
+ 	if (client) {
+ 	  client.end()
+ 	}
+ },
+  methods:{
+		async toggleConnection(){
+		  if (this.isConnected) {
+		    // 断开连接
+		    client.end()
+		    this.isConnected= false
+		    this.connectionStatus = 'Disconnected'
+		    return
+		  }
+
+		  // 建立连接
+		  this.connecting = true
+		  try {
+		    client= mqtt.connect(this.mqttConfig.url, {
+		      clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
+		      keepalive: 60,
+		      clean: true,
+		      connectTimeout: 4000,
+		      reconnectPeriod: 1000
+		    })
+
+		    client.on('connect', () => {
+		      this.isConnected = true
+		      this.connectionStatus= 'Connected'
+		      this.connecting = false
+          console.log(3)
+
+		      // 订阅主题
+		      client.subscribe(this.mqttConfig.topic, (err) => {
+		        if (err) {
+		          console.error('Subscribe error:', err)
+		        }
+		      })
+		    })
+
+		    client.on('message', (topic, message) => {
+          // 接受信息
+          console.log(topic,message)
+		      this.messages.unshift({
+		        type: 'received',
+		        content: message.toString(),
+		        timestamp: new Date().toLocaleTimeString()
+		      })
+		    })
+
+		    client.on('error', (err) => {
+		      console.error('MQTT Error:', err)
+		      this.connectionStatus= 'Error'
+		      this.connecting = false
+		    })
+		  } catch (error) {
+		    console.error('Connection error:', error)
+		    this.connectionStatus= 'Error'
+		    this.connecting = false
+		  }
+		},
+		sendMessage(){
+		  if (!client || !this.messageToSend) return
+		  client.publish(this.mqttConfig.topic, this.messageToSend)
+		  this.messages.unshift({
+		    type: 'sent',
+		    content: this.messageToSend,
+		    timestamp: new Date().toLocaleTimeString()
+		  })
+		  this.messageToSend = ''
+		}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mqtt-client {
+  width: 800px;
+  margin: 20px auto;
+  padding: 0 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.connection-settings {
+  margin-bottom: 20px;
+}
+
+.message-sender {
+  margin-bottom: 20px;
+}
+
+.send-btn {
+  margin-top: 10px;
+}
+
+.message-list {
+  margin-top: 20px;
+}
+
+.message-card {
+  margin-bottom: 10px;
+}
+
+.el-timeline-item {
+  margin-bottom: 20px;
+}
+</style>
+

ruoyi-ui/src/views/shipinggaoj/mqtt/index.vue

@@ -0,0 +1,198 @@
+<template>
+<div class="mqtt-client">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <h2>MQTT Client</h2>
+          <el-tag :type="connectionStatus === 'Connected' ? 'success' : 'danger'">
+            {{ connectionStatus }}
+          </el-tag>
+        </div>
+      </template>
+
+      <!-- 连接配置 -->
+      <div class="connection-settings">
+        <el-form :model="mqttConfig" label-width="120px">
+          <el-form-item label="Broker URL">
+            <el-input v-model="mqttConfig.url" :disabled="isConnected" />
+          </el-form-item>
+          <el-form-item label="Topic">
+            <el-input v-model="mqttConfig.topic" :disabled="isConnected" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="toggleConnection" :loading="connecting">
+              {{ isConnected ? 'Disconnect' : 'Connect' }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 消息发送 -->
+      <div class="message-sender" v-if="isConnected">
+        <el-input
+          v-model="messageToSend"
+          placeholder="Enter message to send"
+          :rows="3"
+          type="textarea"
+        />
+        <el-button type="primary" @click="sendMessage" :disabled="!messageToSend" class="send-btn">
+          Send Message
+        </el-button>
+      </div>
+
+      <!-- 消息列表 -->
+      <div class="message-list">
+        <h3>Messages</h3>
+        <el-timeline>
+          <el-timeline-item
+            v-for="(msg, index) in messages"
+            :key="index"
+            :type="msg.type === 'sent' ? 'primary' : 'success'"
+            :timestamp="msg.timestamp"
+          >
+            <el-card class="message-card">
+              <p><strong>{{ msg.type === 'sent' ? 'Sent' : 'Received' }}:</strong></p>
+              <p>{{ msg.content }}</p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import mqtt from 'mqtt';
+import { MqttClient } from 'mqtt'
+// 状态变量
+var client = MqttClient||null
+export default {
+	components: {},
+  data() {
+    return {
+		connectionStatus:'',
+		isConnected:false,
+		connecting:false,
+		messages:[{ type: 'sent' , content: '', timestamp: '' }],
+		messageToSend:'',
+		mqttConfig:{
+			url: 'ws://13.229.167.76:1884/mqtt',
+			topic: 'test/topic'
+		},
+	};
+  },
+
+  mounted(){
+   this.toggleConnection()
+  },
+ destroyed() {
+ 	if (client) {
+ 	  client.end()
+ 	}
+ },
+  methods:{
+		async toggleConnection(){
+		  if (this.isConnected) {
+		    // 断开连接
+		    client.end()
+		    this.isConnected= false
+		    this.connectionStatus = 'Disconnected'
+		    return
+		  }
+
+		  // 建立连接
+		  this.connecting = true
+		  try {
+		    client= mqtt.connect(this.mqttConfig.url, {
+		      clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
+		      keepalive: 60,
+		      clean: true,
+		      connectTimeout: 4000,
+		      reconnectPeriod: 1000
+		    })
+
+		    client.on('connect', (error) => {
+		      this.isConnected = true
+		      this.connectionStatus= 'Connected'
+		      this.connecting = false
+
+		      // 订阅主题
+		      client.subscribe(this.mqttConfig.topic, (err) => {
+		        if (err) {
+
+		          console.error('Subscribe error:', err)
+		        }
+		      })
+		    })
+		    client.on('message', (topic, message) => {
+          // console.log(3,err)
+          // 接受信息
+          console.log(topic,message.toString())
+		      this.messages.unshift({
+		        type: 'received',
+		        content: message.toString(),
+		        timestamp: new Date().toLocaleTimeString()
+		      })
+		    })
+
+		    client.on('error', (err) => {
+		      console.error('MQTT Error:', err)
+		      this.connectionStatus= 'Error'
+		      this.connecting = false
+		    })
+		  } catch (error) {
+		    console.error('Connection error:', error)
+		    this.connectionStatus= 'Error'
+		    this.connecting = false
+		  }
+		},
+		sendMessage(){
+		  if (!client || !this.messageToSend) return
+		  client.publish(this.mqttConfig.topic, this.messageToSend)
+		  this.messages.unshift({
+		    type: 'sent',
+		    content: this.messageToSend,
+		    timestamp: new Date().toLocaleTimeString()
+		  })
+		  this.messageToSend = ''
+		}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mqtt-client {
+  width: 800px;
+  margin: 20px auto;
+  padding: 0 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.connection-settings {
+  margin-bottom: 20px;
+}
+
+.message-sender {
+  margin-bottom: 20px;
+}
+
+.send-btn {
+  margin-top: 10px;
+}
+
+.message-list {
+  margin-top: 20px;
+}
+
+.message-card {
+  margin-bottom: 10px;
+}
+
+.el-timeline-item {
+  margin-bottom: 20px;
+}
+</style>
+

ruoyi-ui/src/views/shipinggaoj/shebe/index.vue

@@ -3,8 +3,7 @@
     <div class="ntgs">
     <el-row :gutter="10" class="mb8">
      <div class="iuer" style="margin-bottom:10px;">
-       <div style="display: flex;align-items: center; " class="ingaqe">
-		    <!-- <p class="lqw" style="font-weight: 700;font-size: 15px; margin-bottom: 0;"> <img src="../../../assets/images/icon_yq_htgl_btzs.png" alt="" style="width:10px;height: 10px;margin-right: 10px;"> 门禁信息</p> -->
+       <!-- <div style="display: flex;align-items: center; " class="ingaqe">
             <el-select v-model="queryParams.name" placeholder="请选监控名称" clearable>
               <el-option
                 v-for="dict in postList"
@@ -14,10 +13,9 @@
               />
             </el-select>
 			<div class="ksfpofg" @click="handleQuery">
-				<!-- <img src="../../../assets/images/icon_sslb_ss.png" alt="" style="width:10px;height: 10px;"> -->
 						  搜索
 						  </div>
-       </div>
+       </div> -->
 	   <!-- <div class="ite">
 	      <div class="ksfpo" @click="osge"  v-hasPermi="['system:camera:openDz']">
 			  <img src="../../../assets/images/icon_ssjk_kman_open.png" alt="" style="width:10px;height: 10px;">
@@ -88,7 +86,9 @@
               <el-button type="success" plain>关闭</el-button>
             </div>
           </div>
-          344
+          <!-- <img src="../../../assets/images/pic_ssyl_lt.png" alt="" style="width: 100%; margin-top: 20px;"> -->
+          <!-- 344 -->
+          <video id="video" controls autoplay muted width="100%" height="100%"style="margin-top: 20px;"></video>
         						<!-- <video
         						      class="videosmall"
         						      ref="videosmallone"
@@ -331,7 +331,9 @@ export default {
 	name:null,
 	isshiwa:false,
 	isjfwe:{},
-	isshoe:false
+	isshoe:false,
+   webRtcServer: null,
+   camera_ip: '127.0.0.1:8000'
 
 
     };
@@ -344,6 +346,9 @@ export default {
   	    this.changeTableMaxHeight()
   },
   mounted() {
+     this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
+          //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
+          this.webRtcServer.connect('rtsp://admin:zxy123456@192.168.101.64:554/h264/ch1/main/av_stream')
   	window.onresize = () => {
   	          this.changeTableMaxHeight()
   	        }

ruoyi-ui/src/views/shipinggaoj/shebei/index.vue

@@ -87,7 +87,7 @@
           plain
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['system:equipmentManage:add']"
+          v-hasPermi="['manage:equipmentManage:add']"
         >新增</el-button>
       </el-col>
       <!-- <el-col :span="1.5">
@@ -98,7 +98,7 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-          v-hasPermi="['system:equipmentManage:edit']"
+          v-hasPermi="['manage:equipmentManage:edit']"
         >修改</el-button>
       </el-col> -->
       <el-col :span="1.5">
@@ -108,7 +108,7 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['system:equipmentManage:remove']"
+          v-hasPermi="['manage:equipmentManage:remove']"
         >删除</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -148,7 +148,7 @@
            type="success"
            plain
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:equipmentManage:edit']"
+            v-hasPermi="['manage:equipmentManage:edit']"
           >修改</el-button>
           <el-button
             size="mini"
@@ -156,7 +156,7 @@
             style="width: 42px;height: 26px;background: #FFF1EA;
                    border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['system:equipmentManage:remove']"
+            v-hasPermi="['manage:equipmentManage:remove']"
           >删除</el-button>
         </template>
       </el-table-column>
@@ -437,7 +437,7 @@ export default {
           }).catch(() => {})
         },
          handleExport() {
-              this.download('system/equipmentManage/export', {
+              this.download('manage/equipmentManage/export', {
                 ...this.queryParams
               }, `equipmentManage_${new Date().getTime()}.xlsx`)
             },