画图功能添加
This commit is contained in:
pipi
leap
parent
8aca9b3442
commit
533ba3333f
|
|
@ -27,3 +27,8 @@ npm run lint
|
|||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
### 组件依赖
|
||||
```
|
||||
npm install echarts
|
||||
```
|
||||
|
|
@ -13,8 +13,10 @@
|
|||
"@heroicons/vue": "^2.1.4",
|
||||
"@vuepic/vue-datepicker": "^8.8.0",
|
||||
"axios": "^1.7.2",
|
||||
"bootstrap": "^4.3.1",
|
||||
"bootstrap-vue": "^2.23.1",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.7.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
|
|
@ -2910,6 +2912,87 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/opencollective": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@nuxt/opencollective/-/opencollective-0.3.3.tgz",
|
||||
"integrity": "sha512-6IKCd+gP0HliixqZT/p8nW3tucD6Sv/u/eR2A9X4rxT/6hXlMzA4GZQzq4d2qnBAwSwGpmKyzkyTjNjrhaA25A==",
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.0",
|
||||
"consola": "^2.15.0",
|
||||
"node-fetch": "^2.6.7"
|
||||
},
|
||||
"bin": {
|
||||
"opencollective": "bin/opencollective.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0",
|
||||
"npm": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/opencollective/node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/opencollective/node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/opencollective/node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/opencollective/node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"node_modules/@nuxt/opencollective/node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@nuxt/opencollective/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@one-ini/wasm": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/@one-ini/wasm/-/wasm-0.1.1.tgz",
|
||||
|
|
@ -5693,6 +5776,71 @@
|
|||
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/bootstrap/-/bootstrap-4.6.2.tgz",
|
||||
"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/twbs"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
}
|
||||
],
|
||||
"peerDependencies": {
|
||||
"jquery": "1.9.1 - 3",
|
||||
"popper.js": "^1.16.1"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-vue": {
|
||||
"version": "2.23.1",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz",
|
||||
"integrity": "sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@nuxt/opencollective": "^0.3.2",
|
||||
"bootstrap": "^4.6.1",
|
||||
"popper.js": "^1.16.1",
|
||||
"portal-vue": "^2.1.7",
|
||||
"vue-functional-data-merge": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-vue/node_modules/@vue/compiler-sfc": {
|
||||
"version": "2.7.16",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
|
||||
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.23.5",
|
||||
"postcss": "^8.4.14",
|
||||
"source-map": "^0.6.1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"prettier": "^1.18.2 || ^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-vue/node_modules/portal-vue": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/portal-vue/-/portal-vue-2.1.7.tgz",
|
||||
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
|
||||
"peerDependencies": {
|
||||
"vue": "^2.5.18"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-vue/node_modules/vue": {
|
||||
"version": "2.7.16",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/vue/-/vue-2.7.16.tgz",
|
||||
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
|
||||
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-sfc": "2.7.16",
|
||||
"csstype": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
|
|
@ -6346,6 +6494,11 @@
|
|||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/consola": {
|
||||
"version": "2.15.3",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/consola/-/consola-2.15.3.tgz",
|
||||
"integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw=="
|
||||
},
|
||||
"node_modules/consolidate": {
|
||||
"version": "0.15.1",
|
||||
"resolved": "https://registry.npmmirror.com/consolidate/-/consolidate-0.15.1.tgz",
|
||||
|
|
@ -7380,12 +7533,12 @@
|
|||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
|
||||
"integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
|
||||
"version": "5.5.1",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/echarts/-/echarts-5.5.1.tgz",
|
||||
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.5.0"
|
||||
"zrender": "5.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
|
|
@ -12351,6 +12504,12 @@
|
|||
"@sideway/pinpoint": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/jquery/-/jquery-3.7.1.tgz",
|
||||
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/js-beautify": {
|
||||
"version": "1.15.1",
|
||||
"resolved": "https://registry.npmmirror.com/js-beautify/-/js-beautify-1.15.1.tgz",
|
||||
|
|
@ -13431,7 +13590,6 @@
|
|||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz",
|
||||
"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"whatwg-url": "^5.0.0"
|
||||
},
|
||||
|
|
@ -13450,20 +13608,17 @@
|
|||
"node_modules/node-fetch/node_modules/tr46": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
|
||||
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
|
||||
},
|
||||
"node_modules/node-fetch/node_modules/webidl-conversions": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
|
||||
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
|
||||
},
|
||||
"node_modules/node-fetch/node_modules/whatwg-url": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",
|
||||
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"tr46": "~0.0.3",
|
||||
"webidl-conversions": "^3.0.0"
|
||||
|
|
@ -14108,6 +14263,16 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
|
||||
"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/portfinder": {
|
||||
"version": "1.0.32",
|
||||
"resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz",
|
||||
|
|
@ -14825,7 +14990,6 @@
|
|||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
|
||||
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"prettier": "bin-prettier.js"
|
||||
|
|
@ -15841,7 +16005,6 @@
|
|||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -17284,6 +17447,11 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-functional-data-merge": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
|
||||
"integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
|
||||
},
|
||||
"node_modules/vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
|
|
@ -18250,16 +18418,16 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
|
||||
"integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/zrender/-/zrender-5.6.0.tgz",
|
||||
"integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,10 @@
|
|||
"@heroicons/vue": "^2.1.4",
|
||||
"@vuepic/vue-datepicker": "^8.8.0",
|
||||
"axios": "^1.7.2",
|
||||
"bootstrap": "^4.3.1",
|
||||
"bootstrap-vue": "^2.23.1",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.7.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,27 @@
|
|||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">纵坐标参考列</span>
|
||||
<el-select v-model="selectedcul" placeholder="请选择图形样式" v-if="Message3">
|
||||
<el-option
|
||||
v-for="type in Options.concat(rowOptions)"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="selectedcul" multiple placeholder="请选择图形样式" v-else>
|
||||
<el-option
|
||||
v-for="type in Options.concat(rowOptions)"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">图形样式</span>
|
||||
|
|
@ -42,6 +63,7 @@ const selectedEntity = ref(null);
|
|||
const selectedChartType = ref(''); // 默认图表类型
|
||||
const selectedrow = ref(null);
|
||||
const selectedrow2 = ref(null);
|
||||
const selectedcul = ref(null);
|
||||
// const rowOptions=ref(null)
|
||||
|
||||
|
||||
|
|
@ -49,9 +71,16 @@ const chartTypes = [
|
|||
{ value: 'bar', label: '柱状图' },
|
||||
{ value: 'pie', label: '饼状图' }
|
||||
];
|
||||
const Options=[
|
||||
{
|
||||
value:'线索数量',
|
||||
label:'线索数量',
|
||||
},
|
||||
]
|
||||
defineProps({
|
||||
rowOptions: Array,
|
||||
rowOptions2:Array
|
||||
rowOptions2:Array,
|
||||
Message3: ref(true),
|
||||
})
|
||||
|
||||
// 向父组件发送事件的方式
|
||||
|
|
@ -77,7 +106,8 @@ defineExpose({
|
|||
selectedEntity,
|
||||
selectedrow,
|
||||
selectedrow2,
|
||||
selectedChartType
|
||||
selectedChartType,
|
||||
selectedcul,
|
||||
});
|
||||
|
||||
// 监听选择的值变化，并触发对应的事件
|
||||
|
|
@ -92,6 +122,9 @@ watch(selectedrow, () => {
|
|||
watch(selectedChartType, () => {
|
||||
emits('update:selectedChartType', selectedChartType.value);
|
||||
});
|
||||
watch(selectedcul, () => {
|
||||
emits('update:selectedcul3', selectedcul.value);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
|
|
@ -39,9 +40,32 @@
|
|||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">纵坐标参考列</span>
|
||||
<el-select v-model="selectedcul" placeholder="请选择图形样式" v-if="Message1">
|
||||
<el-option
|
||||
v-for="type in Options.concat(rowOptions)"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="selectedcul" multiple placeholder="请选择图形样式" v-else>
|
||||
<el-option
|
||||
v-for="type in Options.concat(rowOptions)"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { columns,defineProps } from 'element-plus/es/components/table-v2/src/common';
|
||||
import { ref, defineExpose, defineEmits,watch } from 'vue';
|
||||
|
|
@ -50,20 +74,30 @@ const selectedEntity = ref(null);
|
|||
const selectedChartType = ref(''); // 默认图表类型
|
||||
const selectedrow = ref(null);
|
||||
const selectedrow2 = ref(null);
|
||||
const selectedcul = ref(null);
|
||||
|
||||
|
||||
|
||||
const entityOptions = [
|
||||
{ value: 'day', label: '一日' },
|
||||
{ value: 'month', label: '一月' },
|
||||
{ value: 'year', label: '一年'}
|
||||
{ value: 'day', label: '日' },
|
||||
{ value: 'month', label: '月' },
|
||||
{ value: 'year', label: '年'}
|
||||
];
|
||||
defineProps({
|
||||
rowOptions: Array,
|
||||
Message1: ref(true),
|
||||
})
|
||||
const chartTypes = [
|
||||
{ value: 'line', label: '折线图' },
|
||||
{ value: 'bar', label: '柱状图' },
|
||||
{ value: 'pie', label: '饼图' }
|
||||
];
|
||||
const Options=[
|
||||
{
|
||||
value:'线索数量',
|
||||
label:'线索数量',
|
||||
},
|
||||
]
|
||||
|
||||
// 向父组件发送事件的方式
|
||||
const emits = defineEmits(['update:selectedEntity', 'update:selectedrow', 'update:selectedrow2','update:selectedChartType']);
|
||||
|
|
@ -88,7 +122,8 @@ defineExpose({
|
|||
selectedEntity,
|
||||
selectedrow,
|
||||
selectedrow2,
|
||||
selectedChartType
|
||||
selectedChartType,
|
||||
selectedcul,
|
||||
});
|
||||
|
||||
// 监听选择的值变化，并触发对应的事件
|
||||
|
|
@ -104,6 +139,11 @@ watch(selectedChartType, () => {
|
|||
emits('update:selectedChartType', selectedChartType.value);
|
||||
});
|
||||
|
||||
watch(selectedcul, () => {
|
||||
emits('update:selectedcul1', selectedcul.value);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,27 @@
|
|||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">纵坐标参考列</span>
|
||||
<el-select v-model="selectedcul" placeholder="请选择图形样式" v-if="Message2">
|
||||
<el-option
|
||||
v-for="type in Options.concat(rowOptions)"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="selectedcul" multiple placeholder="请选择图形样式" v-else>
|
||||
<el-option
|
||||
v-for="type in Options.concat(rowOptions)"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-select">
|
||||
<div class="block">
|
||||
|
|
@ -66,12 +87,14 @@ const selectedEntity = ref(null);
|
|||
const selectedrow = ref(null);
|
||||
|
||||
const selectedrow2 = ref(null);
|
||||
const selectedcul = ref(null);
|
||||
|
||||
const selectedChartType = ref(''); // Default chart type
|
||||
|
||||
defineProps({
|
||||
rowOptions: Array,
|
||||
rowOptions2:Array
|
||||
rowOptions2:Array,
|
||||
Message2: ref(true),
|
||||
})
|
||||
|
||||
const entityOptions = [
|
||||
|
|
@ -85,6 +108,12 @@ const chartTypes = [
|
|||
{ value: 'bar', label: '柱状图' },
|
||||
{value:'pie',label:'饼状图'}
|
||||
];
|
||||
const Options=[
|
||||
{
|
||||
value:'线索数量',
|
||||
label:'线索数量',
|
||||
},
|
||||
]
|
||||
// onMounted(async () => {
|
||||
// try {
|
||||
// // 模拟从后端获取数据
|
||||
|
|
@ -105,7 +134,8 @@ defineExpose({
|
|||
selectedEntity,
|
||||
selectedrow,
|
||||
selectedrow2,
|
||||
selectedChartType
|
||||
selectedChartType,
|
||||
selectedcul,
|
||||
});
|
||||
|
||||
// 监听选择的值变化，并触发对应的事件
|
||||
|
|
@ -123,5 +153,9 @@ watch(selectedChartType, () => {
|
|||
watch(selectedrow2, () => {
|
||||
emits('update:selectedrow2', selectedrow2.value);
|
||||
});
|
||||
watch(selectedcul, () => {
|
||||
emits('update:selectedcul2', selectedcul.value);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -16,7 +16,15 @@
|
|||
<div class="demo-select">
|
||||
<div class="block">
|
||||
<span class="demonstration">选择统计指标</span>
|
||||
<el-select v-model="selectedrow2" multiple placeholder="统计指标">
|
||||
<el-select v-model="selectedrow2" placeholder="统计指标" v-if="Message4">
|
||||
<el-option
|
||||
v-for="row in rowOptions2"
|
||||
:key="row.value"
|
||||
:label="row.label"
|
||||
:value="row.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="selectedrow2" multiple placeholder="统计指标" v-else>
|
||||
<el-option
|
||||
v-for="row in rowOptions2"
|
||||
:key="row.value"
|
||||
|
|
@ -58,6 +66,7 @@
|
|||
];
|
||||
const props= defineProps({
|
||||
rowOptions: Array,
|
||||
Message4: ref(true),
|
||||
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -145,7 +145,18 @@ export default{
|
|||
for (let i = 0; i < numRows; i++) {
|
||||
const row = { col_id: (i + 1).toString() };
|
||||
cols.forEach((col, index) => {
|
||||
row[`col_${index + 1}`] = `data_${i + 1}_${index + 1}`;
|
||||
if(index == 1)row[`col_${index + 1}`] = Math.floor(Math.random() * (1000 - 900 + 1)) + 900;
|
||||
else{
|
||||
if(index == 0) row[`col_${index + 1}`] = String(Math.floor(Math.random() * (2025 - 2020 + 1)) + 2020)+'-'+(Math.floor(Math.random() * (9 - 8 + 1)) + 8).toString().padStart(2, '0')+'-'+(Math.floor(Math.random() * (25 - 20 + 1)) + 20).toString().padStart(2, '0');
|
||||
else{
|
||||
if(index == 2){
|
||||
if(Math.random() > 0.5)row[`col_${index + 1}`] = 'cys';
|
||||
else row[`col_${index + 1}`] = 'lqs';
|
||||
}
|
||||
else row[`col_${index + 1}`] = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
|
||||
}
|
||||
if(index == 3) row[`col_${index + 1}`] = String(Math.floor(Math.random() * (2026 - 2025 + 1)) + 2025)+'-'+(Math.floor(Math.random() * (9 - 8 + 1)) + 8).toString().padStart(2, '0')+'-'+(Math.floor(Math.random() * (25 - 20 + 1)) + 20).toString().padStart(2, '0');
|
||||
}
|
||||
});
|
||||
data.push(row);
|
||||
}
|
||||
|
|
@ -179,7 +190,7 @@ export default{
|
|||
currentEditDataID: {},
|
||||
selectedColumnData :{},
|
||||
clueCols, // 这个实际运行时可能要改为 clueCols[]
|
||||
clueData: generateMockData(clueCols, 20), // 生成 20 行数据, 实际运行时：clueData:[]，
|
||||
clueData: generateMockData(clueCols, 40), // 生成 20 行数据, 实际运行时：clueData:[]，
|
||||
batchRemoveBtn_disabled: true, // 控制批量删除的按钮是否启用
|
||||
editBtn_disabled: true, // 控制表格当中编辑按钮是否启用
|
||||
selectionItem_visible: false, // 通过列类型控制表格当中是否显示选择框
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue