SheYuWu03
/
front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化界面 #7

Merged
SheYuWu03 merged 1 commits from liqiushi_branch into master 2024-07-09 01:24:46 +08:00
Conversation 0 Commits 1 Files Changed 16 +1189 -2015
16 changed files with 1189 additions and 2015 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

468
package-lock.json generated
View File

@ -9,8 +9,6 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@headlessui/vue": "^1.7.22",
"@heroicons/vue": "^2.1.4",
"@vuepic/vue-datepicker": "^8.8.0", "@vuepic/vue-datepicker": "^8.8.0",
"axios": "^1.7.2", "axios": "^1.7.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
@ -38,14 +36,10 @@
"@vue/eslint-config-typescript": "^9.1.0", "@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-0", "@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-alpha.1", "@vue/vue3-jest": "^27.0.0-alpha.1",
"autoprefixer": "^10.4.19",
"babel-jest": "^27.0.6", "babel-jest": "^27.0.6",
"daisyui": "^4.12.10",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5", "jest": "^27.0.5",
"postcss": "^8.4.39",
"tailwindcss": "^3.4.4",
"ts-jest": "^27.0.4", "ts-jest": "^27.0.4",
"typescript": "~4.5.5" "typescript": "~4.5.5"
} }
@ -64,19 +58,6 @@
"node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19 || 20 || 21" "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19 || 20 || 21"
} }
}, },
"node_modules/@alloc/quick-lru": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
@ -1895,8 +1876,9 @@
}, },
"node_modules/@element-plus/icons-vue": { "node_modules/@element-plus/icons-vue": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz", "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
"integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==", "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
"license": "MIT",
"peerDependencies": { "peerDependencies": {
"vue": "^3.2.0" "vue": "^3.2.0"
} }
@ -2018,30 +2000,6 @@
"@hapi/hoek": "^9.0.0" "@hapi/hoek": "^9.0.0"
} }
}, },
"node_modules/@headlessui/vue": {
"version": "1.7.22",
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.22.tgz",
"integrity": "sha512-Hoffjoolq1rY+LOfJ+B/OvkhuBXXBFgd8oBlN+l1TApma2dB0En0ucFZrwQtb33SmcCqd32EQd0y07oziXWNYg==",
"license": "MIT",
"dependencies": {
"@tanstack/vue-virtual": "^3.0.0-beta.60"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/@heroicons/vue": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.4.tgz",
"integrity": "sha512-wykVSZ/fqEG49lIeHgFGT9TCvBw9THuRTtA/sPp7FVk3iBob/HcmitMcLDwtXOW82TXb38HeLRl1/pcElPeSdg==",
"license": "MIT",
"peerDependencies": {
"vue": ">= 3"
}
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz", "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@ -3078,32 +3036,6 @@
"integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==", "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
"dev": true "dev": true
}, },
"node_modules/@tanstack/virtual-core": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.1.tgz",
"integrity": "sha512-uNtAwenT276M9QYCjTBoHZ8X3MUeCRoGK59zPi92hMIxdfS9AyHjkDWJ94WroDxnv48UE+hIeo21BU84jKc8aQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/vue-virtual": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.8.1.tgz",
"integrity": "sha512-uhty1LzUbbcVc5zdMMSUjUt/ECTlMCtK49Ww7dH2m4lNNLGYwkj5SbfrAD8uCZxV1VeV7DRMXqhwUTELyR5rrA==",
"license": "MIT",
"dependencies": {
"@tanstack/virtual-core": "3.8.1"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"vue": "^2.7.0 || ^3.0.0"
}
},
"node_modules/@tootallnate/once": { "node_modules/@tootallnate/once": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmmirror.com/@tootallnate/once/-/once-1.1.2.tgz", "resolved": "https://registry.npmmirror.com/@tootallnate/once/-/once-1.1.2.tgz",
@ -5192,13 +5124,6 @@
} }
] ]
}, },
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
"dev": true,
"license": "MIT"
},
"node_modules/argparse": { "node_modules/argparse": {
"version": "1.0.10", "version": "1.0.10",
"resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz", "resolved": "https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz",
@ -5257,7 +5182,7 @@
}, },
"node_modules/autoprefixer": { "node_modules/autoprefixer": {
"version": "10.4.19", "version": "10.4.19",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.19.tgz",
"integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==", "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
"dev": true, "dev": true,
"funding": [ "funding": [
@ -5274,7 +5199,6 @@
"url": "https://github.com/sponsors/ai" "url": "https://github.com/sponsors/ai"
} }
], ],
"license": "MIT",
"dependencies": { "dependencies": {
"browserslist": "^4.23.0", "browserslist": "^4.23.0",
"caniuse-lite": "^1.0.30001599", "caniuse-lite": "^1.0.30001599",
@ -5863,16 +5787,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/camelcase-css": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
}
},
"node_modules/caniuse-api": { "node_modules/caniuse-api": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz", "resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -6679,17 +6593,6 @@
"url": "https://github.com/sponsors/fb55" "url": "https://github.com/sponsors/fb55"
} }
}, },
"node_modules/css-selector-tokenizer": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
"dev": true,
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
"fastparse": "^1.1.2"
}
},
"node_modules/css-tree": { "node_modules/css-tree": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-1.1.3.tgz", "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-1.1.3.tgz",
@ -6844,36 +6747,6 @@
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz", "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
}, },
"node_modules/culori": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}
},
"node_modules/daisyui": {
"version": "4.12.10",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz",
"integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==",
"dev": true,
"license": "MIT",
"dependencies": {
"css-selector-tokenizer": "^0.8",
"culori": "^3",
"picocolors": "^1",
"postcss-js": "^4"
},
"engines": {
"node": ">=16.9.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/daisyui"
}
},
"node_modules/data-urls": { "node_modules/data-urls": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-2.0.0.tgz",
@ -7179,13 +7052,6 @@
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
"dev": true "dev": true
}, },
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/diff-sequences": { "node_modules/diff-sequences": {
"version": "27.5.1", "version": "27.5.1",
"resolved": "https://registry.npmmirror.com/diff-sequences/-/diff-sequences-27.5.1.tgz", "resolved": "https://registry.npmmirror.com/diff-sequences/-/diff-sequences-27.5.1.tgz",
@ -7207,13 +7073,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
"dev": true,
"license": "MIT"
},
"node_modules/dns-packet": { "node_modules/dns-packet": {
"version": "5.6.1", "version": "5.6.1",
"resolved": "https://registry.npmmirror.com/dns-packet/-/dns-packet-5.6.1.tgz", "resolved": "https://registry.npmmirror.com/dns-packet/-/dns-packet-5.6.1.tgz",
@ -8471,13 +8330,6 @@
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
"dev": true "dev": true
}, },
"node_modules/fastparse": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
"dev": true,
"license": "MIT"
},
"node_modules/fastq": { "node_modules/fastq": {
"version": "1.17.1", "version": "1.17.1",
"resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.17.1.tgz", "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.17.1.tgz",
@ -12328,16 +12180,6 @@
"url": "https://github.com/chalk/supports-color?sponsor=1" "url": "https://github.com/chalk/supports-color?sponsor=1"
} }
}, },
"node_modules/jiti": {
"version": "1.21.6",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
"integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
"dev": true,
"license": "MIT",
"bin": {
"jiti": "bin/jiti.js"
}
},
"node_modules/joi": { "node_modules/joi": {
"version": "17.13.1", "version": "17.13.1",
"resolved": "https://registry.npmmirror.com/joi/-/joi-17.13.1.tgz", "resolved": "https://registry.npmmirror.com/joi/-/joi-17.13.1.tgz",
@ -13600,16 +13442,6 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/object-hash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
}
},
"node_modules/object-inspect": { "node_modules/object-inspect": {
"version": "1.13.1", "version": "1.13.1",
"resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.1.tgz", "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.1.tgz",
@ -13891,13 +13723,6 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/package-json-from-dist": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
"integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
"dev": true,
"license": "BlueOak-1.0.0"
},
"node_modules/param-case": { "node_modules/param-case": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz", "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
@ -14077,16 +13902,6 @@
"url": "https://github.com/sponsors/jonschlinkert" "url": "https://github.com/sponsors/jonschlinkert"
} }
}, },
"node_modules/pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/pirates": { "node_modules/pirates": {
"version": "4.0.6", "version": "4.0.6",
"resolved": "https://registry.npmmirror.com/pirates/-/pirates-4.0.6.tgz", "resolved": "https://registry.npmmirror.com/pirates/-/pirates-4.0.6.tgz",
@ -14132,9 +13947,9 @@
} }
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.39", "version": "8.4.38",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz",
"integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -14149,10 +13964,9 @@
"url": "https://github.com/sponsors/ai" "url": "https://github.com/sponsors/ai"
} }
], ],
"license": "MIT",
"dependencies": { "dependencies": {
"nanoid": "^3.3.7", "nanoid": "^3.3.7",
"picocolors": "^1.0.1", "picocolors": "^1.0.0",
"source-map-js": "^1.2.0" "source-map-js": "^1.2.0"
}, },
"engines": { "engines": {
@ -14254,106 +14068,6 @@
"postcss": "^8.2.15" "postcss": "^8.2.15"
} }
}, },
"node_modules/postcss-import": {
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
"dev": true,
"license": "MIT",
"dependencies": {
"postcss-value-parser": "^4.0.0",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"postcss": "^8.0.0"
}
},
"node_modules/postcss-js": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
"dev": true,
"license": "MIT",
"dependencies": {
"camelcase-css": "^2.0.1"
},
"engines": {
"node": "^12 || ^14 || >= 16"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.4.21"
}
},
"node_modules/postcss-load-config": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
"integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"lilconfig": "^3.0.0",
"yaml": "^2.3.4"
},
"engines": {
"node": ">= 14"
},
"peerDependencies": {
"postcss": ">=8.0.9",
"ts-node": ">=9.0.0"
},
"peerDependenciesMeta": {
"postcss": {
"optional": true
},
"ts-node": {
"optional": true
}
}
},
"node_modules/postcss-load-config/node_modules/lilconfig": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
"integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/antonk52"
}
},
"node_modules/postcss-load-config/node_modules/yaml": {
"version": "2.4.5",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
"integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
"dev": true,
"license": "ISC",
"bin": {
"yaml": "bin.mjs"
},
"engines": {
"node": ">= 14"
}
},
"node_modules/postcss-loader": { "node_modules/postcss-loader": {
"version": "6.2.1", "version": "6.2.1",
"resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-6.2.1.tgz", "resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-6.2.1.tgz",
@ -14561,26 +14275,6 @@
"postcss": "^8.1.0" "postcss": "^8.1.0"
} }
}, },
"node_modules/postcss-nested": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
"integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"postcss-selector-parser": "^6.0.11"
},
"engines": {
"node": ">=12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.2.14"
}
},
"node_modules/postcss-normalize-charset": { "node_modules/postcss-normalize-charset": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@ -15085,16 +14779,6 @@
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"dev": true "dev": true
}, },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
"dev": true,
"license": "MIT",
"dependencies": {
"pify": "^2.3.0"
}
},
"node_modules/read-pkg": { "node_modules/read-pkg": {
"version": "5.2.0", "version": "5.2.0",
"resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz", "resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz",
@ -16127,99 +15811,6 @@
"postcss": "^8.2.15" "postcss": "^8.2.15"
} }
}, },
"node_modules/sucrase": {
"version": "3.35.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
"integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.2",
"commander": "^4.0.0",
"glob": "^10.3.10",
"lines-and-columns": "^1.1.6",
"mz": "^2.7.0",
"pirates": "^4.0.1",
"ts-interface-checker": "^0.1.9"
},
"bin": {
"sucrase": "bin/sucrase",
"sucrase-node": "bin/sucrase-node"
},
"engines": {
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/sucrase/node_modules/brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0"
}
},
"node_modules/sucrase/node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
}
},
"node_modules/sucrase/node_modules/glob": {
"version": "10.4.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
"integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
"dev": true,
"license": "ISC",
"dependencies": {
"foreground-child": "^3.1.0",
"jackspeak": "^3.1.2",
"minimatch": "^9.0.4",
"minipass": "^7.1.2",
"package-json-from-dist": "^1.0.0",
"path-scurry": "^1.11.1"
},
"bin": {
"glob": "dist/esm/bin.mjs"
},
"engines": {
"node": ">=16 || 14 >=14.18"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/sucrase/node_modules/minimatch": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
},
"engines": {
"node": ">=16 || 14 >=14.17"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/sucrase/node_modules/minipass": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/supports-color": { "node_modules/supports-color": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz", "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
@ -16358,44 +15949,6 @@
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"dev": true "dev": true
}, },
"node_modules/tailwindcss": {
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
"integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
"dev": true,
"license": "MIT",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
"chokidar": "^3.5.3",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"fast-glob": "^3.3.0",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
"jiti": "^1.21.0",
"lilconfig": "^2.1.0",
"micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
"postcss": "^8.4.23",
"postcss-import": "^15.1.0",
"postcss-js": "^4.0.1",
"postcss-load-config": "^4.0.1",
"postcss-nested": "^6.0.1",
"postcss-selector-parser": "^6.0.11",
"resolve": "^1.22.2",
"sucrase": "^3.32.0"
},
"bin": {
"tailwind": "lib/cli.js",
"tailwindcss": "lib/cli.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/tapable": { "node_modules/tapable": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz", "resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz",
@ -16686,13 +16239,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/ts-interface-checker": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/ts-jest": { "node_modules/ts-jest": {
"version": "27.1.5", "version": "27.1.5",
"resolved": "https://registry.npmmirror.com/ts-jest/-/ts-jest-27.1.5.tgz", "resolved": "https://registry.npmmirror.com/ts-jest/-/ts-jest-27.1.5.tgz",

9
package.json
View File

@ -6,13 +6,10 @@
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit", "test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint"
"build:css": "npx tailwindcss -i ./src/assets/css/input.css -o ./src/assets/css/output.css --watch"
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@headlessui/vue": "^1.7.22",
"@heroicons/vue": "^2.1.4",
"@vuepic/vue-datepicker": "^8.8.0", "@vuepic/vue-datepicker": "^8.8.0",
"axios": "^1.7.2", "axios": "^1.7.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
@ -40,14 +37,10 @@
"@vue/eslint-config-typescript": "^9.1.0", "@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-0", "@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-alpha.1", "@vue/vue3-jest": "^27.0.0-alpha.1",
"autoprefixer": "^10.4.19",
"babel-jest": "^27.0.6", "babel-jest": "^27.0.6",
"daisyui": "^4.12.10",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5", "jest": "^27.0.5",
"postcss": "^8.4.39",
"tailwindcss": "^3.4.4",
"ts-jest": "^27.0.4", "ts-jest": "^27.0.4",
"typescript": "~4.5.5" "typescript": "~4.5.5"
}, },

19
src/App.vue
View File

@ -12,25 +12,6 @@ export default {
IndexPage IndexPage
} }
} }
const debounce = (fn, delay) => {
let timer
return (...args) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(...args)
}, delay)
}
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
constructor(callback) {
callback = debounce(callback, 200);
super(callback);
}
}
const siderBarWidth = ref("200px"); const siderBarWidth = ref("200px");
const toggleMenu = ()=>{ const toggleMenu = ()=>{
if(siderBarWidth.value == "200px") if(siderBarWidth.value == "200px")

2
src/assets/css/global.css
View File

@ -3,7 +3,7 @@
padding: 0; padding: 0;
/* 设置所有对话框的header颜色固定 */ /* 设置所有对话框的header颜色固定 */
.el-dialog__header{ .el-dialog__header{
background-color: #158484; background-color: #1890ff;
font-size: 28px; font-size: 28px;
display: flex; display: flex;
justify-content: center; justify-content: center;

159
src/components/AsideMenu.vue
View File

@ -1,27 +1,45 @@
<!-- /**用于显示sidebar的页面 */ --> <!-- /**用于显示sidebar的页面 */ -->
<template> <template>
<!-- 这一层用来放边栏 --> <!-- 这一层用来放边栏 -->
<el-container style="height: 100%; border: 0px; background-color: #f5f6fa; width:100%"> <el-container
<el-header class = "containerSystemName"> style="height: 100%; border: 0px; background-color: #f5f6fa; width: 100%"
>
<el-header class="containerSystemName">
<!-- 这里要放两个部件，一个是系统名称一个是折叠按钮 --> <!-- 这里要放两个部件，一个是系统名称一个是折叠按钮 -->
<!-- 这里主要调整el-container的布局模式就直接写在这里了 --> <!-- 这里主要调整el-container的布局模式就直接写在这里了 -->
<el-container style = 'padding: 0'> <el-container style="padding: 0">
<el-container class = 'text-systemName'> <el-container class="text-systemName">
<el-text v-show = '!isFold' style="color: white; font-size: 16px;">线索库系统</el-text> <img
src="@/assets/logo.png"
alt=""
style="width: 40px; height: 40px"
/>
<el-text v-show="!isFold" style="color: white; font-size: 16px"
>线索库系统</el-text
>
</el-container> </el-container>
<el-button class ='btnFold' @click = 'handleFold'><el-icon><Fold /></el-icon></el-button> <el-button class="btnFold" @click="handleFold"
><el-icon><Fold /></el-icon
></el-button>
</el-container> </el-container>
</el-header> </el-header>
<el-menu class = 'containerSelections' <el-menu
style="border: none; height: 100vh"
text-color="rgba(255,255,255,0.65)"
active-text-color="#ffd04b"
default-active="/Home"
:collapse="isCollapse"
:collapse-transition="false"
class="containerSelections"
router router
> >
<el-menu-item index="/Home"> <el-menu-item index="/Home">
<el-icon><HomeFilled /></el-icon> <el-icon><HomeFilled /></el-icon>
<span v-show = '!isFold'>首页</span> <span v-show="!isFold">系统首页</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/Delete"> <el-menu-item index="/Delete">
<el-icon><DeleteFilled /></el-icon> <el-icon><DeleteFilled /></el-icon>
<span v-show = '!isFold'>回收站</span> <span v-show="!isFold">回收站</span>
</el-menu-item> </el-menu-item>
<!-- <!--
@brief: 用于调试我设计的各种界面，相当于一个画板 @brief: 用于调试我设计的各种界面，相当于一个画板
@ -30,105 +48,112 @@
--> -->
<el-menu-item index="/test"> <el-menu-item index="/test">
<el-icon><View /></el-icon> <el-icon><View /></el-icon>
<span v-show = '!isFold'>测试专用</span> <span v-show="!isFold">测试专用</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</el-container> </el-container>
</template> </template>
<script> <script>
export default{ export default {
name:'AsideMenu', name: "AsideMenu",
props: { props: {
isCollapse: Boolean isCollapse: Boolean,
}, },
data(){ data() {
// 控制折叠状态变量: // 控制折叠状态变量:
return { return {
isFold:false, isFold: false,
} };
}, },
methods:{ methods: {
// 控制折叠状态 // 控制折叠状态
handleFold(){ handleFold() {
this.isFold = !this.isFold; this.isFold = !this.isFold;
// 向indexPage传递边栏的折叠状态 // 向indexPage传递边栏的折叠状态
if(this.isFold) if (this.isFold) this.$emit("update:isCollapse", true);
this.$emit('update:isCollapse',true); else this.$emit("update:isCollapse", false);
else
this.$emit('update:isCollapse',false);
}
}, },
} },
};
</script> </script>
/** /** @brief: CSS设计 @date: 2024年6月20日 @author: myz */
@brief: CSS设计
@date: 2024年6月20日
@author: myz
*/
<style scoped> <style scoped>
.containerSystemName{ .containerSystemName {
color:white; /**字体颜色为白色 */ color: white; /**字体颜色为白色 */
background-color: #158484; /* 容器背景颜色 */ background-color: #090470; /* 容器背景颜色 */
display: flex; display: flex;
justify-content: center; /**水平居中 */ justify-content: center; /**水平居中 */
align-items: center; /**竖直居中 */ align-items: center; /**竖直居中 */
font-weight: bolder; /** 字体加粗 */ font-weight: bolder; /** 字体加粗 */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /*设置字体*/
font-size: 14px; /**字体大小 */ font-size: 14px; /**字体大小 */
height:6%; height: 8%;
width: 100%; width: 100%;
padding-left:0; padding-left: 0;
padding-right:3px; padding-right: 3px;
} }
.el-text{
color:white .text-systemName {
} background-color: #090470; /* 容器背景颜色 */
.text-systemName{
background-color: #158484; /* 容器背景颜色 */
display: flex; display: flex;
/**竖直居中 */ /**竖直居中 */
align-items: center; align-items: center;
/**水平居中 */ /**水平居中 */
justify-content: center; justify-content: center;
height:100%; height: 100%;
padding:0; padding: 0;
} }
.containerSelections{ .containerSelections {
color: white; background-color: #000c17;
background-color: #1DAFAF; height: 92%;
height: 94%;
width:100%;
border:0px;
}
.el-menu-item{
color:white;
font-weight: bold;
width: 100%; width: 100%;
} border: 0px;
/**覆写悬浮，选中等样式 */
:deep .el-menu-item:hover{
background-color: #1ad4c4d4;
color: antiquewhite;
}
:deep .el-menu-item.is-active{
color: #158484;
} }
.btnFold{ /**覆写悬浮，选中等样式 */
.btnFold {
display: flex; display: flex;
align-items: center; align-items: center;
color: #0E5858; color: #8f9191;
font-size: 28px; font-size: 28px;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
.btnFold:hover{ .btnFold:hover {
background-color: transparent; background-color: transparent;
color:#1ad4c4d4; color: #1ad4c4d4;
}
.el-menu--line {
background-color: #000c17 !important;
}
.el-menu--line.el-menu-item {
background-color: #000c17 !important;
padding-left: 49px !important;
}
.el-menu-item:hover {
color: #ffd04b !important;
}
.el-menu-item:hover i {
color: #ffd04b;
}
.el-menu-item.is-active {
background-color: #1890ff !important;
border-radius: 5px;
margin-right: 1px;
margin-left: 1px;
}
.el-menu-item {
font-size: 17px !important;
height: 48px;
line-height: 47px;
margin-right: 1px;
margin-left: 1px;
}
.el-menu-item i {
font-size: 20px !important;
} }
</style> </style>

33
src/components/HeaderPage.vue
View File

@ -1,42 +1,41 @@
<!-- /***用于显示边栏的页面 */ --> <!-- /***用于显示边栏的页面 */ -->
<template> <template>
<el-container class = 'toolbar' > <el-container class="toolbar">
<el-text class = "pageName">{{ pageTitle }}</el-text> <el-text class="pageName">{{ pageTitle }}</el-text>
</el-container> </el-container>
</template> </template>
<script> <script>
export default { export default {
name: 'HeaderPage', name: "HeaderPage",
props:{ props: {
pageTitle: String, pageTitle: String,
icon:String icon: String,
}, },
methods:{ methods: {
toUser(){ toUser() {
console.log('toUser') console.log("toUser");
}, },
logout(){ logout() {
console.log('logout') console.log("logout");
}, },
} },
} };
</script> </script>
<style scoped> <style scoped>
.toolbar{ .toolbar {
background-color: white; background-color: white;
color: #6B6363; color: #6b6363;
display: flex; display: flex;
height:100%; height: 100%;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.pageName{ .pageName {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
} }
</style> </style>

81
src/components/components_cluespage/AddDialog.vue
View File

@ -1,15 +1,22 @@
<template> <template>
<el-dialog <el-dialog
title="添加线索" title="添加线索"
v-model='dialogVisible' v-model="dialogVisible"
draggable draggable
align-center=true align-center="true"
@close="onClose" @close="onClose"
> >
<el-container> <el-container>
<el-form label-width="100px"> <el-form label-width="100px">
<el-form-item v-for="(col, index) in addClueCols" :key="index" :label="col.col_name"> <el-form-item
<el-input v-model="formData['col_'+col.col_id]" :placeholder="'输入' + col.col_name"></el-input> v-for="(col, index) in addClueCols"
:key="index"
:label="col.col_name"
>
<el-input
v-model="formData['col_' + col.col_id]"
:placeholder="'输入' + col.col_name"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-footer class="dialog-footer"> <el-footer class="dialog-footer">
@ -18,67 +25,65 @@
</el-footer> </el-footer>
</el-container> </el-container>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
export default { export default {
name:'AddDialog', name: "AddDialog",
props: { props: {
visible:Boolean, visible: Boolean,
addClueCols:Array, addClueCols: Array,
id:Number, id: Number,
tableId:String, tableId: String,
}, },
data() { data() {
return{ return {
formData:{}, formData: {},
dialogVisible:false, dialogVisible: false,
} };
}, },
watch: { watch: {
visible(value){ visible(value) {
this.dialogVisible = value; this.dialogVisible = value;
}, },
}, },
methods: { methods: {
clickToCloseDialog(){ clickToCloseDialog() {
this.dialogVisible = false; this.dialogVisible = false;
}, },
onClose(){ onClose() {
this.formData = {}; this.formData = {};
this.dialogVisible = false; this.dialogVisible = false;
}, },
onSave(){ onSave() {
this.formData.clue_id = this.id; this.formData.clue_id = this.id;
this.formData.delete_flag = 0; this.formData.delete_flag = 0;
console.log('修改后: ',this.formData); console.log("修改后: ", this.formData);
this.$axios.post('http://localhost:8000/addOneClue/', this.$axios
{table_id:this.tableId,record:this.formData}) .post("http://localhost:8000/addOneClue/", {
.then(response=>{ table_id: this.tableId,
if(response.data.message == '插入成功'){ record: this.formData,
})
.then((response) => {
if (response.data.message == "插入成功") {
this.$message({ this.$message({
type:'success', type: "success",
message:'插入成功' message: "插入成功",
}); });
location.reload(); location.reload();
}else if(response.data.message == '插入失败'){ } else if (response.data.message == "插入失败") {
this.$message({ this.$message({
typeof:'error', typeof: "error",
message:'插入失败,请对应数据格式,请重试!' message: "插入失败,请对应数据格式,请重试!",
}) });
} }
}) })
.catch(error=>{ .catch((error) => {
this.$handleNetError(error); this.$handleNetError(error);
}) });
}
}, },
},
} };
</script> </script>
<style scoped> <style scoped></style>
</style>

58
src/components/components_cluespage/EditDialog.vue
View File

@ -3,14 +3,22 @@
<el-dialog <el-dialog
title="编辑线索记录" title="编辑线索记录"
v-model="dialogVisible" v-model="dialogVisible"
align-center="true"
draggable draggable
@opened="onOpen" @opened="onOpen"
@close="onClose" @close="onClose"
> >
<el-container> <el-container>
<el-form label-width="100px"> <el-form label-width="100px">
<el-form-item v-for="(col, index) in formFields" :key="index" :label="col.label"> <el-form-item
<el-input v-model="formData['col_'+col.prop]" :placeholder="computedPlaceholders[col.prop]"></el-input> v-for="(col, index) in formFields"
:key="index"
:label="col.label"
>
<el-input
v-model="formData['col_' + col.prop]"
:placeholder="computedPlaceholders[col.prop]"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-footer class="dialog-footer"> <el-footer class="dialog-footer">
@ -22,7 +30,7 @@
</template> </template>
<script> <script>
export default { export default {
props: { props: {
columns: Array, // 接收动态列名 columns: Array, // 接收动态列名
visible: Boolean, visible: Boolean,
@ -35,7 +43,7 @@
computedPlaceholders() { computedPlaceholders() {
const placeholders = {}; const placeholders = {};
// 遍历formFields，为每个prop创建对应的占位符 // 遍历formFields，为每个prop创建对应的占位符
this.formFields.forEach(field => { this.formFields.forEach((field) => {
// 将数字形式的prop转换为'col_'开头的键名 // 将数字形式的prop转换为'col_'开头的键名
const formDataKey = `col_${field.prop}`; const formDataKey = `col_${field.prop}`;
// 检查formData中是否存在对应的键 // 检查formData中是否存在对应的键
@ -46,29 +54,33 @@
return placeholders; return placeholders;
}, },
}, },
emits: ['update:visible'], emits: ["update:visible"],
data() { data() {
return { return {
formData: {}, formData: {},
formFields: [], formFields: [],
dialogVisible:false, dialogVisible: false,
placeholders: {}, // 新增占位符对象 placeholders: {}, // 新增占位符对象
}; };
}, },
watch: { watch: {
columns(newColumns) { columns(newColumns) {
this.formFields = newColumns.filter(col => col.prop !== 'id').map(col => ({ ...col, prop: col.prop.replace('col_', '') })); this.formFields = newColumns
.filter((col) => col.prop !== "id")
.map((col) => ({ ...col, prop: col.prop.replace("col_", "") }));
}, },
visible(value) { visible(value) {
this.dialogVisible = value; this.dialogVisible = value;
}, },
}, },
created() { created() {
this.formFields = this.columns.filter(col => col.prop !== 'id').map(col => ({ ...col, prop: col.prop.replace('col_', '') })); this.formFields = this.columns
.filter((col) => col.prop !== "id")
.map((col) => ({ ...col, prop: col.prop.replace("col_", "") }));
}, },
methods: { methods: {
onClose() { onClose() {
this.$emit('update:visible', false); this.$emit("update:visible", false);
this.dialogVisible = false; this.dialogVisible = false;
this.formData = {}; this.formData = {};
}, },
@ -76,30 +88,32 @@
this.formData.clue_id = this.editDataID.clue_id; this.formData.clue_id = this.editDataID.clue_id;
this.formData.delete_flag = 0; this.formData.delete_flag = 0;
console.log('修改后的数据：',this.formData); console.log("修改后的数据：", this.formData);
// 提交表单数据到服务器，然后关闭对话框 // 提交表单数据到服务器，然后关闭对话框
this.$axios.post('http://localhost:8000/updateOneClue/', this.$axios
{table_id:this.editDataID.table_id,record:this.formData}) .post("http://localhost:8000/updateOneClue/", {
table_id: this.editDataID.table_id,
record: this.formData,
})
.then(() => { .then(() => {
this.onClose(); this.onClose();
this.$message.success('保存成功'); this.$message.success("保存成功");
}).catch(error => { })
.catch((error) => {
this.$handleNetError(error); this.$handleNetError(error);
}); });
location.reload(); location.reload();
}, },
onOpen(){ onOpen() {
console.log('修改前的数据：',this.formData); console.log("修改前的数据：", this.formData);
}, },
clickToCloseDialog(){ clickToCloseDialog() {
this.dialogVisible = false; this.dialogVisible = false;
this.formData = {}; this.formData = {};
}
}, },
}; },
};
</script> </script>
<style scoped> <style scoped></style>
</style>

2
src/components/graph/Entity4Form.vue
View File

@ -16,7 +16,7 @@
<div class="demo-select"> <div class="demo-select">
<div class="block"> <div class="block">
<span class="demonstration">选择统计指标</span> <span class="demonstration">选择统计指标</span>
<el-select v-model="selectedrow2" multiple placeholder="统计指标"> <el-select v-model="selectedrow2" placeholder="统计指标">
<el-option <el-option
v-for="row in rowOptions2" v-for="row in rowOptions2"
:key="row.value" :key="row.value"

112
src/components/graph/Entity5Form.vue
View File

@ -2,8 +2,8 @@
<div> <div>
<div class="demo-select"> <div class="demo-select">
<div class="block"> <div class="block">
<span class="demonstration">选择实体列</span> <span class="demonstration">选择横轴</span>
<el-select v-model="selectedrow" placeholder="请选择实体列"> <el-select v-model="selectedrow" placeholder="请选择横轴">
<el-option <el-option
v-for="row in rowOptions" v-for="row in rowOptions"
:key="row.value" :key="row.value"
@ -15,8 +15,8 @@
</div> </div>
<div class="demo-select"> <div class="demo-select">
<div class="block"> <div class="block">
<span class="demonstration">选择统计指标</span> <span class="demonstration">选择竖轴</span>
<el-select v-model="selectedrow2" placeholder="统计指标"> <el-select v-model="selectedrow2" placeholder="请选择数轴">
<el-option <el-option
v-for="row in rowOptions2" v-for="row in rowOptions2"
:key="row.value" :key="row.value"
@ -26,19 +26,6 @@
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="demo-select">
<div class="block">
<span class="demonstration">请选择起始日期列</span>
<el-select v-model="selectedrow3" placeholder="日期列">
<el-option
v-for="row in rowOptions3"
:key="row.value"
:label="row.label"
:value="row.value"
></el-option>
</el-select>
</div>
</div>
<div class="demo-select"> <div class="demo-select">
<div class="block"> <div class="block">
<span class="demonstration">图形样式</span> <span class="demonstration">图形样式</span>
@ -53,29 +40,22 @@
</div> </div>
</div> </div>
</div> </div>
</template>
<script setup>
import { ref, defineExpose, defineProps, defineEmits,watch } from 'vue';
</template> const selectedEntity = ref(null);
const selectedChartType = ref(''); // 默认图表类型
const selectedrow = ref(null);
const selectedrow2 = ref(null);
const rowOptions2=ref('')
<script setup> const chartTypes = [
import { ref, defineExpose, defineProps, defineEmits,watch } from 'vue';
const selectedEntity = ref(null);
const selectedChartType = ref(''); // 默认图表类型
const selectedrow = ref(null);
const selectedrow2 = ref(null);
const selectedrow3= ref(null);
const rowOptions2=ref(null);
const rowOptions3=ref(null);
const chartTypes = [
{ value: 'line', label: '折线图' }, { value: 'line', label: '折线图' },
{ value: 'bar', label: '柱状图' }, { value: 'scatter', label: '散点图' },
{ value: 'pie', label: '饼图' } ];
]; const props= defineProps({
// 向父组件发送事件的方式
const emits = defineEmits(['update:selectedEntity', 'update:selectedrow', 'update:selectedrow2','update:selectedrow3','update:selectedChartType']);
const props= defineProps({
rowOptions: Array, rowOptions: Array,
}) })
@ -86,45 +66,59 @@ watch(() => props.rowOptions, (newVal) => {
{ value: 'entity', label: '线索数' }, // 保留原有数据 { value: 'entity', label: '线索数' }, // 保留原有数据
...newVal // 将新的选项添加进来 ...newVal // 将新的选项添加进来
]; ];
rowOptions3.value = [
{ value: 'entity', label: '线索数' }, // 保留原有数据
...newVal // 将新的选项添加进来
];
}, { immediate: true }); }, { immediate: true });
// 监听数据变化，并通过事件传递给父组件 // 向父组件发送事件的方式
defineExpose({ const emits = defineEmits(['update:selectedEntity', 'update:selectedrow', 'update:selectedrow2','update:selectedChartType']);
// onMounted(async () => {
// try {
// // 模拟从后端获取数据
// const response = await fetch('http://localhost:3000/data');
// if (!response.ok) {
// throw new Error('Failed to fetch data');
// }
// const data = await response.json();
// rowOptions.value = data;
// rowOptions2.value = [
// { value: 'entity', label: '线索数' }, // 保留原有数据
// ...data // 添加从后端获取的新数据
// ];
// console.log(rowOptions.value)
// } catch (error) {
// console.error('Error fetching data:', error);
// }
// });
// 监听数据变化，并通过事件传递给父组件
defineExpose({
selectedEntity, selectedEntity,
selectedrow, selectedrow,
selectedrow2, selectedrow2,
selectedrow3,
selectedChartType selectedChartType
}); });
// 监听选择的值变化，并触发对应的事件 // 监听选择的值变化，并触发对应的事件
watch(selectedEntity, () => { watch(selectedEntity, () => {
emits('update:selectedEntity', selectedEntity.value); emits('update:selectedEntity', selectedEntity.value);
}); });
watch(selectedrow, () => { watch(selectedrow, () => {
emits('update:selectedrow', selectedrow.value); emits('update:selectedrow', selectedrow.value);
}); });
watch(selectedrow2, () => { watch(selectedrow2, () => {
emits('update:selectedrow2', selectedrow2.value); emits('update:selectedrow2', selectedrow2.value);
}); });
watch(selectedrow3, () => { watch(selectedChartType, () => {
emits('update:selectedrow3', selectedrow3.value);
});
watch(selectedChartType, () => {
emits('update:selectedChartType', selectedChartType.value); emits('update:selectedChartType', selectedChartType.value);
}); });
</script> </script>
<style> <style>
.el-row { .el-row {
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }

1
src/main.ts
View File

@ -5,7 +5,6 @@ import store from './store'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import './assets/css/global.css' import './assets/css/global.css'
import './assets/css/tailwind.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue' import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios' import axios from 'axios'
import NetErrorHandler from '@/api/netErrorHandler'; import NetErrorHandler from '@/api/netErrorHandler';

544
src/views/CluesPage.vue
View File

@ -1,24 +1,46 @@
<template> <template>
<el-container style="height:100%"> <el-container style="height: 100%">
<el-header class = 'containerHead'> <el-header class="containerHead">
<HeaderPage :pageTitle = 'pageTitle'></HeaderPage> <HeaderPage :pageTitle="pageTitle"></HeaderPage>
<el-button class = 'btnReturnHomePage' @click="returnHome"> <el-button class="btnReturnHomePage" @click="returnHome">
<el-tooltip content = '返回首页'> <el-tooltip content="返回首页">
<el-icon><Back /></el-icon> <el-icon><ArrowLeft /></el-icon>
</el-tooltip> </el-tooltip>
</el-button> </el-button>
</el-header> </el-header>
<el-main class ='container_Tools_Main'> <el-main class="container_Tools_Main">
<el-header class ='containerTools'> <!-- 折叠版存放约束条件显示 -->
<!-- 模式切换按钮 --> <!-- <el-container class="containerConstraints">
<el-button class = 'btnDelete'> <el-collapse v-model="activeNames">
<el-tooltip content = '批量删除'> <el-collapse-item name="1">
<div
class="divConstraintView"
v-for="(i, index) in Constraints"
:key="index"
>
{{
"逻辑关系：" +
i.merge +
" 约束列：" +
search_clu_name(i.col_id) +
" " +
Condition_to_string(i)
}}
<button @click="constraint_delete(index)">删除</button>
</div>
</el-collapse-item>
</el-collapse>
</el-container> -->
<!-- 工具栏 -->
<el-header class="containerTools">
<el-button class="btnDelete">
<el-tooltip content="删除所有">
<el-icon><Delete /></el-icon> <el-icon><Delete /></el-icon>
</el-tooltip> </el-tooltip>
</el-button> </el-button>
<el-button class = 'btnSearch' @click = 'searchDialogVisible = true'> <el-button class="btnSearch" @click="searchDialogVisible = true">
<el-tooltip content = '条件查找'> <el-tooltip content="条件查找">
<el-icon><Search /></el-icon> <el-icon style="margin-right: -15px"><Search /></el-icon>
</el-tooltip> </el-tooltip>
<!-- 条件查找对应的对话框 --> <!-- 条件查找对应的对话框 -->
<!-- @author myz <!-- @author myz
@ -27,68 +49,16 @@
@v-model:isVisible 控制对话框可见的v-model @v-model:isVisible 控制对话框可见的v-model
@confirm: @confirm 处理子部件的confirm事件 --> @confirm: @confirm 处理子部件的confirm事件 -->
<ConstraintSearchDialog <ConstraintSearchDialog
:colData = 'clueCols' :colData="clueCols"
v-model:isVisible = 'searchDialogVisible' v-model:isVisible="searchDialogVisible"
@confirm = 'handleSearchDialogConfirm' @confirm="handleSearchDialogConfirm"
/> />
</el-button> </el-button>
<el-button class = 'btnMore' @click="dochart"> <el-button class="btnPlus" @click="addOneClue">
<el-tooltip content = '更多'> <el-tooltip content="添加">
<el-icon><More /></el-icon>
</el-tooltip>
</el-button>
</el-header>
<!-- 编辑线索的对话框 -->
<EditDialog
:columns="cols"
ref="editDialog"
:editDataID="currentEditDataID"
/>
<el-main class = 'containerMain'>
<!-- 展示约束条件 -->
<details class="shadow-md collapse collapse-arrow bg-white mb-1 opacity-90 text-gray-900 text-xl">
<summary class="collapse-title font-bold">已添加的约束条件</summary>
<div class="collapse-content flex flex-col bg-white bg-opacity-30 list-decimal">
<li class = ' text-sm italic tracking-wide flex justify-between' v-for="(i,index) in Constraints" :key="index" >
<el-text>{{"逻辑关系：" + i.merge + " 约束列：" + search_clu_name(i.col_id) + " " +Condition_to_string(i)}}</el-text>
<el-button class = 'btnItemDelete' @click="constraint_delete(index)">删除</el-button>
</li>
</div>
</details>
<el-table
class = 'containerTable'
:data="formattedTableData"
height="100%"
style="width: 100%; margin-bottom: 0.5%; height:95%"
@selection-change="handleSelectionChange"
:selectable="selectionItem_visible"
>
<el-table-column type = 'selection' width="30"/>
<el-table-column class = 'containerTabHead'
v-for="(column, index) in cols"
:key="index"
:prop="column.prop"
:label="column.label"
show-overflow-tooltip
width = "150"
/>
<el-table-column fixed="right" width = 150px label="操作">
<template #header>
<div style="display: flex; justify-self: flex-end; padding-left: 38px;">操作</div>
</template>
<template #default="scope">
<!-- 使用插槽将数据传入到方法watchClue中 -->
<el-button class = 'btnItemEdit' size="small" @click="editClue(scope.row)">编辑</el-button>
<el-button class = 'btnItemDelete' size="small" @click="deleteClue(scope.row)"> 删除 </el-button>
</template>
</el-table-column>
</el-table>
<el-button class = 'btnPlus' @click="addOneClue">
<el-tooltip content = '添加一条线索'>
<el-icon><Plus /></el-icon> <el-icon><Plus /></el-icon>
</el-tooltip> </el-tooltip>
</el-button> </el-button>
<!-- 添加线索的对话框 -->
<AddDialog <AddDialog
ref="addDialog" ref="addDialog"
:addClueCols="clueCols" :addClueCols="clueCols"
@ -96,7 +66,87 @@
:tableId="clueId" :tableId="clueId"
> >
</AddDialog> </AddDialog>
<el-button class="btnMore" @click="dochart">
<el-tooltip content="更多">
<el-icon><More /></el-icon>
</el-tooltip>
</el-button>
</el-header>
<EditDialog
:columns="cols"
ref="editDialog"
:editDataID="currentEditDataID"
></EditDialog>
<el-main class="containerMain">
<el-table
class="containerTable"
:data="formattedTableData"
border
:header-cell-style="{
background: '#f2f5fc',
}"
height="100%"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
style="background-color: black"
/>
<el-table-column
class="containerTabHead"
v-for="(column, index) in cols"
:key="index"
:prop="column.prop"
:label="column.label"
/>
<el-table-column
fixed="right"
width="200px"
label="操作"
class="custom-operation-column"
>
<template #default="scope">
<div class="mb-4">
<!-- 使用插槽将数据传入到方法watchClue中 -->
<el-button
:icon="Delete"
class="btnItemEdit"
@click="editClue(scope.row)"
>
<el-icon>
<Edit />
</el-icon>
<span style="margin-left: 5px">编辑</span>
</el-button>
<el-button class="btnItemDelete" @click="deleteClue(scope.row)">
<el-icon>
<Delete />
</el-icon>
<span style="margin-left: 5px">删除</span>
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-main> </el-main>
<!-- </el-main> -->
<el-footer>
<el-button class="btnPlus" @click="addOneClue">
<el-tooltip content="添加">
<el-icon><Plus /></el-icon>
</el-tooltip>
</el-button>
<AddDialog
ref="addDialog"
:addClueCols="clueCols"
:id="MaxId"
:tableId="clueId"
>
</AddDialog>
</el-footer>
</el-main> </el-main>
</el-container> </el-container>
</template> </template>
@ -107,39 +157,40 @@ const debounce = (fn, delay) => {
let timer; let timer;
return (...args) => { return (...args) => {
if (timer) { if (timer) {
clearTimeout(timer) clearTimeout(timer);
} }
timer = setTimeout(() => { timer = setTimeout(() => {
fn(...args) fn(...args);
}, delay) }, delay);
} };
}; };
// 解决刷新率问题 // 解决刷新率问题
const _ResizeObserver = window.ResizeObserver; const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{ window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
constructor(callback) { constructor(callback) {
callback = debounce(callback, 200); callback = debounce(callback, 200);
super(callback); super(callback);
} }
}; };
import ConstraintSearchDialog from "@/components/components_cluespage/ConstraintSearchDialog.vue" import ConstraintSearchDialog from "@/components/components_cluespage/ConstraintSearchDialog.vue";
import EditDialog from "@/components/components_cluespage/EditDialog.vue" import EditDialog from "@/components/components_cluespage/EditDialog.vue";
import HeaderPage from "@/components/HeaderPage.vue" import HeaderPage from "@/components/HeaderPage.vue";
import AddDialog from "@/components/components_cluespage/AddDialog.vue" import AddDialog from "@/components/components_cluespage/AddDialog.vue";
export default{ export default {
components:{ components: {
ConstraintSearchDialog, ConstraintSearchDialog,
HeaderPage, HeaderPage,
EditDialog, EditDialog,
AddDialog, AddDialog,
}, },
name:'CluesPage', name: "CluesPage",
data(){ data() {
// 接收传入的id // 接收传入的id
const clueId = this.$route.params.id; const clueId = this.$route.params.id;
const pageTitle = this.$route.params.pageTitle; const pageTitle = this.$route.params.pageTitle;
// console.log("接收到的线索库ID：", clueId)
const generateMockData = (cols, numRows = 20) => { const generateMockData = (cols, numRows = 20) => {
const data = []; const data = [];
for (let i = 0; i < numRows; i++) { for (let i = 0; i < numRows; i++) {
@ -163,134 +214,120 @@ export default{
return columns; return columns;
} }
return { return {
// 用于查找功能对话框的变量 // 用于查找功能对话框的变量
searchDialogVisible : false, searchDialogVisible: false,
// 查找所用变量 // 查找所用变量
"Constraints":[ Constraints: [
{"merge":"AND","col_id":"3","type":"double","down":"0","up":"INF","inside":"","date":""}, // 满足第1_3列（实数），范围为大于等于0的 // 注意 用的是复数形式
{"merge":"AND","col_id":"2","type":"date","down":"","up":"","inside":"","date":"03.06.2024,30.06.2024"}, // 同时满足第!_2列（日期），早于2024/1/1的 // {"merge":"AND","col_id":"3","type":"double","down":"0","up":"INF","inside":"","date":""}, // 满足第1_3列（实数），范围为大于等于0的
{"merge":"OR","col_id":"4","type":"string","down":"","up":"","inside":"AAA","date":""} // 或者满足第1_4列(字符串),存在“AAA”这个连续字串的 // {"merge":"AND","col_id":"2","type":"date","down":"","up":"","inside":"","date":"03.06.2024,30.06.2024"}, // 同时满足第!_2列（日期），早于2024/1/1的
// {"merge":"OR","col_id":"4","type":"string","down":"","up":"","inside":"AAA","date":""} // 或者满足第1_4列(字符串),存在“AAA”这个连续字串的
], ],
pageTitle, // 当前页面的名称/所展示的线索库的名称 // 显示当前页面的名称
pageTitle, // 标题
clueId, // 线索库ID clueId, // 线索库ID
MaxId:Number ,// 线索的最大Id MaxId: Number, // 线索的最大Id
addDialogVisible: false, // 添加线索库对话框是否显示
chart: false,
currentEditDataID: {}, currentEditDataID: {},
selectedColumnData :{}, selectedColumnData: {},
clueCols, // 这个实际运行时可能要改为 clueCols[] clueCols, // 这个实际运行时可能要改为 clueCols[]
clueData: generateMockData(clueCols, 20), // 生成 20 行数据, 实际运行时：clueData:[]， clueData: generateMockData(clueCols, 20), // 生成 20 行数据, 实际运行时：clueData:[]，
batchRemoveBtn_disabled: true, // 控制批量删除的按钮是否启用 };
editBtn_disabled: true, // 控制表格当中编辑按钮是否启用
selectionItem_visible: false, // 通过列类型控制表格当中是否显示选择框
/* 变量用于控制样式 */
mulmodeStyle: '',
normalmodeStyle: '',
modeSelectedStyle:{
"color": "white",
"font-size": "14px",
"font-weight": "bold",
"background-color": "#1ad4c4d4",
}, },
modeUnselectedStyle:{ methods: {
"color": "white",
"font-size": "14px",
"font-weight": "bold",
"background-color": "#1DAFAF",
},
batchDeleteBtn_style: '',
editBtn_style: '',
editBtn_disabled_style:{
"background-color": "gray",
"color": "white",
"border-radius": "14px",
"font-size": "12px",
"font-weight": "bold"
},
editBtn_enabled_style:{
"background-color": "1DAFAF",
"color": "white",
"border-radius": "14px",
"font-size": "12px",
"font-weight": "bold"
}
}
},
methods:{
// 处理子部件的confirm事件 // 处理子部件的confirm事件
handleSearchDialogConfirm(form){ handleSearchDialogConfirm(form) {
console.log("提交约束条件", form); console.log("提交约束条件", form);
const newConstraint = { const newConstraint = {
"merge": form.logic, merge: form.logic,
"col_id": form.col_id, col_id: form.col_id,
"type": form.type, type: form.type,
"inside": form.search_string, inside: form.search_string,
"up": form.max_limit, up: form.max_limit,
"down": form.min_limit, down: form.min_limit,
"date": form.continuous_time[0] + ',' + form.continuous_time[1], date: form.continuous_time[0] + "," + form.continuous_time[1],
} };
this.Constraints.push(newConstraint); this.Constraints.push(newConstraint);
this.getClueCols(); this.getClueCols();
this.getClueData(); this.getClueData();
}, },
// 根据属性id显示属性 // 根据属性id显示属性
search_clu_name(aa){ search_clu_name(aa) {
for (let col of this.clueCols) { for (let col of this.clueCols) {
if(aa == col.col_id) if (aa == col.col_id) return col.col_name;
return col.col_name;
} }
}, },
Condition_to_string(Constraint){ Condition_to_string(Constraint) {
if(Constraint.type == "string"){ if (Constraint.type == "string") {
return " 包含 " + Constraint.inside; return " 包含 " + Constraint.inside;
} }
if(Constraint.up == "INF" && Constraint.down == "INF"){ if (Constraint.up == "INF" && Constraint.down == "INF") {
return " 类型为 " + Constraint.type; return " 类型为 " + Constraint.type;
} }
if(Constraint.up == "INF" && Constraint.type == "double"){ if (Constraint.up == "INF" && Constraint.type == "double") {
return " 大于等于 " + Constraint.down; return " 大于等于 " + Constraint.down;
} }
if(Constraint.down == "INF" && Constraint.type == "double"){ if (Constraint.down == "INF" && Constraint.type == "double") {
return " 小于等于 " + Constraint.up; return " 小于等于 " + Constraint.up;
} }
if(Constraint.type == "double")return " 在 " + Constraint.down + " 和 " + Constraint.up + "之间"; if (Constraint.type == "double")
if(Constraint.type == "date")return "在 " + Constraint.date + "之间"; return (
" 在 " + Constraint.down + " 和 " + Constraint.up + "之间"
);
if (Constraint.type == "date") return "在 " + Constraint.date + "之间";
}, },
constraint_delete(index){ constraint_delete(index) {
this.Constraints.splice(index, 1); this.Constraints.splice(index, 1);
this.getClueCols(); this.getClueCols();
this.getClueData(); this.getClueData();
}, },
dochart(){ dochart() {
const table=JSON.stringify(this.clueData); const table = JSON.stringify(this.clueData);
const column=JSON.stringify(this.cols); const column = JSON.stringify(this.cols);
this.$router.push({name:'Graph',params:{columns:column,tabledata:table}}) this.$router.push({
name: "Graph",
params: { columns: column, tabledata: table },
});
}, },
handleSelectionChange(selection) { handleSelectionChange(selection) {
// 在这里处理选择变化，selection 是选中的行数据数组 // 在这里处理选择变化，selection 是选中的行数据数组
this.selectedColumnData = selection; this.selectedColumnData = selection;
console.log( this.selectedColumnData); console.log(this.selectedColumnData);
console.log('选择的行数据:', selection); console.log("选择的行数据:", selection);
},
receiveSrow(value) {
// 在这里处理传递过来的值
this.srow = value;
console.log("djlasj", value);
}, },
// 返回首页的动态路由 // 返回首页的动态路由
returnHome(){ returnHome() {
this.$router.push({name:'Table'}) this.$router.push({ name: "Table" });
}, },
// 获取所有列名 // 获取所有列名
getClueCols(){ getClueCols() {
this.$axios.post('http://localhost:8000/showClueCol/', {table_id:this.clueId}).then(response=>{ this.$axios
.post("http://localhost:8000/showClueCol/", { table_id: this.clueId })
.then((response) => {
this.clueCols = response.data; this.clueCols = response.data;
}) });
}, },
// 获取某一线索库数据 // 获取某一线索库数据
getClueData(){ getClueData() {
this.$axios.post('http://localhost:8000/showClue/',{table_id:this.clueId,Constraints:this.Constraints}).then(response=>{ this.$axios
this.clueData = response.data; .post("http://localhost:8000/showClue/", {
table_id: this.clueId,
Constraints: this.Constraints,
}) })
.then((response) => {
this.clueData = response.data;
console.log(this.clueData);
});
}, },
mergeCols(){ mergeCols() {
// 创建一个映射表，便于查找列名 // 创建一个映射表，便于查找列名
const colMap = this.clueCols.reduce((acc, col) => { const colMap = this.clueCols.reduce((acc, col) => {
acc[col.col_id] = col.col_name; acc[col.col_id] = col.col_name;
@ -299,64 +336,69 @@ export default{
// 遍历clueData的第一个元素，构造新数组 // 遍历clueData的第一个元素，构造新数组
// 注意：这里假设所有对象的结构一致，且至少有一个元素 // 注意：这里假设所有对象的结构一致，且至少有一个元素
const mergedColumns = Object.keys(this.clueData[0]).map(key => { const mergedColumns = Object.keys(this.clueData[0])
if (key.startsWith('col_')) { .map((key) => {
const colId = key.replace('col_', ''); // 提取数字部分 if (key.startsWith("col_")) {
if(colId != 'id'){//排除id列 const colId = key.replace("col_", ""); // 提取数字部分
return { prop: key, label: colMap[colId] || '未知列名' }; if (colId != "id") {
//排除id列
return { prop: key, label: colMap[colId] || "未知列名" };
} }
} }
return null; // 或者忽略非col_开头的键 return null; // 或者忽略非col_开头的键
}).filter(Boolean); // 过滤掉null值 })
.filter(Boolean); // 过滤掉null值
// 检查合并后的结果 // 检查合并后的结果
return mergedColumns; return mergedColumns;
}, },
deleteClue(row){ deleteClue(row) {
const postData = { const postData = {
table_id:this.clueId, table_id: this.clueId,
clue_id:row.clue_id clue_id: row.clue_id,
}; };
//console.log(row) //console.log(row)
this.$axios.post('http://localhost:8000/delClue/',postData).then(response=>{ this.$axios
.post("http://localhost:8000/delClue/", postData)
.then((response) => {
const message = response.data.message; const message = response.data.message;
// 根据返回消息，进行不同的操作 // 根据返回消息，进行不同的操作
if(message == "删除成功"){ if (message == "删除成功") {
// 调用this.$message组件进行弹窗提示 // 调用this.$message组件进行弹窗提示
this.$message({ this.$message({
type:'success', type: "success",
message:'删除成功！' message: "删除成功！",
}); });
// 刷新页面 // 刷新页面
location.reload(); location.reload();
}else if(message == "删除失败"){ } else if (message == "删除失败") {
this.$message({ this.$message({
type:'error', type: "error",
message:'删除失败，请重试！' message: "删除失败，请重试！",
}); });
} }
}) })
.catch(error=>{ .catch((error) => {
// 使用自定义的错误处理 // 使用自定义的错误处理
this.$handleNetError(error); this.$handleNetError(error);
}); });
}, },
// 编辑线索记录按钮 // 编辑线索记录按钮
editClue(row){ editClue(row) {
let editDataID = { let editDataID = {
table_id:this.clueId, table_id: this.clueId,
clue_id:row.clue_id // clue_id,不要换 clue_id: row.clue_id, // clue_id,不要换
}; };
this.$refs.editDialog.dialogVisible = true; // 对话框是否可见 this.$refs.editDialog.dialogVisible = true; // 对话框是否可见
this.$refs.editDialog.formData = this.formatFormData(row); // 表单数据 this.$refs.editDialog.formData = this.formatFormData(row); // 表单数据
this.currentEditDataID = editDataID; this.currentEditDataID = editDataID;
console.log('editDataID',editDataID); console.log("editDataID", editDataID);
}, },
// 将数据格式化成表单数据 // 将数据格式化成表单数据
formatFormData(row) { formatFormData(row) {
const formData = {}; const formData = {};
this.cols.forEach(col => { this.cols.forEach((col) => {
if (col.prop !== 'id') { if (col.prop !== "id") {
formData[col.prop] = row[col.prop]; formData[col.prop] = row[col.prop];
} }
}); });
@ -364,13 +406,13 @@ export default{
return formData; return formData;
}, },
// 添加一条线索记录 // 添加一条线索记录
addOneClue(){ addOneClue() {
this.$refs.addDialog.dialogVisible = true; // 打开添加对话框 this.$refs.addDialog.dialogVisible = true; // 打开添加对话框
this.MaxId = this.clueData.length + 1; this.MaxId = this.clueData.length + 1;
}, },
}, },
computed: { computed: {
cols(){ cols() {
if (this.clueCols.length && this.clueData.length) { if (this.clueCols.length && this.clueData.length) {
return this.mergeCols(); return this.mergeCols();
} }
@ -379,25 +421,25 @@ export default{
formattedTableData() { formattedTableData() {
// 保留原始ID，同时格式化其他数据以匹配动态表头 // 保留原始ID，同时格式化其他数据以匹配动态表头
const Data = this.clueData.map(row => { const Data = this.clueData.map((row) => {
const newRow = { ...row }; // 复制row以避免修改原始数据 const newRow = { ...row }; // 复制row以避免修改原始数据
// 根据动态列，重新组织数据对象 // 根据动态列，重新组织数据对象
this.cols.forEach(col => { this.cols.forEach((col) => {
if (col.label !== 'ID') { if (col.label !== "ID") {
newRow[col.label] = newRow[col.prop]; newRow[col.label] = newRow[col.prop];
} }
}); });
return newRow; return newRow;
}); });
return Data; return Data;
} },
}, },
watch: { watch: {
// 调试约束条件添加的方法 // 调试约束条件添加的方法
searchDialogVisible(newValue){ searchDialogVisible(newValue) {
console.log(newValue); console.log(newValue);
}, },
Constraints(newv){ Constraints(newv) {
console.log(newv); console.log(newv);
}, },
}, },
@ -405,117 +447,99 @@ export default{
</script> </script>
<style scoped> <style scoped>
.el-container{ .el-container {
padding: 0; padding: 0;
} }
.containerTools{ .containerTools {
height:4%; background: white;
padding:0.7%; height: 6%;
display:flex; padding: 2%;
display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.containerHead{ .containerHead {
padding:0; padding: 0;
height:6%; height: 8%;
padding :0; padding: 0;
width: 100%; width: 100%;
display:flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: white; background-color: #b3c0d1;
align-items: center; align-items: center;
} }
.HeaderPage{ .el-container.toolbar {
background: #b3c0d1;
}
.HeaderPage {
width: 90%; width: 90%;
} }
.btnReturnHomePage{ .btnReturnHomePage {
font-size: large; font-size: large;
width: 3%; width: 3%;
font-weight: 25px; font-weight: 25px;
} }
.container_Tools_Main{ .container_Tools_Main {
padding:0; padding: 0;
background-color: #f5f6fa; background-color: #f5f6fa;
height: 94%; height: 92%;
width: 100%; width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
} }
.el-button{ .el-button {
background-color: transparent; background-color: transparent;
margin:2; margin: 2;
padding:2; padding: 2;
border: 0; border: 0;
color: #0e5858; color: #0e5858;
font-size: 24px; font-size: 24px;
} }
.el-button:hover{ .el-button:hover {
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.7);
} }
/* 设置表格 */ /* 设置表格 */
.containerMain{ .containerMain {
background-color: #f5f6fa; background-color: #f5f6fa;
padding: 10px; padding: 10px;
padding-top: 0; padding-top: 0;
height:96%; height: 90%;
overflow: auto; overflow: auto;
} }
.btnItemDelete{ .btnItemDelete {
background-color: lightcoral; background-color: rgb(223, 62, 62);
color: white; color: white;
border-radius: 14px; border-radius: 14px;
font-size: 12px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
.btnItemDelete:hover{ .btnItemDelete:hover {
background: rgba(240, 128, 128, 0.647); background: rgba(240, 128, 128, 0.647);
} }
.btnItemEdit{ .btnItemEdit {
background-color: #1DAFAF; background-color: #409eff;
color: white; color: white;
border-radius: 14px; border-radius: 14px;
font-size: 12px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
.btnItemEdit:hover{ .btnItemEdit:hover {
background: #1dafafd2; background: #90bdeb;
} }
.btnDelete,.btnSearch,.btnMore{ .btnDelete,
.btnSearch,
.btnMore {
text-align: start; text-align: start;
padding: 0.6%; padding: 0.6%;
margin: 0; margin: 0;
} }
.custom-operation-column .cell {
/* 控制多选模式和单选模式按钮的CSS */ font-size: 16px; /* 修改操作字体大小 */
#mul-mode{ text-align: center; /* 调整标题文本居中对齐 */
background-color: #1DAFAF; /* 其他样式调整 */
color: white;
font-size: 14px;
font-weight: bold;
} }
#normal-mode{ .custom-operation-header {
color: white; font-size: 16px; /* 修改标题字体大小 */
font-size: 14px; text-align: center; /* 调整标题文本居中对齐 */
font-weight: bold; /* 其他样式调整 */
background-color: #1DAFAF;
}
#mul-mode:hover,#normal-mode:hover{
background-color: #1ad4c4d4;
color: white;
}
#containerConstraints{
background-color: #1DAFAF;
}
.btnPlus{
color:white;
font-size: 14px;
width: 1%;
background-color: #158484;
height: 1%;
}
.btnPlus:hover{
background-color: #1DAFAF
} }
</style> </style>

129
src/views/HomePage.vue
View File

@ -1,19 +1,17 @@
<template> <template>
<el-container class = "containerAll"> <el-container class="containerAll">
<!--这是头栏部件--> <!--这是头栏部件-->
<el-header class = 'containerHead'> <el-header class="containerHead">
<HeaderPage :pageTitle = 'pageTitle'> <HeaderPage :pageTitle="pageTitle"> </HeaderPage>
</HeaderPage>
</el-header> </el-header>
<el-main style="padding:0; height:92%" > <el-main style="padding: 0; height: 92%">
<el-container class = "container_Tools_Main" > <el-container class="container_Tools_Main">
<!--这是主体的头栏用于防止工具等--> <!--这是主体的头栏用于防止工具等-->
<el-header class = 'containerTools'> <el-header class="containerTools">
<!--这是上传文档按钮--> <!--这是上传文档按钮-->
<el-button class = 'uploadBtn' type = 'primary' @click='openDialog'> <el-button class="uploadBtn" type="primary" @click="openDialog">
<el-tooltip content = '上传文件'> <el-tooltip content="上传文件">
<el-icon><DocumentAdd /></el-icon>
<el-icon><DocumentAdd/></el-icon>
</el-tooltip> </el-tooltip>
</el-button> </el-button>
<el-dialog <el-dialog
@ -30,16 +28,14 @@
:http-request="uploadFiles" :http-request="uploadFiles"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:limit="1" :limit="1"
accept='.csv' accept=".csv"
> >
<el-icon class="el-icon--upload"><upload-filled /></el-icon> <el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text"> <div class="el-upload__text">
拖拽文件到这里或者 <em>点击上传</em> 拖拽文件到这里或者 <em>点击上传</em>
</div> </div>
<template #tip> <template #tip>
<div class="el-upload__tip"> <div class="el-upload__tip">上传csv文档</div>
上传csv文档
</div>
</template> </template>
</el-upload> </el-upload>
</div> </div>
@ -52,9 +48,8 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
</el-header> </el-header>
<el-main class = 'containerMain'> <el-main class="containerMain">
<Clues_Database_Display /> <Clues_Database_Display />
</el-main> </el-main>
</el-container> </el-container>
@ -64,112 +59,118 @@
<script> <script>
/** 引入所有线索库的展示部件 */ /** 引入所有线索库的展示部件 */
import Clues_Database_Display from '@/components/components_homepage/ShowCluesTable.vue' import Clues_Database_Display from "@/components/components_homepage/ShowCluesTable.vue";
/** 映入头栏的展示部件 */ /** 映入头栏的展示部件 */
import HeaderPage from "@/components/HeaderPage.vue" import HeaderPage from "@/components/HeaderPage.vue";
import { ElContainer } from 'element-plus' import { ElContainer } from "element-plus";
export default{ export default {
components:{ components: {
HeaderPage, HeaderPage,
Clues_Database_Display Clues_Database_Display,
}, },
data(){ data() {
return{ return {
pageTitle: '线索库总览', pageTitle: "线索库总览",
dialogVisible:false,
fileList:[], dialogVisible: false,
fileName:'', fileList: [],
isFileUploaded:false, fileName: "",
isFileUploaded: false,
cardsPerRow: 3, // 控制每行显示的卡片数量，默认为3 cardsPerRow: 3, // 控制每行显示的卡片数量，默认为3
} };
}, },
methods:{ methods: {
openDialog(){ openDialog() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
handleUpload(){ handleUpload() {
this.dialogVisible = false; this.dialogVisible = false;
}, },
uploadFiles(params){ uploadFiles(params) {
this.fileList.push(params.file); this.fileList.push(params.file);
console.log("获取到的文件：",params.file); console.log("获取到的文件：", params.file);
}, },
// 文件数量超出限制的时候执行 // 文件数量超出限制的时候执行
handleExceed() { handleExceed() {
this.$message({ type: 'error', message: '最多支持1个附件上传' }) this.$message({ type: "error", message: "最多支持1个附件上传" });
}, },
// 点击确定按钮之后上传表单内容和文件 // 点击确定按钮之后上传表单内容和文件
submitImportForm() { submitImportForm() {
// 使用form表单的数据格式 // 使用form表单的数据格式
const params = new FormData() const params = new FormData();
// 将上传文件数组依次添加到参数paramsData中 // 将上传文件数组依次添加到参数paramsData中
this.fileList.forEach((file) => { this.fileList.forEach((file) => {
params.append('file', file) params.append("file", file);
console.log("导入表单的文件：",file) console.log("导入表单的文件：", file);
}); });
// 将输入表单数据添加到params表单中 // 将输入表单数据添加到params表单中
params.append('name', this.fileName) params.append("name", this.fileName);
// console.log("导入文件的名称：",params.get('name')); // console.log("导入文件的名称：",params.get('name'));
console.log("整个表单数据：",params) console.log("整个表单数据：", params);
//这里根据自己封装的axios来进行调用后端接口 //这里根据自己封装的axios来进行调用后端接口
this.$axios.post('http://localhost:8000/CSVUploadView/',params).then(response => { this.$axios
.post("http://localhost:8000/CSVUploadView/", params)
.then((response) => {
this.$message({ this.$message({
message: response.data.message, message: response.data.message,
type: "success" type: "success",
}) });
location.reload() location.reload();
// this.$refs.importFormRef.resetFields()//清除表单信息 // this.$refs.importFormRef.resetFields()//清除表单信息
// this.$refs.upload.clearFiles()//清空上传列表 // this.$refs.upload.clearFiles()//清空上传列表
this.fileList = []//集合清空 this.fileList = []; //集合清空
this.dialogVisible1 = false//关闭对话框 this.dialogVisible1 = false; //关闭对话框
}) });
} },
} },
} };
</script> </script>
<style scoped> <style scoped>
/** 工具栏的样式 */ /** 工具栏的样式 */
.containerAll{ .containerAll {
/* 只有调整父部件的高度，子部件的高度才能按照100%调控 */ /* 只有调整父部件的高度，子部件的高度才能按照100%调控 */
height: 100%; height: 100%;
padding:0; padding: 0;
width: 100%; width: 100%;
} }
/* 头栏样式表 */ /* 头栏样式表 */
.containerHead{ .containerHead {
width: 100%; width: 100%;
padding: 0; padding: 0;
height: 6%; height: 8%;
background-color: #b3c0d1;
} }
.containerTools{ .toolbar {
background-color: #b3c0d1;
}
.containerTools {
padding-right: 2%; /**让按钮与卡片最左侧对齐 */ padding-right: 2%; /**让按钮与卡片最左侧对齐 */
margin: 0; margin: 0;
height: 6%; height: 6%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
/* 工具栏和主体样式 */ /* 工具栏和主体样式 */
.container_Tools_Main{ .container_Tools_Main {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
height:100%; height: 100%;
background-color: #f5f6fa; background-color: #f5f6fa;
} }
/* 上传按钮样式 */ /* 上传按钮样式 */
.uploadBtn{ .uploadBtn {
color: #0E5858; color: #0e5858;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
font-size:30px; font-size: 30px;
} }
.uploadBtn:hover{ .uploadBtn:hover {
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.7);
} }
</style> </style>

338
src/views/ShowGraph.vue
View File

@ -35,31 +35,10 @@
@update:selectedrow="handleSelectedRow" @update:selectedrow="handleSelectedRow"
@update:selectedChartType="handleSelectedChartType" @update:selectedChartType="handleSelectedChartType"
@update:selectedrow2="handleSelectedRow2" @update:selectedrow2="handleSelectedRow2"
@update:selectedrow3="handleSelectedRow3"
:rowOptions="convertedColumns" :rowOptions="convertedColumns"
:rowOptions2="convertedColumns" :rowOptions2="convertedColumns"
> >
</component> </component>
<el-card v-if="entity">
<el-row>
<el-table
:data="columnData"
:show-header="true"
:max-height="200"
@selection-change="handleSelectionChange"
stripe
>
<el-table-column type="selection" width="55" style="background-color: black;"/>
<el-table-column
prop="name"
label="对象"
header-style="background-color: black; color: white;"
style="text-align: center;">
</el-table-column>
</el-table>
</el-row>
</el-card>
<el-form-item> <el-form-item>
<el-button type="primary" size="medium" @click="handleGenerateChart"> <el-button type="primary" size="medium" @click="handleGenerateChart">
点击生成图表 点击生成图表
@ -69,16 +48,16 @@
</el-row> </el-row>
</el-card> </el-card>
</div> </div>
<div class="right-grid" v-if="hasUpperContent"> <div class="right-grid">
<div class="upper-right" v-if="hasUpperContent">
<el-button type="danger" @click="clearchart">取消</el-button> <el-button type="danger" @click="clearchart">取消</el-button>
<div ref="chartContainer" class="chart-container"></div> <div ref="chartContainer" class="chart-container"></div>
</div>
<div class="lower-right">
</div> </div>
<div class="right-grid" v-else> <div ref="chartContainer" class="chart-container"></div> </div>
</div> </div>
</div>
</el-container> </el-container>
</template> </template>
@ -106,8 +85,6 @@ export default {
data() { data() {
return { return {
ISmul4:false,
selectedColumnData:Array,
xz:[], xz:[],
yz:[], yz:[],
pageTitle:'图形可视化', pageTitle:'图形可视化',
@ -121,7 +98,6 @@ export default {
stype:'', stype:'',
srow:'', srow:'',
srow2:'', srow2:'',
srow3:'',
gap:'', gap:'',
monthKey:'', monthKey:'',
chartType: 'bar', chartType: 'bar',
@ -152,25 +128,6 @@ export default {
// } // }
// }, // },
computed: { computed: {
entity()
{
if (this.selectedEntity=='entity5')
return 1;
else
return 0;
},
columnData() {
if (this.srow)
{
let name=this.srow
const uniqueSet = new Set(this.mytable.map(item => item[name]));
// 将 Set 转换为数组形式
const uniqueArray = Array.from(uniqueSet).map(name => ({ name: name }));
return uniqueArray;
}
else
return '';
},
convertedColumns() { convertedColumns() {
return this.mycolumns.map(item => { return this.mycolumns.map(item => {
return { value: item.prop, label: item.label }; return { value: item.prop, label: item.label };
@ -202,77 +159,9 @@ export default {
console.log('Parsed columns:', this.mycolumns,this.table); console.log('Parsed columns:', this.mycolumns,this.table);
}, },
methods: { methods: {
handleSelectionChange(selection) {
// 在这里处理选择变化，selection 是选中的行数据数组
let obj=selection.map(item=>item.name)
console.log(obj)
this.selectedColumnData =selection.map(item=>item.name)
console.log( this.selectedColumnData);
console.log('选择的行数据:', selection);
},
returnHome(){ returnHome(){
window.history.back(); window.history.back();
}, },
extractThreeColumns(tableData) {
let extractedData = tableData.map(row => ({
month: row[this.srow3],
product: row[this.srow],
amount: row[this.srow2]
}));
return extractedData;
},
count_sum_time()
{
this.hasUpperContent = true;
let counts = {};
let salesData=this.extractThreeColumns(this.mytable);
console.log(salesData)
// 遍历销售记录数组，填充 counts 对象
salesData.forEach(record => {
let { month, product, amount } = record;
let currentMonth=new Date(month)
let monthKey1 = currentMonth.getFullYear() + '-' + (currentMonth.getMonth() + 1);
if (!counts[monthKey1]) {
counts[monthKey1] = {};
}
if ( !counts[monthKey1][product])
counts[monthKey1][product] = amount;
else
counts[monthKey1][product] += amount;
});
// 现在 counts 对象包含了每个月份每种产品的销售额信息
const products = this.selectedColumnData;
let years = Array.from(new Set(salesData.map(record => new Date(record.month).getFullYear()+ '-' + (new Date(record.month).getMonth() + 1)))).sort();
// Create the structure similar to 'source'
let result = [['product', ...years]];
products.forEach(product => {
let rowData = [product];
for (let i = 0; i < years.length; i++) {
rowData.push(0);
}
result.push(rowData);
});
products.forEach(product=>
{
years.forEach(year => {
if (counts[year][product])
result[products.indexOf(product)+1][years.indexOf(year)+1]+=counts[year][product];
else
result[products.indexOf(product)+1][years.indexOf(year)+1]+=0;
});
}
)
console.log(result)
return result;
},
countsumbystring() { countsumbystring() {
// 创建一个对象来存储每个名字对应的实数总和 // 创建一个对象来存储每个名字对应的实数总和
this.hasUpperContent = true; this.hasUpperContent = true;
@ -295,98 +184,6 @@ for (let i = 0; i < years.length; i++) {
// 返回结果对象 // 返回结果对象
return sumByName; return sumByName;
}, },
do_entity4()
{let counts=[];
for (let i=0;i<this.srow2.length;i++)
{
this.handletwodata(this.srow,this.srow2[i]);
if (this.srow2[i]=='entity')
{
counts[i]=this.countStrings();
}
else
counts[i]=this.countsumbystring();
}
return counts;
},
generateyAxis(counts)
{
let yAxis = [];
// Generate Evaporation and Precipitation yAxis
for (let i = 0; i < counts.length; i++) {
yAxis.push({
type: 'value',
name: this.srow2[i],
position: 'left',
offset:i*40,
alignTicks: true,
axisLine: {
show: true
}
});
}
return yAxis;
},
generateSeries2(counts)
{
let Series= [];
// Generate Evaporation and Precipitation yAxis
for (let i = 0; i < counts.length; i++) {
Series.push({
name: this.srow2[i],
type: this.stype,
data: Object.values(counts[i]),
});
} return Series;
},
generateOptions(counts)
{
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: Object.values(this.srow2)
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: Object.keys(counts[0]),
axisLabel:
{
frontSize:12,
interval:0,
rotate:30
}
}
],
yAxis: this.generateyAxis(counts),
series: this.generateSeries2(counts),
};return option;
},
handlerow() handlerow()
{ {
this.srow=''; this.srow='';
@ -531,14 +328,6 @@ currentDate.setDate(currentDate.getDate()+1);
handleSelectedRow2(value) { handleSelectedRow2(value) {
console.log('Selected Row2:', value); console.log('Selected Row2:', value);
this.srow2=value this.srow2=value
if (this.selectedEntity=='emtity4' &&this.srow2.length()>1)
{
this.ISmul4=true;
}
},
handleSelectedRow3(value) {
console.log('Selected Row3:', value);
this.srow3=value
}, },
handleSelectedChartType(value) { handleSelectedChartType(value) {
@ -620,18 +409,7 @@ currentDate.setDate(currentDate.getDate()+1);
}); });
return counts; return counts;
}, },
generateSeries(source) {
// 根据数据源的长度动态生成对应数量的 series
const series = [];
for (let i = 0; i < source.length - 1; i++) {
if (i < 3) {
series.push({ type: 'bar', seriesLayoutBy: 'row' }); // 第一个 grid 的 series
} else {
series.push({ type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }); // 第二个 grid 的 series
}
}
return series;
},
drawChart(counts) { drawChart(counts) {
try try
{ {
@ -639,17 +417,8 @@ currentDate.setDate(currentDate.getDate()+1);
this.chartInstance = echarts.init(chartContainer); this.chartInstance = echarts.init(chartContainer);
let option; let option;
if (!this.entity)
{
if (this.stype === 'bar' || this.stype == 'line') { if (this.stype === 'bar' || this.stype == 'line') {
option = { option = {
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: Object.keys(counts), data: Object.keys(counts),
@ -672,15 +441,6 @@ currentDate.setDate(currentDate.getDate()+1);
} else if (this.stype === 'pie') { } else if (this.stype === 'pie') {
const data = Object.entries(counts).map(([name, value]) => ({ value, name })); const data = Object.entries(counts).map(([name, value]) => ({ value, name }));
option = { option = {
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [{ series: [{
type: 'pie', type: 'pie',
radius: '60%', radius: '60%',
@ -689,35 +449,7 @@ currentDate.setDate(currentDate.getDate()+1);
xAxis: { show: false }, // 不显示区间横轴 xAxis: { show: false }, // 不显示区间横轴
}; };
} }
}
else{
option = {
legend: {},
tooltip: {},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
dataset: {
source: counts
},
xAxis: [
{ type: 'category', gridIndex: 0 },
{ type: 'category', gridIndex: 1 }
],
yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
grid: [{ bottom: '55%' }, { top: '55%' }],
series: this.generateSeries(counts)
};
}
if (this.selectedEntity=='entity4')
{
option=this.generateOptions(counts);
console.log(option)
}
this.chartInstance.setOption(option); this.chartInstance.setOption(option);
}catch(error) }catch(error)
{ {
@ -781,16 +513,16 @@ currentDate.setDate(currentDate.getDate()+1);
} }
}, },
handletwodata(srow,srow2) { handletwodata() {
if (!this.mytable || this.mytable.length === 0) { if (!this.mytable || this.mytable.length === 0) {
alert("没有数据"); alert("没有数据");
} else { } else {
if (!srow || !srow2) { if (!this.srow || !this.srow2) {
return null; return null;
} else { } else {
const combinedData = this.mytable.map(row => { const combinedData = this.mytable.map(row => {
if (row && row[srow] !== undefined) { if (row && row[this.srow] !== undefined) {
return [row[srow], row[srow2]]; return [row[this.srow], row[this.srow2]];
} else { } else {
return [null, null]; // 如果选定的属性不存在，返回默认值或者处理错误 return [null, null]; // 如果选定的属性不存在，返回默认值或者处理错误
} }
@ -807,7 +539,7 @@ currentDate.setDate(currentDate.getDate()+1);
console.log(this.columns) console.log(this.columns)
try{ try{
this.handledata(); this.handledata();
this.handletwodata(this.srow,this.srow2[0]); this.handletwodata();
} catch(error) { } catch(error) {
alert("请选择数据") alert("请选择数据")
} }
@ -830,13 +562,20 @@ currentDate.setDate(currentDate.getDate()+1);
const counts=this.countDataByInterval(); const counts=this.countDataByInterval();
setTimeout(()=>this.drawChart(counts),500); setTimeout(()=>this.drawChart(counts),500);
}else if(this.selectedEntity=='entity4'){ }else if(this.selectedEntity=='entity4'){
let counts=this.do_entity4(); if (this.srow2!='entity'){
console.log(counts) const counts=this.countsumbystring();
setTimeout(()=>this.drawChart(counts),500);
} else {
const counts=this.countStrings();
setTimeout(()=>this.drawChart(counts),500); setTimeout(()=>this.drawChart(counts),500);
} }
}
else if (this.selectedEntity=='entity5'){ else if (this.selectedEntity=='entity5'){
const counts=this.count_sum_time(); this.hasUpperContent = true;
console.log(counts) const counts={}
for (let i = 0; i < this.xz.length; i++) {
counts[this.xz[i]] = this.yz[i];
}
setTimeout(()=>this.drawChart(counts),500);} setTimeout(()=>this.drawChart(counts),500);}
else { else {
this.$message.warning('请选择实体'); this.$message.warning('请选择实体');
@ -847,31 +586,44 @@ currentDate.setDate(currentDate.getDate()+1);
</script> </script>
<style scoped> <style scoped>
.container { .container {
display: grid; display: grid;
grid-template-columns: 35% 65%; grid-template-columns: 35% 65%;
width: 100%; width: 100%;
height: 80vh; height: 80vh;
gap: 10px;
text-align: center
} }
.left-grid { .left-grid, .right-grid {
background-color: #f0f0f0; background-color: #f0f0f0;
border-radius: 2%; border-radius: 2%;
padding: 20px; padding: 20px;
height: 100%; height: 100%;
box-sizing: border-box;
} }
.right-grid { .right-grid {
display: grid;
grid-template-rows: 600px auto; /* 上半部分固定为600px，下半部分自动填充 */
background-color: #e9d7df; background-color: #e9d7df;
border-radius: 2%;
padding: 20px;
height: 100%;
} }
.upper-right {
/* 上半部分样式 */
display: flex;
justify-content: center;
align-items: center;
/* 如果内容溢出，隐藏溢出部分 */
}
.lower-right {
/* 下半部分样式 */
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto; /* 如果内容过多，显示滚动条 */
}
.chart-container { .chart-container {
width: 90%; width: 90%;
height: 90%; height: 90%;
@ -879,8 +631,8 @@ currentDate.setDate(currentDate.getDate()+1);
} }
.el-row { .el-row {
margin-top: 0px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 10px;
} }
.demo-select { .demo-select {

236
src/views/WithDraw.vue
View File

@ -1,58 +1,20 @@
<template> <template>
<div style="background-color: #fff; height: 100vh;"> <el-table :data="tableData" style="width: 100%">
<el-container style="height: 100%; display: flex; flex-direction: column;">
<el-header class="withrawHeader">
<h1 class="headerText">回收站</h1>
</el-header>
<el-main style="flex: 1; overflow: auto;">
<!-- 工具栏 -->
<el-header class="toolbar" style="padding: 10px;">
<el-tooltip class="withdrawToolTip" content="撤销对选中线索的删除">
<el-button class='btnWithdraw' @click="withdrawSelected">
<el-icon><Remove /></el-icon>
</el-button>
</el-tooltip>
<el-tooltip class="deleteToolTip" content="彻底删除选中线索">
<el-button class="btnDelete" @click="deleteSelected">
<el-icon><DeleteFilled /></el-icon>
</el-button>
</el-tooltip>
<!-- 刷新 -->
<el-tooltip class="withdrawToolTip" content="刷新">
<el-button class="btnDelete" @click="refreshData">
<el-icon><RefreshRight /></el-icon>
</el-button>
</el-tooltip>
</el-header>
<el-table
:data="tableData"
style="width: 100%;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" class="withdrawSelectionCol"></el-table-column>
<!-- 动态生成表格列 --> <!-- 动态生成表格列 -->
<el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"> <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label">
<template v-slot="scope"> <template v-slot="scope">
<span>{{ formatValue(scope.row, column.prop) }}</span> <span>{{ formatValue(scope.row,column.prop) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<!-- 添加删除按钮 --> <!-- 添加删除按钮 -->
<el-table-column label="操作"> <el-table-column label="操作">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-button type="text" @click="withdrawRow(scope.row)">撤销</el-button> <el-button type="text" @click="withdrawRow(scope.row)">撤销</el-button>
<el-button type="text" @click="deleteClue(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-main>
</el-container>
</div>
</template> </template>
<script> <script>
import axios from 'axios'; import axios from 'axios';
@ -68,11 +30,43 @@ export default {
{ prop: "table_id", label: "表ID" }, { prop: "table_id", label: "表ID" },
{ prop: "clue_id", label: "线索ID" }, { prop: "clue_id", label: "线索ID" },
{ prop: "del_time", label: "时间" } { prop: "del_time", label: "时间" }
], // 表格列配置 ] // 表格列配置
deleteClues:[], // 选中的数据行
}; };
}, },
methods: { methods: {
getDelete() {
// 获取表格数据
axios.get('http://localhost:8000/showDelRecords/')
.then(res => {
console.log(res.data)
if(res.data.message=='没有删除记录')
{
return
}
this.tableData = res.data; // 将接口返回的数据赋值给表格数据
})
.catch(error => {
console.error(error);
});
},
withdrawRow(row) {
const index = this.tableData.indexOf(row);
if (index !== -1) {
// 发送请求到后端，传输撤销的行的 ID
axios.post('http://localhost:8000/withDraw/', { id: row.id })
.then(response => {
console.log('撤销成功:', response.data);
// 从表格数据中移除指定行
this.tableData.splice(index, 1);
})
.catch(error => {
console.error('撤销失败:', error);
});
}
}
},
formatValue(row, prop) { formatValue(row, prop) {
// 针对 type 字段进行特殊处理 // 针对 type 字段进行特殊处理
if (prop === 'type' && row[prop] === '0') { if (prop === 'type' && row[prop] === '0') {
@ -85,166 +79,12 @@ export default {
return '线索' return '线索'
return row[prop]; return row[prop];
}, },
getDelete() {
// 获取表格数据
axios.get('http://localhost:8000/showDelRecords/').then(res => {
if(res.data.message=='没有删除记录')
{
return
}
this.tableData = res.data.data; // 这里要注意，最后一个data需要和后端返回的键名对应
})
.catch(error => {
this.$handleNetError(error); // 处理网络错误
});
},
withdrawRow(row) {
const index = this.tableData.indexOf(row);
if (index !== -1) {
// 发送请求到后端，传输撤销的行的 ID
axios.post('http://localhost:8000/withDraw/', { id: row.id }).then(response => {
console.log('撤销成功:', response.data);
// 从表格数据中移除指定行
this.tableData.splice(index, 1);
})
.catch(error => {
this.$handleNetError(error);
});
}
},
handleSelectionChange(selection){
this.deleteClues = selection; // 获取选中的数据
},
// 批量撤销
withdrawSelected(){
// 如果没有选择数据，抛出警告并终止
if(this.deleteClues.length == 0){
this.$message({
type: 'warning',
message: '请选择要撤销的线索'
});
return;
}
for(let i = 0;i < this.deleteClues.length;i++){
this.$axios.post('http://localhost:8000/withDraw/',{ id:this.deleteClues[i].id })
.catch(error => {
this.$handleNetError(error);
return;
});
}
this.$message({
type: 'success',
message: '撤销成功，即将刷新界面'
});
// 撤销成功后，更新表格数据
location.reload();
},
// 删除单条线索
deleteClue(row){
const deleteItem = {
table_id: row.table_id,
clue_id: row.clue_id
}
this.$axios.post('http:localhosat:8000/deleteSelected/',{deleteData:deleteItem}).then(response=>{
if(response.data.message == '删除成功'){
// 弹窗提示
this.$message({
type: 'success',
message: '删除成功，即将刷新界面'
});
location.reload(); // 刷新页面
}else{
this.$message({
type: 'error',
message: '删除失败'
});
}
})
.catch(error=>{
this.$handleNetError(error); // 处理网络请求错误
})
},
// 删除选中的线索
deleteSelected(){
// 如果没有选择数据，抛出警告
if(this.deleteClues.length == 0){
this.$message({
type: 'warning',
message: '请选择要删除的线索'
});
return;
}
// 遍历选中的数据行，将要删除的数据存入 deleteItems 数组
const deleteItems = this.deleteClues.map(row => ({
table_id: row.table_id, // 注意命名要与后端保持一致
clue_id: row.clue_id,
}));
// 循环发送删除请求
for(let i = 0; i < deleteItems.length; i++){
this.$axios.post('http://localhost:8000/deleteSelected/',
{table_id:deleteItems[i].table_id, clue_id:deleteItems[i].clue_id}).then(response=>{
if(response.data.message == '删除成功'){
// 弹窗提示
this.$message({
type: 'success',
message: '删除成功'
});
}else{
this.$message({
type: 'error',
message: '删除失败'
});
}
})
.catch(error=>{
this.$handleNetError(error); // 处理网络错误
return;
})
}
this.$message({
type: 'success',
message: '删除成功，即将刷新界面'
});
// 撤销成功后，更新表格数据
location.reload();
},
refreshData(){
location.reload();
}
},
mounted() { mounted() {
this.getDelete(); // 在组件挂载后调用获取数据的方法 this.getDelete(); // 在组件挂载后调用获取数据的方法
} }
//刷新
}; };
</script> </script>
<style scoped> <style>
.withdrawSelectionCol{ /* 可以添加一些自定义样式 */
width: 50px;
}
.headerText{
font-size: 24px;
text-align: center;
}
.toolbar{
height:6%;
padding:2%;
display:flex;
justify-content: flex-end;
align-items: center;
}
.btnDelete, .btnWithdraw{
text-align: start;
padding: 0.6%;
margin: 0;
}
.deleteToolTip, .withdrawToolTip .el-tooltip__content{
color: red !important;
}
</style> </style>

3
vue.config.js
View File

@ -1,4 +1,5 @@
const { defineConfig } = require('@vue/cli-service') const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true transpileDependencies: true,
lintOnSave:false,
}) })