1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"remainingRequest":"D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\cli-plugin-babel\\node_modules\\babel-loader\\lib\\index.js!D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\vue-loader-v15\\lib\\index.js??vue-loader-options!D:\\guoan\\ts-bigscreen-vue\\src\\components\\overview\\AssetOverview.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\guoan\\ts-bigscreen-vue\\src\\components\\overview\\AssetOverview.vue","mtime":1741155790925},{"path":"D:\\guoan\\ts-bigscreen-vue\\babel.config.js","mtime":1740967860001},{"path":"D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\cli-plugin-babel\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1740984332670},{"path":"D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\cli-plugin-babel\\node_modules\\babel-loader\\lib\\index.js","mtime":1740984332280},{"path":"D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\vue-loader-v15\\lib\\index.js","mtime":1740984469533}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:aW1wb3J0IF90b0NvbnN1bWFibGVBcnJheSBmcm9tICJEOi9ndW9hbi90cy1iaWdzY3JlZW4tdnVlL25vZGVfbW9kdWxlcy9AYmFiZWwvcnVudGltZS9oZWxwZXJzL2VzbS90b0NvbnN1bWFibGVBcnJheS5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLmFycmF5LmNvbmNhdC5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLmFycmF5LnB1c2guanMiOwppbXBvcnQgImNvcmUtanMvbW9kdWxlcy9lcy5vYmplY3QudG8tc3RyaW5nLmpzIjsKaW1wb3J0ICJjb3JlLWpzL21vZHVsZXMvZXMucmVnZXhwLmV4ZWMuanMiOwppbXBvcnQgImNvcmUtanMvbW9kdWxlcy9lcy5yZWdleHAudG8tc3RyaW5nLmpzIjsKaW1wb3J0ICJjb3JlLWpzL21vZHVsZXMvZXMuc3RyaW5nLnJlcGxhY2UuanMiOwpleHBvcnQgZGVmYXVsdCB7CiAgbmFtZTogIkFzc2V0T3ZlcnZpZXciLAogIGRhdGE6IGZ1bmN0aW9uIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICB0b3RhbEFzc2V0czogNTgwMDAwLAogICAgICBhc3NldFRyZW5kRGF0YTogewogICAgICAgIGNvbHVtbnM6IFsi5pyI5Lu9IiwgIui1hOS6p+aAu+WAvCJdLAogICAgICAgIHJvd3M6IFt7CiAgICAgICAgICDmnIjku706ICIx5pyIIiwKICAgICAgICAgIOi1hOS6p+aAu+WAvDogMzgwMDAwCiAgICAgICAgfSwgewogICAgICAgICAg5pyI5Lu9OiAiMuaciCIsCiAgICAgICAgICDotYTkuqfmgLvlgLw6IDUzNTAwMAogICAgICAgIH0sIHsKICAgICAgICAgIOaciOS7vTogIjPmnIgiLAogICAgICAgICAg6LWE5Lqn5oC75YC8OiA0NDUwMDAKICAgICAgICB9LCB7CiAgICAgICAgICDmnIjku706ICI05pyIIiwKICAgICAgICAgIOi1hOS6p+aAu+WAvDogNTIwMDAwCiAgICAgICAgfSwgewogICAgICAgICAg5pyI5Lu9OiAiNeaciCIsCiAgICAgICAgICDotYTkuqfmgLvlgLw6IDU3MDAwMAogICAgICAgIH0sIHsKICAgICAgICAgIOaciOS7vTogIjbmnIgiLAogICAgICAgICAg6LWE5Lqn5oC75YC8OiA0ODAwMDAKICAgICAgICB9XQogICAgICB9LAogICAgICBhc3NldENhdGVnb3JpZXM6IFt7CiAgICAgICAgbmFtZTogIuWbuuWumui1hOS6pyIsCiAgICAgICAgdmFsdWU6IDQyMDAwMAogICAgICB9LCB7CiAgICAgICAgbmFtZTogIua1geWKqOi1hOS6pyIsCiAgICAgICAgdmFsdWU6IDEyMDAwMAogICAgICB9LCB7CiAgICAgICAgbmFtZTogIuaXoOW9oui1hOS6pyIsCiAgICAgICAgdmFsdWU6IDQwMDAwCiAgICAgIH1dCiAgICB9OwogIH0sCiAgY29tcHV0ZWQ6IHsKICAgIGRpc3BsYXlEYXRhOiBmdW5jdGlvbiBkaXNwbGF5RGF0YSgpIHsKICAgICAgLy8g5aSN5Yi25Y6f5aeL5pWw5o2u5bm25Zyo5pyr5bC+5re75Yqg5YmN6Z2i55qE5pWw5o2u5Lul5a6e546w5peg57yd5rua5YqoCiAgICAgIHJldHVybiBbXS5jb25jYXQoX3RvQ29uc3VtYWJsZUFycmF5KHRoaXMuYXNzZXRUcmVuZERhdGEucm93cyksIF90b0NvbnN1bWFibGVBcnJheSh0aGlzLmFzc2V0VHJlbmREYXRhLnJvd3MpKTsKICAgIH0KICB9LAogIG1ldGhvZHM6IHsKICAgIGZvcm1hdE51bWJlcjogZnVuY3Rpb24gZm9ybWF0TnVtYmVyKG51bSkgewogICAgICByZXR1cm4gbnVtLnRvU3RyaW5nKCkucmVwbGFjZSgvXEIoPz0oXGR7M30pKyg/IVxkKSkvZywgIiwiKTsKICAgIH0sCiAgICBnb1RvRGV0YWlsOiBmdW5jdGlvbiBnb1RvRGV0YWlsKCkgewogICAgICB0aGlzLiRyb3V0ZXIucHVzaCgiL2Fzc2V0LWRldGFpbCIpOwogICAgfSwKICAgIHRhYmxlUm93Q2xhc3NOYW1lOiBmdW5jdGlvbiB0YWJsZVJvd0NsYXNzTmFtZShfcmVmKSB7CiAgICAgIHZhciByb3dJbmRleCA9IF9yZWYucm93SW5kZXg7CiAgICAgIC8vIOagueaNruihjOe0ouW8leiuvue9ruS4jeWQjOeahOWKqOeUu+W7tui/nwogICAgICByZXR1cm4gInJvdy0iLmNvbmNhdChyb3dJbmRleCk7CiAgICB9CiAgfQp9Ow=="},{"version":3,"names":["name","data","totalAssets","assetTrendData","columns","rows","月份","资产总值","assetCategories","value","computed","displayData","concat","_toConsumableArray","methods","formatNumber","num","toString","replace","goToDetail","$router","push","tableRowClassName","_ref","rowIndex"],"sources":["src/components/overview/AssetOverview.vue"],"sourcesContent":["<template>\r\n <div class=\"asset-overview\">\r\n <div class=\"header\">\r\n <h3>资产概况</h3>\r\n <el-button type=\"text\" @click=\"goToDetail\">查看更多</el-button>\r\n </div>\r\n\r\n <div class=\"content\">\r\n <!-- 总资产和资产类别信息 -->\r\n <div class=\"asset-summary\">\r\n <div class=\"total-assets\">\r\n <div class=\"value\">¥ {{ formatNumber(totalAssets) }}</div>\r\n <div class=\"label\">总资产（万元）</div>\r\n </div>\r\n\r\n <div class=\"asset-categories\">\r\n <div\r\n class=\"category-item\"\r\n v-for=\"(item, index) in assetCategories\"\r\n :key=\"index\"\r\n >\r\n <span class=\"label\">{{ item.name }}</span>\r\n <span class=\"value\">{{ formatNumber(item.value) }}万</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- 修改表格部分 -->\r\n <div class=\"table-container\">\r\n <el-table\r\n :data=\"displayData\"\r\n style=\"width: 100%\"\r\n class=\"animated-table custom-table\"\r\n :row-class-name=\"tableRowClassName\"\r\n :header-cell-style=\"{\r\n background: 'transparent',\r\n color: '#fff',\r\n height: '35px',\r\n }\"\r\n :row-style=\"{ height: '30px' }\"\r\n :cell-style=\"{ padding: '0' }\"\r\n >\r\n <el-table-column\r\n prop=\"月份\"\r\n label=\"月份\"\r\n width=\"180\"\r\n align=\"center\"\r\n />\r\n <el-table-column\r\n prop=\"资产总值\"\r\n label=\"资产总值（万元）\"\r\n align=\"center\"\r\n />\r\n </el-table>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\"></div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: \"AssetOverview\",\r\n data() {\r\n return {\r\n totalAssets: 580000,\r\n assetTrendData: {\r\n columns: [\"月份\", \"资产总值\"],\r\n rows: [\r\n { 月份: \"1月\", 资产总值: 380000 },\r\n { 月份: \"2月\", 资产总值: 535000 },\r\n { 月份: \"3月\", 资产总值: 445000 },\r\n { 月份: \"4月\", 资产总值: 520000 },\r\n { 月份: \"5月\", 资产总值: 570000 },\r\n { 月份: \"6月\", 资产总值: 480000 },\r\n ],\r\n },\r\n assetCategories: [\r\n { name: \"固定资产\", value: 420000 },\r\n { name: \"流动资产\", value: 120000 },\r\n { name: \"无形资产\", value: 40000 },\r\n ],\r\n };\r\n },\r\n computed: {\r\n displayData() {\r\n // 复制原始数据并在末尾添加前面的数据以实现无缝滚动\r\n return [...this.assetTrendData.rows, ...this.assetTrendData.rows];\r\n },\r\n },\r\n methods: {\r\n formatNumber(num) {\r\n return num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n },\r\n goToDetail() {\r\n this.$router.push(\"/asset-detail\");\r\n },\r\n tableRowClassName({ rowIndex }) {\r\n // 根据行索引设置不同的动画延迟\r\n return `row-${rowIndex}`;\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.asset-overview {\r\n height: 100%;\r\n color: #fff;\r\n\r\n .header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n\r\n h3 {\r\n margin: 0;\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n .content {\r\n height: calc(100% - 80px);\r\n\r\n .asset-summary {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n\r\n .total-assets {\r\n text-align: center;\r\n .value {\r\n font-size: 24px;\r\n font-weight: bold;\r\n background: linear-gradient(135deg, #6a82fb, #fc5c7d);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .label {\r\n font-size: 14px;\r\n color: #fff;\r\n margin-top: 5px;\r\n }\r\n }\r\n\r\n .asset-categories {\r\n display: flex;\r\n gap: 20px;\r\n\r\n .category-item {\r\n text-align: center;\r\n\r\n .label {\r\n display: block;\r\n font-size: 12px;\r\n color: #fff;\r\n }\r\n\r\n .value {\r\n display: block;\r\n font-size: 16px;\r\n background: linear-gradient(135deg, #6a82fb, #fc5c7d);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n margin-top: 5px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .table-container {\r\n height: 120px;\r\n position: relative;\r\n overflow: hidden; /* 隐藏滚动条 */\r\n border: 1px solid #6a82fb;\r\n border-radius: 8px;\r\n\r\n .custom-table {\r\n ::v-deep {\r\n // 移除重复的边框\r\n .el-table__cell {\r\n border-right: none !important;\r\n }\r\n\r\n .el-table__header-wrapper {\r\n th {\r\n background: transparent;\r\n color: #fff;\r\n border-bottom: 1px solid #6a82fb;\r\n .cell {\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n .el-table__body-wrapper {\r\n background: transparent;\r\n overflow: hidden;\r\n\r\n td {\r\n background: transparent;\r\n border-bottom: 1px solid rgba(106, 130, 251, 0.1);\r\n }\r\n\r\n .el-table__body {\r\n animation: scroll 15s linear infinite;\r\n &:hover {\r\n animation-play-state: paused;\r\n }\r\n }\r\n }\r\n\r\n // 修改滚动动画\r\n @keyframes scroll {\r\n 0% {\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n transform: translateY(-50%); // 修改为-50%，因为数据是双倍的\r\n }\r\n }\r\n\r\n // 去除表格右侧边框\r\n .el-table__inner-wrapper::after {\r\n display: none;\r\n }\r\n\r\n // 去除表格内部边框\r\n .el-table--border::after {\r\n display: none;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n .el-table {\r\n background-color: transparent;\r\n }\r\n // 表格内背景颜色\r\n ::v-deep .el-table th,\r\n ::v-deep .el-table tr,\r\n ::v-deep .el-table td {\r\n background-color: transparent;\r\n border: 1px solid #6a82fb;\r\n color: #fff;\r\n }\r\n\r\n .footer {\r\n text-align: right;\r\n margin-top: 15px;\r\n\r\n .el-button {\r\n color: #6a82fb;\r\n font-size: 12px;\r\n font-weight: bold;\r\n }\r\n }\r\n}\r\n</style>"],"mappings":";;;;;;;AA8DA;EACAA,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,WAAA;MACAC,cAAA;QACAC,OAAA;QACAC,IAAA,GACA;UAAAC,EAAA;UAAAC,IAAA;QAAA,GACA;UAAAD,EAAA;UAAAC,IAAA;QAAA,GACA;UAAAD,EAAA;UAAAC,IAAA;QAAA,GACA;UAAAD,EAAA;UAAAC,IAAA;QAAA,GACA;UAAAD,EAAA;UAAAC,IAAA;QAAA,GACA;UAAAD,EAAA;UAAAC,IAAA;QAAA;MAEA;MACAC,eAAA,GACA;QAAAR,IAAA;QAAAS,KAAA;MAAA,GACA;QAAAT,IAAA;QAAAS,KAAA;MAAA,GACA;QAAAT,IAAA;QAAAS,KAAA;MAAA;IAEA;EACA;EACAC,QAAA;IACAC,WAAA,WAAAA,YAAA;MACA;MACA,UAAAC,MAAA,CAAAC,kBAAA,MAAAV,cAAA,CAAAE,IAAA,GAAAQ,kBAAA,MAAAV,cAAA,CAAAE,IAAA;IACA;EACA;EACAS,OAAA;IACAC,YAAA,WAAAA,aAAAC,GAAA;MACA,OAAAA,GAAA,CAAAC,QAAA,GAAAC,OAAA;IACA;IACAC,UAAA,WAAAA,WAAA;MACA,KAAAC,OAAA,CAAAC,IAAA;IACA;IACAC,iBAAA,WAAAA,kBAAAC,IAAA;MAAA,IAAAC,QAAA,GAAAD,IAAA,CAAAC,QAAA;MACA;MACA,cAAAZ,MAAA,CAAAY,QAAA;IACA;EACA;AACA","ignoreList":[]}]} |