Compare commits
No commits in common. "8e94f1d7f2fb3bb6796f84e616a64d99b3b82b0a" and "d26302199da7fb6a05384ee770761bfec23c5e83" have entirely different histories.
8e94f1d7f2
...
d26302199d
1
.gitignore
vendored
1
.gitignore
vendored
@ -54,4 +54,3 @@
|
|||||||
/unpackage/dist/dev/app-plus/manifest.json
|
/unpackage/dist/dev/app-plus/manifest.json
|
||||||
/unpackage/dist/dev/app-plus/uni-app-view.umd.js
|
/unpackage/dist/dev/app-plus/uni-app-view.umd.js
|
||||||
/node_modules
|
/node_modules
|
||||||
/unpackage
|
|
||||||
|
26
.hbuilderx/launch.json
Normal file
26
.hbuilderx/launch.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
// launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||||
|
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
||||||
|
"version" : "0.0",
|
||||||
|
"configurations" : [
|
||||||
|
{
|
||||||
|
"app-plus" :
|
||||||
|
{
|
||||||
|
"launchtype" : "local"
|
||||||
|
},
|
||||||
|
"default" :
|
||||||
|
{
|
||||||
|
"launchtype" : "local"
|
||||||
|
},
|
||||||
|
"mp-weixin" :
|
||||||
|
{
|
||||||
|
"launchtype" : "local"
|
||||||
|
},
|
||||||
|
"type" : "uniCloud"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"playground" : "standard",
|
||||||
|
"type" : "uni-app:app-android"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
13
.vite/deps/_metadata.json
Normal file
13
.vite/deps/_metadata.json
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"hash": "5610b5a1",
|
||||||
|
"browserHash": "3deef0d9",
|
||||||
|
"optimized": {
|
||||||
|
"base-64": {
|
||||||
|
"src": "../../node_modules/base-64/base64.js",
|
||||||
|
"file": "base-64.js",
|
||||||
|
"fileHash": "768aae23",
|
||||||
|
"needsInterop": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chunks": {}
|
||||||
|
}
|
117
.vite/deps/base-64.js
Normal file
117
.vite/deps/base-64.js
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __commonJS = (cb, mod) => function __require() {
|
||||||
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ../../../../Documents/HBuilderProjects/B404219-tianranqi/node_modules/base-64/base64.js
|
||||||
|
var require_base64 = __commonJS({
|
||||||
|
"../../../../Documents/HBuilderProjects/B404219-tianranqi/node_modules/base-64/base64.js"(exports, module) {
|
||||||
|
(function(root) {
|
||||||
|
var freeExports = typeof exports == "object" && exports;
|
||||||
|
var freeModule = typeof module == "object" && module && module.exports == freeExports && module;
|
||||||
|
var freeGlobal = typeof global == "object" && global;
|
||||||
|
if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
|
||||||
|
root = freeGlobal;
|
||||||
|
}
|
||||||
|
var InvalidCharacterError = function(message) {
|
||||||
|
this.message = message;
|
||||||
|
};
|
||||||
|
InvalidCharacterError.prototype = new Error();
|
||||||
|
InvalidCharacterError.prototype.name = "InvalidCharacterError";
|
||||||
|
var error = function(message) {
|
||||||
|
throw new InvalidCharacterError(message);
|
||||||
|
};
|
||||||
|
var TABLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
|
||||||
|
var REGEX_SPACE_CHARACTERS = /[\t\n\f\r ]/g;
|
||||||
|
var decode = function(input) {
|
||||||
|
input = String(input).replace(REGEX_SPACE_CHARACTERS, "");
|
||||||
|
var length = input.length;
|
||||||
|
if (length % 4 == 0) {
|
||||||
|
input = input.replace(/==?$/, "");
|
||||||
|
length = input.length;
|
||||||
|
}
|
||||||
|
if (length % 4 == 1 || // http://whatwg.org/C#alphanumeric-ascii-characters
|
||||||
|
/[^+a-zA-Z0-9/]/.test(input)) {
|
||||||
|
error(
|
||||||
|
"Invalid character: the string to be decoded is not correctly encoded."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
var bitCounter = 0;
|
||||||
|
var bitStorage;
|
||||||
|
var buffer;
|
||||||
|
var output = "";
|
||||||
|
var position = -1;
|
||||||
|
while (++position < length) {
|
||||||
|
buffer = TABLE.indexOf(input.charAt(position));
|
||||||
|
bitStorage = bitCounter % 4 ? bitStorage * 64 + buffer : buffer;
|
||||||
|
if (bitCounter++ % 4) {
|
||||||
|
output += String.fromCharCode(
|
||||||
|
255 & bitStorage >> (-2 * bitCounter & 6)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return output;
|
||||||
|
};
|
||||||
|
var encode = function(input) {
|
||||||
|
input = String(input);
|
||||||
|
if (/[^\0-\xFF]/.test(input)) {
|
||||||
|
error(
|
||||||
|
"The string to be encoded contains characters outside of the Latin1 range."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
var padding = input.length % 3;
|
||||||
|
var output = "";
|
||||||
|
var position = -1;
|
||||||
|
var a;
|
||||||
|
var b;
|
||||||
|
var c;
|
||||||
|
var buffer;
|
||||||
|
var length = input.length - padding;
|
||||||
|
while (++position < length) {
|
||||||
|
a = input.charCodeAt(position) << 16;
|
||||||
|
b = input.charCodeAt(++position) << 8;
|
||||||
|
c = input.charCodeAt(++position);
|
||||||
|
buffer = a + b + c;
|
||||||
|
output += TABLE.charAt(buffer >> 18 & 63) + TABLE.charAt(buffer >> 12 & 63) + TABLE.charAt(buffer >> 6 & 63) + TABLE.charAt(buffer & 63);
|
||||||
|
}
|
||||||
|
if (padding == 2) {
|
||||||
|
a = input.charCodeAt(position) << 8;
|
||||||
|
b = input.charCodeAt(++position);
|
||||||
|
buffer = a + b;
|
||||||
|
output += TABLE.charAt(buffer >> 10) + TABLE.charAt(buffer >> 4 & 63) + TABLE.charAt(buffer << 2 & 63) + "=";
|
||||||
|
} else if (padding == 1) {
|
||||||
|
buffer = input.charCodeAt(position);
|
||||||
|
output += TABLE.charAt(buffer >> 2) + TABLE.charAt(buffer << 4 & 63) + "==";
|
||||||
|
}
|
||||||
|
return output;
|
||||||
|
};
|
||||||
|
var base64 = {
|
||||||
|
"encode": encode,
|
||||||
|
"decode": decode,
|
||||||
|
"version": "1.0.0"
|
||||||
|
};
|
||||||
|
if (typeof define == "function" && typeof define.amd == "object" && define.amd) {
|
||||||
|
define(function() {
|
||||||
|
return base64;
|
||||||
|
});
|
||||||
|
} else if (freeExports && !freeExports.nodeType) {
|
||||||
|
if (freeModule) {
|
||||||
|
freeModule.exports = base64;
|
||||||
|
} else {
|
||||||
|
for (var key in base64) {
|
||||||
|
base64.hasOwnProperty(key) && (freeExports[key] = base64[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
root.base64 = base64;
|
||||||
|
}
|
||||||
|
})(exports);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export default require_base64();
|
||||||
|
/*! Bundled license information:
|
||||||
|
|
||||||
|
base-64/base64.js:
|
||||||
|
(*! https://mths.be/base64 v1.0.0 by @mathias | MIT license *)
|
||||||
|
*/
|
||||||
|
//# sourceMappingURL=base-64.js.map
|
7
.vite/deps/base-64.js.map
Normal file
7
.vite/deps/base-64.js.map
Normal file
File diff suppressed because one or more lines are too long
3
.vite/deps/package.json
Normal file
3
.vite/deps/package.json
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"type": "module"
|
||||||
|
}
|
@ -55,29 +55,4 @@ export function queryZyzgdjByRyLdhth(ldhth) { // 获取人员职业资格等级
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
data: ldhth
|
data: ldhth
|
||||||
})
|
})
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export function queryJxkhByRyLdhth(ldhth) { // 绩效考核信息
|
|
||||||
return https({
|
|
||||||
url: '/cxc_rlzy.zb/cxcRlzyZb/listCxcRlzyJxkhByMainId',
|
|
||||||
method: 'get',
|
|
||||||
data: ldhth
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function cxcHrYgxxtj(parm) { // 获取员工信息统计
|
|
||||||
return https({
|
|
||||||
url: '/cxchrygxxtj/cxcHrYgxxtj/list',
|
|
||||||
method: 'get',
|
|
||||||
data: parm
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function cxcRyDataTongji(url, parm) { // 员工信息统计
|
|
||||||
return https({
|
|
||||||
url: url,
|
|
||||||
method: 'get',
|
|
||||||
data: parm
|
|
||||||
})
|
|
||||||
}
|
}
|
@ -182,14 +182,6 @@
|
|||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
step.value = res.result.records
|
step.value = res.result.records
|
||||||
step.value = step.value.map(item => {
|
|
||||||
if (item.name === 'start') {
|
|
||||||
item.name = '开始';
|
|
||||||
} else if (item.name === 'end') {
|
|
||||||
item.name = '结束';
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
241
manifest.json
241
manifest.json
@ -1,122 +1,123 @@
|
|||||||
{
|
{
|
||||||
"name": "数智产销",
|
"name" : "数智产销",
|
||||||
"appid": "__UNI__9F097F0",
|
"appid" : "__UNI__9F097F0",
|
||||||
"description": "",
|
"description" : "",
|
||||||
"versionName": "1.1.4.1",
|
"versionName" : "1.1.1",
|
||||||
"versionCode": 20250121,
|
"versionCode" : 20250106,
|
||||||
"transformPx": false,
|
"transformPx" : false,
|
||||||
/* 5+App特有相关 */
|
/* 5+App特有相关 */
|
||||||
"app-plus": {
|
"app-plus" : {
|
||||||
"usingComponents": true,
|
"usingComponents" : true,
|
||||||
"nvueStyleCompiler": "uni-app",
|
"nvueStyleCompiler" : "uni-app",
|
||||||
"compilerVersion": 3,
|
"compilerVersion" : 3,
|
||||||
"splashscreen": {
|
"splashscreen" : {
|
||||||
"alwaysShowBeforeRender": true,
|
"alwaysShowBeforeRender" : true,
|
||||||
"waiting": true,
|
"waiting" : true,
|
||||||
"autoclose": true,
|
"autoclose" : true,
|
||||||
"delay": 0
|
"delay" : 0
|
||||||
},
|
},
|
||||||
"compatible": {
|
"compatible" : {
|
||||||
"ignoreVersion": true
|
"ignoreVersion" : true
|
||||||
},
|
},
|
||||||
/* 模块配置 */
|
/* 模块配置 */
|
||||||
"modules": {
|
"modules" : {
|
||||||
"Geolocation": {},
|
"Geolocation" : {},
|
||||||
"Fingerprint": {},
|
"Fingerprint" : {},
|
||||||
"Camera": {},
|
"Camera" : {},
|
||||||
"Barcode": {}
|
"Barcode" : {}
|
||||||
},
|
},
|
||||||
/* 应用发布信息 */
|
/* 应用发布信息 */
|
||||||
"distribute": {
|
"distribute" : {
|
||||||
/* android打包配置 */
|
/* android打包配置 */
|
||||||
"android": {
|
"android" : {
|
||||||
"permissions": [
|
"permissions" : [
|
||||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
/* ios打包配置 */
|
/* ios打包配置 */
|
||||||
"ios": {
|
"ios" : {
|
||||||
"dSYMs": false
|
"dSYMs" : false
|
||||||
},
|
},
|
||||||
/* SDK配置 */
|
/* SDK配置 */
|
||||||
"sdkConfigs": {
|
"sdkConfigs" : {
|
||||||
"ad": {},
|
"ad" : {},
|
||||||
"geolocation": {
|
"geolocation" : {
|
||||||
"system": {
|
"system" : {
|
||||||
"__platform__": ["android"]
|
"__platform__" : [ "android" ]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"icons": {
|
"icons" : {
|
||||||
"android": {
|
"android" : {
|
||||||
"hdpi": "unpackage/res/icons/72x72.png",
|
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||||
"xhdpi": "unpackage/res/icons/96x96.png",
|
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||||
"xxhdpi": "unpackage/res/icons/144x144.png",
|
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||||
"xxxhdpi": "unpackage/res/icons/192x192.png"
|
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||||
},
|
},
|
||||||
"ios": {
|
"ios" : {
|
||||||
"appstore": "unpackage/res/icons/1024x1024.png",
|
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||||
"ipad": {
|
"ipad" : {
|
||||||
"app": "unpackage/res/icons/76x76.png",
|
"app" : "unpackage/res/icons/76x76.png",
|
||||||
"app@2x": "unpackage/res/icons/152x152.png",
|
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||||
"notification": "unpackage/res/icons/20x20.png",
|
"notification" : "unpackage/res/icons/20x20.png",
|
||||||
"notification@2x": "unpackage/res/icons/40x40.png",
|
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||||
"proapp@2x": "unpackage/res/icons/167x167.png",
|
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||||
"settings": "unpackage/res/icons/29x29.png",
|
"settings" : "unpackage/res/icons/29x29.png",
|
||||||
"settings@2x": "unpackage/res/icons/58x58.png",
|
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||||
"spotlight": "unpackage/res/icons/40x40.png",
|
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||||
"spotlight@2x": "unpackage/res/icons/80x80.png"
|
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||||
},
|
},
|
||||||
"iphone": {
|
"iphone" : {
|
||||||
"app@2x": "unpackage/res/icons/120x120.png",
|
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||||
"app@3x": "unpackage/res/icons/180x180.png",
|
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||||
"notification@2x": "unpackage/res/icons/40x40.png",
|
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||||
"notification@3x": "unpackage/res/icons/60x60.png",
|
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||||
"settings@2x": "unpackage/res/icons/58x58.png",
|
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||||
"settings@3x": "unpackage/res/icons/87x87.png",
|
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||||
"spotlight@2x": "unpackage/res/icons/80x80.png",
|
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||||
"spotlight@3x": "unpackage/res/icons/120x120.png"
|
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/* 快应用特有相关 */
|
/* 快应用特有相关 */
|
||||||
"quickapp": {},
|
"quickapp" : {},
|
||||||
/* 小程序特有相关 */
|
/* 小程序特有相关 */
|
||||||
"mp-weixin": {
|
"mp-weixin" : {
|
||||||
"appid": "",
|
"appid" : "",
|
||||||
"setting": {
|
"setting" : {
|
||||||
"urlCheck": false
|
"urlCheck" : false
|
||||||
},
|
},
|
||||||
"usingComponents": true
|
"usingComponents" : true
|
||||||
},
|
},
|
||||||
"mp-alipay": {
|
"mp-alipay" : {
|
||||||
"usingComponents": true
|
"usingComponents" : true
|
||||||
},
|
},
|
||||||
"mp-baidu": {
|
"mp-baidu" : {
|
||||||
"usingComponents": true
|
"usingComponents" : true
|
||||||
},
|
},
|
||||||
"mp-toutiao": {
|
"mp-toutiao" : {
|
||||||
"usingComponents": true
|
"usingComponents" : true
|
||||||
},
|
},
|
||||||
"uniStatistics": {
|
"uniStatistics" : {
|
||||||
"enable": false
|
"enable" : false
|
||||||
},
|
},
|
||||||
"vueVersion": "3"
|
"vueVersion" : "3"
|
||||||
}
|
}
|
||||||
/* 模块配置 */
|
/* 模块配置 */
|
||||||
|
|
||||||
|
50
package-lock.json
generated
50
package-lock.json
generated
@ -7,8 +7,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dcloudio/uni-ui": "^1.5.6",
|
"@dcloudio/uni-ui": "^1.5.6",
|
||||||
"base-64": "^1.0.0",
|
"base-64": "^1.0.0",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13"
|
||||||
"echarts": "^5.6.0"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@dcloudio/uni-ui": {
|
"node_modules/@dcloudio/uni-ui": {
|
||||||
@ -26,31 +25,6 @@
|
|||||||
"version": "1.11.13",
|
"version": "1.11.13",
|
||||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
|
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
|
||||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
|
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
|
||||||
},
|
|
||||||
"node_modules/echarts": {
|
|
||||||
"version": "5.6.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
|
|
||||||
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"dependencies": {
|
|
||||||
"tslib": "2.3.0",
|
|
||||||
"zrender": "5.6.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/tslib": {
|
|
||||||
"version": "2.3.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
|
||||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
|
|
||||||
"license": "0BSD"
|
|
||||||
},
|
|
||||||
"node_modules/zrender": {
|
|
||||||
"version": "5.6.1",
|
|
||||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
|
|
||||||
"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
|
|
||||||
"license": "BSD-3-Clause",
|
|
||||||
"dependencies": {
|
|
||||||
"tslib": "2.3.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -68,28 +42,6 @@
|
|||||||
"version": "1.11.13",
|
"version": "1.11.13",
|
||||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
|
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
|
||||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
|
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
|
||||||
},
|
|
||||||
"echarts": {
|
|
||||||
"version": "5.6.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
|
|
||||||
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
|
|
||||||
"requires": {
|
|
||||||
"tslib": "2.3.0",
|
|
||||||
"zrender": "5.6.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"tslib": {
|
|
||||||
"version": "2.3.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
|
||||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
|
||||||
},
|
|
||||||
"zrender": {
|
|
||||||
"version": "5.6.1",
|
|
||||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
|
|
||||||
"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
|
|
||||||
"requires": {
|
|
||||||
"tslib": "2.3.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dcloudio/uni-ui": "^1.5.6",
|
"@dcloudio/uni-ui": "^1.5.6",
|
||||||
"base-64": "^1.0.0",
|
"base-64": "^1.0.0",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13"
|
||||||
"echarts": "^5.6.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
20
pages.json
20
pages.json
@ -216,7 +216,7 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "台账信息",
|
"navigationBarTitleText": "台账信息",
|
||||||
"navigationBarTextStyle": "white"
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -224,23 +224,7 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "人员详细信息",
|
"navigationBarTitleText": "人员详细信息",
|
||||||
"navigationBarTextStyle": "white"
|
"navigationBarTextStyle": "white"
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/views/renliziyuan/renyuanxinxi/tongji",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "人员年龄分组统计信息",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/views/renliziyuan/renyuanxinxi/xbtongji",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "人员性别分组统计信息",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
@ -64,7 +64,7 @@
|
|||||||
const {
|
const {
|
||||||
proxy
|
proxy
|
||||||
} = getCurrentInstance()
|
} = getCurrentInstance()
|
||||||
|
|
||||||
/** 系统信息 */
|
/** 系统信息 */
|
||||||
const systemInfo = uni.getSystemInfoSync()
|
const systemInfo = uni.getSystemInfoSync()
|
||||||
/**是否明文显示密码*/
|
/**是否明文显示密码*/
|
||||||
|
@ -1,212 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view :class="['content',{'gray':store.isgray==1}]">
|
|
||||||
<view class="list_box">
|
|
||||||
<view class="list">
|
|
||||||
<view class="title f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
年度部门讨论会议
|
|
||||||
</view>
|
|
||||||
<text>1分钟前</text>
|
|
||||||
</view>
|
|
||||||
<view class="info">
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
会议状态:
|
|
||||||
</view>
|
|
||||||
<text>待开始/已开始/已结束</text>
|
|
||||||
</view>
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
发起人:
|
|
||||||
</view>
|
|
||||||
<text>周如意</text>
|
|
||||||
</view>
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
会议日期:
|
|
||||||
</view>
|
|
||||||
<text>周如意</text>
|
|
||||||
</view>
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
会议地点:
|
|
||||||
</view>
|
|
||||||
<text>周如意</text>
|
|
||||||
</view>
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
会议内容:
|
|
||||||
</view>
|
|
||||||
<text>周如意</text>
|
|
||||||
</view>
|
|
||||||
<view class="">
|
|
||||||
<view class="">
|
|
||||||
参与人员:
|
|
||||||
</view>
|
|
||||||
<view class="person f-row aic">
|
|
||||||
<view class="item f-col aic" v-for="item,i in 7" :key="i">
|
|
||||||
<image src="" mode=""></image>
|
|
||||||
<view class="name">
|
|
||||||
周如意
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="btn f-row aic jcb">
|
|
||||||
<view class="refuse">
|
|
||||||
拒绝
|
|
||||||
</view>
|
|
||||||
<view class="agree" @click="openpop">
|
|
||||||
同意
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
ref
|
|
||||||
} from 'vue';
|
|
||||||
import {
|
|
||||||
huiyiDetailApi
|
|
||||||
} from '@/api/api.js';
|
|
||||||
import {
|
|
||||||
onLoad
|
|
||||||
} from '@dcloudio/uni-app';
|
|
||||||
import {
|
|
||||||
useStore
|
|
||||||
} from '@/store'
|
|
||||||
const store = useStore()
|
|
||||||
onLoad(() => {
|
|
||||||
huiyiDetail()
|
|
||||||
})
|
|
||||||
const huiyiDetail = () => {
|
|
||||||
huiyiDetailApi({
|
|
||||||
mainid:1
|
|
||||||
}).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
|
|
||||||
}
|
|
||||||
}).catch((err) => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.content{
|
|
||||||
padding-bottom: 120rpx;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: 690rpx;
|
|
||||||
height: 120rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
border-top: 1px solid #EFEFEF;
|
|
||||||
|
|
||||||
view {
|
|
||||||
|
|
||||||
width: 330rpx;
|
|
||||||
height: 88rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 88rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refuse {
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 2rpx solid #01508B;
|
|
||||||
color: #01508B;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agree {
|
|
||||||
background: #01508B;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.list_box {
|
|
||||||
|
|
||||||
.list {
|
|
||||||
padding: 30rpx;
|
|
||||||
margin-bottom: 30rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
border-bottom: 1px solid #efefef;
|
|
||||||
padding-bottom: 24rpx;
|
|
||||||
margin-bottom: 8rpx;
|
|
||||||
|
|
||||||
view {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #666666;
|
|
||||||
|
|
||||||
view {
|
|
||||||
padding-top: 16rpx;
|
|
||||||
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
text{
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.person{
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.item{
|
|
||||||
width: 16.66%;
|
|
||||||
|
|
||||||
}
|
|
||||||
image{
|
|
||||||
width: 78rpx;
|
|
||||||
height: 78rpx;
|
|
||||||
border-radius: 38rpx;
|
|
||||||
background-color: #01508B;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
margin-top: 30rpx;
|
|
||||||
|
|
||||||
view {
|
|
||||||
width: 300rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 64rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entrust {
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 2rpx solid #01508B;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #01508B;
|
|
||||||
}
|
|
||||||
|
|
||||||
.handle {
|
|
||||||
background: #01508B;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,247 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view :class="{'gray':store.isgray==1}">
|
|
||||||
<customNav>
|
|
||||||
<view class="nav_box f-row aic jcb">
|
|
||||||
<view class="back f-row aic" @click="back">
|
|
||||||
<uni-icons type="left" size="20" color="#fff"></uni-icons>
|
|
||||||
</view>
|
|
||||||
<view class="search f-row aic">
|
|
||||||
<input type="text" v-model="searchKey" @confirm="search" @blur="showicon=true&&!searchKey"
|
|
||||||
@focus="showicon=false" />
|
|
||||||
<view class="f-row aic" v-if="showicon">
|
|
||||||
<image src="../../static/search.png" mode=""></image>
|
|
||||||
<text>搜索</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</customNav>
|
|
||||||
<view class="list_box">
|
|
||||||
<view class="list" v-for="item,i in 3" :key="i" @click="jump(`/pages/meeting/detail?id=1`)">
|
|
||||||
<view class="title f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
年度部门讨论会议
|
|
||||||
</view>
|
|
||||||
<text>1分钟前</text>
|
|
||||||
</view>
|
|
||||||
<view class="info">
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
发起人:
|
|
||||||
</view>
|
|
||||||
<text>周如意</text>
|
|
||||||
</view>
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
会议日期:
|
|
||||||
</view>
|
|
||||||
<text>周如意</text>
|
|
||||||
</view>
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
会议地点:
|
|
||||||
</view>
|
|
||||||
<text>周如意</text>
|
|
||||||
</view>
|
|
||||||
<view class="f-row aic jcb">
|
|
||||||
<view class="">
|
|
||||||
会议内容:
|
|
||||||
</view>
|
|
||||||
<text>周如意</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="btn f-row aic jcb">
|
|
||||||
<view class="entrust">
|
|
||||||
拒绝
|
|
||||||
</view>
|
|
||||||
<view class="handle">
|
|
||||||
同意
|
|
||||||
</view>
|
|
||||||
</view> -->
|
|
||||||
<view class="handled f-row">
|
|
||||||
<view class="refused">
|
|
||||||
已拒绝
|
|
||||||
</view>
|
|
||||||
<!-- <view class="agreed">
|
|
||||||
已同意
|
|
||||||
</view> -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
ref
|
|
||||||
} from 'vue';
|
|
||||||
import {
|
|
||||||
useStore
|
|
||||||
} from '@/store'
|
|
||||||
const store = useStore()
|
|
||||||
import {
|
|
||||||
huiyilistApi
|
|
||||||
} from '@/api/api.js';
|
|
||||||
import customNav from '../../bpm/customNav.vue';
|
|
||||||
import {
|
|
||||||
onLoad
|
|
||||||
} from '@dcloudio/uni-app';
|
|
||||||
import {
|
|
||||||
beforeJump
|
|
||||||
} from '@/utils/index.js';
|
|
||||||
const showicon = ref(true)
|
|
||||||
const searchKey = ref('')
|
|
||||||
onLoad(() => {
|
|
||||||
// huiyilist()
|
|
||||||
})
|
|
||||||
const huiyilist = () => {
|
|
||||||
huiyilistApi().then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
|
|
||||||
}
|
|
||||||
}).catch((err) => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const jump = (url) => {
|
|
||||||
beforeJump(url, () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const back = () => {
|
|
||||||
uni.navigateBack()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.nav_box {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 14rpx;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
padding: 0 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
position: relative;
|
|
||||||
padding-right: 30rpx;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
view {
|
|
||||||
position: absolute;
|
|
||||||
left: 28rpx;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #999999;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
flex: 1;
|
|
||||||
height: 72rpx;
|
|
||||||
background: #F8F8F8;
|
|
||||||
border-radius: 44rpx;
|
|
||||||
padding: 0 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 34rpx;
|
|
||||||
height: 34rpx;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list_box {
|
|
||||||
padding: 14rpx 30rpx 0 30rpx;
|
|
||||||
margin-top: 24rpx;
|
|
||||||
|
|
||||||
.list {
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 16rpx;
|
|
||||||
padding: 30rpx;
|
|
||||||
margin-bottom: 30rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
border-bottom: 1px solid #efefef;
|
|
||||||
padding-bottom: 24rpx;
|
|
||||||
margin-bottom: 8rpx;
|
|
||||||
|
|
||||||
view {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #666666;
|
|
||||||
|
|
||||||
view {
|
|
||||||
padding-top: 16rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
margin-top: 30rpx;
|
|
||||||
|
|
||||||
view {
|
|
||||||
width: 300rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 64rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entrust {
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 2rpx solid #01508B;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #01508B;
|
|
||||||
}
|
|
||||||
|
|
||||||
.handle {
|
|
||||||
background: #01508B;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.refused {
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agreed {
|
|
||||||
|
|
||||||
color: #01508B;
|
|
||||||
}
|
|
||||||
|
|
||||||
.handled {
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
|
|
||||||
view {
|
|
||||||
width: 150rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
background: #EFEFEF;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 64rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -37,7 +37,7 @@
|
|||||||
<view class="onduty">
|
<view class="onduty">
|
||||||
<view class="title f-row aic jcb">
|
<view class="title f-row aic jcb">
|
||||||
值班信息
|
值班信息
|
||||||
<view class="more" @click="jump(`/pages/views/zhongheguanli/zhiban/index`)">
|
<view class="more" @click="jump(`/pages/zhiban/index`)">
|
||||||
查看更多
|
查看更多
|
||||||
<image src="../../static/index/back.png" mode=""></image>
|
<image src="../../static/index/back.png" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
|
@ -4,45 +4,6 @@
|
|||||||
<view style="padding: 10px 10px 10px 10px;">
|
<view style="padding: 10px 10px 10px 10px;">
|
||||||
<uni-title title="基本信息" type="h1" color="blue"></uni-title>
|
<uni-title title="基本信息" type="h1" color="blue"></uni-title>
|
||||||
<yjly-row-cell :cellData="cellData" :rowDataCount="3"></yjly-row-cell>
|
<yjly-row-cell :cellData="cellData" :rowDataCount="3"></yjly-row-cell>
|
||||||
|
|
||||||
<uni-title title="年度绩效考核" type="h1" color="blue"></uni-title>
|
|
||||||
<uni-row>
|
|
||||||
<uni-col :span="4">
|
|
||||||
<view class="titleStyle">
|
|
||||||
序号
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="10">
|
|
||||||
<view class="titleStyle">
|
|
||||||
绩效考核年份
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="10">
|
|
||||||
<view class="titleStyle">
|
|
||||||
绩效考核成绩
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
|
|
||||||
|
|
||||||
</uni-row>
|
|
||||||
<uni-row>
|
|
||||||
<view v-for="(item,index) in jxkhxxList">
|
|
||||||
<uni-col :span="4">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{index+1}}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="10">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{item.nf}}
|
|
||||||
</view>
|
|
||||||
</uni-col><uni-col :span="10">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{item.khcj+"---"+item.khcj_dictText}}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
</view>
|
|
||||||
</uni-row>
|
|
||||||
<uni-title title="工作简历" type="h1" color="blue"></uni-title>
|
<uni-title title="工作简历" type="h1" color="blue"></uni-title>
|
||||||
<uni-row>
|
<uni-row>
|
||||||
<uni-col :span="4">
|
<uni-col :span="4">
|
||||||
@ -287,8 +248,7 @@
|
|||||||
queryJtzycyByRyLdhth,
|
queryJtzycyByRyLdhth,
|
||||||
queryXlxxByRyLdhth,
|
queryXlxxByRyLdhth,
|
||||||
queryGbxxByRyLdhth,
|
queryGbxxByRyLdhth,
|
||||||
queryZyzgdjByRyLdhth,
|
queryZyzgdjByRyLdhth
|
||||||
queryJxkhByRyLdhth
|
|
||||||
} from '@/api/renyuan.js'
|
} from '@/api/renyuan.js'
|
||||||
import {
|
import {
|
||||||
useStore
|
useStore
|
||||||
@ -306,46 +266,15 @@
|
|||||||
const zjtzList = ref([]) // 人员其他子表信息-证件台账
|
const zjtzList = ref([]) // 人员其他子表信息-证件台账
|
||||||
const zyjtcyList = ref([]) // 人员其他子表信息-主要家庭成员
|
const zyjtcyList = ref([]) // 人员其他子表信息-主要家庭成员
|
||||||
const xlxxList = ref([]) // 人员其他子表信息-学历证书
|
const xlxxList = ref([]) // 人员其他子表信息-学历证书
|
||||||
const gbxxList = ref([]) // 人员其他子表信息-干部信息
|
|
||||||
const zyzgdjList = ref([]) // 人员其他子表信息-职业资格等级
|
|
||||||
const jxkhxxList = ref([]) // 人员其他子表信息-绩效考核信息
|
|
||||||
|
|
||||||
|
|
||||||
function getChildTable() {
|
function getChildTable() {
|
||||||
console.log(ldhth.value)
|
console.log(ldhth.value)
|
||||||
|
|
||||||
queryJxkhByRyLdhth({
|
|
||||||
"ldhth": ldhth.value
|
|
||||||
}).then((res) => {
|
|
||||||
// console.log(res);
|
|
||||||
jxkhxxList.value = res.result.records
|
|
||||||
// console.log(jxkhxxList.value)
|
|
||||||
}).catch((err) => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
|
|
||||||
queryGbxxByRyLdhth({
|
|
||||||
"ldhth": ldhth.value
|
|
||||||
}).then((res) => {
|
|
||||||
// console.log(res);
|
|
||||||
gbxxList.value = res
|
|
||||||
// console.log(gbxxList.value)
|
|
||||||
}).catch((err) => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
queryZyzgdjByRyLdhth({
|
|
||||||
"ldhth": ldhth.value
|
|
||||||
}).then((res) => {
|
|
||||||
// console.log(res);
|
|
||||||
zyzgdjList.value = res
|
|
||||||
// console.log(zyzgdjList.value)
|
|
||||||
}).catch((err) => {
|
|
||||||
console.log(err);
|
|
||||||
})
|
|
||||||
queryGzjlByRyLdhth({
|
queryGzjlByRyLdhth({
|
||||||
"ldhth": ldhth.value
|
"ldhth": ldhth.value
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
// console.log(res);
|
console.log(res);
|
||||||
if (res.length > 0) {
|
if (res.length > 0) {
|
||||||
gzjlList.value = res
|
gzjlList.value = res
|
||||||
}
|
}
|
||||||
@ -355,7 +284,7 @@
|
|||||||
queryQzqkByRyLdhth({
|
queryQzqkByRyLdhth({
|
||||||
"ldhth": ldhth.value
|
"ldhth": ldhth.value
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
// console.log(res);
|
console.log(res);
|
||||||
if (res.length > 0) {
|
if (res.length > 0) {
|
||||||
zjtzList.value = res
|
zjtzList.value = res
|
||||||
}
|
}
|
||||||
@ -365,7 +294,7 @@
|
|||||||
queryJtzycyByRyLdhth({
|
queryJtzycyByRyLdhth({
|
||||||
"ldhth": ldhth.value
|
"ldhth": ldhth.value
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
// console.log(res);
|
console.log(res);
|
||||||
if (res.length > 0) {
|
if (res.length > 0) {
|
||||||
zyjtcyList.value = res
|
zyjtcyList.value = res
|
||||||
}
|
}
|
||||||
@ -379,36 +308,34 @@
|
|||||||
xlxxList.value = []
|
xlxxList.value = []
|
||||||
if (res.result.records.length > 0) {
|
if (res.result.records.length > 0) {
|
||||||
var rress = res.result.records
|
var rress = res.result.records
|
||||||
// console.log(rress);
|
|
||||||
for (let i = 0; i < rress.length; i++) {
|
for (let i = 0; i < rress.length; i++) {
|
||||||
if (rress[i].onexl == 1 & rress[i].zgxl == 1) {
|
if (rress[i].onexl == 1) {
|
||||||
rress[i].xllb = "第一学历"
|
|
||||||
xlxxList.value.push(JSON.parse(JSON.stringify(rress[i])))
|
|
||||||
// console.log(xlxxList.value)
|
|
||||||
rress[i].xllb = "最高学历"
|
|
||||||
xlxxList.value.push(JSON.parse(JSON.stringify(rress[i])))
|
|
||||||
// console.log(xlxxList.value)
|
|
||||||
}
|
|
||||||
if (rress[i].onexl == 1 & rress[i].zgxl != 1) {
|
|
||||||
rress[i].xllb = "第一学历"
|
rress[i].xllb = "第一学历"
|
||||||
xlxxList.value.push(rress[i])
|
xlxxList.value.push(rress[i])
|
||||||
|
}
|
||||||
|
if (rress[i].zgxl == 1) {
|
||||||
|
rress[i].xllb = "最高学历"
|
||||||
|
xlxxList.value.push(rress[i])
|
||||||
|
}
|
||||||
|
|
||||||
}
|
|
||||||
if (rress[i].onexl != 1 & rress[i].zgxl == 1) {
|
|
||||||
rress[i].xllb = "最高学历"
|
|
||||||
xlxxList.value.push(rress[i])
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(xlxxList.value);
|
||||||
}
|
}
|
||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
})
|
})
|
||||||
|
console.log(xlxxList.value)
|
||||||
|
console.log(gzjlList.value)
|
||||||
|
console.log(zjtzList.value)
|
||||||
|
console.log(zyjtcyList.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
function getJbxx() {
|
onLoad((e) => {
|
||||||
|
renyuanData.value = JSON.parse(decodeURIComponent(e.data));
|
||||||
|
ldhth.value = renyuanData.value.ldhth
|
||||||
|
getChildTable()
|
||||||
cellData.value.push({
|
cellData.value.push({
|
||||||
"title": "姓名",
|
"title": "姓名",
|
||||||
"value": renyuanData.value.xm,
|
"value": renyuanData.value.xm,
|
||||||
@ -485,13 +412,14 @@
|
|||||||
})
|
})
|
||||||
cellData.value.push({
|
cellData.value.push({
|
||||||
"title": "专业技术资格",
|
"title": "专业技术资格",
|
||||||
"value": gbxxList.value.zc + gbxxList.value.zcsj,
|
"value": renyuanData.value.zc + renyuanData.value.zcsj,
|
||||||
"titleSpan": 5,
|
"titleSpan": 5,
|
||||||
"valueSpan": 7
|
"valueSpan": 7
|
||||||
})
|
})
|
||||||
|
|
||||||
cellData.value.push({
|
cellData.value.push({
|
||||||
"title": "职业资格等级",
|
"title": "职业资格等级",
|
||||||
"value": zyzgdjList.value.ztgz + zyzgdjList.value.ztgzdj,
|
"value": renyuanData.value.zc + renyuanData.value.zcsj,
|
||||||
"titleSpan": 5,
|
"titleSpan": 5,
|
||||||
"valueSpan": 7
|
"valueSpan": 7
|
||||||
})
|
})
|
||||||
@ -504,14 +432,14 @@
|
|||||||
|
|
||||||
cellData.value.push({
|
cellData.value.push({
|
||||||
"title": "职务(岗位)",
|
"title": "职务(岗位)",
|
||||||
"value": gbxxList.value.zw,
|
"value": renyuanData.value.zc + renyuanData.value.zcsj,
|
||||||
"titleSpan": 5,
|
"titleSpan": 5,
|
||||||
"valueSpan": 7
|
"valueSpan": 7
|
||||||
})
|
})
|
||||||
|
|
||||||
cellData.value.push({
|
cellData.value.push({
|
||||||
"title": "职位级别",
|
"title": "职位级别",
|
||||||
"value": gbxxList.value.zwcj,
|
"value": "",
|
||||||
"titleSpan": 5,
|
"titleSpan": 5,
|
||||||
"valueSpan": 7
|
"valueSpan": 7
|
||||||
})
|
})
|
||||||
@ -521,16 +449,6 @@
|
|||||||
"titleSpan": 0,
|
"titleSpan": 0,
|
||||||
"valueSpan": 0
|
"valueSpan": 0
|
||||||
})
|
})
|
||||||
}
|
|
||||||
|
|
||||||
onLoad((e) => {
|
|
||||||
renyuanData.value = JSON.parse(decodeURIComponent(e.data));
|
|
||||||
ldhth.value = renyuanData.value.ldhth
|
|
||||||
getChildTable()
|
|
||||||
setTimeout(function() {
|
|
||||||
getJbxx()
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -578,9 +496,7 @@
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-bottom: 1px solid #919191;
|
border-bottom: 1px solid #919191;
|
||||||
border-left: 1px solid #919191;
|
border-left: 1px solid #919191;
|
||||||
text-align: center;
|
text-overflow: ellipsis;
|
||||||
word-wrap: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -3,36 +3,39 @@
|
|||||||
<uni-card :is-shadow="false">
|
<uni-card :is-shadow="false">
|
||||||
<uni-section title="台账信息" type="line">
|
<uni-section title="台账信息" type="line">
|
||||||
<uni-card :is-shadow="false">
|
<uni-card :is-shadow="false">
|
||||||
<button type="primary" @click="toTaizhang">人员台账</button>
|
<button type="primary" @click="getTaizhang">人员台账</button>
|
||||||
</uni-card>
|
</uni-card>
|
||||||
</uni-section>
|
</uni-section>
|
||||||
<uni-section title="统计信息" type="line">
|
<uni-section title="统计信息" type="line">
|
||||||
<uni-card :is-shadow="false">
|
<uni-card :is-shadow="false">
|
||||||
<button type="primary" @click="toTongji">年龄分组统计</button>
|
<text class="uni-body">这是一个基础卡片示例,内容较少,此示例展示了一个没有任何属性不带阴影的卡片。</text>
|
||||||
<button type="primary" @click="toXbTongji">性别分组统计</button>
|
|
||||||
</uni-card>
|
</uni-card>
|
||||||
</uni-section>
|
</uni-section>
|
||||||
|
|
||||||
</uni-card>
|
</uni-card>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script>
|
||||||
function toTaizhang() {
|
export default {
|
||||||
uni.navigateTo({
|
components: {
|
||||||
url: '/pages/views/renliziyuan/renyuanxinxi/taizhang'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function toTongji() {
|
},
|
||||||
uni.navigateTo({
|
data() {
|
||||||
url: '/pages/views/renliziyuan/renyuanxinxi/tongji'
|
return {
|
||||||
});
|
|
||||||
}
|
}
|
||||||
function toXbTongji() {
|
},
|
||||||
uni.navigateTo({
|
methods: {
|
||||||
url: '/pages/views/renliziyuan/renyuanxinxi/xbtongji'
|
getTaizhang() {
|
||||||
});
|
uni.navigateTo({
|
||||||
}
|
url:"/pages/views/renliziyuan/renyuanxinxi/taizhang"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<style>
|
||||||
|
</style>
|
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<scroll-view :scroll-y="true" style="height: 100vh;">
|
<scroll-view :scroll-y="true">
|
||||||
<uni-card>
|
<uni-card>
|
||||||
|
<uni-title title="" type="h1" align="center"></uni-title>
|
||||||
<view>
|
<view>
|
||||||
<uni-row>
|
<uni-row>
|
||||||
<uni-col :span="11"><uni-title title="姓名 " align="left" type="h5"></uni-title></uni-col>
|
<uni-col :span="11"><uni-title title="姓名 " align="left" type="h5"></uni-title></uni-col>
|
||||||
@ -9,10 +10,10 @@
|
|||||||
type="h5"></uni-title></uni-col>
|
type="h5"></uni-title></uni-col>
|
||||||
</uni-row>
|
</uni-row>
|
||||||
<uni-row>
|
<uni-row>
|
||||||
<uni-col :span="11"><uni-easyinput v-model="xm" suffixIcon="search" clearable
|
<uni-col :span="11"><uni-easyinput v-model="xm" focus suffixIcon="search" clearable
|
||||||
placeholder="姓名模糊查询" @change="Search" @iconClick="Search" /></uni-col>
|
placeholder="姓名模糊查询" @change="Search" @iconClick="Search" /></uni-col>
|
||||||
<uni-col :span="11" :push="2">
|
<uni-col :span="11" :push="2">
|
||||||
<uni-easyinput v-model="ldhth" suffixIcon="search" clearable placeholder="劳动合同号模糊查询"
|
<uni-easyinput v-model="ldhth" focus suffixIcon="search" clearable placeholder="劳动合同号模糊查询"
|
||||||
@change="Search" @iconClick="Search" />
|
@change="Search" @iconClick="Search" />
|
||||||
</uni-col>
|
</uni-col>
|
||||||
</uni-row>
|
</uni-row>
|
||||||
@ -23,8 +24,7 @@
|
|||||||
</uni-row>
|
</uni-row>
|
||||||
<uni-row>
|
<uni-row>
|
||||||
<uni-col :span="24">
|
<uni-col :span="24">
|
||||||
<trq-depart-select v-model="departID" returnCodeOrID="orgCode"
|
<trq-depart-select returnCodeOrID="orgCode" @change="departChange"></trq-depart-select>
|
||||||
@change="departChange"></trq-depart-select>
|
|
||||||
</uni-col>
|
</uni-col>
|
||||||
</uni-row>
|
</uni-row>
|
||||||
</view>
|
</view>
|
||||||
@ -34,9 +34,6 @@
|
|||||||
:border="true" :data="ryDataList" @detail="detail"></zb-table>
|
:border="true" :data="ryDataList" @detail="detail"></zb-table>
|
||||||
<uni-pagination :current="current" :pagerCount="pages" :total="total" prev-text="前一页" next-text="后一页"
|
<uni-pagination :current="current" :pagerCount="pages" :total="total" prev-text="前一页" next-text="后一页"
|
||||||
:show-icon="false" @change="pagechange" />
|
:show-icon="false" @change="pagechange" />
|
||||||
<view>
|
|
||||||
<text class="example-info">当前页:{{ current }},数据总量:{{ total }}条,每页数据:{{ pageSize }}</text>
|
|
||||||
</view>
|
|
||||||
</uni-card>
|
</uni-card>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
@ -100,6 +97,12 @@
|
|||||||
width: 70,
|
width: 70,
|
||||||
align: 'center'
|
align: 'center'
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// name: 'gzdw',
|
||||||
|
// label: '单位',
|
||||||
|
// align: 'center',
|
||||||
|
// width: 150
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
name: 'xb_dictText',
|
name: 'xb_dictText',
|
||||||
label: '性别',
|
label: '性别',
|
||||||
@ -115,7 +118,6 @@
|
|||||||
{
|
{
|
||||||
name: 'operation',
|
name: 'operation',
|
||||||
type: 'operation',
|
type: 'operation',
|
||||||
width: 60,
|
|
||||||
fixed: true,
|
fixed: true,
|
||||||
label: '操作',
|
label: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
@ -131,12 +133,13 @@
|
|||||||
|
|
||||||
})
|
})
|
||||||
onMounted((e) => {
|
onMounted((e) => {
|
||||||
departID.value = ""
|
departID.value = "A01A01A19"
|
||||||
getRenyuanByDepID()
|
getRenyuanByDepID()
|
||||||
})
|
})
|
||||||
|
|
||||||
function detail(record) {
|
function detail(record) {
|
||||||
// console.log(record)
|
// console.log(record)
|
||||||
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: "/pages/views/renliziyuan/renyuanxinxi/detail?data=" + encodeURIComponent(JSON.stringify(record))
|
url: "/pages/views/renliziyuan/renyuanxinxi/detail?data=" + encodeURIComponent(JSON.stringify(record))
|
||||||
})
|
})
|
||||||
@ -145,47 +148,29 @@
|
|||||||
function pagechange(e) {
|
function pagechange(e) {
|
||||||
current.value = e.current
|
current.value = e.current
|
||||||
pageNo.value = e.current
|
pageNo.value = e.current
|
||||||
let params = {
|
getRenyuanByDepID()
|
||||||
pageNo: pageNo.value,
|
|
||||||
pageSize: pageSize.value,
|
|
||||||
current: current.value
|
|
||||||
};
|
|
||||||
if (departID.value.length <= 9) {
|
|
||||||
params.orgCode = departID.value
|
|
||||||
} else {
|
|
||||||
params.jcxd_code = departID.value
|
|
||||||
}
|
|
||||||
|
|
||||||
getRenyuanByDepID(params)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function departChange(e, data) {
|
function departChange(e) {
|
||||||
departID.value = e
|
departID.value = e
|
||||||
let params = {
|
getRenyuanByDepID()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRenyuanByDepID() {
|
||||||
|
ryDataList.value = []
|
||||||
|
let queryParm = {
|
||||||
pageNo: pageNo.value,
|
pageNo: pageNo.value,
|
||||||
pageSize: pageSize.value,
|
pageSize: pageSize.value,
|
||||||
current: current.value
|
current: current.value
|
||||||
};
|
};
|
||||||
console.log(e)
|
queryParm.orgCode = departID.value
|
||||||
if (e.length <= 9) {
|
|
||||||
params.orgCode = departID.value
|
|
||||||
} else {
|
|
||||||
params.jcxd_code = departID.value
|
|
||||||
}
|
|
||||||
|
|
||||||
getRenyuanByDepID(params)
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRenyuanByDepID(queryParm) {
|
|
||||||
ryDataList.value = []
|
|
||||||
console.log(queryParm)
|
|
||||||
queryRenyuanByDepartID(queryParm).then((res) => {
|
queryRenyuanByDepartID(queryParm).then((res) => {
|
||||||
console.log(res)
|
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
ryDataList.value = res.result.records
|
ryDataList.value = res.result.records
|
||||||
total.value = res.result.total
|
total.value = res.result.total
|
||||||
pages.value = res.result.pages
|
pages.value = res.result.pages
|
||||||
current.value = res.result.current
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}).catch((err) => {
|
}).catch((err) => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
@ -207,7 +192,6 @@
|
|||||||
if (ldhth.value !== '') {
|
if (ldhth.value !== '') {
|
||||||
queryParm.ldhth = '*' + ldhth.value + '*';
|
queryParm.ldhth = '*' + ldhth.value + '*';
|
||||||
}
|
}
|
||||||
console.log(queryParm)
|
|
||||||
queryRenyuanByDepartID(queryParm).then((res) => {
|
queryRenyuanByDepartID(queryParm).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
ryDataList.value = res.result.records
|
ryDataList.value = res.result.records
|
||||||
|
@ -1,528 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="container" id="top1">
|
|
||||||
<uni-row style="margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx">
|
|
||||||
<uni-col :span="24"><uni-title :title="'所选单位ID:' + orgCode" align="left" type="h4"></uni-title></uni-col>
|
|
||||||
</uni-row>
|
|
||||||
<uni-row style="margin-bottom: 20rpx; margin-left: 30rpx; margin-right: 30rpx">
|
|
||||||
<uni-col :span="24">
|
|
||||||
<trq-depart-select v-model="orgCode" returnCodeOrID="orgCode" @change="departChange"></trq-depart-select>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
<!-- 概览统计 -->
|
|
||||||
<view class="stats-box" v-if="summary.total">
|
|
||||||
<view class="stat-item">
|
|
||||||
<text class="label">总人数</text>
|
|
||||||
<text class="value">{{ summary.total }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="stat-item">
|
|
||||||
<text class="label">平均年龄</text>
|
|
||||||
<text class="value">{{ summary.avgAge.toFixed(1) }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- ECharts图表 -->
|
|
||||||
<view class="chart-container">
|
|
||||||
<l-echart ref="chart" @finished="initChart" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 数据表格 -->
|
|
||||||
|
|
||||||
<uni-row style="margin-top: 10px; margin-left: 30rpx; margin-right: 30rpx" v-if="tableData.length > 0">
|
|
||||||
<uni-col :span="3">
|
|
||||||
<view class="titleStyle">序号</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="titleStyle">姓名</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="titleStyle">性别</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="titleStyle">年龄</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="6">
|
|
||||||
<view class="titleStyle">操作</view>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
|
|
||||||
<scroll-view scroll-y :style="{ height: bottomHeight + 'px' }">
|
|
||||||
<uni-row style="margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx">
|
|
||||||
<view v-for="(item, index) in tableData">
|
|
||||||
<uni-col :span="3">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{ index + 1 }}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{ item.xm }}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{ item.xb_dictText }}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{ item.nl }}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="6">
|
|
||||||
<view class="dataStyle">
|
|
||||||
<button size="mini" type="primary" @click="detail(item)">详情</button>
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
</view>
|
|
||||||
</uni-row>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
import { queryRenyuanByDepartID } from '@/api/renyuan.js';
|
|
||||||
|
|
||||||
// 存储下方组件的高度
|
|
||||||
const bottomHeight = ref(0);
|
|
||||||
// 新增加载状态
|
|
||||||
const isLoading = ref(false);
|
|
||||||
const orgCode = ref('');
|
|
||||||
const rawData = ref([]);
|
|
||||||
const tableData = ref([]);
|
|
||||||
const summary = reactive({
|
|
||||||
total: 0,
|
|
||||||
avgAge: 0
|
|
||||||
});
|
|
||||||
const chart = ref(null);
|
|
||||||
const chartOption = ref({});
|
|
||||||
const drillPopup = ref(null);
|
|
||||||
const drillList = ref([]);
|
|
||||||
const drillTitle = ref('');
|
|
||||||
|
|
||||||
function detail(record) {
|
|
||||||
// console.log(record)
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/views/renliziyuan/renyuanxinxi/detail?data=' + encodeURIComponent(JSON.stringify(record))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 计算年龄initChart
|
|
||||||
const calculateAge = (birthDate) => {
|
|
||||||
const today = new Date();
|
|
||||||
const birth = new Date(birthDate);
|
|
||||||
let age = today.getFullYear() - birth.getFullYear();
|
|
||||||
const monthDiff = today.getMonth() - birth.getMonth();
|
|
||||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
|
|
||||||
age--;
|
|
||||||
}
|
|
||||||
return age;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const departChange = async (e, data) => {
|
|
||||||
tableData.value = [];
|
|
||||||
console.log(e);
|
|
||||||
orgCode.value = e;
|
|
||||||
try {
|
|
||||||
// 显示加载状态
|
|
||||||
|
|
||||||
isLoading.value = true;
|
|
||||||
if (orgCode.value.length <= 6) {
|
|
||||||
console.log(123242353);
|
|
||||||
uni.showLoading({
|
|
||||||
title: '全厂数据较多,耐心等待数据加载中...',
|
|
||||||
mask: true
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
uni.showLoading({
|
|
||||||
title: '数据加载中...',
|
|
||||||
mask: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let params = {
|
|
||||||
pageSize: 3000,
|
|
||||||
fields: ['xm', 'nl', 'xb', 'xb_dictText', 'orgCode', 'jcdw', 'jcxd', 'jcxdCode']
|
|
||||||
};
|
|
||||||
if (orgCode.value.length <= 9) {
|
|
||||||
params.orgCode = orgCode.value;
|
|
||||||
} else {
|
|
||||||
params.jcxd_code = orgCode.value;
|
|
||||||
}
|
|
||||||
queryRenyuanByDepartID(params)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
processData(res.result.records);
|
|
||||||
// 隐藏加载状态
|
|
||||||
isLoading.value = false;
|
|
||||||
uni.hideLoading();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log(err);
|
|
||||||
uni.showToast({
|
|
||||||
title: '数据加载失败',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
uni.showToast({
|
|
||||||
title: '数据加载失败',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
// 隐藏加载状态
|
|
||||||
isLoading.value = false;
|
|
||||||
uni.hideLoading();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 数据处理
|
|
||||||
const processData = (data) => {
|
|
||||||
// 添加年龄字段并过滤有效数据
|
|
||||||
const validData = data
|
|
||||||
.map((item) => ({
|
|
||||||
...item,
|
|
||||||
nl: calculateAge(item.cssj)
|
|
||||||
}))
|
|
||||||
.filter((item) => item.nl >= 21 && item.nl <= 64);
|
|
||||||
// 计算概览数据
|
|
||||||
summary.total = validData.length;
|
|
||||||
summary.avgAge = validData.reduce((sum, cur) => sum + cur.nl, 0) / summary.total || 0;
|
|
||||||
// 生成表格数据
|
|
||||||
// tableData.value = validData;
|
|
||||||
|
|
||||||
groupsData(validData);
|
|
||||||
// 生成图表数据
|
|
||||||
generateChartData(validData);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 计算统计信息...
|
|
||||||
const subOrgStaffs = ref({}); // 按下级单位存储所有人员
|
|
||||||
const ageGroupStaffs = ref({}); // 按年龄段存储所有人员
|
|
||||||
|
|
||||||
const groupsData = (data) => {
|
|
||||||
// 清空旧数据
|
|
||||||
subOrgStaffs.value = {};
|
|
||||||
ageGroupStaffs.value = {};
|
|
||||||
data.reduce((acc, cur) => {
|
|
||||||
// console.log(cur)
|
|
||||||
let subOrg = '';
|
|
||||||
let ageRange = getAgeRange(cur.nl);
|
|
||||||
// console.log(cur.orgCode, cur.jcxdCode)
|
|
||||||
if (cur.orgCode <= 6) {
|
|
||||||
subOrg = cur.orgCode;
|
|
||||||
} else {
|
|
||||||
subOrg = cur.jcxdCode;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 存储到subOrgStaffs
|
|
||||||
if (!subOrgStaffs.value[subOrg]) {
|
|
||||||
subOrgStaffs.value[subOrg] = [];
|
|
||||||
}
|
|
||||||
subOrgStaffs.value[subOrg].push(cur);
|
|
||||||
|
|
||||||
// 存储到ageGroupStaffs
|
|
||||||
if (!ageGroupStaffs.value[ageRange]) {
|
|
||||||
ageGroupStaffs.value[ageRange] = [];
|
|
||||||
}
|
|
||||||
ageGroupStaffs.value[ageRange].push(cur);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增年龄范围计算方法
|
|
||||||
const getAgeRange = (age) => {
|
|
||||||
const ranges = ['21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-64岁'];
|
|
||||||
const index = Math.floor((age - 21) / 10);
|
|
||||||
return ranges[index] || '其他';
|
|
||||||
};
|
|
||||||
|
|
||||||
// 修改后的显示人员列表方法
|
|
||||||
const showStaffList = (subOrg, ageRange) => {
|
|
||||||
// 从结构化数据中直接获取
|
|
||||||
const targetStaffs = subOrgStaffs.value[subOrg].filter((staff) => getAgeRange(staff.nl) === ageRange);
|
|
||||||
|
|
||||||
staffList.value = targetStaffs;
|
|
||||||
popupTitle.value = `${subOrg} ${ageRange}人员列表(共${targetStaffs.length}人)`;
|
|
||||||
popup.value.open();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增获取指定单位人员的方法
|
|
||||||
const getSubOrgStaffs = (subOrgCode) => {
|
|
||||||
return subOrgStaffs.value[subOrgCode] || [];
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增获取指定年龄段人员的方法
|
|
||||||
const getAgeGroupStaffs = (ageRange) => {
|
|
||||||
return ageGroupStaffs.value[ageRange] || [];
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生成图表数据(修改部分)
|
|
||||||
const generateChartData = (data) => {
|
|
||||||
// 按基层单位分组
|
|
||||||
const ageRanges = ['21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-64岁'];
|
|
||||||
const jcdwGroups = data.reduce((acc, cur) => {
|
|
||||||
if (!acc[cur.jcdw]) {
|
|
||||||
acc[cur.jcdw] = {
|
|
||||||
ageGroups: [0, 0, 0, 0, 0] // 21-30,31-40,41-50,51-60,61-64
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const ageGroup = Math.floor((cur.nl - 21) / 10);
|
|
||||||
// console.log(ageGroup, cur.jcdw)
|
|
||||||
if (ageGroup >= 0 && ageGroup <= 4) {
|
|
||||||
acc[cur.jcdw].ageGroups[ageGroup]++;
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
// 生成分组柱状图配置
|
|
||||||
const xData = Object.keys(jcdwGroups);
|
|
||||||
|
|
||||||
const seriesData = ageRanges.map((range, index) => ({
|
|
||||||
name: range,
|
|
||||||
type: 'bar',
|
|
||||||
data: xData.map((jcdw) => jcdwGroups[jcdw].ageGroups[index] || 0),
|
|
||||||
itemStyle: {
|
|
||||||
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'][index]
|
|
||||||
},
|
|
||||||
// 显示数值标签
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top'
|
|
||||||
}
|
|
||||||
// 设置柱宽为 20 像素
|
|
||||||
// barWidth: 20
|
|
||||||
}));
|
|
||||||
chartOption.value = {
|
|
||||||
title: {
|
|
||||||
text: '人员年龄分组统计',
|
|
||||||
padding: [0, 0, 0, 30]
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
padding: [0, 30, 0, 0],
|
|
||||||
show: true,
|
|
||||||
feature: {
|
|
||||||
//工具配置项
|
|
||||||
|
|
||||||
restore: {
|
|
||||||
show: true //是否显示该工具
|
|
||||||
},
|
|
||||||
saveAsImage: {
|
|
||||||
show: true //是否显示该工具
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// tooltip: {
|
|
||||||
// trigger: 'axis',
|
|
||||||
// axisPointer: {
|
|
||||||
// type: 'shadow',
|
|
||||||
// label: {
|
|
||||||
// show: false
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
grid: {
|
|
||||||
top: '15%',
|
|
||||||
left: '4%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '10%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ageRanges,
|
|
||||||
itemGap: 5,
|
|
||||||
padding: [0, 15, 0, 15],
|
|
||||||
y: 'bottom',
|
|
||||||
itemHeight: 8, //高
|
|
||||||
itemWidth: 8, //宽
|
|
||||||
type: 'scroll'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: xData,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#7F84B5',
|
|
||||||
fontWeight: 300,
|
|
||||||
interval: 0,
|
|
||||||
rotate: 0
|
|
||||||
},
|
|
||||||
padding: [0, 10, 0, 10],
|
|
||||||
axisTick: {
|
|
||||||
show: false //刻度线
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false //不显示坐标轴线
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
show: true,
|
|
||||||
boundaryGap: false, //解决数据与线不对应问题
|
|
||||||
type: 'value',
|
|
||||||
// name: 'Budget (million USD)',
|
|
||||||
// data: this.yList,
|
|
||||||
minInterval: 1,
|
|
||||||
axisLabel: {
|
|
||||||
interval: 0
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
//背景网格线
|
|
||||||
type: 'dashed'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
axisTick: {
|
|
||||||
show: true //刻度线
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false //不显示坐标轴线
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
series: seriesData
|
|
||||||
};
|
|
||||||
|
|
||||||
// 初始化图表
|
|
||||||
setTimeout(async () => {
|
|
||||||
if (!chart.value) return;
|
|
||||||
const myChart = await chart.value.init(echarts);
|
|
||||||
myChart.setOption(chartOption.value);
|
|
||||||
myChart.on('click', (params) => {
|
|
||||||
console.log(params.seriesName);
|
|
||||||
tableData.value = getAgeGroupStaffs(params.seriesName);
|
|
||||||
});
|
|
||||||
}, 300);
|
|
||||||
|
|
||||||
// #ifdef APP
|
|
||||||
getHeight();
|
|
||||||
// #endif
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// #ifdef APP
|
|
||||||
getHeight();
|
|
||||||
// #endif
|
|
||||||
});
|
|
||||||
// #ifdef APP
|
|
||||||
|
|
||||||
const getHeight = () => {
|
|
||||||
// 获取屏幕高度
|
|
||||||
const systemInfo = uni.getSystemInfoSync();
|
|
||||||
const screenHeight = systemInfo.screenHeight;
|
|
||||||
// 创建选择器查询对象
|
|
||||||
const query = uni.createSelectorQuery();
|
|
||||||
// 获取上方组件的高度
|
|
||||||
query
|
|
||||||
.select('#top1')
|
|
||||||
.boundingClientRect((rect1) => {
|
|
||||||
// 计算上方组件高度总和
|
|
||||||
const topComponentsHeight = rect1.height;
|
|
||||||
// 计算下方组件的高度
|
|
||||||
bottomHeight.value = screenHeight - topComponentsHeight - 415;
|
|
||||||
})
|
|
||||||
.exec();
|
|
||||||
};
|
|
||||||
|
|
||||||
// #endif
|
|
||||||
// 初始化图表
|
|
||||||
const initChart = () => {
|
|
||||||
setTimeout(async () => {
|
|
||||||
if (!chart.value) return;
|
|
||||||
const myChart = await chart.value.init(echarts);
|
|
||||||
myChart.setOption(chartOption.value);
|
|
||||||
}, 300);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.container {
|
|
||||||
margin: 20, 20, 20, 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 20rpx;
|
|
||||||
margin-bottom: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
flex: 1;
|
|
||||||
border: 1rpx solid #ddd;
|
|
||||||
padding: 15rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.query-btn {
|
|
||||||
background: #007aff;
|
|
||||||
color: white;
|
|
||||||
padding: 0 40rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin: 30rpx 0;
|
|
||||||
padding: 20rpx;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #0000ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-container {
|
|
||||||
height: 400rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.titleStyle {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #747474;
|
|
||||||
line-height: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background: #f2f9fc;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-left: 1px solid #919191;
|
|
||||||
border-bottom: 1px solid #919191;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 内容样式 */
|
|
||||||
.dataStyle {
|
|
||||||
max-font-size: 14px;
|
|
||||||
/* 最大字体限制 */
|
|
||||||
min-font-size: 10px;
|
|
||||||
/* 最小字体限制 */
|
|
||||||
font-size: 12px;
|
|
||||||
color: #00007f;
|
|
||||||
line-height: 30px;
|
|
||||||
height: 30px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-bottom: 1px solid #919191;
|
|
||||||
border-left: 1px solid #919191;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,517 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="container" id="top1">
|
|
||||||
<uni-row style="margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx">
|
|
||||||
<uni-col :span="24"><uni-title :title="'所选单位ID:' + orgCode" align="left" type="h4"></uni-title></uni-col>
|
|
||||||
</uni-row>
|
|
||||||
<uni-row style="margin-bottom: 20rpx; margin-left: 30rpx; margin-right: 30rpx">
|
|
||||||
<uni-col :span="24">
|
|
||||||
<trq-depart-select v-model="orgCode" returnCodeOrID="orgCode" @change="departChange"></trq-depart-select>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
<!-- 概览统计 -->
|
|
||||||
<view class="stats-box" v-if="summary.total">
|
|
||||||
<view class="stat-item">
|
|
||||||
<text class="label">总人数</text>
|
|
||||||
<text class="value">{{ summary.total }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="stat-item">
|
|
||||||
<text class="label">平均年龄</text>
|
|
||||||
<text class="value">{{ summary.avgAge.toFixed(1) }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- ECharts图表 -->
|
|
||||||
<view class="chart-container">
|
|
||||||
<l-echart ref="chart" @finished="initChart" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 数据表格 -->
|
|
||||||
|
|
||||||
<uni-row style="margin-top: 10px; margin-left: 30rpx; margin-right: 30rpx" v-if="tableData.length > 0">
|
|
||||||
<uni-col :span="3">
|
|
||||||
<view class="titleStyle">序号</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="titleStyle">姓名</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="titleStyle">性别</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="titleStyle">年龄</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="6">
|
|
||||||
<view class="titleStyle">操作</view>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
|
|
||||||
<scroll-view scroll-y :style="{ height: bottomHeight + 'px' }">
|
|
||||||
<uni-row style="margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx">
|
|
||||||
<view v-for="(item, index) in tableData">
|
|
||||||
<uni-col :span="3">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{ index + 1 }}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{ item.xm }}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{ item.xb_dictText }}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="5">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{ item.nl }}
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col :span="6">
|
|
||||||
<view class="dataStyle">
|
|
||||||
<button size="mini" type="primary" @click="detail(item)">详情</button>
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
</view>
|
|
||||||
</uni-row>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import { cxcRyDataTongji, queryRenyuanByDepartID } from '@/api/renyuan.js';
|
|
||||||
// 存储下方组件的高度
|
|
||||||
const bottomHeight = ref(0);
|
|
||||||
// 新增加载状态
|
|
||||||
const isLoading = ref(false);
|
|
||||||
const orgCode = ref('');
|
|
||||||
const rawData = ref([]);
|
|
||||||
const tableData = ref([]);
|
|
||||||
const summary = reactive({
|
|
||||||
total: 0,
|
|
||||||
avgAge: 0
|
|
||||||
});
|
|
||||||
const chart = ref(null);
|
|
||||||
const chartOption = ref({});
|
|
||||||
const drillPopup = ref(null);
|
|
||||||
const drillList = ref([]);
|
|
||||||
const drillTitle = ref('');
|
|
||||||
|
|
||||||
function detail(record) {
|
|
||||||
// console.log(record)
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/views/renliziyuan/renyuanxinxi/detail?data=' + encodeURIComponent(JSON.stringify(record))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 计算年龄initChart
|
|
||||||
const calculateAge = (birthDate) => {
|
|
||||||
const today = new Date();
|
|
||||||
const birth = new Date(birthDate);
|
|
||||||
let age = today.getFullYear() - birth.getFullYear();
|
|
||||||
const monthDiff = today.getMonth() - birth.getMonth();
|
|
||||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
|
|
||||||
age--;
|
|
||||||
}
|
|
||||||
return age;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const departChange = async (e, data) => {
|
|
||||||
tableData.value = [];
|
|
||||||
console.log(e);
|
|
||||||
orgCode.value = e;
|
|
||||||
try {
|
|
||||||
// 显示加载状态
|
|
||||||
isLoading.value = true;
|
|
||||||
uni.showLoading({
|
|
||||||
title: '数据加载中...',
|
|
||||||
mask: true
|
|
||||||
});
|
|
||||||
|
|
||||||
let params = {
|
|
||||||
orgCode: orgCode.value
|
|
||||||
};
|
|
||||||
if (orgCode.value.length <= 9) {
|
|
||||||
params.orgCode = orgCode.value;
|
|
||||||
} else {
|
|
||||||
params.jcxd_code = orgCode.value;
|
|
||||||
}
|
|
||||||
cxcRyDataTongji(params)
|
|
||||||
.then((res) => {
|
|
||||||
console.log(res);
|
|
||||||
if (res.success) {
|
|
||||||
processData(res.result.records);
|
|
||||||
// 隐藏加载状态
|
|
||||||
isLoading.value = false;
|
|
||||||
uni.hideLoading();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
console.log(err);
|
|
||||||
uni.showToast({
|
|
||||||
title: '数据加载失败',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
uni.showToast({
|
|
||||||
title: '数据加载失败',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
// 隐藏加载状态
|
|
||||||
isLoading.value = false;
|
|
||||||
uni.hideLoading();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 数据处理
|
|
||||||
const processData = (data) => {
|
|
||||||
// 添加年龄字段并过滤有效数据
|
|
||||||
const validData = data
|
|
||||||
.map((item) => ({
|
|
||||||
...item,
|
|
||||||
nl: calculateAge(item.cssj)
|
|
||||||
}))
|
|
||||||
.filter((item) => item.nl >= 21 && item.nl <= 64);
|
|
||||||
// 计算概览数据
|
|
||||||
summary.total = validData.length;
|
|
||||||
summary.avgAge = validData.reduce((sum, cur) => sum + cur.nl, 0) / summary.total || 0;
|
|
||||||
// 生成表格数据
|
|
||||||
// tableData.value = validData;
|
|
||||||
|
|
||||||
groupsData(validData);
|
|
||||||
// 生成图表数据
|
|
||||||
generateChartData(validData);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 计算统计信息...
|
|
||||||
const subOrgStaffs = ref({}); // 按下级单位存储所有人员
|
|
||||||
const ageGroupStaffs = ref({}); // 按年龄段存储所有人员
|
|
||||||
|
|
||||||
const groupsData = (data) => {
|
|
||||||
// 清空旧数据
|
|
||||||
subOrgStaffs.value = {};
|
|
||||||
ageGroupStaffs.value = {};
|
|
||||||
data.reduce((acc, cur) => {
|
|
||||||
// console.log(cur)
|
|
||||||
let subOrg = '';
|
|
||||||
let ageRange = getAgeRange(cur.nl);
|
|
||||||
// console.log(cur.orgCode, cur.jcxdCode)
|
|
||||||
if (cur.orgCode <= 6) {
|
|
||||||
subOrg = cur.orgCode;
|
|
||||||
} else {
|
|
||||||
subOrg = cur.jcxdCode;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 存储到subOrgStaffs
|
|
||||||
if (!subOrgStaffs.value[subOrg]) {
|
|
||||||
subOrgStaffs.value[subOrg] = [];
|
|
||||||
}
|
|
||||||
subOrgStaffs.value[subOrg].push(cur);
|
|
||||||
|
|
||||||
// 存储到ageGroupStaffs
|
|
||||||
if (!ageGroupStaffs.value[ageRange]) {
|
|
||||||
ageGroupStaffs.value[ageRange] = [];
|
|
||||||
}
|
|
||||||
ageGroupStaffs.value[ageRange].push(cur);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增年龄范围计算方法
|
|
||||||
const getAgeRange = (age) => {
|
|
||||||
const ranges = ['21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-64岁'];
|
|
||||||
const index = Math.floor((age - 21) / 10);
|
|
||||||
return ranges[index] || '其他';
|
|
||||||
};
|
|
||||||
|
|
||||||
// 修改后的显示人员列表方法
|
|
||||||
const showStaffList = (subOrg, ageRange) => {
|
|
||||||
// 从结构化数据中直接获取
|
|
||||||
const targetStaffs = subOrgStaffs.value[subOrg].filter((staff) => getAgeRange(staff.nl) === ageRange);
|
|
||||||
|
|
||||||
staffList.value = targetStaffs;
|
|
||||||
popupTitle.value = `${subOrg} ${ageRange}人员列表(共${targetStaffs.length}人)`;
|
|
||||||
popup.value.open();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增获取指定单位人员的方法
|
|
||||||
const getSubOrgStaffs = (subOrgCode) => {
|
|
||||||
return subOrgStaffs.value[subOrgCode] || [];
|
|
||||||
};
|
|
||||||
|
|
||||||
// 新增获取指定年龄段人员的方法
|
|
||||||
const getAgeGroupStaffs = (ageRange) => {
|
|
||||||
return ageGroupStaffs.value[ageRange] || [];
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生成图表数据(修改部分)
|
|
||||||
const generateChartData = (data) => {
|
|
||||||
// 按基层单位分组
|
|
||||||
const ageRanges = ['21-30岁', '31-40岁', '41-50岁', '51-60岁', '61-64岁'];
|
|
||||||
const jcdwGroups = data.reduce((acc, cur) => {
|
|
||||||
if (!acc[cur.jcdw]) {
|
|
||||||
acc[cur.jcdw] = {
|
|
||||||
ageGroups: [0, 0, 0, 0, 0] // 21-30,31-40,41-50,51-60,61-64
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const ageGroup = Math.floor((cur.nl - 21) / 10);
|
|
||||||
// console.log(ageGroup, cur.jcdw)
|
|
||||||
if (ageGroup >= 0 && ageGroup <= 4) {
|
|
||||||
acc[cur.jcdw].ageGroups[ageGroup]++;
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
// 生成分组柱状图配置
|
|
||||||
const xData = Object.keys(jcdwGroups);
|
|
||||||
|
|
||||||
const seriesData = ageRanges.map((range, index) => ({
|
|
||||||
name: range,
|
|
||||||
type: 'bar',
|
|
||||||
data: xData.map((jcdw) => jcdwGroups[jcdw].ageGroups[index] || 0),
|
|
||||||
itemStyle: {
|
|
||||||
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'][index]
|
|
||||||
},
|
|
||||||
// 显示数值标签
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top'
|
|
||||||
}
|
|
||||||
// 设置柱宽为 20 像素
|
|
||||||
// barWidth: 20
|
|
||||||
}));
|
|
||||||
chartOption.value = {
|
|
||||||
title: {
|
|
||||||
text: '人员年龄分组统计',
|
|
||||||
padding: [0, 0, 0, 30]
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
padding: [0, 30, 0, 0],
|
|
||||||
show: true,
|
|
||||||
feature: {
|
|
||||||
//工具配置项
|
|
||||||
|
|
||||||
restore: {
|
|
||||||
show: true //是否显示该工具
|
|
||||||
},
|
|
||||||
saveAsImage: {
|
|
||||||
show: true //是否显示该工具
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// tooltip: {
|
|
||||||
// trigger: 'axis',
|
|
||||||
// axisPointer: {
|
|
||||||
// type: 'shadow',
|
|
||||||
// label: {
|
|
||||||
// show: false
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
grid: {
|
|
||||||
top: '15%',
|
|
||||||
left: '4%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '10%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ageRanges,
|
|
||||||
itemGap: 5,
|
|
||||||
padding: [0, 15, 0, 15],
|
|
||||||
y: 'bottom',
|
|
||||||
itemHeight: 8, //高
|
|
||||||
itemWidth: 8, //宽
|
|
||||||
type: 'scroll'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: xData,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#7F84B5',
|
|
||||||
fontWeight: 300,
|
|
||||||
interval: 0,
|
|
||||||
rotate: 0
|
|
||||||
},
|
|
||||||
padding: [0, 10, 0, 10],
|
|
||||||
axisTick: {
|
|
||||||
show: false //刻度线
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false //不显示坐标轴线
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
show: true,
|
|
||||||
boundaryGap: false, //解决数据与线不对应问题
|
|
||||||
type: 'value',
|
|
||||||
// name: 'Budget (million USD)',
|
|
||||||
// data: this.yList,
|
|
||||||
minInterval: 1,
|
|
||||||
axisLabel: {
|
|
||||||
interval: 0
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
//背景网格线
|
|
||||||
type: 'dashed'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
axisTick: {
|
|
||||||
show: true //刻度线
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false //不显示坐标轴线
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
series: seriesData
|
|
||||||
};
|
|
||||||
|
|
||||||
// 初始化图表
|
|
||||||
setTimeout(async () => {
|
|
||||||
if (!chart.value) return;
|
|
||||||
const myChart = await chart.value.init(echarts);
|
|
||||||
myChart.setOption(chartOption.value);
|
|
||||||
myChart.on('click', (params) => {
|
|
||||||
console.log(params.seriesName);
|
|
||||||
tableData.value = getAgeGroupStaffs(params.seriesName);
|
|
||||||
});
|
|
||||||
}, 300);
|
|
||||||
|
|
||||||
// #ifdef APP
|
|
||||||
getHeight();
|
|
||||||
// #endif
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// #ifdef APP
|
|
||||||
getHeight();
|
|
||||||
// #endif
|
|
||||||
});
|
|
||||||
// #ifdef APP
|
|
||||||
|
|
||||||
const getHeight = () => {
|
|
||||||
// 获取屏幕高度
|
|
||||||
const systemInfo = uni.getSystemInfoSync();
|
|
||||||
const screenHeight = systemInfo.screenHeight;
|
|
||||||
// 创建选择器查询对象
|
|
||||||
const query = uni.createSelectorQuery();
|
|
||||||
// 获取上方组件的高度
|
|
||||||
query
|
|
||||||
.select('#top1')
|
|
||||||
.boundingClientRect((rect1) => {
|
|
||||||
// 计算上方组件高度总和
|
|
||||||
const topComponentsHeight = rect1.height;
|
|
||||||
// 计算下方组件的高度
|
|
||||||
bottomHeight.value = screenHeight - topComponentsHeight - 415;
|
|
||||||
})
|
|
||||||
.exec();
|
|
||||||
};
|
|
||||||
|
|
||||||
// #endif
|
|
||||||
// 初始化图表
|
|
||||||
const initChart = () => {
|
|
||||||
setTimeout(async () => {
|
|
||||||
if (!chart.value) return;
|
|
||||||
const myChart = await chart.value.init(echarts);
|
|
||||||
myChart.setOption(chartOption.value);
|
|
||||||
}, 300);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.container {
|
|
||||||
margin: 20, 20, 20, 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 20rpx;
|
|
||||||
margin-bottom: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
flex: 1;
|
|
||||||
border: 1rpx solid #ddd;
|
|
||||||
padding: 15rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.query-btn {
|
|
||||||
background: #007aff;
|
|
||||||
color: white;
|
|
||||||
padding: 0 40rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin: 30rpx 0;
|
|
||||||
padding: 20rpx;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #0000ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-container {
|
|
||||||
height: 400rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.titleStyle {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #747474;
|
|
||||||
line-height: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background: #f2f9fc;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-left: 1px solid #919191;
|
|
||||||
border-bottom: 1px solid #919191;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 内容样式 */
|
|
||||||
.dataStyle {
|
|
||||||
max-font-size: 14px;
|
|
||||||
/* 最大字体限制 */
|
|
||||||
min-font-size: 10px;
|
|
||||||
/* 最小字体限制 */
|
|
||||||
font-size: 12px;
|
|
||||||
color: #00007f;
|
|
||||||
line-height: 30px;
|
|
||||||
height: 30px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-bottom: 1px solid #919191;
|
|
||||||
border-left: 1px solid #919191;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,54 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<view :class="[{'gray':store.isgray==1}]">
|
<view :class="['f-col','aic',{'gray':store.isgray==1}]">
|
||||||
<view style="margin-top: 10px;margin-bottom: 10px;">
|
<picker fields="month" mode="date" @change="bindPickerChange" :value="index">
|
||||||
<picker fields="month" mode="date" @change="bindPickerChange" :value="index">
|
<view class="date">{{index}} 点击选择月份</view>
|
||||||
<view class="date">{{index}} 点击选择月份</view>
|
</picker>
|
||||||
</picker>
|
<view class="info">
|
||||||
</view>
|
<view class="info_title f-row aic">
|
||||||
<uni-row>
|
<view class="">
|
||||||
<uni-col :span="7">
|
|
||||||
<view class="titleStyle">
|
|
||||||
日期
|
日期
|
||||||
</view>
|
</view>
|
||||||
</uni-col>
|
<view class="">
|
||||||
<uni-col :span="4">
|
|
||||||
<view class="titleStyle">
|
|
||||||
带班领导
|
带班领导
|
||||||
</view>
|
</view>
|
||||||
</uni-col>
|
<view class="">
|
||||||
<uni-col :span="4">
|
|
||||||
<view class="titleStyle">
|
|
||||||
值班领导
|
值班领导
|
||||||
</view>
|
</view>
|
||||||
</uni-col>
|
<view class="">
|
||||||
<uni-col :span="9">
|
|
||||||
<view class="titleStyle">
|
|
||||||
值班干部
|
值班干部
|
||||||
</view>
|
</view>
|
||||||
</uni-col>
|
</view>
|
||||||
</uni-row>
|
<view class="data_box">
|
||||||
<uni-row>
|
<view class="data f-row aic" v-for="item,i in zhibanArr">
|
||||||
<view v-for="(item,index) in zhibanArr">
|
<view class="">
|
||||||
<uni-col :span="7">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{item.date}}
|
{{item.date}}
|
||||||
</view>
|
</view>
|
||||||
</uni-col>
|
<view class="">
|
||||||
<uni-col :span="4">
|
|
||||||
<view class="dataStyle">
|
|
||||||
{{item.dbld_dictText}}
|
{{item.dbld_dictText}}
|
||||||
</view>
|
</view>
|
||||||
</uni-col><uni-col :span="4">
|
<view class="">
|
||||||
<view class="dataStyle">
|
|
||||||
{{item.zbld_dictText}}
|
{{item.zbld_dictText}}
|
||||||
</view>
|
</view>
|
||||||
</uni-col><uni-col :span="9">
|
<view class="">
|
||||||
<view class="dataStyle">
|
|
||||||
{{item.zbgbrealname}}
|
{{item.zbgbrealname}}
|
||||||
</view>
|
</view>
|
||||||
</uni-col>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-row>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -67,36 +53,6 @@
|
|||||||
} from '@/store';
|
} from '@/store';
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
|
||||||
let column = ref([{
|
|
||||||
name: 'date',
|
|
||||||
label: '日期',
|
|
||||||
width: 70,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
name: 'dbld_dictText',
|
|
||||||
label: '带班领导',
|
|
||||||
align: 'center',
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'zbld_dictText',
|
|
||||||
label: '值班领导',
|
|
||||||
align: 'center',
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'zbgbrealname',
|
|
||||||
label: '值班干部',
|
|
||||||
align: 'center',
|
|
||||||
width: 150
|
|
||||||
}
|
|
||||||
|
|
||||||
])
|
|
||||||
|
|
||||||
const zhibanArr = ref([])
|
const zhibanArr = ref([])
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
zhibanQuery()
|
zhibanQuery()
|
||||||
@ -127,36 +83,36 @@
|
|||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
.titleStyle {
|
background: #F8F8F8;
|
||||||
font-size: 12px;
|
border-radius: 8rpx;
|
||||||
color: #747474;
|
|
||||||
line-height: 25px;
|
|
||||||
height: 25px;
|
|
||||||
background: #F2F9FC;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
width: 690rpx;
|
||||||
border-left: 1px solid #919191;
|
margin-top: 23rpx;
|
||||||
border-bottom: 1px solid #919191;
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 内容样式 */
|
.info_title {
|
||||||
.dataStyle {
|
font-size: 24rpx;
|
||||||
max-font-size: 14px;
|
color: #333333;
|
||||||
/* 最大字体限制 */
|
padding: 24rpx 0;
|
||||||
min-font-size: 10px;
|
border-bottom: 1px solid #EFEFEF;
|
||||||
/* 最小字体限制 */
|
|
||||||
font-size: 12px;
|
|
||||||
color: #00007f;
|
|
||||||
line-height: 25px;
|
|
||||||
height: 25px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-bottom: 1px solid #919191;
|
|
||||||
border-left: 1px solid #919191;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
|
view {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data_box {
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
color: #888888;
|
||||||
|
|
||||||
|
.data {
|
||||||
|
margin-top: 23rpx;
|
||||||
|
|
||||||
|
view {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -1,205 +0,0 @@
|
|||||||
## 0.9.8(2024-12-20)
|
|
||||||
- fix: 修复 APP 无法放大问题
|
|
||||||
## 0.9.7(2024-12-02)
|
|
||||||
- feat: uniapp 增加`landscape`,当`landscape`为`true`时旋转90deg达到横屏效果。
|
|
||||||
- feat: 支持uniapp x 微信小程序
|
|
||||||
## 0.9.6(2024-07-23)
|
|
||||||
- fix: 修复 uni is not defined
|
|
||||||
## 0.9.5(2024-07-19)
|
|
||||||
- chore: 鸿蒙`measureText`为异步,异步字体不正常,使用模拟方式。
|
|
||||||
## 0.9.4(2024-07-18)
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.9.3(2024-07-16)
|
|
||||||
- feat: 鸿蒙 canvas 事件缺失,待官方修复,如何在鸿蒙使用请看文档`常见问题 vue3`
|
|
||||||
## 0.9.2(2024-07-12)
|
|
||||||
- chore: 删除多余文件
|
|
||||||
## 0.9.1(2024-07-12)
|
|
||||||
- fix: 修复 安卓5不显示图表问题
|
|
||||||
## 0.9.0(2024-06-13)
|
|
||||||
- chore: 合并nvue和uvue
|
|
||||||
## 0.8.9(2024-05-19)
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.8.8(2024-05-13)
|
|
||||||
- chore: 更新文档和uvue示例
|
|
||||||
## 0.8.7(2024-04-26)
|
|
||||||
- fix: uniapp x需要HBX 4.13以上
|
|
||||||
## 0.8.6(2024-04-10)
|
|
||||||
- feat: 支持 uniapp x ios
|
|
||||||
## 0.8.5(2024-04-03)
|
|
||||||
- fix: 修复 nvue `reset`传值不生效问题
|
|
||||||
- feat: 支持 uniapp x web
|
|
||||||
## 0.8.4(2024-01-27)
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.8.3(2024-01-21)
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.8.2(2024-01-21)
|
|
||||||
- feat: 支持 `uvue`
|
|
||||||
## 0.8.1(2023-08-24)
|
|
||||||
- fix: app 的`touch`事件为`object` 导致无法显示 `tooltip`
|
|
||||||
## 0.8.0(2023-08-22)
|
|
||||||
- fix: 离屏 报错问题
|
|
||||||
- fix: 微信小程序PC无法使用事件
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.7.9(2023-07-29)
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.7.8(2023-07-29)
|
|
||||||
- fix: 离屏 报错问题
|
|
||||||
## 0.7.7(2023-07-27)
|
|
||||||
- chore: 更新文档
|
|
||||||
- chore: lime-echart 里的示例使用自定tooltips
|
|
||||||
- feat: 对支持离屏的使用离屏创建(微信、字节、支付宝)
|
|
||||||
## 0.7.6(2023-06-30)
|
|
||||||
- fix: vue3 报`width`的错
|
|
||||||
## 0.7.5(2023-05-25)
|
|
||||||
- chore: 更新文档 和 demo, 使用`lime-echart`这个标签即可查看示例
|
|
||||||
## 0.7.4(2023-05-22)
|
|
||||||
- chore: 增加关于钉钉小程序上传时提示安全问题的说明及修改建议
|
|
||||||
## 0.7.3(2023-05-16)
|
|
||||||
- chore: 更新 vue3 非微信小程序平台可能缺少`wx`的说明
|
|
||||||
## 0.7.2(2023-05-16)
|
|
||||||
- chore: 更新 vue3 非微信小程序平台的可以缺少`wx`的说明
|
|
||||||
## 0.7.1(2023-04-26)
|
|
||||||
- chore: 更新demo,使用`lime-echart`这个标签即可查看示例
|
|
||||||
- chore:微信小程序的`tooltip`文字有阴影,怀疑是微信的锅,临时解决方法是`tooltip.shadowBlur = 0`
|
|
||||||
## 0.7.0(2023-04-24)
|
|
||||||
- fix: 修复`setAttribute is not a function`
|
|
||||||
## 0.6.9(2023-04-15)
|
|
||||||
- chore: 更新文档,vue3请使用echarts esm的包
|
|
||||||
## 0.6.8(2023-03-22)
|
|
||||||
- feat: mac pc无法使用canvas 2d
|
|
||||||
## 0.6.7(2023-03-17)
|
|
||||||
- feat: 更新文档
|
|
||||||
## 0.6.6(2023-03-17)
|
|
||||||
- feat: 微信小程序PC已经支持canvas 2d,故去掉判断PC
|
|
||||||
## 0.6.5(2022-11-03)
|
|
||||||
- fix: 某些手机touches为对象,导致无法交互。
|
|
||||||
## 0.6.4(2022-10-28)
|
|
||||||
- fix: 优化点击事件的触发条件
|
|
||||||
## 0.6.3(2022-10-26)
|
|
||||||
- fix: 修复 dataZoom 拖动问题
|
|
||||||
## 0.6.2(2022-10-23)
|
|
||||||
- fix: 修复 飞书小程序 尺寸问题
|
|
||||||
## 0.6.1(2022-10-19)
|
|
||||||
- fix: 修复 PC mousewheel 事件 鼠标位置不准确的BUG,不兼容火狐!
|
|
||||||
- feat: showLoading 增加传参
|
|
||||||
## 0.6.0(2022-09-16)
|
|
||||||
- feat: 增加PC的mousewheel事件
|
|
||||||
## 0.5.4(2022-09-16)
|
|
||||||
- fix: 修复 nvue 动态数据不显示问题
|
|
||||||
## 0.5.3(2022-09-16)
|
|
||||||
- feat: 增加enableHover属性, 在PC端时当鼠标进入显示tooltip,不必按下。
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.5.2(2022-09-16)
|
|
||||||
- feat: 增加enableHover属性, 在PC端时当鼠标进入显示tooltip,不必按下。
|
|
||||||
## 0.5.1(2022-09-16)
|
|
||||||
- fix: 修复nvue报错
|
|
||||||
## 0.5.0(2022-09-15)
|
|
||||||
- feat: init(echarts, theme?:string, opts?:{}, callback: function(chart))
|
|
||||||
## 0.4.8(2022-09-11)
|
|
||||||
- feat: 增加 @finished
|
|
||||||
## 0.4.7(2022-08-24)
|
|
||||||
- chore: 去掉 stylus
|
|
||||||
## 0.4.6(2022-08-24)
|
|
||||||
- feat: 增加 beforeDelay
|
|
||||||
## 0.4.5(2022-08-12)
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.4.4(2022-08-12)
|
|
||||||
- fix: 修复 resize 无参数时报错
|
|
||||||
## 0.4.3(2022-08-07)
|
|
||||||
# 评论有说本插件对新手不友好,让我做不好就不要发出来。 还有的说跟官网一样,发出来做什么,给我整无语了。
|
|
||||||
# 所以在此提醒一下准备要下载的你,如果你从未使用过 echarts 请不要下载 或 谨慎下载。
|
|
||||||
# 如果你确认要下载,麻烦看完文档。还有请注意插件是让echarts在uniapp能运行,API 配置请自行去官网查阅!
|
|
||||||
# 如果你不会echarts 但又需要图表,市场上有个很优秀的图表插件 uchart 你可以去使用这款插件,uchart的作者人很好,也热情。
|
|
||||||
# 每个人都有自己的本职工作,如果你能力强可以自行兼容,如果使用了他人的插件也麻烦尊重他人的成果和劳动时间。谢谢。
|
|
||||||
# 为了心情愉悦,本人已经使用插件屏蔽差评。
|
|
||||||
- chore: 更新文档
|
|
||||||
## 0.4.2(2022-07-20)
|
|
||||||
- feat: 增加 resize
|
|
||||||
## 0.4.1(2022-06-07)
|
|
||||||
- fix: 修复 canvasToTempFilePath 不生效问题
|
|
||||||
## 0.4.0(2022-06-04)
|
|
||||||
- chore 为了词云 增加一个canvas 标签
|
|
||||||
- 词云下载地址[echart-wordcloud](https://ext.dcloud.net.cn/plugin?id=8430)
|
|
||||||
## 0.3.9(2022-06-02)
|
|
||||||
- chore: 更新文档
|
|
||||||
- tips: lines 不支持 `trailLength`
|
|
||||||
## 0.3.8(2022-05-31)
|
|
||||||
- fix: 修复 因mouse事件冲突tooltip跳动问题
|
|
||||||
## 0.3.7(2022-05-26)
|
|
||||||
- chore: 更新文档
|
|
||||||
- chore: 设置默认宽高300px
|
|
||||||
- fix: 修复 vue3 微信小程序 拖影BUG
|
|
||||||
- chore: 支持PC
|
|
||||||
## 0.3.5(2022-04-28)
|
|
||||||
- chore: 更新使用方式
|
|
||||||
- 🔔 必须使用hbuilderx 3.4.8-alpha以上
|
|
||||||
## 0.3.4(2021-08-03)
|
|
||||||
- chore: 增加 setOption的参数值
|
|
||||||
## 0.3.3(2021-07-22)
|
|
||||||
- fix: 修复 径向渐变报错的问题
|
|
||||||
## 0.3.2(2021-07-09)
|
|
||||||
- chore: 统一命名规范,无须主动引入组件
|
|
||||||
## [代码示例站点1](https://limeui.qcoon.cn/#/echart-example)
|
|
||||||
## [代码示例站点2](http://liangei.gitee.io/limeui/#/echart-example)
|
|
||||||
## 0.3.1(2021-06-21)
|
|
||||||
- fix: 修复 app-nvue ios is-enable 无效的问题
|
|
||||||
## [代码示例站点1](https://limeui.qcoon.cn/#/echart-example)
|
|
||||||
## [代码示例站点2](http://liangei.gitee.io/limeui/#/echart-example)
|
|
||||||
## 0.3.0(2021-06-14)
|
|
||||||
- fix: 修复 头条系小程序 2d 报 JSON.stringify 的问题
|
|
||||||
- 目前 头条系小程序 2d 无法在开发工具上预览,划动图表页面无法滚动,axisLabel 字体颜色无法更改,建议使用非2d。
|
|
||||||
## 0.2.9(2021-06-06)
|
|
||||||
- fix: 修复 头条系小程序 2d 放大的BUG
|
|
||||||
- 头条系小程序 2d 无法在开发工具上预览,也存在划动图表页面无法滚动的问题。
|
|
||||||
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
|
||||||
## 0.2.8(2021-05-19)
|
|
||||||
- fix: 修复 微信小程序 PC 显示过大的问题
|
|
||||||
## 0.2.7(2021-05-19)
|
|
||||||
- fix: 修复 微信小程序 PC 不显示问题
|
|
||||||
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
|
||||||
## 0.2.6(2021-05-14)
|
|
||||||
- feat: 支持 `image`
|
|
||||||
- feat: props 增加 `ec.clear`,更新时是否先删除图表样式
|
|
||||||
- feat: props 增加 `isDisableScroll` ,触摸图表时是否禁止页面滚动
|
|
||||||
- feat: props 增加 `webviewStyles` ,webview 的样式, 仅nvue有效
|
|
||||||
## 0.2.5(2021-05-13)
|
|
||||||
- docs: 插件用到了css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装它
|
|
||||||
## 0.2.4(2021-05-12)
|
|
||||||
- fix: 修复 百度平台 多个图表ctx 和 渐变色 bug
|
|
||||||
- ## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
|
||||||
## 0.2.3(2021-05-10)
|
|
||||||
- feat: 增加 `canvasToTempFilePath` 方法,用于生成图片
|
|
||||||
```js
|
|
||||||
this.$refs.chart.canvasToTempFilePath({success: (res) => {
|
|
||||||
console.log('tempFilePath:', res.tempFilePath)
|
|
||||||
}})
|
|
||||||
```
|
|
||||||
## 0.2.2(2021-05-10)
|
|
||||||
- feat: 增加 `dispose` 方法,用于销毁实例
|
|
||||||
- feat: 增加 `isClickable` 是否派发点击
|
|
||||||
- feat: 实验性的支持 `nvue` 使用要慎重考虑
|
|
||||||
- ## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
|
||||||
## 0.2.1(2021-05-06)
|
|
||||||
- fix:修复 微信小程序 json 报错
|
|
||||||
- chore: `reset` 更改为 `setChart`
|
|
||||||
- feat: 增加 `isEnable` 开启初始化 启用这个后 无须再使用`init`方法
|
|
||||||
```html
|
|
||||||
<l-echart ref="chart" is-enable />
|
|
||||||
```
|
|
||||||
```js
|
|
||||||
// 显示加载
|
|
||||||
this.$refs.chart.showLoading()
|
|
||||||
// 使用实例回调
|
|
||||||
this.$refs.chart.setChart(chart => ...code)
|
|
||||||
// 直接设置图表配置
|
|
||||||
this.$refs.chart.setOption(data)
|
|
||||||
```
|
|
||||||
## 0.2.0(2021-05-05)
|
|
||||||
- fix:修复 头条 百度 偏移的问题
|
|
||||||
- docs: 更新文档
|
|
||||||
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
|
||||||
## 0.1.0(2021-05-02)
|
|
||||||
- chore: 第一次上传,基本全端兼容,使用方法与官网一致。
|
|
||||||
- 已知BUG:非2d 无法使用背景色,已反馈官方
|
|
||||||
- 已知BUG:头条 百度 有许些偏移
|
|
||||||
- 后期计划:兼容nvue
|
|
@ -1,395 +0,0 @@
|
|||||||
import {getDeviceInfo} from './utils';
|
|
||||||
|
|
||||||
const cacheChart = {}
|
|
||||||
const fontSizeReg = /([\d\.]+)px/;
|
|
||||||
class EventEmit {
|
|
||||||
constructor() {
|
|
||||||
this.__events = {};
|
|
||||||
}
|
|
||||||
on(type, listener) {
|
|
||||||
if (!type || !listener) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const events = this.__events[type] || [];
|
|
||||||
events.push(listener);
|
|
||||||
this.__events[type] = events;
|
|
||||||
}
|
|
||||||
emit(type, e) {
|
|
||||||
if (type.constructor === Object) {
|
|
||||||
e = type;
|
|
||||||
type = e && e.type;
|
|
||||||
}
|
|
||||||
if (!type) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const events = this.__events[type];
|
|
||||||
if (!events || !events.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
events.forEach((listener) => {
|
|
||||||
listener.call(this, e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
off(type, listener) {
|
|
||||||
const __events = this.__events;
|
|
||||||
const events = __events[type];
|
|
||||||
if (!events || !events.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!listener) {
|
|
||||||
delete __events[type];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (let i = 0, len = events.length; i < len; i++) {
|
|
||||||
if (events[i] === listener) {
|
|
||||||
events.splice(i, 1);
|
|
||||||
i--;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class Image {
|
|
||||||
constructor() {
|
|
||||||
this.currentSrc = null
|
|
||||||
this.naturalHeight = 0
|
|
||||||
this.naturalWidth = 0
|
|
||||||
this.width = 0
|
|
||||||
this.height = 0
|
|
||||||
this.tagName = 'IMG'
|
|
||||||
}
|
|
||||||
set src(src) {
|
|
||||||
this.currentSrc = src
|
|
||||||
uni.getImageInfo({
|
|
||||||
src,
|
|
||||||
success: (res) => {
|
|
||||||
this.naturalWidth = this.width = res.width
|
|
||||||
this.naturalHeight = this.height = res.height
|
|
||||||
this.onload()
|
|
||||||
},
|
|
||||||
fail: () => {
|
|
||||||
this.onerror()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
get src() {
|
|
||||||
return this.currentSrc
|
|
||||||
}
|
|
||||||
}
|
|
||||||
class OffscreenCanvas {
|
|
||||||
constructor(ctx, com, canvasId) {
|
|
||||||
this.tagName = 'canvas'
|
|
||||||
this.com = com
|
|
||||||
this.canvasId = canvasId
|
|
||||||
this.ctx = ctx
|
|
||||||
}
|
|
||||||
set width(w) {
|
|
||||||
this.com.offscreenWidth = w
|
|
||||||
}
|
|
||||||
set height(h) {
|
|
||||||
this.com.offscreenHeight = h
|
|
||||||
}
|
|
||||||
get width() {
|
|
||||||
return this.com.offscreenWidth || 0
|
|
||||||
}
|
|
||||||
get height() {
|
|
||||||
return this.com.offscreenHeight || 0
|
|
||||||
}
|
|
||||||
getContext(type) {
|
|
||||||
return this.ctx
|
|
||||||
}
|
|
||||||
getImageData() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
this.com.$nextTick(() => {
|
|
||||||
uni.canvasGetImageData({
|
|
||||||
x:0,
|
|
||||||
y:0,
|
|
||||||
width: this.com.offscreenWidth,
|
|
||||||
height: this.com.offscreenHeight,
|
|
||||||
canvasId: this.canvasId,
|
|
||||||
success: (res) => {
|
|
||||||
resolve(res)
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
reject(err)
|
|
||||||
},
|
|
||||||
}, this.com)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export class Canvas {
|
|
||||||
constructor(ctx, com, isNew, canvasNode={}) {
|
|
||||||
cacheChart[com.canvasId] = {ctx}
|
|
||||||
this.canvasId = com.canvasId;
|
|
||||||
this.chart = null;
|
|
||||||
this.isNew = isNew
|
|
||||||
this.tagName = 'canvas'
|
|
||||||
this.canvasNode = canvasNode;
|
|
||||||
this.com = com;
|
|
||||||
if (!isNew) {
|
|
||||||
this._initStyle(ctx)
|
|
||||||
}
|
|
||||||
this._initEvent();
|
|
||||||
this._ee = new EventEmit()
|
|
||||||
}
|
|
||||||
getContext(type) {
|
|
||||||
if (type === '2d') {
|
|
||||||
return this.ctx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setAttribute(key, value) {
|
|
||||||
if(key === 'aria-label') {
|
|
||||||
this.com['ariaLabel'] = value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setChart(chart) {
|
|
||||||
this.chart = chart;
|
|
||||||
}
|
|
||||||
createOffscreenCanvas(param){
|
|
||||||
if(!this.children) {
|
|
||||||
this.com.isOffscreenCanvas = true
|
|
||||||
this.com.offscreenWidth = param.width||300
|
|
||||||
this.com.offscreenHeight = param.height||300
|
|
||||||
const com = this.com
|
|
||||||
const canvasId = this.com.offscreenCanvasId
|
|
||||||
const context = uni.createCanvasContext(canvasId, this.com)
|
|
||||||
this._initStyle(context)
|
|
||||||
this.children = new OffscreenCanvas(context, com, canvasId)
|
|
||||||
}
|
|
||||||
return this.children
|
|
||||||
}
|
|
||||||
appendChild(child) {
|
|
||||||
console.log('child', child)
|
|
||||||
}
|
|
||||||
dispatchEvent(type, e) {
|
|
||||||
if(typeof type == 'object') {
|
|
||||||
this._ee.emit(type.type, type);
|
|
||||||
} else {
|
|
||||||
this._ee.emit(type, e);
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
attachEvent() {
|
|
||||||
}
|
|
||||||
detachEvent() {
|
|
||||||
}
|
|
||||||
addEventListener(type, listener) {
|
|
||||||
this._ee.on(type, listener)
|
|
||||||
}
|
|
||||||
removeEventListener(type, listener) {
|
|
||||||
this._ee.off(type, listener)
|
|
||||||
}
|
|
||||||
_initCanvas(zrender, ctx) {
|
|
||||||
// zrender.util.getContext = function() {
|
|
||||||
// return ctx;
|
|
||||||
// };
|
|
||||||
// zrender.util.$override('measureText', function(text, font) {
|
|
||||||
// ctx.font = font || '12px sans-serif';
|
|
||||||
// return ctx.measureText(text, font);
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
_initStyle(ctx, child) {
|
|
||||||
const styles = [
|
|
||||||
'fillStyle',
|
|
||||||
'strokeStyle',
|
|
||||||
'fontSize',
|
|
||||||
'globalAlpha',
|
|
||||||
'opacity',
|
|
||||||
'textAlign',
|
|
||||||
'textBaseline',
|
|
||||||
'shadow',
|
|
||||||
'lineWidth',
|
|
||||||
'lineCap',
|
|
||||||
'lineJoin',
|
|
||||||
'lineDash',
|
|
||||||
'miterLimit',
|
|
||||||
// #ifdef H5
|
|
||||||
'font',
|
|
||||||
// #endif
|
|
||||||
];
|
|
||||||
const colorReg = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b/g;
|
|
||||||
styles.forEach(style => {
|
|
||||||
Object.defineProperty(ctx, style, {
|
|
||||||
set: value => {
|
|
||||||
// #ifdef H5
|
|
||||||
if (style === 'font' && fontSizeReg.test(value)) {
|
|
||||||
const match = fontSizeReg.exec(value);
|
|
||||||
ctx.setFontSize(match[1]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
if (style === 'opacity') {
|
|
||||||
ctx.setGlobalAlpha(value)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (style !== 'fillStyle' && style !== 'strokeStyle' || value !== 'none' && value !== null) {
|
|
||||||
// #ifdef H5 || APP-PLUS || MP-BAIDU
|
|
||||||
if(typeof value == 'object') {
|
|
||||||
if (value.hasOwnProperty('colorStop') || value.hasOwnProperty('colors')) {
|
|
||||||
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifdef MP-TOUTIAO
|
|
||||||
if(colorReg.test(value)) {
|
|
||||||
value = value.replace(colorReg, '#$1$1$2$2$3$3')
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
if(!this.isNew && !child) {
|
|
||||||
ctx.uniDrawImage = ctx.drawImage
|
|
||||||
ctx.drawImage = (...a) => {
|
|
||||||
a[0] = a[0].src
|
|
||||||
ctx.uniDrawImage(...a)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(!ctx.createRadialGradient) {
|
|
||||||
ctx.createRadialGradient = function() {
|
|
||||||
return ctx.createCircularGradient(...[...arguments].slice(-3))
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// 字节不支持
|
|
||||||
if (!ctx.strokeText) {
|
|
||||||
ctx.strokeText = (...a) => {
|
|
||||||
ctx.fillText(...a)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 钉钉不支持 , 鸿蒙是异步
|
|
||||||
if (!ctx.measureText || getDeviceInfo().osName == 'harmonyos') {
|
|
||||||
ctx._measureText = ctx.measureText
|
|
||||||
const strLen = (str) => {
|
|
||||||
let len = 0;
|
|
||||||
for (let i = 0; i < str.length; i++) {
|
|
||||||
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
|
||||||
len++;
|
|
||||||
} else {
|
|
||||||
len += 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return len;
|
|
||||||
}
|
|
||||||
ctx.measureText = (text, font) => {
|
|
||||||
let fontSize = ctx?.state?.fontSize || 12;
|
|
||||||
if (font) {
|
|
||||||
fontSize = parseInt(font.match(/([\d\.]+)px/)[1])
|
|
||||||
}
|
|
||||||
fontSize /= 2;
|
|
||||||
let isBold = fontSize >= 16;
|
|
||||||
const widthFactor = isBold ? 1.3 : 1;
|
|
||||||
// ctx._measureText(text, (res) => {})
|
|
||||||
return {
|
|
||||||
width: strLen(text) * fontSize * widthFactor
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_initEvent(e) {
|
|
||||||
this.event = {};
|
|
||||||
const eventNames = [{
|
|
||||||
wxName: 'touchStart',
|
|
||||||
ecName: 'mousedown'
|
|
||||||
}, {
|
|
||||||
wxName: 'touchMove',
|
|
||||||
ecName: 'mousemove'
|
|
||||||
}, {
|
|
||||||
wxName: 'touchEnd',
|
|
||||||
ecName: 'mouseup'
|
|
||||||
}, {
|
|
||||||
wxName: 'touchEnd',
|
|
||||||
ecName: 'click'
|
|
||||||
}];
|
|
||||||
|
|
||||||
eventNames.forEach(name => {
|
|
||||||
this.event[name.wxName] = e => {
|
|
||||||
const touch = e.touches[0];
|
|
||||||
this.chart.getZr().handler.dispatch(name.ecName, {
|
|
||||||
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
|
|
||||||
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
|
|
||||||
});
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
set width(w) {
|
|
||||||
this.canvasNode.width = w
|
|
||||||
}
|
|
||||||
set height(h) {
|
|
||||||
this.canvasNode.height = h
|
|
||||||
}
|
|
||||||
|
|
||||||
get width() {
|
|
||||||
return this.canvasNode.width || 0
|
|
||||||
}
|
|
||||||
get height() {
|
|
||||||
return this.canvasNode.height || 0
|
|
||||||
}
|
|
||||||
get ctx() {
|
|
||||||
return cacheChart[this.canvasId]['ctx'] || null
|
|
||||||
}
|
|
||||||
set chart(chart) {
|
|
||||||
cacheChart[this.canvasId]['chart'] = chart
|
|
||||||
}
|
|
||||||
get chart() {
|
|
||||||
return cacheChart[this.canvasId]['chart'] || null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function dispatch(name, {x,y, wheelDelta}) {
|
|
||||||
this.dispatch(name, {
|
|
||||||
zrX: x,
|
|
||||||
zrY: y,
|
|
||||||
zrDelta: wheelDelta,
|
|
||||||
preventDefault: () => {},
|
|
||||||
stopPropagation: () =>{}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
export function setCanvasCreator(echarts, {canvas, node}) {
|
|
||||||
// echarts.setCanvasCreator(() => canvas);
|
|
||||||
if(echarts && !echarts.registerPreprocessor) {
|
|
||||||
return console.warn('echarts 版本不对或未传入echarts,vue3请使用esm格式')
|
|
||||||
}
|
|
||||||
echarts.registerPreprocessor(option => {
|
|
||||||
if (option && option.series) {
|
|
||||||
if (option.series.length > 0) {
|
|
||||||
option.series.forEach(series => {
|
|
||||||
series.progressive = 0;
|
|
||||||
});
|
|
||||||
} else if (typeof option.series === 'object') {
|
|
||||||
option.series.progressive = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
function loadImage(src, onload, onerror) {
|
|
||||||
let img = null
|
|
||||||
if(node && node.createImage) {
|
|
||||||
img = node.createImage()
|
|
||||||
img.onload = onload.bind(img);
|
|
||||||
img.onerror = onerror.bind(img);
|
|
||||||
img.src = src;
|
|
||||||
return img
|
|
||||||
} else {
|
|
||||||
img = new Image()
|
|
||||||
img.onload = onload.bind(img)
|
|
||||||
img.onerror = onerror.bind(img);
|
|
||||||
img.src = src
|
|
||||||
return img
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(echarts.setPlatformAPI) {
|
|
||||||
echarts.setPlatformAPI({
|
|
||||||
loadImage: canvas.setChart ? loadImage : null,
|
|
||||||
createCanvas(){
|
|
||||||
const key = 'createOffscreenCanvas'
|
|
||||||
return uni.canIUse(key) && uni[key] ? uni[key]({type: '2d'}) : canvas
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,310 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- #ifdef APP -->
|
|
||||||
<web-view class="lime-echart" ref="chartRef" @load="loaded" :style="[customStyle]"
|
|
||||||
:webview-styles="[webviewStyles]" src="/uni_modules/lime-echart/static/uvue.html?v=10112">
|
|
||||||
</web-view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef H5 -->
|
|
||||||
<div class="lime-echart" ref="chartRef"></div>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifndef H5 || APP-->
|
|
||||||
<canvas class="lime-echart" :id="canvasid" :canvas-id="canvasid"
|
|
||||||
@touchstart="touchstart"
|
|
||||||
@touchmove="touchmove"
|
|
||||||
@touchend="touchend">
|
|
||||||
</canvas>
|
|
||||||
<!-- #endif -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="uts" setup>
|
|
||||||
// @ts-nocheck
|
|
||||||
import { getCurrentInstance, nextTick } from "vue";
|
|
||||||
import { Echarts } from './uvue';
|
|
||||||
// #ifdef WEB
|
|
||||||
import { dispatch } from './canvas';
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP || WEB
|
|
||||||
import {Canvas, setCanvasCreator, dispatch} from './canvas';
|
|
||||||
import {wrapTouch, convertTouchesToArray, devicePixelRatio ,sleep, canIUseCanvas2d, getRect} from './utils';
|
|
||||||
// #endif
|
|
||||||
type EchartsResolve = (value : Echarts) => void
|
|
||||||
defineOptions({
|
|
||||||
name: 'l-echart'
|
|
||||||
})
|
|
||||||
const emits = defineEmits(['finished'])
|
|
||||||
const props = defineProps({
|
|
||||||
// #ifdef APP
|
|
||||||
webviewStyles: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
customStyle: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
webviewStyles: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
customStyle: {
|
|
||||||
type: [String, Object]
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
isDisableScroll: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
isClickable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
enableHover: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
beforeDelay: {
|
|
||||||
type: Number,
|
|
||||||
default: 30
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const instance = getCurrentInstance()!;
|
|
||||||
const canvasid = `lime-echart-${instance.uid}`
|
|
||||||
const finished = ref(false)
|
|
||||||
const map = [] as EchartsResolve[]
|
|
||||||
const callbackMap = [] as EchartsResolve[]
|
|
||||||
// let context = null as UniWebViewElement | null
|
|
||||||
let chart = null as Echarts | null
|
|
||||||
let chartRef = ref<UniWebViewElement | null>(null)
|
|
||||||
|
|
||||||
const trigger = () => {
|
|
||||||
// #ifdef APP
|
|
||||||
if (finished.value) {
|
|
||||||
if (chart == null) {
|
|
||||||
chart = new Echarts(chartRef.value!)
|
|
||||||
}
|
|
||||||
while (map.length > 0) {
|
|
||||||
const resolve = map.pop() as EchartsResolve
|
|
||||||
resolve(chart!)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
while (map.length > 0) {
|
|
||||||
if(chart != null){
|
|
||||||
const resolve = map.pop() as EchartsResolve
|
|
||||||
resolve(chart!)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
if(chart != null){
|
|
||||||
while(callbackMap.length > 0){
|
|
||||||
const callback = callbackMap.pop() as EchartsResolve
|
|
||||||
callback(chart!)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// #ifdef APP
|
|
||||||
const loaded = (event : UniWebViewLoadEvent) => {
|
|
||||||
event.stopPropagation()
|
|
||||||
event.preventDefault()
|
|
||||||
finished.value = true
|
|
||||||
trigger()
|
|
||||||
emits('finished')
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
|
|
||||||
const _next = () : boolean => {
|
|
||||||
if (chart == null) {
|
|
||||||
console.warn(`组件还未初始化,请先使用 init`)
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
const setOption = (option : UTSJSONObject) => {
|
|
||||||
if (_next()) return
|
|
||||||
chart!.setOption(option);
|
|
||||||
}
|
|
||||||
const showLoading = () => {
|
|
||||||
if (_next()) return
|
|
||||||
chart!.showLoading();
|
|
||||||
}
|
|
||||||
const hideLoading = () => {
|
|
||||||
if (_next()) return
|
|
||||||
chart!.hideLoading();
|
|
||||||
}
|
|
||||||
const clear = () => {
|
|
||||||
if (_next()) return
|
|
||||||
chart!.clear();
|
|
||||||
}
|
|
||||||
const dispose = () => {
|
|
||||||
if (_next()) return
|
|
||||||
chart!.dispose();
|
|
||||||
}
|
|
||||||
const resize = (size : UTSJSONObject) => {
|
|
||||||
if (_next()) return
|
|
||||||
chart!.resize(size);
|
|
||||||
}
|
|
||||||
const canvasToTempFilePath = (opt : UTSJSONObject) => {
|
|
||||||
if (_next()) return
|
|
||||||
chart!.canvasToTempFilePath(opt);
|
|
||||||
}
|
|
||||||
|
|
||||||
// #ifdef APP
|
|
||||||
function init(callback : ((chart : Echarts) => void) | null) : Promise<Echarts> {
|
|
||||||
|
|
||||||
if(callback!=null){
|
|
||||||
callbackMap.push(callback)
|
|
||||||
}
|
|
||||||
return new Promise<Echarts>((resolve) => {
|
|
||||||
map.push(resolve)
|
|
||||||
trigger()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
// #ifndef WEB
|
|
||||||
let use2dCanvas = canIUseCanvas2d()
|
|
||||||
const getContext = async () =>{
|
|
||||||
return getRect(`#${canvasid}`, {context: instance.proxy!, type: use2dCanvas ? 'fields': 'boundingClientRect'}).then(res => {
|
|
||||||
if(res) {
|
|
||||||
let dpr = uni.getWindowInfo().pixelRatio
|
|
||||||
let {width, height, node} = res
|
|
||||||
let canvas;
|
|
||||||
if(node) {
|
|
||||||
const ctx = node.getContext('2d');
|
|
||||||
canvas = new Canvas(ctx, instance.proxy, true, node);
|
|
||||||
} else {
|
|
||||||
const ctx = uni.createCanvasContext(canvasid, instance.proxy);
|
|
||||||
canvas = new Canvas(ctx, instance.proxy, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { canvas, width, height, devicePixelRatio: dpr, node };
|
|
||||||
} else {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
const getTouch = (e) => {
|
|
||||||
const touches = e.touches[0]
|
|
||||||
// #ifdef WEB
|
|
||||||
const rect = chart!.getZr().dom.getBoundingClientRect();
|
|
||||||
const touch = {
|
|
||||||
x: touches.clientX - rect.left,
|
|
||||||
y: touches.clientY - rect.top
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifndef WEB
|
|
||||||
const touch = {
|
|
||||||
x: touches.x,
|
|
||||||
y: touches.y
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
return touch
|
|
||||||
}
|
|
||||||
const touchstart = (e) => {
|
|
||||||
if(chart == null) return
|
|
||||||
const handler = chart.getZr().handler;
|
|
||||||
const touch = getTouch(e)
|
|
||||||
dispatch.call(handler, 'mousedown', touch)
|
|
||||||
dispatch.call(handler, 'click', touch)
|
|
||||||
}
|
|
||||||
const touchmove = (e) => {
|
|
||||||
if(chart == null) return
|
|
||||||
const handler = chart.getZr().handler;
|
|
||||||
const touch = getTouch(e)
|
|
||||||
dispatch.call(handler, 'mousemove', touch)
|
|
||||||
// const rect = chart.getZr().dom.getBoundingClientRect()
|
|
||||||
// handler.dispatch('mousemove', {
|
|
||||||
// zrX: e.touches[0].clientX - rect.left,
|
|
||||||
// zrY: e.touches[0].clientY - rect.top
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
const touchend = (e) => {
|
|
||||||
if(chart == null) return
|
|
||||||
const handler = chart.getZr().handler;
|
|
||||||
|
|
||||||
const touch = {
|
|
||||||
x: 999999999,
|
|
||||||
y: 999999999
|
|
||||||
}
|
|
||||||
|
|
||||||
dispatch.call(handler, 'mousemove', touch)
|
|
||||||
dispatch.call(handler, 'touchend', touch)
|
|
||||||
|
|
||||||
}
|
|
||||||
async function init(echarts: any, ...args: any[]): Promise<Echarts>{
|
|
||||||
if(echarts == null){
|
|
||||||
console.error('请确保已经引入了 ECharts 库');
|
|
||||||
return Promise.reject('请确保已经引入了 ECharts 库');
|
|
||||||
}
|
|
||||||
let theme:string|null=null
|
|
||||||
let opts={}
|
|
||||||
let callback:Function|null=null;
|
|
||||||
|
|
||||||
args.forEach(item =>{
|
|
||||||
if(typeof item === 'function') {
|
|
||||||
callback = item
|
|
||||||
} else if(['string'].includes(typeof item)){
|
|
||||||
theme = item
|
|
||||||
} else if(typeof item === 'object'){
|
|
||||||
opts = item
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// #ifdef WEB
|
|
||||||
chart = echarts.init(chartRef.value, theme, opts)
|
|
||||||
window.addEventListener('touchstart', touchstart)
|
|
||||||
window.addEventListener('touchmove', touchmove)
|
|
||||||
window.addEventListener('touchend', touchend)
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifndef WEB
|
|
||||||
let config = await getContext();
|
|
||||||
setCanvasCreator(echarts, config)
|
|
||||||
chart = echarts.init(config.canvas, theme, Object.assign({}, config, opts))
|
|
||||||
// #endif
|
|
||||||
console.log('chart', chart)
|
|
||||||
if(callback!=null && typeof callback == 'function'){
|
|
||||||
callbackMap.push(callback)
|
|
||||||
}
|
|
||||||
return new Promise<Echarts>((resolve) => {
|
|
||||||
map.push(resolve)
|
|
||||||
trigger()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onMounted(()=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
finished.value = true
|
|
||||||
trigger()
|
|
||||||
emits('finished')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
onUnmounted(()=>{
|
|
||||||
// #ifdef WEB
|
|
||||||
window.removeEventListener('touchstart', touchstart)
|
|
||||||
window.removeEventListener('touchmove', touchmove)
|
|
||||||
window.removeEventListener('touchend', touchend)
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
init,
|
|
||||||
setOption,
|
|
||||||
showLoading,
|
|
||||||
hideLoading,
|
|
||||||
clear,
|
|
||||||
dispose,
|
|
||||||
resize,
|
|
||||||
canvasToTempFilePath
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
.lime-echart {
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,530 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="lime-echart" :style="[customStyle]" v-if="canvasId" ref="limeEchart" :aria-label="ariaLabel">
|
|
||||||
<!-- #ifndef APP-NVUE -->
|
|
||||||
<canvas
|
|
||||||
class="lime-echart__canvas"
|
|
||||||
v-if="use2dCanvas"
|
|
||||||
type="2d"
|
|
||||||
:id="canvasId"
|
|
||||||
:style="canvasStyle"
|
|
||||||
:disable-scroll="isDisableScroll"
|
|
||||||
@touchstart="touchStart"
|
|
||||||
@touchmove="touchMove"
|
|
||||||
@touchend="touchEnd"
|
|
||||||
/>
|
|
||||||
<canvas
|
|
||||||
class="lime-echart__canvas"
|
|
||||||
v-else
|
|
||||||
:width="nodeWidth"
|
|
||||||
:height="nodeHeight"
|
|
||||||
:style="canvasStyle"
|
|
||||||
:canvas-id="canvasId"
|
|
||||||
:id="canvasId"
|
|
||||||
:disable-scroll="isDisableScroll"
|
|
||||||
@touchstart="touchStart"
|
|
||||||
@touchmove="touchMove"
|
|
||||||
@touchend="touchEnd"
|
|
||||||
/>
|
|
||||||
<view class="lime-echart__mask"
|
|
||||||
v-if="isPC"
|
|
||||||
@mousedown="touchStart"
|
|
||||||
@mousemove="touchMove"
|
|
||||||
@mouseup="touchEnd"
|
|
||||||
@touchstart="touchStart"
|
|
||||||
@touchmove="touchMove"
|
|
||||||
@touchend="touchEnd">
|
|
||||||
</view>
|
|
||||||
<canvas v-if="isOffscreenCanvas" :style="offscreenStyle" :canvas-id="offscreenCanvasId"></canvas>
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef APP-NVUE -->
|
|
||||||
<web-view
|
|
||||||
class="lime-echart__canvas"
|
|
||||||
:id="canvasId"
|
|
||||||
:style="canvasStyle"
|
|
||||||
:webview-styles="webviewStyles"
|
|
||||||
ref="webview"
|
|
||||||
src="/uni_modules/lime-echart/static/uvue.html?v=1"
|
|
||||||
@pagefinish="finished = true"
|
|
||||||
@onPostMessage="onMessage"
|
|
||||||
></web-view>
|
|
||||||
<!-- #endif -->
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// @ts-nocheck
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
import {Canvas, setCanvasCreator, dispatch} from './canvas';
|
|
||||||
import {wrapTouch, convertTouchesToArray, devicePixelRatio ,sleep, canIUseCanvas2d, getRect, getDeviceInfo} from './utils';
|
|
||||||
// #endif
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
import { base64ToPath, sleep } from './utils';
|
|
||||||
import {Echarts} from './nvue'
|
|
||||||
// #endif
|
|
||||||
const charts = {}
|
|
||||||
const echartsObj = {}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* LimeChart 图表
|
|
||||||
* @description 全端兼容的eCharts
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=4899
|
|
||||||
|
|
||||||
* @property {String} customStyle 自定义样式
|
|
||||||
* @property {String} type 指定 canvas 类型
|
|
||||||
* @value 2d 使用canvas 2d,部分小程序支持
|
|
||||||
* @value '' 使用原生canvas,会有层级问题
|
|
||||||
* @value bottom right 不缩放图片,只显示图片的右下边区域
|
|
||||||
* @property {Boolean} isDisableScroll
|
|
||||||
* @property {number} beforeDelay = [30] 延迟初始化 (毫秒)
|
|
||||||
* @property {Boolean} enableHover PC端使用鼠标悬浮
|
|
||||||
|
|
||||||
* @event {Function} finished 加载完成触发
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'lime-echart',
|
|
||||||
props: {
|
|
||||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: '2d'
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
webviewStyles: Object,
|
|
||||||
// hybrid: Boolean,
|
|
||||||
// #endif
|
|
||||||
customStyle: String,
|
|
||||||
isDisableScroll: Boolean,
|
|
||||||
isClickable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
enableHover: Boolean,
|
|
||||||
beforeDelay: {
|
|
||||||
type: Number,
|
|
||||||
default: 30
|
|
||||||
},
|
|
||||||
landscape: Boolean
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
|
||||||
use2dCanvas: true,
|
|
||||||
// #endif
|
|
||||||
// #ifndef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
|
||||||
use2dCanvas: false,
|
|
||||||
// #endif
|
|
||||||
ariaLabel: '图表',
|
|
||||||
width: null,
|
|
||||||
height: null,
|
|
||||||
nodeWidth: null,
|
|
||||||
nodeHeight: null,
|
|
||||||
// canvasNode: null,
|
|
||||||
config: {},
|
|
||||||
inited: false,
|
|
||||||
finished: false,
|
|
||||||
file: '',
|
|
||||||
platform: '',
|
|
||||||
isPC: false,
|
|
||||||
isDown: false,
|
|
||||||
isOffscreenCanvas: false,
|
|
||||||
offscreenWidth: 0,
|
|
||||||
offscreenHeight: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
rootStyle() {
|
|
||||||
if(this.landscape) {
|
|
||||||
return `transform: translate(-50%,-50%) rotate(90deg); top:50%; left:50%;`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
canvasId() {
|
|
||||||
return `lime-echart${this._ && this._.uid || this._uid}`
|
|
||||||
},
|
|
||||||
offscreenCanvasId() {
|
|
||||||
return `${this.canvasId}_offscreen`
|
|
||||||
},
|
|
||||||
offscreenStyle() {
|
|
||||||
return `width:${this.offscreenWidth}px;height: ${this.offscreenHeight}px; position: fixed; left: 99999px; background: red`
|
|
||||||
},
|
|
||||||
canvasStyle() {
|
|
||||||
return this.rootStyle + (this.width && this.height ? ('width:' + this.width + 'px;height:' + this.height + 'px') : '')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// #ifndef VUE3
|
|
||||||
beforeDestroy() {
|
|
||||||
this.clear()
|
|
||||||
this.dispose()
|
|
||||||
// #ifdef H5
|
|
||||||
if(this.isPC) {
|
|
||||||
document.removeEventListener('mousewheel', this.mousewheel)
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
// #ifdef VUE3
|
|
||||||
beforeUnmount() {
|
|
||||||
this.clear()
|
|
||||||
this.dispose()
|
|
||||||
// #ifdef H5
|
|
||||||
if(this.isPC) {
|
|
||||||
document.removeEventListener('mousewheel', this.mousewheel)
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
created() {
|
|
||||||
// #ifdef H5
|
|
||||||
if(!('ontouchstart' in window)) {
|
|
||||||
this.isPC = true
|
|
||||||
document.addEventListener('mousewheel', this.mousewheel)
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
|
||||||
// const { platform } = uni.getSystemInfoSync();
|
|
||||||
const { platform } = getDeviceInfo();
|
|
||||||
this.isPC = /windows/i.test(platform)
|
|
||||||
// #endif
|
|
||||||
this.use2dCanvas = this.type === '2d' && canIUseCanvas2d()
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$emit('finished')
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
onMessage(e) {
|
|
||||||
const detail = e?.detail?.data[0] || null;
|
|
||||||
const data = detail?.data
|
|
||||||
const key = detail?.event
|
|
||||||
const options = data?.options
|
|
||||||
const event = data?.event
|
|
||||||
const file = detail?.file
|
|
||||||
if (key == 'log' && data) {
|
|
||||||
console.log(data)
|
|
||||||
}
|
|
||||||
if(event) {
|
|
||||||
this.chart.dispatchAction(event.replace(/"/g,''), options)
|
|
||||||
}
|
|
||||||
if(file) {
|
|
||||||
thie.file = file
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
setChart(callback) {
|
|
||||||
if(!this.chart) {
|
|
||||||
console.warn(`组件还未初始化,请先使用 init`)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if(typeof callback === 'function' && this.chart) {
|
|
||||||
callback(this.chart);
|
|
||||||
}
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
if(typeof callback === 'function') {
|
|
||||||
this.$refs.webview.evalJs(`setChart(${JSON.stringify(callback.toString())}, ${JSON.stringify(this.chart.options)})`);
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
setOption() {
|
|
||||||
if (!this.chart || !this.chart.setOption) {
|
|
||||||
console.warn(`组件还未初始化,请先使用 init`)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.chart.setOption(...arguments);
|
|
||||||
},
|
|
||||||
showLoading() {
|
|
||||||
if(this.chart) {
|
|
||||||
this.chart.showLoading(...arguments)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hideLoading() {
|
|
||||||
if(this.chart) {
|
|
||||||
this.chart.hideLoading()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
clear() {
|
|
||||||
if(this.chart) {
|
|
||||||
this.chart.clear()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dispose() {
|
|
||||||
if(this.chart) {
|
|
||||||
this.chart.dispose()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
resize(size) {
|
|
||||||
if(size && size.width && size.height) {
|
|
||||||
this.height = size.height
|
|
||||||
this.width = size.width
|
|
||||||
if(this.chart) {this.chart.resize(size)}
|
|
||||||
} else {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
uni.createSelectorQuery()
|
|
||||||
.in(this)
|
|
||||||
.select(`.lime-echart`)
|
|
||||||
.boundingClientRect()
|
|
||||||
.exec(res => {
|
|
||||||
if (res) {
|
|
||||||
let { width, height } = res[0];
|
|
||||||
this.width = width = width || 300;
|
|
||||||
this.height = height = height || 300;
|
|
||||||
this.chart.resize({width, height})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
canvasToTempFilePath(args = {}) {
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
const { use2dCanvas, canvasId } = this;
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const copyArgs = Object.assign({
|
|
||||||
canvasId,
|
|
||||||
success: resolve,
|
|
||||||
fail: reject
|
|
||||||
}, args);
|
|
||||||
if (use2dCanvas) {
|
|
||||||
delete copyArgs.canvasId;
|
|
||||||
copyArgs.canvas = this.canvasNode;
|
|
||||||
}
|
|
||||||
uni.canvasToTempFilePath(copyArgs, this);
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
this.file = ''
|
|
||||||
this.$refs.webview.evalJs(`canvasToTempFilePath()`);
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
this.$watch('file', async (file) => {
|
|
||||||
if(file) {
|
|
||||||
const tempFilePath = await base64ToPath(file)
|
|
||||||
resolve(args.success({tempFilePath}))
|
|
||||||
} else {
|
|
||||||
reject(args.fail({error: ``}))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
async init(echarts, ...args) {
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
if(args && args.length == 0 && !echarts) {
|
|
||||||
console.error('缺少参数:init(echarts, theme?:string, opts?: object, callback?: function)')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
let theme=null,opts={},callback;
|
|
||||||
|
|
||||||
Array.from(arguments).forEach(item => {
|
|
||||||
if(typeof item === 'function') {
|
|
||||||
callback = item
|
|
||||||
}
|
|
||||||
if(['string'].includes(typeof item)) {
|
|
||||||
theme = item
|
|
||||||
}
|
|
||||||
if(typeof item === 'object') {
|
|
||||||
opts = item
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if(this.beforeDelay) {
|
|
||||||
await sleep(this.beforeDelay)
|
|
||||||
}
|
|
||||||
let config = await this.getContext();
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
setCanvasCreator(echarts, config)
|
|
||||||
try {
|
|
||||||
this.chart = echarts.init(config.canvas, theme, Object.assign({}, config, opts))
|
|
||||||
if(typeof callback === 'function') {
|
|
||||||
callback(this.chart)
|
|
||||||
} else {
|
|
||||||
return this.chart
|
|
||||||
}
|
|
||||||
} catch(e) {
|
|
||||||
console.error(e.messges)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
this.chart = new Echarts(this.$refs.webview)
|
|
||||||
this.$refs.webview.evalJs(`init(null, null, ${JSON.stringify(opts)}, ${theme})`)
|
|
||||||
if(callback) {
|
|
||||||
callback(this.chart)
|
|
||||||
} else {
|
|
||||||
return this.chart
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
getContext() {
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
if(this.finished) {
|
|
||||||
return Promise.resolve(this.finished)
|
|
||||||
}
|
|
||||||
return new Promise(resolve => {
|
|
||||||
this.$watch('finished', (val) => {
|
|
||||||
if(val) {
|
|
||||||
resolve(this.finished)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
return getRect(`#${this.canvasId}`, {context: this, type: this.use2dCanvas ? 'fields': 'boundingClientRect'}).then(res => {
|
|
||||||
if(res) {
|
|
||||||
let dpr = devicePixelRatio
|
|
||||||
let {width, height, node} = res
|
|
||||||
let canvas;
|
|
||||||
this.width = width = width || 300;
|
|
||||||
this.height = height = height || 300;
|
|
||||||
if(node) {
|
|
||||||
const ctx = node.getContext('2d');
|
|
||||||
canvas = new Canvas(ctx, this, true, node);
|
|
||||||
this.canvasNode = node
|
|
||||||
} else {
|
|
||||||
// #ifdef MP-TOUTIAO
|
|
||||||
dpr = !this.isPC ? devicePixelRatio : 1// 1.25
|
|
||||||
// #endif
|
|
||||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
|
||||||
dpr = this.isPC ? devicePixelRatio : 1
|
|
||||||
// #endif
|
|
||||||
// #ifdef MP-ALIPAY || MP-LARK
|
|
||||||
dpr = devicePixelRatio
|
|
||||||
// #endif
|
|
||||||
// #ifdef WEB
|
|
||||||
dpr = 1
|
|
||||||
// #endif
|
|
||||||
this.rect = res
|
|
||||||
this.nodeWidth = width * dpr;
|
|
||||||
this.nodeHeight = height * dpr;
|
|
||||||
const ctx = uni.createCanvasContext(this.canvasId, this);
|
|
||||||
canvas = new Canvas(ctx, this, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { canvas, width, height, devicePixelRatio: dpr, node };
|
|
||||||
} else {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
getRelative(e, touches) {
|
|
||||||
let { clientX, clientY } = e
|
|
||||||
if(!(clientX && clientY) && touches && touches[0]) {
|
|
||||||
clientX = touches[0].clientX
|
|
||||||
clientY = touches[0].clientY
|
|
||||||
}
|
|
||||||
return {x: clientX - this.rect.left, y: clientY - this.rect.top, wheelDelta: e.wheelDelta || 0}
|
|
||||||
},
|
|
||||||
getTouch(e, touches) {
|
|
||||||
const {x} = touches && touches[0] || {}
|
|
||||||
const touch = x ? touches[0] : this.getRelative(e, touches);
|
|
||||||
if(this.landscape) {
|
|
||||||
[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
|
||||||
}
|
|
||||||
return touch;
|
|
||||||
},
|
|
||||||
touchStart(e) {
|
|
||||||
this.isDown = true
|
|
||||||
const next = () => {
|
|
||||||
const touches = convertTouchesToArray(e.touches)
|
|
||||||
if(this.chart) {
|
|
||||||
const touch = this.getTouch(e, touches)
|
|
||||||
this.startX = touch.x
|
|
||||||
this.startY = touch.y
|
|
||||||
this.startT = new Date()
|
|
||||||
const handler = this.chart.getZr().handler;
|
|
||||||
dispatch.call(handler, 'mousedown', touch)
|
|
||||||
dispatch.call(handler, 'mousemove', touch)
|
|
||||||
handler.processGesture(wrapTouch(e), 'start');
|
|
||||||
clearTimeout(this.endTimer);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
if(this.isPC) {
|
|
||||||
getRect(`#${this.canvasId}`, {context: this}).then(res => {
|
|
||||||
this.rect = res
|
|
||||||
next()
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
next()
|
|
||||||
},
|
|
||||||
touchMove(e) {
|
|
||||||
if(this.isPC && this.enableHover && !this.isDown) {this.isDown = true}
|
|
||||||
const touches = convertTouchesToArray(e.touches)
|
|
||||||
if (this.chart && this.isDown) {
|
|
||||||
const handler = this.chart.getZr().handler;
|
|
||||||
dispatch.call(handler, 'mousemove', this.getTouch(e, touches))
|
|
||||||
handler.processGesture(wrapTouch(e), 'change');
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
touchEnd(e) {
|
|
||||||
this.isDown = false
|
|
||||||
if (this.chart) {
|
|
||||||
const touches = convertTouchesToArray(e.changedTouches)
|
|
||||||
const {x} = touches && touches[0] || {}
|
|
||||||
const touch = (x ? touches[0] : this.getRelative(e, touches)) || {};
|
|
||||||
if(this.landscape) {
|
|
||||||
[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
|
||||||
}
|
|
||||||
const handler = this.chart.getZr().handler;
|
|
||||||
const isClick = Math.abs(touch.x - this.startX) < 10 && new Date() - this.startT < 200;
|
|
||||||
dispatch.call(handler, 'mouseup', touch)
|
|
||||||
handler.processGesture(wrapTouch(e), 'end');
|
|
||||||
if(isClick) {
|
|
||||||
dispatch.call(handler, 'click', touch)
|
|
||||||
} else {
|
|
||||||
this.endTimer = setTimeout(() => {
|
|
||||||
dispatch.call(handler, 'mousemove', {x: 999999999,y: 999999999});
|
|
||||||
dispatch.call(handler, 'mouseup', {x: 999999999,y: 999999999});
|
|
||||||
},50)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
// #ifdef H5
|
|
||||||
mousewheel(e){
|
|
||||||
if(this.chart) {
|
|
||||||
// dispatch.call(this.chart.getZr().handler, 'mousewheel', this.getTouch(e))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.lime-echart {
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
flex: 1;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
.lime-echart__canvas {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
flex: 1;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
.lime-echart__mask {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
/* #endif */
|
|
||||||
</style>
|
|
@ -1,51 +0,0 @@
|
|||||||
export class Echarts {
|
|
||||||
eventMap = new Map()
|
|
||||||
constructor(webview) {
|
|
||||||
this.webview = webview
|
|
||||||
this.options = null
|
|
||||||
}
|
|
||||||
setOption() {
|
|
||||||
this.options = arguments
|
|
||||||
this.webview.evalJs(`setOption(${JSON.stringify(arguments)})`);
|
|
||||||
}
|
|
||||||
getOption() {
|
|
||||||
return this.options
|
|
||||||
}
|
|
||||||
showLoading() {
|
|
||||||
this.webview.evalJs(`showLoading(${JSON.stringify(arguments)})`);
|
|
||||||
}
|
|
||||||
hideLoading() {
|
|
||||||
this.webview.evalJs(`hideLoading()`);
|
|
||||||
}
|
|
||||||
clear() {
|
|
||||||
this.webview.evalJs(`clear()`);
|
|
||||||
}
|
|
||||||
dispose() {
|
|
||||||
this.webview.evalJs(`dispose()`);
|
|
||||||
}
|
|
||||||
resize(size) {
|
|
||||||
if(size) {
|
|
||||||
this.webview.evalJs(`resize(${JSON.stringify(size)})`);
|
|
||||||
} else {
|
|
||||||
this.webview.evalJs(`resize()`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
on(type, ...args) {
|
|
||||||
const query = args[0]
|
|
||||||
const useQuery = query && typeof query != 'function'
|
|
||||||
const param = useQuery ? [type, query] : [type]
|
|
||||||
const key = `${type}${useQuery ? JSON.stringify(query): '' }`
|
|
||||||
const callback = useQuery ? args[1]: args[0]
|
|
||||||
if(typeof callback == 'function'){
|
|
||||||
this.eventMap.set(key, callback)
|
|
||||||
}
|
|
||||||
this.webview.evalJs(`on(${JSON.stringify(param)})`);
|
|
||||||
console.warn('nvue 暂不支持事件')
|
|
||||||
}
|
|
||||||
dispatchAction(type, options){
|
|
||||||
const handler = this.eventMap.get(type)
|
|
||||||
if(handler){
|
|
||||||
handler(options)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,190 +0,0 @@
|
|||||||
// @ts-nocheck
|
|
||||||
/**
|
|
||||||
* 获取设备基础信息
|
|
||||||
*
|
|
||||||
* @see [uni.getDeviceInfo](https://uniapp.dcloud.net.cn/api/system/getDeviceInfo.html)
|
|
||||||
*/
|
|
||||||
export function getDeviceInfo() {
|
|
||||||
if (uni.getDeviceInfo && uni.canIUse('getDeviceInfo')) {
|
|
||||||
return uni.getDeviceInfo();
|
|
||||||
} else {
|
|
||||||
return uni.getSystemInfoSync();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取窗口信息
|
|
||||||
*
|
|
||||||
* @see [uni.getWindowInfo](https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html)
|
|
||||||
*/
|
|
||||||
export function getWindowInfo() {
|
|
||||||
if (uni.getWindowInfo && uni.canIUse('getWindowInfo')) {
|
|
||||||
return uni.getWindowInfo();
|
|
||||||
} else {
|
|
||||||
return uni.getSystemInfoSync();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取APP基础信息
|
|
||||||
*
|
|
||||||
* @see [uni.getAppBaseInfo](https://uniapp.dcloud.net.cn/api/system/getAppBaseInfo.html)
|
|
||||||
*/
|
|
||||||
export function getAppBaseInfo() {
|
|
||||||
if (uni.getAppBaseInfo && uni.canIUse('getAppBaseInfo')) {
|
|
||||||
return uni.getAppBaseInfo();
|
|
||||||
} else {
|
|
||||||
return uni.getSystemInfoSync();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
// 计算版本
|
|
||||||
export function compareVersion(v1, v2) {
|
|
||||||
v1 = v1.split('.')
|
|
||||||
v2 = v2.split('.')
|
|
||||||
const len = Math.max(v1.length, v2.length)
|
|
||||||
while (v1.length < len) {
|
|
||||||
v1.push('0')
|
|
||||||
}
|
|
||||||
while (v2.length < len) {
|
|
||||||
v2.push('0')
|
|
||||||
}
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
const num1 = parseInt(v1[i], 10)
|
|
||||||
const num2 = parseInt(v2[i], 10)
|
|
||||||
|
|
||||||
if (num1 > num2) {
|
|
||||||
return 1
|
|
||||||
} else if (num1 < num2) {
|
|
||||||
return -1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
// const systemInfo = uni.getSystemInfoSync();
|
|
||||||
|
|
||||||
function gte(version) {
|
|
||||||
// 截止 2023-03-22 mac pc小程序不支持 canvas 2d
|
|
||||||
// let {
|
|
||||||
// SDKVersion,
|
|
||||||
// platform
|
|
||||||
// } = systemInfo;
|
|
||||||
const { platform } = getDeviceInfo();
|
|
||||||
let { SDKVersion } = getAppBaseInfo();
|
|
||||||
// #ifdef MP-ALIPAY
|
|
||||||
SDKVersion = my.SDKVersion
|
|
||||||
// #endif
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
return platform !== 'mac' && compareVersion(SDKVersion, version) >= 0;
|
|
||||||
// #endif
|
|
||||||
return compareVersion(SDKVersion, version) >= 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export function canIUseCanvas2d() {
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
return gte('2.9.0');
|
|
||||||
// #endif
|
|
||||||
// #ifdef MP-ALIPAY
|
|
||||||
return gte('2.7.0');
|
|
||||||
// #endif
|
|
||||||
// #ifdef MP-TOUTIAO
|
|
||||||
return gte('1.78.0');
|
|
||||||
// #endif
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
export function convertTouchesToArray(touches) {
|
|
||||||
// 如果 touches 是一个数组,则直接返回它
|
|
||||||
if (Array.isArray(touches)) {
|
|
||||||
return touches;
|
|
||||||
}
|
|
||||||
// 如果touches是一个对象,则转换为数组
|
|
||||||
if (typeof touches === 'object' && touches !== null) {
|
|
||||||
return Object.values(touches);
|
|
||||||
}
|
|
||||||
// 对于其他类型,直接返回它
|
|
||||||
return touches;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function wrapTouch(event) {
|
|
||||||
event.touches = convertTouchesToArray(event.touches)
|
|
||||||
for (let i = 0; i < event.touches.length; ++i) {
|
|
||||||
const touch = event.touches[i];
|
|
||||||
touch.offsetX = touch.x;
|
|
||||||
touch.offsetY = touch.y;
|
|
||||||
}
|
|
||||||
return event;
|
|
||||||
}
|
|
||||||
// export const devicePixelRatio = uni.getSystemInfoSync().pixelRatio
|
|
||||||
export const devicePixelRatio = getWindowInfo().pixelRatio;
|
|
||||||
// #endif
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
export function base64ToPath(base64) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
|
||||||
const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
|
|
||||||
bitmap.loadBase64Data(base64, () => {
|
|
||||||
if (!format) {
|
|
||||||
reject(new Error('ERROR_BASE64SRC_PARSE'))
|
|
||||||
}
|
|
||||||
const time = new Date().getTime();
|
|
||||||
const filePath = `_doc/uniapp_temp/${time}.${format}`
|
|
||||||
|
|
||||||
bitmap.save(filePath, {},
|
|
||||||
() => {
|
|
||||||
bitmap.clear()
|
|
||||||
resolve(filePath)
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
bitmap.clear()
|
|
||||||
console.error(`${JSON.stringify(error)}`)
|
|
||||||
reject(error)
|
|
||||||
})
|
|
||||||
}, (error) => {
|
|
||||||
bitmap.clear()
|
|
||||||
console.error(`${JSON.stringify(error)}`)
|
|
||||||
reject(error)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
|
|
||||||
export function sleep(time) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
resolve(true)
|
|
||||||
}, time)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export function getRect(selector, options = {}) {
|
|
||||||
const typeDefault = 'boundingClientRect'
|
|
||||||
const {
|
|
||||||
context,
|
|
||||||
type = typeDefault
|
|
||||||
} = options
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const dom = uni.createSelectorQuery().in(context).select(selector);
|
|
||||||
const result = (rect) => {
|
|
||||||
if (rect) {
|
|
||||||
resolve(rect)
|
|
||||||
} else {
|
|
||||||
reject()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (type == typeDefault) {
|
|
||||||
dom[type](result).exec()
|
|
||||||
} else {
|
|
||||||
dom[type]({
|
|
||||||
node: true,
|
|
||||||
size: true,
|
|
||||||
rect: true
|
|
||||||
}, result).exec()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
@ -1,133 +0,0 @@
|
|||||||
// @ts-nocheck
|
|
||||||
// #ifdef APP
|
|
||||||
type EchartsEventHandler = (event: UTSJSONObject)=>void
|
|
||||||
// type EchartsTempResolve = (obj : UTSJSONObject) => void
|
|
||||||
// type EchartsTempOptions = UTSJSONObject
|
|
||||||
export class Echarts {
|
|
||||||
options: UTSJSONObject = {} as UTSJSONObject
|
|
||||||
context: UniWebViewElement
|
|
||||||
eventMap: Map<string, EchartsEventHandler> = new Map()
|
|
||||||
private temp: UTSJSONObject[] = []
|
|
||||||
constructor(context: UniWebViewElement){
|
|
||||||
this.context = context
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
init(){
|
|
||||||
this.context.evalJS(`init(null, null, ${JSON.stringify({})})`)
|
|
||||||
|
|
||||||
this.context.addEventListener('message', (e : UniWebViewMessageEvent) => {
|
|
||||||
// event.stopPropagation()
|
|
||||||
// event.preventDefault()
|
|
||||||
|
|
||||||
const detail = e.detail.data[0]
|
|
||||||
const file = detail.getString('file')
|
|
||||||
const data = detail.get('data')
|
|
||||||
const key = detail.getString('event')
|
|
||||||
const options = typeof data == 'object' ? (data as UTSJSONObject).getJSON('options'): null
|
|
||||||
const event = typeof data == 'object' ? (data as UTSJSONObject).getString('event'): null
|
|
||||||
if (key == 'log' && data != null) {
|
|
||||||
console.log(data)
|
|
||||||
}
|
|
||||||
if (event != null && options != null) {
|
|
||||||
this.dispatchAction(event.replace(/"/g,''), options)
|
|
||||||
}
|
|
||||||
if(file != null){
|
|
||||||
while (this.temp.length > 0) {
|
|
||||||
const opt = this.temp.pop()
|
|
||||||
const success = opt?.get('success')
|
|
||||||
if(typeof success == 'function'){
|
|
||||||
success as (res: UTSJSONObject) => void
|
|
||||||
success({tempFilePath: file})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
setOption(option: UTSJSONObject){
|
|
||||||
this.options = option;
|
|
||||||
this.context.evalJS(`setOption(${JSON.stringify([option])})`)
|
|
||||||
}
|
|
||||||
setOption(option: UTSJSONObject, notMerge: boolean = false, lazyUpdate: boolean = false){
|
|
||||||
this.options = option;
|
|
||||||
this.context.evalJS(`setOption(${JSON.stringify([option, notMerge, lazyUpdate])})`)
|
|
||||||
}
|
|
||||||
setOption(option: UTSJSONObject, notMerge: UTSJSONObject){
|
|
||||||
this.options = option;
|
|
||||||
this.context.evalJS(`setOption(${JSON.stringify([option, notMerge])})`)
|
|
||||||
}
|
|
||||||
getOption(): UTSJSONObject {
|
|
||||||
return this.options
|
|
||||||
}
|
|
||||||
showLoading(){
|
|
||||||
this.context.evalJS(`showLoading(${JSON.stringify([] as any[])})`);
|
|
||||||
}
|
|
||||||
showLoading(type: string, opts: UTSJSONObject){
|
|
||||||
this.context.evalJS(`showLoading(${JSON.stringify([type, opts])})`);
|
|
||||||
}
|
|
||||||
hideLoading(){
|
|
||||||
this.context.evalJS(`hideLoading()`);
|
|
||||||
}
|
|
||||||
clear(){
|
|
||||||
this.context.evalJS(`clear()`);
|
|
||||||
}
|
|
||||||
dispose(){
|
|
||||||
this.context.evalJS(`dispose()`);
|
|
||||||
}
|
|
||||||
resize(size:UTSJSONObject){
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.context.evalJS(`resize(${JSON.stringify(size)})`);
|
|
||||||
},0)
|
|
||||||
}
|
|
||||||
resize(){
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.context.evalJS(`resize()`);
|
|
||||||
},10)
|
|
||||||
|
|
||||||
}
|
|
||||||
on(type:string, query: any, callback: EchartsEventHandler) {
|
|
||||||
const key = `${type}${JSON.stringify(query)}`
|
|
||||||
if(typeof callback == 'function'){
|
|
||||||
this.eventMap.set(key, callback)
|
|
||||||
}
|
|
||||||
this.context.evalJS(`on(${JSON.stringify([type, query])})`);
|
|
||||||
console.warn('uvue 暂不支持事件')
|
|
||||||
}
|
|
||||||
on(type:string, callback: EchartsEventHandler) {
|
|
||||||
const key = `${type}`
|
|
||||||
if(typeof callback == 'function'){
|
|
||||||
this.eventMap.set(key, callback)
|
|
||||||
}
|
|
||||||
this.context.evalJS(`on(${JSON.stringify([type])})`);
|
|
||||||
console.warn('uvue 暂不支持事件')
|
|
||||||
}
|
|
||||||
dispatchAction(type:string, options: UTSJSONObject){
|
|
||||||
const handler = this.eventMap.get(type)
|
|
||||||
if(handler!=null){
|
|
||||||
handler(options)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
canvasToTempFilePath(opt: UTSJSONObject){
|
|
||||||
// this.context.evalJS(`on(${JSON.stringify(opt)})`);
|
|
||||||
this.context.evalJS(`canvasToTempFilePath(${JSON.stringify(opt)})`);
|
|
||||||
this.temp.push(opt)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
export class Echarts {
|
|
||||||
constructor() {}
|
|
||||||
setOption(option: UTSJSONObject): void
|
|
||||||
isDisposed(): boolean;
|
|
||||||
clear(): void;
|
|
||||||
resize(size:UTSJSONObject): void;
|
|
||||||
resize(): void;
|
|
||||||
canvasToTempFilePath(opt : UTSJSONObject): void;
|
|
||||||
dispose(): void;
|
|
||||||
showLoading(cfg?: UTSJSONObject): void;
|
|
||||||
showLoading(name?: string, cfg?: UTSJSONObject): void;
|
|
||||||
hideLoading(): void;
|
|
||||||
getZr(): any
|
|
||||||
}
|
|
||||||
// #endif
|
|
@ -1,159 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view style="width: 100%; height: 408px;">
|
|
||||||
<l-echart ref="chartRef" @finished="init"></l-echart>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showTip: false,
|
|
||||||
option: {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
// shadowBlur: 0,
|
|
||||||
textStyle: {
|
|
||||||
textShadowBlur: 0
|
|
||||||
},
|
|
||||||
renderMode: 'richText',
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '邮件营销',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [120, 132, 101, 134, 90, 230, 210]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '联盟广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [220, 182, 191, 234, 290, 330, 310]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '视频广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [150, 232, 201, 154, 190, 330, 410]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '直接访问',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [320, 332, 301, 334, 390, 330, 320]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '搜索引擎',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('lime echarts nvue')
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
const chartRef = this.$refs['chartRef']
|
|
||||||
chartRef.init(chart => {
|
|
||||||
chart.setOption(this.option);
|
|
||||||
|
|
||||||
|
|
||||||
setTimeout(()=>{
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
// shadowBlur: 0,
|
|
||||||
textStyle: {
|
|
||||||
textShadowBlur: 0
|
|
||||||
},
|
|
||||||
renderMode: 'richText',
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '邮件营销',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [120, 132, 101, 134, 90, 230, 210]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '联盟广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [220, 182, 191, 234, 290, 330, 310]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '视频广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [150, 232, 201, 154, 190, 330, 410]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '直接访问',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [320, 332, 301, 334, 390, 330, 320]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '搜索引擎',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
chart.setOption(option);
|
|
||||||
},1000)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
save() {
|
|
||||||
// this.$refs.chart.canvasToTempFilePath({
|
|
||||||
// success(res) {
|
|
||||||
// console.log('res::::', res)
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
@ -1,160 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view style="width: 100%; height: 408px;">
|
|
||||||
<l-echart ref="chartRef" @finished="init"></l-echart>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="uts" setup>
|
|
||||||
// @ts-nocheck
|
|
||||||
// #ifndef APP
|
|
||||||
import * as echarts from 'echarts/dist/echarts.esm.js'
|
|
||||||
// #endif
|
|
||||||
const chartRef = ref<LEchartComponentPublicInstance|null>(null)
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
// shadowBlur: 0,
|
|
||||||
textStyle: {
|
|
||||||
textShadowBlur: 0
|
|
||||||
},
|
|
||||||
renderMode: 'richText',
|
|
||||||
},
|
|
||||||
// formatter: async (params: any) => {
|
|
||||||
// console.log('params', params)
|
|
||||||
// return 1
|
|
||||||
// },
|
|
||||||
legend: {
|
|
||||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '邮件营销',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [120, 132, 101, 134, 90, 230, 210]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '联盟广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [220, 182, 191, 234, 290, 330, 310]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '视频广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [150, 232, 201, 154, 190, 330, 410]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '直接访问',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [320, 332, 301, 334, 390, 330, 320]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '搜索引擎',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const init = async () =>{
|
|
||||||
if(chartRef.value== null) return
|
|
||||||
// #ifdef APP
|
|
||||||
const chart = await chartRef.value!.init(null)
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
const chart = await chartRef.value!.init(echarts, null)
|
|
||||||
// #endif
|
|
||||||
chart.setOption(option)
|
|
||||||
chart.on('mouseover', function (params) {
|
|
||||||
console.log('params', params);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// setTimeout(()=> {
|
|
||||||
// const option1 = {
|
|
||||||
// tooltip: {
|
|
||||||
// trigger: 'axis',
|
|
||||||
// // shadowBlur: 0,
|
|
||||||
// textStyle: {
|
|
||||||
// textShadowBlur: 0
|
|
||||||
// },
|
|
||||||
// renderMode: 'richText',
|
|
||||||
// },
|
|
||||||
// legend: {
|
|
||||||
// data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
|
||||||
// },
|
|
||||||
// grid: {
|
|
||||||
// left: '3%',
|
|
||||||
// right: '4%',
|
|
||||||
// bottom: '3%',
|
|
||||||
// containLabel: true
|
|
||||||
// },
|
|
||||||
// xAxis: {
|
|
||||||
// type: 'category',
|
|
||||||
// boundaryGap: false,
|
|
||||||
// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
||||||
// },
|
|
||||||
// yAxis: {
|
|
||||||
// type: 'value'
|
|
||||||
// },
|
|
||||||
// series: [
|
|
||||||
// {
|
|
||||||
// name: '邮件营销',
|
|
||||||
// type: 'line',
|
|
||||||
// stack: '总量',
|
|
||||||
// data: [820, 132, 101, 134, 90, 230, 210]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '联盟广告',
|
|
||||||
// type: 'line',
|
|
||||||
// stack: '总量',
|
|
||||||
// data: [220, 182, 191, 234, 290, 330, 310]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '视频广告',
|
|
||||||
// type: 'line',
|
|
||||||
// stack: '总量',
|
|
||||||
// data: [950, 232, 201, 154, 190, 330, 410]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '直接访问',
|
|
||||||
// type: 'line',
|
|
||||||
// stack: '总量',
|
|
||||||
// data: [320, 332, 301, 334, 390, 330, 320]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '搜索引擎',
|
|
||||||
// type: 'line',
|
|
||||||
// stack: '总量',
|
|
||||||
// data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// chart.setOption(option1)
|
|
||||||
// },1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
@ -1,227 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view style="height: 750rpx; position: relative">
|
|
||||||
<l-echart ref="chart" @finished="init"></l-echart>
|
|
||||||
<view
|
|
||||||
class="customTooltips"
|
|
||||||
:style="{ left: position[0] + 'px', top: position[1] + 'px' }"
|
|
||||||
v-if="params.length && position.length && showTip"
|
|
||||||
>
|
|
||||||
<view>这是个自定的tooltips</view>
|
|
||||||
<view>{{ params[0]['axisValue'] }}</view>
|
|
||||||
<view v-for="item in params">
|
|
||||||
<view>
|
|
||||||
<text>{{ item.seriesName }}</text>
|
|
||||||
<text>{{ item.value }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// nvue 不需要引入
|
|
||||||
// #ifdef VUE2
|
|
||||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
|
||||||
// #endif
|
|
||||||
// #ifdef VUE3
|
|
||||||
// #ifdef MP
|
|
||||||
// 由于vue3 使用vite 不支持umd格式的包,小程序依然可以使用,但需要使用require
|
|
||||||
const echarts = require('../../static/echarts.min')
|
|
||||||
// #endif
|
|
||||||
// #ifndef MP
|
|
||||||
// 由于 vue3 使用vite 不支持umd格式的包,故引入npm的包
|
|
||||||
import * as echarts from 'echarts/dist/echarts.esm'
|
|
||||||
// #endif
|
|
||||||
// #endif
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showTip: false,
|
|
||||||
position: [],
|
|
||||||
params: [],
|
|
||||||
option: {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
// shadowBlur: 0,
|
|
||||||
textStyle: {
|
|
||||||
textShadowBlur: 0,
|
|
||||||
},
|
|
||||||
renderMode: 'richText',
|
|
||||||
position: (point, params, dom, rect, size) => {
|
|
||||||
// 假设自定义的tooltips尺寸
|
|
||||||
const box = [170, 170]
|
|
||||||
// 偏移
|
|
||||||
const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20
|
|
||||||
const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20
|
|
||||||
const x = point[0] + offsetX
|
|
||||||
const y = point[1] + offsetY
|
|
||||||
|
|
||||||
this.position = [x, y]
|
|
||||||
this.params = params
|
|
||||||
},
|
|
||||||
formatter: (params, ticket, callback) => {},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '邮件营销',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [120, 132, 101, 134, 90, 230, 210],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '联盟广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [220, 182, 191, 234, 290, 330, 310],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '视频广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [150, 232, 201, 154, 190, 330, 410],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '直接访问',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [320, 332, 301, 334, 390, 330, 320],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '搜索引擎',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
// init(echarts, theme?:string, opts?:{}, chart => {})
|
|
||||||
// echarts 必填, 非nvue必填,nvue不用填
|
|
||||||
// theme 可选,应用的主题,目前只支持名称,如:'dark'
|
|
||||||
// opts = { // 可选
|
|
||||||
// locale?: string // 从 `5.0.0` 开始支持
|
|
||||||
// }
|
|
||||||
// chart => {} , callback 返回图表实例
|
|
||||||
// setTimeout(()=>{
|
|
||||||
// this.$refs.chart.init(echarts, chart => {
|
|
||||||
// chart.setOption(this.option);
|
|
||||||
// });
|
|
||||||
// },300)
|
|
||||||
this.$refs.chart.init(echarts, (chart) => {
|
|
||||||
chart.setOption(this.option)
|
|
||||||
|
|
||||||
// 监听tooltip显示事件
|
|
||||||
chart.on('showTip', (params) => {
|
|
||||||
this.showTip = true
|
|
||||||
console.log('showTip::')
|
|
||||||
})
|
|
||||||
chart.on('hideTip', (params) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.showTip = false
|
|
||||||
}, 300)
|
|
||||||
})
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
// shadowBlur: 0,
|
|
||||||
textStyle: {
|
|
||||||
textShadowBlur: 0,
|
|
||||||
},
|
|
||||||
renderMode: 'richText',
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '邮件营销',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [1120, 132, 101, 134, 90, 230, 210],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '联盟广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [220, 182, 191, 234, 290, 330, 310],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '视频广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [150, 632, 201, 154, 190, 330, 410],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '直接访问',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [820, 332, 301, 334, 390, 330, 320],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '搜索引擎',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
chart.setOption(option)
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
save() {
|
|
||||||
this.$refs.chart.canvasToTempFilePath({
|
|
||||||
success(res) {
|
|
||||||
console.log('res::::', res)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.customTooltips {
|
|
||||||
position: absolute;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
padding: 20rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,91 +0,0 @@
|
|||||||
{
|
|
||||||
"id": "lime-echart",
|
|
||||||
"displayName": "echarts",
|
|
||||||
"version": "0.9.8",
|
|
||||||
"description": "echarts 全端兼容,一款使echarts图表能跑在uniapp各端中的插件, 支持uniapp/uniappx(web,ios,安卓)",
|
|
||||||
"keywords": [
|
|
||||||
"echarts",
|
|
||||||
"canvas",
|
|
||||||
"图表",
|
|
||||||
"可视化"
|
|
||||||
],
|
|
||||||
"repository": "https://gitee.com/liangei/lime-echart",
|
|
||||||
"engines": {
|
|
||||||
"HBuilderX": "^3.6.4"
|
|
||||||
},
|
|
||||||
"dcloudext": {
|
|
||||||
"sale": {
|
|
||||||
"regular": {
|
|
||||||
"price": "0.00"
|
|
||||||
},
|
|
||||||
"sourcecode": {
|
|
||||||
"price": "0.00"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contact": {
|
|
||||||
"qq": ""
|
|
||||||
},
|
|
||||||
"declaration": {
|
|
||||||
"ads": "无",
|
|
||||||
"data": "无",
|
|
||||||
"permissions": "无"
|
|
||||||
},
|
|
||||||
"npmurl": "",
|
|
||||||
"type": "component-vue"
|
|
||||||
},
|
|
||||||
"uni_modules": {
|
|
||||||
"dependencies": [],
|
|
||||||
"encrypt": [],
|
|
||||||
"platforms": {
|
|
||||||
"cloud": {
|
|
||||||
"tcb": "y",
|
|
||||||
"aliyun": "y",
|
|
||||||
"alipay": "n"
|
|
||||||
},
|
|
||||||
"client": {
|
|
||||||
"App": {
|
|
||||||
"app-vue": "y",
|
|
||||||
"app-nvue": "y",
|
|
||||||
"app-uvue": "y",
|
|
||||||
"app-harmony": "u"
|
|
||||||
},
|
|
||||||
"H5-mobile": {
|
|
||||||
"Safari": "y",
|
|
||||||
"Android Browser": "y",
|
|
||||||
"微信浏览器(Android)": "y",
|
|
||||||
"QQ浏览器(Android)": "y"
|
|
||||||
},
|
|
||||||
"H5-pc": {
|
|
||||||
"Chrome": "u",
|
|
||||||
"IE": "u",
|
|
||||||
"Edge": "u",
|
|
||||||
"Firefox": "u",
|
|
||||||
"Safari": "u"
|
|
||||||
},
|
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "y",
|
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y",
|
|
||||||
"钉钉": "u",
|
|
||||||
"快手": "u",
|
|
||||||
"飞书": "u",
|
|
||||||
"京东": "u"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "u",
|
|
||||||
"联盟": "u"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"echarts": "^5.4.1",
|
|
||||||
"zrender": "^5.4.3"
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,407 +0,0 @@
|
|||||||
# echarts 图表 <span style="font-size:16px;">👑👑👑👑👑 <span style="background:#ff9d00;padding:2px 4px;color:#fff;font-size:10px;border-radius: 3px;">全端</span></span>
|
|
||||||
> 一个基于 JavaScript 的开源可视化图表库 [查看更多](https://limeui.qcoon.cn/#/echart) <br>
|
|
||||||
> 基于 echarts 做了兼容处理,更多示例请访问 [uni示例](https://limeui.qcoon.cn/#/echart-example) | [官方示例](https://echarts.apache.org/examples/zh/index.html) <br>
|
|
||||||
|
|
||||||
|
|
||||||
## 平台兼容
|
|
||||||
|
|
||||||
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
|
|
||||||
| --- | ---------- | ------------ | ---------- | ---------- | --------- | ---- |
|
|
||||||
| √ | √ | √ | √ | √ | √ | √ |
|
|
||||||
|
|
||||||
|
|
||||||
## 安装
|
|
||||||
- 第一步:在市场导入 [百度图表](https://ext.dcloud.net.cn/plugin?id=4899)
|
|
||||||
- 第二步:选择插件依赖:<br>
|
|
||||||
1、可以选插件内的`echarts`包或自定义包,自定义包[下载地址](https://echarts.apache.org/zh/builder.html)<br>
|
|
||||||
2、或者使用`npm`安装`echarts`
|
|
||||||
|
|
||||||
**注意**
|
|
||||||
* 🔔 echarts 5.3.0及以上
|
|
||||||
* 🔔 如果是 `cli` 项目请下载插件到`src`目录下的`uni_modules`,没有这个目录就创建一个
|
|
||||||
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### Vue2
|
|
||||||
- 引入依赖,可以是插件内提供或自己下载的[自定义包](https://echarts.apache.org/zh/builder.html),也可以是`npm`包
|
|
||||||
|
|
||||||
```html
|
|
||||||
<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
// 插件内的 三选一
|
|
||||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
|
||||||
// 自定义的 三选一 下载后放入项目的路径
|
|
||||||
import * as echarts from 'xxx/echarts.min'
|
|
||||||
// npm包 三选一 需要在控制台 输入命令:npm install echarts
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
option: {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
|
||||||
confine: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['热度', '正面', '负面']
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 20,
|
|
||||||
right: 20,
|
|
||||||
bottom: 15,
|
|
||||||
top: 40,
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#666666'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
axisTick: { show: false },
|
|
||||||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#666666'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '热度',
|
|
||||||
type: 'bar',
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
position: 'inside'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [300, 270, 340, 344, 300, 320, 310],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '正面',
|
|
||||||
type: 'bar',
|
|
||||||
stack: '总量',
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [120, 102, 141, 174, 190, 250, 220]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '负面',
|
|
||||||
type: 'bar',
|
|
||||||
stack: '总量',
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
position: 'left'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [-20, -32, -21, -34, -90, -130, -110]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
// 组件能被调用必须是组件的节点已经被渲染到页面上
|
|
||||||
methods: {
|
|
||||||
async init() {
|
|
||||||
// chart 图表实例不能存在data里
|
|
||||||
const chart = await this.$refs.chartRef.init(echarts);
|
|
||||||
chart.setOption(this.option)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Vue3
|
|
||||||
- 小程序可以使用`require`引入插件内提供或自己下载的[自定义包](https://echarts.apache.org/zh/builder.html)
|
|
||||||
- `require`仅支持相对路径,不支持路径别名
|
|
||||||
- 非小程序使用 `npm` 包
|
|
||||||
|
|
||||||
|
|
||||||
```html
|
|
||||||
<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef"></l-echart></view>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
// 小程序 二选一
|
|
||||||
// 插件内的 二选一
|
|
||||||
const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
|
|
||||||
// 自定义的 二选一 下载后放入项目的路径
|
|
||||||
const echarts = require('xxx/xxx/echarts');
|
|
||||||
|
|
||||||
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
||||||
// 非小程序
|
|
||||||
// 需要在控制台 输入命令:npm install echarts
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
|
|
||||||
const chartRef = ref(null)
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
|
||||||
confine: true
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['热度', '正面', '负面']
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: 20,
|
|
||||||
right: 20,
|
|
||||||
bottom: 15,
|
|
||||||
top: 40,
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#666666'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
axisTick: { show: false },
|
|
||||||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#666666'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '热度',
|
|
||||||
type: 'bar',
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
position: 'inside'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [300, 270, 340, 344, 300, 320, 310],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '正面',
|
|
||||||
type: 'bar',
|
|
||||||
stack: '总量',
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [120, 102, 141, 174, 190, 250, 220]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '负面',
|
|
||||||
type: 'bar',
|
|
||||||
stack: '总量',
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
position: 'left'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [-20, -32, -21, -34, -90, -130, -110]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
onMounted( ()=>{
|
|
||||||
// 组件能被调用必须是组件的节点已经被渲染到页面上
|
|
||||||
setTimeout(async()=>{
|
|
||||||
if(!chartRef.value) return
|
|
||||||
const myChart = await chartRef.value.init(echarts)
|
|
||||||
myChart.setOption(option)
|
|
||||||
},300)
|
|
||||||
})
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
### Uvue
|
|
||||||
- Uvue和Nvue不需要引入`echarts`,因为它们的实现方式是`webview`
|
|
||||||
- uniapp x需要HBX 4.13以上
|
|
||||||
|
|
||||||
```html
|
|
||||||
<view style="width: 100%; height: 408px;">
|
|
||||||
<l-echart ref="chartRef" @finished="init"></l-echart>
|
|
||||||
</view>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
// @ts-nocheck
|
|
||||||
// #ifdef H5
|
|
||||||
import * as echarts from 'echarts/dist/echarts.esm.js'
|
|
||||||
// #endif
|
|
||||||
const chartRef = ref<LEchartComponentPublicInstance|null>(null);
|
|
||||||
const init = async () => {
|
|
||||||
if(chartRef.value== null) return
|
|
||||||
// #ifdef APP
|
|
||||||
const chart = await chartRef.value!.init(null)
|
|
||||||
// #endif
|
|
||||||
// #ifdef H5
|
|
||||||
const chart = await chartRef.value!.init(echarts, null)
|
|
||||||
// #endif
|
|
||||||
chart.setOption(option)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## 数据更新
|
|
||||||
- 1、使用 `ref` 可获取`setOption`设置更新
|
|
||||||
- 2、也可以拿到图表实例`chart`设置`myChart.setOption(data)`
|
|
||||||
|
|
||||||
```js
|
|
||||||
// ref
|
|
||||||
this.$refs.chart.setOption(data)
|
|
||||||
|
|
||||||
// 图表实例
|
|
||||||
myChart.setOption(data)
|
|
||||||
```
|
|
||||||
|
|
||||||
## 图表大小
|
|
||||||
- 在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。
|
|
||||||
|
|
||||||
```js
|
|
||||||
// 默认获取容器尺寸
|
|
||||||
this.$refs.chart.resize()
|
|
||||||
// 指定尺寸
|
|
||||||
this.$refs.chart.resize({width: 375, height: 375})
|
|
||||||
```
|
|
||||||
|
|
||||||
## 自定义Tooltips
|
|
||||||
- uvue\nvue 不支持
|
|
||||||
由于除H5之外都不存在dom,但又有tooltips个性化的需求,代码就不贴了,看示例吧
|
|
||||||
```
|
|
||||||
代码位于/uni_modules/lime-echart/component/lime-echart
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## 插件标签
|
|
||||||
- 默认 l-echart 为 component
|
|
||||||
- 默认 lime-echart 为 demo
|
|
||||||
```html
|
|
||||||
// 在任意地方使用可查看domo, 代码位于/uni_modules/lime-echart/component/lime-echart
|
|
||||||
<lime-echart></lime-echart>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## 常见问题
|
|
||||||
- 钉钉小程序 由于没有`measureText`,模拟的`measureText`又无法得到当前字体的`fontWeight`,故可能存在估计不精细的问题
|
|
||||||
- 微信小程序 `2d` 只支持 真机调试2.0
|
|
||||||
- 微信开发工具会出现 `canvas` 不跟随页面的情况,真机不影响
|
|
||||||
- 微信开发工具会出现 `canvas` 层级过高的问题,真机一般不受影响,可以先测只有两个元素的页面看是否会有层级问题。
|
|
||||||
- toolbox 不支持 `saveImage`
|
|
||||||
- echarts 5.3.0 的 lines 不支持 trailLength,故需设置为 `0`
|
|
||||||
- dataZoom H5不要设置 `showDetail`
|
|
||||||
- 如果微信小程序的`tooltip`文字有阴影,可能是微信的锅,临时解决方法是`tooltip.shadowBlur = 0`
|
|
||||||
- 如果钉钉小程序上传时报安全问题`Uint8Clamped`,可以向钉钉反馈是安全代码扫描把Uint8Clamped数组错误识别了,也可以在 echarts 文件修改`Uint8Clamped`
|
|
||||||
```js
|
|
||||||
// 找到这段代码把代码中`Uint8Clamped`改成`Uint8_Clamped`,再把下划线去掉,不过直接去掉`Uint8Clamped`也是可行的
|
|
||||||
// ["Int8","Uint8","Uint8Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e+"Array]"]
|
|
||||||
// 改成如下
|
|
||||||
["Int8","Uint8","Uint8_Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e.replace('_','')+"Array]"]
|
|
||||||
```
|
|
||||||
|
|
||||||
### vue3
|
|
||||||
如果您是使用 **vite + vue3** 非微信小程序可能会遇到`echarts`文件缺少`wx`判断导致无法使用或缺少`tooltip`<br>
|
|
||||||
|
|
||||||
方式一:可以在`echarts.min.js`文件开头增加以下内容,参考插件内的echart.min.js的做法
|
|
||||||
|
|
||||||
```js
|
|
||||||
let global = null
|
|
||||||
let wx = uni
|
|
||||||
```
|
|
||||||
|
|
||||||
方式二:在`vite.config.js`的`define`设置环境
|
|
||||||
|
|
||||||
```js
|
|
||||||
// 或者在`vite.config.js`的`define`设置环境
|
|
||||||
import { defineConfig } from 'vite';
|
|
||||||
import uni from '@dcloudio/vite-plugin-uni';
|
|
||||||
|
|
||||||
const define = {}
|
|
||||||
if(!["mp-weixin", "h5", "web"].includes(process.env.UNI_PLATFORM)) {
|
|
||||||
define['global'] = null
|
|
||||||
define['wx'] = 'uni'
|
|
||||||
}
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [uni()],
|
|
||||||
define
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
||||||
| --------------- | -------- | ------- | ------------ | ----- |
|
|
||||||
| custom-style | 自定义样式 | `string` | - | - |
|
|
||||||
| type | 指定 canvas 类型 | `string` | `2d` | |
|
|
||||||
| is-disable-scroll | 触摸图表时是否禁止页面滚动 | `boolean` | `false` | |
|
|
||||||
| beforeDelay | 延迟初始化 (毫秒) | `number` | `30` | |
|
|
||||||
| enableHover | PC端使用鼠标悬浮 | `boolean` | `false` | |
|
|
||||||
| landscape | 是否旋转90deg,模拟横屏效果 | `boolean` | `false` | |
|
|
||||||
|
|
||||||
## 事件
|
|
||||||
|
|
||||||
| 参数 | 说明 |
|
|
||||||
| --------------- | --------------- |
|
|
||||||
| init(echarts, chart => {}) | 初始化调用函数,第一个参数是传入`echarts`,第二个参数是回调函数,回调函数的参数是 `chart` 实例 |
|
|
||||||
| setChart(chart => {}) | 已经初始化后,请使用这个方法,是个回调函数,参数是 `chart` 实例 |
|
|
||||||
| setOption(data) | [图表配置项](https://echarts.apache.org/zh/option.html#title),用于更新 ,传递是数据 `option` |
|
|
||||||
| clear() | 清空当前实例,会移除实例中所有的组件和图表。 |
|
|
||||||
| dispose() | 销毁实例 |
|
|
||||||
| showLoading() | 显示加载 |
|
|
||||||
| hideLoading() | 隐藏加载 |
|
|
||||||
| [canvasToTempFilePath](https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath.html#canvastotempfilepath)(opt) | 用于生成图片,与官方使用方法一致,但不需要传`canvasId` |
|
|
||||||
|
|
||||||
|
|
||||||
## 打赏
|
|
||||||
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。
|
|
||||||

|
|
||||||

|
|
1
uni_modules/lime-echart/static/ecStat.min.js
vendored
1
uni_modules/lime-echart/static/ecStat.min.js
vendored
File diff suppressed because one or more lines are too long
61
uni_modules/lime-echart/static/echarts.min.js
vendored
61
uni_modules/lime-echart/static/echarts.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,177 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<title></title>
|
|
||||||
<style type="text/css">
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
.canvas {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
overflow-y: hidden;
|
|
||||||
background-color: transparent;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="canvas" id="limeChart"></div>
|
|
||||||
<script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
|
|
||||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
|
||||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
|
||||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
|
||||||
<script>
|
|
||||||
let chart = null;
|
|
||||||
let cache = [];
|
|
||||||
console.log = function() {
|
|
||||||
emit('log', {
|
|
||||||
log: arguments,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function emit(event, data) {
|
|
||||||
postMessage({
|
|
||||||
event,
|
|
||||||
data
|
|
||||||
})
|
|
||||||
cache = []
|
|
||||||
}
|
|
||||||
|
|
||||||
function postMessage(data) {
|
|
||||||
uni.webView.postMessage({
|
|
||||||
data
|
|
||||||
})
|
|
||||||
// window.__uniapp_x_.postMessage(JSON.stringify(data))
|
|
||||||
};
|
|
||||||
|
|
||||||
function stringify(key, value) {
|
|
||||||
if (typeof value === 'object' && value !== null) {
|
|
||||||
if (cache.indexOf(value) !== -1) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
cache.push(value);
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
|
|
||||||
function parse(name, callback, options) {
|
|
||||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
|
||||||
if (optionNameReg.test(callback)) {
|
|
||||||
const optionNames = callback.match(optionNameReg)
|
|
||||||
if (optionNames[1]) {
|
|
||||||
const _this = optionNames[1].split('.')[0]
|
|
||||||
window[_this] = {}
|
|
||||||
window[_this][optionNames[2]] = options
|
|
||||||
return optionNames[2]
|
|
||||||
} else {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function init(callback, options, opts, theme) {
|
|
||||||
if (!chart) {
|
|
||||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
|
||||||
|
|
||||||
if (options) {
|
|
||||||
chart.setOption(options)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function on(data) {
|
|
||||||
if (chart && data.length > 0) {
|
|
||||||
const [type, query] = data
|
|
||||||
const key = `${type}${JSON.stringify(query||'')}`
|
|
||||||
if (query) {
|
|
||||||
chart.on(type, query, function(options) {
|
|
||||||
var obj = {};
|
|
||||||
Object.keys(options).forEach(function(key) {
|
|
||||||
if (key != 'event') {
|
|
||||||
obj[key] = options[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
emit(key, {
|
|
||||||
event: key,
|
|
||||||
options: obj,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
chart.on(type, function(options) {
|
|
||||||
var obj = {};
|
|
||||||
Object.keys(options).forEach(function(key) {
|
|
||||||
if (key != 'event') {
|
|
||||||
obj[key] = options[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
emit(key, {
|
|
||||||
event: key,
|
|
||||||
options: obj,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function setChart(callback, options) {
|
|
||||||
if (!callback) return
|
|
||||||
if (chart && callback && options) {
|
|
||||||
var r = null
|
|
||||||
const name = parse('r', callback, options)
|
|
||||||
if (name) this[name] = options
|
|
||||||
eval(`r = ${callback};`)
|
|
||||||
if (r) {
|
|
||||||
r(chart)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setOption(data) {
|
|
||||||
if (chart) chart.setOption(data[0], data[1])
|
|
||||||
}
|
|
||||||
|
|
||||||
function showLoading(data) {
|
|
||||||
if (chart) chart.showLoading(data[0], data[1])
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideLoading() {
|
|
||||||
if (chart) chart.hideLoading()
|
|
||||||
}
|
|
||||||
|
|
||||||
function clear() {
|
|
||||||
if (chart) chart.clear()
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function dispose() {
|
|
||||||
if (chart) chart.dispose()
|
|
||||||
}
|
|
||||||
|
|
||||||
function resize(size) {
|
|
||||||
if (chart) chart.resize(size)
|
|
||||||
}
|
|
||||||
|
|
||||||
function canvasToTempFilePath(opt) {
|
|
||||||
if (chart) {
|
|
||||||
delete opt.success
|
|
||||||
const src = chart.getDataURL(opt)
|
|
||||||
postMessage({
|
|
||||||
// event: 'file',
|
|
||||||
file: src
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('touchmove', () => {
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<view v-if="returnCodeOrID === 'orgCode'">
|
<view v-if="returnCodeOrID === 'orgCode'">
|
||||||
<uni-data-picker v-model="selectDepartID" ref="depart" :openSearch="true" :ellipsis="true"
|
<uni-data-picker v-model="selectDepartID" ref="depart" :openSearch="true" placeholder="请选择单位code"
|
||||||
placeholder="请选择单位code" popup-title="请选择单位" :localdata="departList" @nodeclick="onnodeclick"
|
popup-title="请选择单位" :localdata="departList" @nodeclick="onnodeclick" @popupclosed="onpopupclosed"
|
||||||
@popupclosed="onpopupclosed" @change="onchange" :map="{'text':'title','value':'orgCode'}"></uni-data-picker>
|
:map="{'text':'title','value':'orgCode'}"></uni-data-picker>
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
<uni-data-picker v-model="selectDepartID" ref="depart" :openSearch="true" :ellipsis="true" placeholder="请选择单位id"
|
<uni-data-picker v-model="selectDepartID" ref="depart" :openSearch="true" placeholder="请选择单位id"
|
||||||
popup-title="请选择单位" :localdata="departList" @nodeclick="onnodeclick" @popupclosed="onpopupclosed"
|
popup-title="请选择单位" :localdata="departList" @nodeclick="onnodeclick" @popupclosed="onpopupclosed"
|
||||||
@change="onchange" :map="{'text':'title','value':'id'}"></uni-data-picker>
|
:map="{'text':'title','value':'id'}"></uni-data-picker>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@ -35,10 +35,7 @@
|
|||||||
const store = useStore()
|
const store = useStore()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
returnCodeOrID: {
|
returnCodeOrID: {type:String,default:"orgCode"}
|
||||||
type: String,
|
|
||||||
default: "orgCode"
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
let departList = ref([])
|
let departList = ref([])
|
||||||
@ -46,8 +43,6 @@
|
|||||||
let selectDepartIDS = ref([]) //选中的级联单位ID数组
|
let selectDepartIDS = ref([]) //选中的级联单位ID数组
|
||||||
let tempSelectDepartID = ref("") //临时选择的单位ID
|
let tempSelectDepartID = ref("") //临时选择的单位ID
|
||||||
|
|
||||||
let departInfo = ref({}) //"单位的全部信息"
|
|
||||||
|
|
||||||
let $emit = defineEmits(['change']);
|
let $emit = defineEmits(['change']);
|
||||||
|
|
||||||
const getDepartList = () => {
|
const getDepartList = () => {
|
||||||
@ -61,22 +56,17 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const onnodeclick = ((e) => {
|
const onnodeclick = ((e) => {
|
||||||
departInfo.value = e;
|
// console.log(e)
|
||||||
if (props.returnCodeOrID = "orgCode") {
|
if (props.returnCodeOrID = "orgCode") {
|
||||||
tempSelectDepartID.value = e.orgCode
|
tempSelectDepartID.value = e.orgCode
|
||||||
} else {
|
} else {
|
||||||
tempSelectDepartID.value = e.value
|
tempSelectDepartID.value = e.value
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
const onchange = ((e) => {
|
|
||||||
$emit('change', e.detail.value[e.detail.value.length - 1].value, {})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const onpopupclosed = ((e) => {
|
const onpopupclosed = ((e) => {
|
||||||
selectDepartID.value = tempSelectDepartID.value
|
selectDepartID.value = tempSelectDepartID.value
|
||||||
$emit('change', selectDepartID.value, departInfo)
|
$emit('change', selectDepartID.value)
|
||||||
})
|
})
|
||||||
onLoad((e) => {
|
onLoad((e) => {
|
||||||
getDepartList();
|
getDepartList();
|
||||||
|
@ -1,25 +1,5 @@
|
|||||||
# trq-depart-select
|
# trq-depart-select
|
||||||
# 1.0.1
|
|
||||||
更新,添加返回值,将整个机构对象返回父组件
|
|
||||||
```javascript
|
|
||||||
const onpopupclosed = ((e) => {
|
|
||||||
selectDepartID.value = tempSelectDepartID.value
|
|
||||||
$emit('change', selectDepartID.value, departInfo)
|
|
||||||
})
|
|
||||||
```
|
|
||||||
增加选择到最后层级触发的change时间,返回数据到父组件的功能
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const onchange = ((e) => {
|
|
||||||
$emit('change', e.detail.value[e.detail.value.length - 1].value, {})
|
|
||||||
})
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# 1.0
|
|
||||||
|
|
||||||
属性 returnCodeOrID 默认值 orgCode, 组件返回单位的orgCode, 不设置属性或设置为其他,组件返回 单位ID
|
属性 returnCodeOrID 默认值 orgCode, 组件返回单位的orgCode, 不设置属性或设置为其他,组件返回 单位ID
|
||||||
|
|
||||||
事件:change 选择内容发生变化时发生,通过emit 返回给父组件 选择单位的ID或code
|
事件:change 选择内容发生变化时发生,通过emit 返回给父组件 选择单位的ID或code
|
||||||
|
Loading…
Reference in New Issue
Block a user