web-component-gallery 0.1.10 → 0.1.12

package/dist/form.umd.js

@@ -7507,7 +7507,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* 混入样式 */\\n/* 滚动条样式 */\\n/* 文字换行省略（默认1行）*/\\n/* flex */\\n.WebComponentFormSearch[data-v-97ec3748] {\\n  gap: 16px 0;\\n  display: flex;\\n  gap: 0;\\n  flex-direction: row;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  justify-content: flex-start;\\n}\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] {\\n  display: inline-flex;\\n  margin-right: unset;\\n}\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-form-item-label {\\n  min-width: 70px;\\n  max-width: 100px;\\n  text-align: right;\\n}\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-form-item-control-wrapper {\\n  flex: 1;\\n}\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-select,\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-input-number,\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-calendar-picker {\\n  width: 100% !important;\\n}\\n.WebComponentFormSearch__Actions[data-v-97ec3748] {\\n  flex: 1;\\n  text-align: right;\\n  margin-right: 16px;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/form/Search.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* 混入样式 */\\n/* 布局（ 纯为了不想多写一行 */\\n/* 滚动条样式 */\\n/* 文字换行省略（默认1行）*/\\n/* flex布局 */\\n/* flex排版方式 */\\n.WebComponentFormSearch[data-v-97ec3748] {\\n  gap: 16px 0;\\n  display: flex;\\n  gap: 0;\\n  flex-direction: row;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  justify-content: flex-start;\\n}\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] {\\n  display: inline-flex;\\n  margin-right: unset;\\n}\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-form-item-label {\\n  min-width: 70px;\\n  max-width: 100px;\\n  text-align: right;\\n}\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-form-item-control-wrapper {\\n  flex: 1;\\n}\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-select,\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-input-number,\\n.WebComponentFormSearch .ant-form-item[data-v-97ec3748] .ant-calendar-picker {\\n  width: 100% !important;\\n}\\n.WebComponentFormSearch__Actions[data-v-97ec3748] {\\n  flex: 1;\\n  text-align: right;\\n  margin-right: 16px;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/form/Search.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

package/dist/index.umd.js

@@ -4633,7 +4633,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* 混入样式 */\\n/* 滚动条样式 */\\n/* 文字换行省略（默认1行）*/\\n/* flex */\\n.WebComponentTable[data-v-19255b3a] {\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n  gap: 16px 0;\\n  flex-direction: column;\\n}\\n.WebComponentTable__List__Empty[data-v-19255b3a] {\\n  gap: 16px 0;\\n  display: flex;\\n  gap: 0;\\n  flex-direction: column;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/table/index.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* 混入样式 */\\n/* 布局（ 纯为了不想多写一行 */\\n/* 滚动条样式 */\\n/* 文字换行省略（默认1行）*/\\n/* flex布局 */\\n/* flex排版方式 */\\n.WebComponentTable[data-v-19255b3a] {\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n  gap: 16px 0;\\n  flex-direction: column;\\n}\\n.WebComponentTable__List__Empty[data-v-19255b3a] {\\n  gap: 16px 0;\\n  display: flex;\\n  gap: 0;\\n  flex-direction: column;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/table/index.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

package/dist/table.umd.js

@@ -4622,7 +4622,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* 混入样式 */\\n/* 滚动条样式 */\\n/* 文字换行省略（默认1行）*/\\n/* flex */\\n.WebComponentTable[data-v-19255b3a] {\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n  gap: 16px 0;\\n  flex-direction: column;\\n}\\n.WebComponentTable__List__Empty[data-v-19255b3a] {\\n  gap: 16px 0;\\n  display: flex;\\n  gap: 0;\\n  flex-direction: column;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/table/index.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n// Imports\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* 混入样式 */\\n/* 布局（ 纯为了不想多写一行 */\\n/* 滚动条样式 */\\n/* 文字换行省略（默认1行）*/\\n/* flex布局 */\\n/* flex排版方式 */\\n.WebComponentTable[data-v-19255b3a] {\\n  width: 100%;\\n  height: 100%;\\n  display: flex;\\n  gap: 16px 0;\\n  flex-direction: column;\\n}\\n.WebComponentTable__List__Empty[data-v-19255b3a] {\\n  gap: 16px 0;\\n  display: flex;\\n  gap: 0;\\n  flex-direction: column;\\n  flex-wrap: wrap;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ __webpack_exports__[\"default\"] = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mui/./plugins/lib/table/index.vue?./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-2.use%5B2%5D!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

package/lib/style/mixins.less

@@ -1,11 +1,11 @@
-// 布局（默认100%）
+/* 布局（ 纯为了不想多写一行 */
 .layout( @w: 100%, @h: 100% ) {
     width: @w;
     height: @h;
 }  
 
 /* 滚动条样式 */
-.scrollbarStyle() {
+.scrollbarStyle( @color1: #1890ff, @color2: rgba(41, 158, 254, 0) ) {
     &::-webkit-scrollbar-track {
       border-radius: 0;
       background-color: transparent;
@@ -14,7 +14,7 @@
       border-radius: 0;
       border-radius: 5px;
   
-      background-image: -webkit-linear-gradient(270deg, #1890ff 0%, rgba(41, 158, 254, 0) 100%);
+      background-image: -webkit-linear-gradient(270deg, @color1 0%, @color2 100%);
       -webkit-transition: all 0.2s;
       transition: all 0.2s;
     }
@@ -38,13 +38,14 @@
     -webkit-box-orient: vertical;
 }  
 
-/* flex */
+/* flex布局 */
 .flex-layout( @flexDirection: row, @flexGap: 0 ) {
     display: flex;
     gap: @flexGap;
     flex-direction: @flexDirection;
 }
-  
+
+/* flex排版方式 */
 .flex-mixins(@direction: row, @align: center, @justify: center ) {
     .flex-layout(@direction);
     flex-wrap: wrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "vue-library-ui组件库",
   "main": "dist/index.umd.js",
   "files": [
@@ -17,6 +17,7 @@
     "build:lib": "npm run build:js && npm run build:css"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "ant-design-vue": "1.7.8",
     "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.8.3",

package/plugins/lib/style/mixins.less

@@ -1,11 +1,11 @@
-// 布局（默认100%）
+/* 布局（ 纯为了不想多写一行 */
 .layout( @w: 100%, @h: 100% ) {
     width: @w;
     height: @h;
 }  
 
 /* 滚动条样式 */
-.scrollbarStyle() {
+.scrollbarStyle( @color1: #1890ff, @color2: rgba(41, 158, 254, 0) ) {
     &::-webkit-scrollbar-track {
       border-radius: 0;
       background-color: transparent;
@@ -14,7 +14,7 @@
       border-radius: 0;
       border-radius: 5px;
   
-      background-image: -webkit-linear-gradient(270deg, #1890ff 0%, rgba(41, 158, 254, 0) 100%);
+      background-image: -webkit-linear-gradient(270deg, @color1 0%, @color2 100%);
       -webkit-transition: all 0.2s;
       transition: all 0.2s;
     }
@@ -38,13 +38,14 @@
     -webkit-box-orient: vertical;
 }  
 
-/* flex */
+/* flex布局 */
 .flex-layout( @flexDirection: row, @flexGap: 0 ) {
     display: flex;
     gap: @flexGap;
     flex-direction: @flexDirection;
 }
-  
+
+/* flex排版方式 */
 .flex-mixins(@direction: row, @align: center, @justify: center ) {
     .flex-layout(@direction);
     flex-wrap: wrap;

package/plugins/method/AMap.js

@@ -0,0 +1,155 @@
+// amap-plugin.js
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+// 在 Vue 插件中封装高德地图的初始化和常用方法
+function AmapPlugin(Vue, options) {
+  
+  /** 设置高德地图密钥 */
+  window.forceWebGL = true
+  window._AMapSecurityConfig = {
+    securityJsCode: options.securityJsCode
+  }
+  
+  /** 加载地图sdk */
+  const AMap = AMapLoader.load({
+    key: options.key, // 高德地图的API Key
+    version: '2.0', // 指定API版本
+    plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ControlBar'] // 需要使用的插件
+  })
+
+  if (!AMap) {
+    throw new Error('高德地图脚本还未加载，请确保在使用此插件前已经加载高德地图SDK。')
+  }
+
+  // 初始化高德地图
+  Vue.prototype.$initAMap = function(el, callback) {
+    this.$nextTick(() => {
+      const map = new AMap.Map(el, {
+        zoom: 11, // 初始化时地图的缩放级别
+        ...options.config // 其他高德地图初始化参数
+      })
+      callback && callback(map)
+    })
+  }
+
+  /** 抛出地图常用方法 */ 
+  Vue.prototype.$amapMethods = {
+    getMapAddress,
+    setMapDriving,
+    drawMapAnimation
+  }
+ 
+  // 其他可能需要封装的高德地图常用方法...
+
+  /** 后续考虑加入一些map方法 */
+  /** 地图逆地理编码 */
+  function getMapAddress({longitude, latitude}, callback) {
+    const geocoder = new AMap.Geocoder({
+      city: '全国',
+      // 获取道路poi等详细信息 
+      extensions: 'all'
+    })
+
+    geocoder.getAddress(new Array(longitude, latitude), (status, result) => {
+      if (status === 'complete' && result.info === 'OK') {
+        const { formattedAddress, pois } = result.regeocode
+        const { district, township } = result.regeocode.addressComponent
+        let address
+
+        const division =
+          township && formattedAddress.includes(township)
+            ? formattedAddress.indexOf(township) + township.length
+            : formattedAddress.indexOf(district) + district.length
+
+        address = formattedAddress.slice(0, division) + pois[0]?.address
+
+        callback && callback({
+            address,
+            addressInfo: result.regeocode.addressComponent
+        })
+      }
+    })
+  } 
+
+  /** 道路规划 */
+  function setMapDriving(AMapInit, paths, callback) {
+    AMapInit.plugin("AMap.Driving", () => {  
+        let planRoutes = new AMap.Driving({ map: AMapInit })
+        planRoutes.search( 
+            setLngLat( paths[ 0 ] ), 
+            setLngLat( paths[ paths.length - 1 ] ),
+            { waypoints: paths.slice( 1, paths.length - 1 ).map( path => setLngLat( path ) ) }, 
+            function (status, result) {
+                if(status == 'complete') return
+                callback && callback( parseRouteToPath( e.routes[0] ), roadDriving )
+                //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
+                //查询成功时，result 即为对应的驾车导航信息
+            }
+        )
+    }) 
+  } 
+
+  /** 轨迹动画 */
+  function drawMapAnimation(AMapInit, options, pathOptions, callback) {
+    AMapInit.plugin('AMap.MoveAnimation', () => {
+        let animationMarker = new AMap.Marker({
+            map: AMapInit,
+            icon: options.icon,
+            position: options.paths[0],
+            ...options
+        })
+        let passedPolyline = new AMap.Polyline({
+            map: AMapInit,
+            ...pathOptions
+        })
+
+        animationMarker.on('moving',  e => {
+            passedPolyline.setPath( e.passedPath )
+            AMapInit.setCenter( e.target.getPosition(), true )    
+        })
+
+        animationMarker.moveAlong(paths, {
+            // circlable 是否循环
+            // 每段间隔时间
+            // aniInterval: 5,
+            // 每一段的时长
+            duration: 500, // 可根据实际采集时间间隔设置
+            // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+            autoRotation: true
+        })
+        callback && callback( animationMarker, passedPolyline )
+    })
+  }
+
+  // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
+  function parseRouteToPath(route) {
+    let path = []
+    let ApproachPoint = []
+    let pointI = 0
+    for (let i = 0, l = route.steps.length; i < l; i++) {
+        let step = route.steps[i]
+        for (let j = 0, n = step.path.length; j < n; j++) {
+            path.push(step.path[j])
+            if( step.assistant_action == "到达途经地" && (j == n - 1)  ) ApproachPoint.push( pointI )
+            pointI++
+        }
+    }
+    return { path, ApproachPoint }
+  }
+
+}
+ 
+// 为了能够在 Vue 中全局使用插件，可以添加一个 install 方法
+AmapPlugin.install = function(Vue, options) {
+  Vue.mixin({
+    created() {
+      if (this.$options.amap) {
+        this.$initAMap(this.$options.amap.el, this.$options.amap.callback)
+      }
+    }
+  })
+  
+  Vue.prototype.$amap = AmapPlugin
+}
+ 
+export default AmapPlugin

package/plugins/utils/Filter.js

@@ -92,4 +92,61 @@ export function formatDate(time, cFormat) {
     return timeStr;
 }
 
+/**
+ * JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
+ * sHex为传入的十六进制的色值
+ * alpha为rgba的透明度
+ */
+export function colorRgba(sHex, alpha) {
+    // 十六进制颜色值的正则表达式
+    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+    /* 16进制颜色转为RGB格式 */
+    let sColor = sHex.toLowerCase();
+    if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+            var sColorNew = "#";
+            for (let i = 1; i < 4; i += 1) {
+                sColorNew += sColor.slice(i, i + 1)
+                    .concat(sColor.slice(i, i + 1));
+            }
+            sColor = sColorNew;
+        }
+        // 处理六位的颜色值
+        const sColorChange = [];
+        for (let i = 1; i < 7; i += 2) {
+            sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`));
+        }
+        // return sColorChange.join(',')
+        return `rgba(${sColorChange.join(",")},${alpha})`;
+    }
+    return sColor;
+}
+
+/*
+segment: 分段 7段
+tatalpercent: 百分比 100
+basevalue: 基础值 200
+*/
+export function produceDataSeriesEx(segment, tatal, basevalue) {
+    //需要产生segment个随机数，且segment个随机数之和等于tatal
+    let arrpercent = new Array(segment).fill(0);
+    for (let i = 0; i < tatal; i++) {
+        //parseInt接收string，所以需要转一趟
+        /**
+         * 换成生活中的场景，就是一百个苹果分给十个人，我们可以一个一个的取出，随机分给某个人，直到分完
+         * 在js里面，十个人即是一个长度为十的数组，每次数组随机一个位置加一，执行一百次
+         */
+        var num = parseInt((Math.random() * segment).toString());
+        arrpercent[num]++;
+    }
+    //console.log(arr.length)
+
+    let arrvalue = new Array(segment).fill(0);
+    for (let i = 0; i < segment; i++) {
+        arrvalue[i] = parseInt(arrpercent[i] / 100 * basevalue);
+    }
+
+    return [arrpercent, arrvalue];
+}
+
   

package/plugins/utils/Validate.js

@@ -0,0 +1,10 @@
+export const verifyInteger = /^([1-9][0-9]*)$/; // 整数,不包含0开头
+export const verifyFloat = /^[1-9]+(.[0-9]{2})?$/ // 保留两位小数的正数 
+export const verifyChinese = /^([\u4e00-\u9fa5]){1,10}$/; // 校验中文,长度1到10
+export const verifyBlank = /^\s*$/; // 校验空格
+export const verifyEnglishName = /^[a-zA-Z][a-zA-Z0-9_]*$/; // 检验英文字母开头,且限制输入 英文 + 数字
+export const verifyChineseAndEng = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/; // 检验汉字、数字、字母、下划线，下划线位置不限
+export const phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //手机号
+export const telephone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/; //固定电话与手机号
+export const verifyEmail =  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; //检验邮箱
+export const verifyIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/    //身份证号码  15位或18位  

package/plugins/utils/Websocket.js

@@ -0,0 +1,162 @@
+import Vue from 'vue'
+import { Message } from 'ant-design-vue'
+
+let globalWebSocket = null 
+let isConnect = false  //连接状态
+let globalCallback = function(e){ console.log(e) } //定义外部接收数据的回调函数
+let reConnectNum = 0 //重连次数
+let wsPrefix = window.origin.includes('https') ? 'wss' : 'ws'
+
+//心跳设置
+let heartCheck = {
+    heart: "heart", //心跳包
+    timeout: 45 * 1000, //每段时间发送一次心跳包 这里设置为60s
+    heartbeat: null, //延时发送消息对象(启动心跳新建这个对象，收到消息后重置对象)
+    start: function () {
+        this.heartbeat = setInterval(()=>{
+            if (isConnect){
+                webSocketSend(this.heart)
+            }else{
+                this.clear()
+            }
+        }, this.timeout)
+    },
+    reset: function () {
+        clearInterval(this.heartbeat)
+        this.start()
+    },
+    clear: function() {
+        clearInterval(this.heartbeat)
+    }
+}
+
+//初始化websocket
+function initWebSocket(webSocket, webSocketUrl, callback = () => {}) {
+    if ("WebSocket" in window) {
+        webSocket = new WebSocket(`${wsPrefix}://${webSocketUrl}`) //创建socket对象
+    } else {
+        Message({
+            message: '该浏览器不支持websocket!',
+            type: 'warning'
+        })
+        return
+    }
+    //此callback为在其他地方调用时定义的接收socket数据的函数
+    globalCallback = callback
+    globalWebSocket = webSocket
+    //打开
+    webSocket.onopen = function() {
+        webSocketOpen()
+    }
+    //收信
+    webSocket.onmessage = function(e) {
+        webSocketOnMessage(e)
+    }
+    //关闭
+    webSocket.onclose = function(e) {
+        webSocketOnClose(e)
+    }
+    //连接发生错误的回调方法
+    webSocket.onerror = function(e) {
+        webSocketonError(e)
+    }
+}
+//连接socket建立时触发
+function webSocketOpen() {
+    console.log("WebSocket连接成功")
+    //首次握手
+    webSocketSend(heartCheck.heart)
+    isConnect = true
+    heartCheck.start()
+    reConnectNum = 0
+}
+
+//接受服务端数据
+function webSocketOnMessage(e) {
+    console.log("websocket信息:")
+    console.log(e.data)
+    // 该websocket请求已被停止
+    if(e.data == "stopUser") return
+    globalCallback(JSON.parse(e.data)) //将data传给在外定义的接收数据的函数，至关重要。
+}
+
+//socket关闭时触发
+function webSocketOnClose(e){
+    heartCheck.clear()
+    isConnect = false //断开后修改标识
+    console.log(e)
+    console.log('webSocket已经关闭 (code：' + e.code + ')')
+    //被动断开，重新连接
+    if(e.code == 1006){
+        if(reConnectNum < 3){
+            initWebSocket()
+            ++reConnectNum
+        }else{
+            Message({
+                message: 'websocket连接不上，请刷新页面或联系开发人员!',
+                type: 'warning'
+            })
+        }
+    }
+}
+
+//连接发生错误的回调方法
+function webSocketonError(e){
+    heartCheck.clear()
+    isConnect = false //断开后修改标识
+    console.log("WebSocket连接发生错误:")
+    console.log(e)
+}
+
+
+//发送数据
+function webSocketSend(data) {
+    webSocket.send(JSON.stringify(data)) //在这里根据自己的需要转换数据格式
+}
+//在其他需要socket地方主动关闭socket
+function closeWebSocket(webSocket) {
+    webSocket.close()
+    heartCheck.clear()
+    isConnect = false
+    reConnectNum = 0
+}
+//在其他需要socket地方接受数据
+function getSock(callback) {
+    globalCallback = callback
+}
+//在其他需要socket地方调用的函数，用来发送数据及接受数据
+function sendSock(webSocket, agentData) {
+    //下面的判断主要是考虑到socket连接可能中断或者其他的因素，可以重新发送此条消息。
+    switch (webSocket.readyState) {
+        //CONNECTING：值为0，表示正在连接。
+        case webSocket.CONNECTING:
+            setTimeout(function() {
+                sendSock(agentData, callback)
+            }, 1000)
+        break;
+        //OPEN：值为1，表示连接成功，可以通信了。
+        case webSocket.OPEN:
+            webSocketSend(agentData)
+        break;
+        //CLOSING：值为2，表示连接正在关闭。
+        case webSocket.CLOSING:
+            setTimeout(function() {
+                sendSock(agentData, callback)
+            }, 1000)
+        break;
+        //CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
+        case webSocket.CLOSED:
+        // do something
+        break;
+        default:
+        // this never happens
+        break;
+    }
+}
+
+export default {
+  initWebSocket,
+  closeWebSocket,
+  sendSock,
+  getSock
+}