├── public
    └── favicon.ico
├── src
    ├── assets
    │   ├── logo.png
    │   ├── js
    │   │   ├── storage.js
    │   │   ├── cart.js
    │   │   └── api.js
    │   └── css
    │   │   └── cart.css
    ├── shims-vue.d.ts
    ├── request.ts
    ├── main.ts
    ├── components
    │   ├── details
    │   │   ├── Manager.vue
    │   │   ├── allocate
    │   │   │   ├── Bond.vue
    │   │   │   ├── Industry.vue
    │   │   │   ├── Stock.vue
    │   │   │   ├── Concentrate.vue
    │   │   │   ├── IndustrySw.vue
    │   │   │   ├── Asset.vue
    │   │   │   └── AllocateHis.vue
    │   │   ├── charts
    │   │   │   ├── CyclePerformance.vue
    │   │   │   ├── ScaleChange.vue
    │   │   │   ├── RiskTraceShort.vue
    │   │   │   ├── Turnover.vue
    │   │   │   ├── HistoryStyle.vue
    │   │   │   ├── Performance.vue
    │   │   │   ├── HolderInfo.vue
    │   │   │   ├── Statistic.vue
    │   │   │   ├── Style.vue
    │   │   │   └── Brinson.vue
    │   │   ├── DetailLayout.vue
    │   │   ├── Allocate.vue
    │   │   ├── manager
    │   │   │   ├── Managed.vue
    │   │   │   └── TopHolding.vue
    │   │   ├── Fact.vue
    │   │   ├── KeyPortfolio.vue
    │   │   └── Attribution.vue
    │   ├── etf
    │   │   ├── ETFLayout.vue
    │   │   ├── ETFRecent.vue
    │   │   ├── ETFCategory.vue
    │   │   └── ETFHome.vue
    │   ├── Cart.vue
    │   ├── layout
    │   │   ├── Layout.vue
    │   │   └── Header.vue
    │   ├── dashboard
    │   │   ├── Simple.vue
    │   │   ├── Detail.vue.jsx.map
    │   │   ├── Detail.vue
    │   │   └── Detail.vue.jsx
    │   ├── Home.vue
    │   ├── Dashboard.vue
    │   ├── portfolio
    │   │   ├── Portfolio.vue.jsx.map
    │   │   ├── Portfolio.vue.jsx
    │   │   └── Portfolio.vue
    │   ├── screen
    │   │   ├── AddToPool.vue
    │   │   └── ScreenResult.vue
    │   ├── News.vue
    │   └── cart
    │   │   ├── Basic.vue
    │   │   ├── General.vue
    │   │   └── CartTable.vue.jsx.map
    ├── App.vue
    └── router
    │   └── index.ts
├── .gitignore
├── vite.config.ts
├── index.html
├── tsconfig.json
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PengchuanC/fund_vue3/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PengchuanC/fund_vue3/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
6 | .idea
7 | dist.tar.gz
8 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { DefineComponent } from 'vue'
3 |   const component: DefineComponent<{}, {}, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | import vueJsx from '@vitejs/plugin-vue-jsx'
4 | 
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 |   plugins: [vue(), vueJsx()]
8 | })
9 | 


--------------------------------------------------------------------------------
/src/request.ts:
--------------------------------------------------------------------------------
 1 | import {extend} from "umi-request";
 2 | 
 3 | 
 4 | const baseURL = "https://product.nomuraoi-sec.com/api/v1"
 5 | // const baseURL = "http://localhost:8000/api/v1"
 6 | const request = extend({
 7 |     prefix: baseURL,
 8 |     timeout: 50000,
 9 |     useCache: true
10 | })
11 | 
12 | export default request;
13 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import element from 'element-plus'
 3 | import 'element-plus/lib/theme-chalk/index.css'
 4 | import vxe from 'vxe-table'
 5 | import 'vxe-table/lib/style.css'
 6 | import locale from 'element-plus/lib/locale/lang/zh-cn'
 7 | 
 8 | import App from './App.vue'
 9 | import router from './router'
10 | 
11 | const app = createApp(App)
12 | app.use(router)
13 | app.use(element, { locale })
14 | app.use(vxe)
15 | 
16 | app.mount('#app')
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh">
 3 | <head>
 4 |     <meta charset="UTF-8"/>
 5 |     <link rel="icon" href="/favicon.ico"/>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 7 |     <title>基金筛选系统</title>
 8 |     <style>
 9 |         * {
10 |             margin: 0;
11 |             padding: 0;
12 |         }
13 |     </style>
14 | </head>
15 | <body>
16 | <div id="app"></div>
17 | <script type="module" src="/src/main.ts"></script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "moduleResolution": "node",
 6 |     "strict": true,
 7 |     "jsx": "preserve",
 8 |     "sourceMap": true,
 9 |     "resolveJsonModule": true,
10 |     "esModuleInterop": true,
11 |     "lib": ["esnext", "dom"],
12 |     "types": ["vite/client"],
13 |     "skipLibCheck": true,
14 |     "noImplicitAny": false
15 |   },
16 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/details/Manager.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="row">
 3 |     <div class="col">
 4 |       <Managed :secucode="secucode" />
 5 |     </div>
 6 |     <div class="col">
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import Managed from "./manager/Managed.vue";
13 | 
14 | export default {
15 |   name: "Manager",
16 |   components: {Managed},
17 |   props: {secucode: String},
18 |   setup(props){
19 |     const { secucode } = props
20 | 
21 |     return { secucode }
22 |   }
23 | }
24 | </script>
25 | 
26 | <style scoped>
27 | 
28 | .row {
29 |   display: inline-flex;
30 |   width: 100%;
31 | }
32 | 
33 | .col {
34 |   width: 50%;
35 |   height: 100%;
36 | }
37 | 
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/assets/js/storage.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default class Storage {
 3 |     static saveSearchHistory(search){
 4 |         let history = Storage.loadSearchHistory()
 5 |         for (const v in Object.keys(history)) {
 6 |             if (history[v].label === search.label){
 7 |                 return
 8 |             }
 9 |         }
10 |         history.unshift(search)
11 |         history = Array.from(new Set(history))
12 |         history = history.slice(0, 15)
13 |         localStorage.setItem('searchHistory', JSON.stringify(history))
14 |     }
15 | 
16 |     static loadSearchHistory(){
17 |         let historyStr = localStorage.getItem('searchHistory')
18 |         let history = JSON.parse(historyStr)
19 |         return history || []
20 |     }
21 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fund",
 3 |   "version": "2.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite --host",
 6 |     "build": "vue-tsc --noEmit && vite build",
 7 |     "serve": "vite preview"
 8 |   },
 9 |   "dependencies": {
10 |     "@vitejs/plugin-vue-jsx": "^1.1.7",
11 |     "dayjs": "^1.10.6",
12 |     "echarts": "^5.1.2",
13 |     "element-plus": "^1.0.2-beta.71",
14 |     "numeral": "^2.0.6",
15 |     "umi-request": "^1.3.9",
16 |     "vue": "^3.2.4",
17 |     "vue-router": "4.0.11",
18 |     "vxe-table": "^4.0.26",
19 |     "xe-utils": "^3.3.1"
20 |   },
21 |   "devDependencies": {
22 |     "@types/numeral": "^2.0.1",
23 |     "@vitejs/plugin-vue": "^1.4.0",
24 |     "@vue/compiler-sfc": "^3.2.4",
25 |     "typescript": "^4.2.4",
26 |     "vite": "^2.5.0",
27 |     "vue-tsc": "^0.2.3"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/etf/ETFLayout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ElTabs v-model="activeName">
 4 |       <ElTabPane label="资金概览" name="outlook" :lazy="true">
 5 |         <ETFHome />
 6 |       </ElTabPane>
 7 |       <ElTabPane label="分类统计" name="category" :lazy="true">
 8 |         <ETFCategory />
 9 |       </ElTabPane>
10 |       <ElTabPane label="近期情况" name="latest" :lazy="true">
11 |         <ETFRecent />
12 |       </ElTabPane>
13 |     </ElTabs>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import {defineComponent, ref} from "vue";
19 | import ETFHome from "./ETFHome.vue";
20 | import ETFCategory from "./ETFCategory.vue";
21 | import ETFRecent from "./ETFRecent.vue";
22 | 
23 | export default defineComponent({
24 |   name: "ETFLayout",
25 |   components: {ETFRecent, ETFCategory, ETFHome},
26 |   setup(){
27 |     const activeName = ref('outlook')
28 | 
29 |     return { activeName }
30 |   }
31 | 
32 | })
33 | </script>
34 | 
35 | <style scoped>
36 | 
37 | </style>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout></Layout>
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import {defineComponent, onMounted} from 'vue'
 7 | import Layout from "./components/layout/Layout.vue";
 8 | 
 9 | export default defineComponent({
10 |   name: 'App',
11 |   components: {Layout},
12 |   setup(){
13 |     onMounted(()=>{
14 |       console.info("%c高山仰止,景行行止\n虽不能至,心向往之", "color: green")
15 |     })
16 |   }
17 | })
18 | </script>
19 | 
20 | <style>
21 | #app {
22 |   font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
23 |   -webkit-font-smoothing: antialiased;
24 |   -moz-osx-font-smoothing: grayscale;
25 |   text-align: center;
26 |   color: #2c3e50;
27 |   margin: 0;
28 |   padding: 0;
29 | }
30 | 
31 | ::-webkit-scrollbar {
32 |   width: 5px;
33 |   height: 5px;
34 | }
35 | 
36 | ::-webkit-scrollbar-thumb{
37 |   border-radius: 5px;
38 |   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
39 |   background-color: rgba(0, 0, 0, 0.1);
40 | }
41 | 
42 | ::-webkit-scrollbar-track {
43 |   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
44 |   border-radius: 10px;
45 |   background-color: #ededed;
46 | }
47 | 
48 | </style>
49 | 


--------------------------------------------------------------------------------
/src/assets/css/cart.css:
--------------------------------------------------------------------------------
 1 | .overview {
 2 |     width: 100%;
 3 | }
 4 | 
 5 | .head-wrapper {
 6 |     width: 100%;
 7 |     background-color: #f0f0f0;
 8 |     text-align: left;
 9 | }
10 | 
11 | h4 {
12 |     margin: 10px;
13 | }
14 | 
15 | .selection-area {
16 |     text-align: left;
17 |     width: 100%;
18 |     padding: 0 20px;
19 |     margin: 5px 0;
20 | }
21 | 
22 | .items-wrapper {
23 |     display: inline-flex;
24 |     width: 100%;
25 | }
26 | 
27 | .target {
28 |     font-weight: normal;
29 |     width: 200px;
30 | }
31 | 
32 | .selection-items {
33 |     display: flex;
34 |     flex-wrap: wrap;
35 |     justify-content: flex-start;
36 |     width: 100%;
37 |     margin-bottom: 10px;
38 |     border-bottom: #cccccc dashed 1px;
39 | }
40 | 
41 | .selection-items > .checkbox {
42 |     margin-right: 20px;
43 | }
44 | 
45 | .risk-selector {
46 |     width: 600px;
47 |     min-width: 400px;
48 | }
49 | 
50 | .selector-items {
51 |     display: flex;
52 |     flex-wrap: wrap;
53 |     justify-content: flex-start;
54 |     width: 100%;
55 |     margin-bottom: 10px;
56 | }
57 | 
58 | .data-present {
59 |     width: 100%;
60 |     margin: 0 0 10px;
61 | }
62 | 
63 | .submit-button {
64 |     margin-left: 20px;
65 | }


--------------------------------------------------------------------------------
/src/components/Cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ElCard  class="overview" shadow="never" body-style="padding: 0;">
 3 |     <!--筛选选项-->
 4 |     <ElRow>
 5 |       <div class="head-wrapper">
 6 |         <h4>基金筛选</h4>
 7 |       </div>
 8 |       <div class="selection-area">
 9 | 
10 |         <ElTabs tab-position="top">
11 |           <ElTabPane label="通用筛选">
12 |             <Basic basic-url="/overview/general"/>
13 |           </ElTabPane>
14 |           <ElTabPane label="主动权益">
15 |             <Basic basic-url="/overview/active"/>
16 |           </ElTabPane>
17 |           <ElTabPane label="被动权益">
18 |             <Basic basic-url="/overview/negative"/>
19 |           </ElTabPane>
20 |           <ElTabPane label="债券基金">
21 |             <Basic basic-url="/overview/bond"/>
22 |           </ElTabPane>
23 |         </ElTabs>
24 |       </div>
25 |     </ElRow>
26 |   </ElCard>
27 | </template>
28 | 
29 | <script>
30 | import {defineComponent} from 'vue'
31 | import Basic from "./cart/Basic.vue";
32 | import General from "./cart/General.vue";
33 | 
34 | 
35 | export default defineComponent({
36 |   name: "Cart",
37 |   components: {General, Basic },
38 | })
39 | </script>
40 | 
41 | <style scoped>
42 | @import "../assets/css/cart.css";
43 | </style>


--------------------------------------------------------------------------------
/src/components/details/allocate/Bond.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="bond">
 3 |   <vxe-table
 4 |       size="mini"
 5 |       highlight-hover-row stripe highlight-hover-column
 6 |       border
 7 |       :data="data.data"
 8 |   >
 9 |     <vxe-column field="bondcode" title="证券代码"></vxe-column>
10 |     <vxe-column field="bondname" title="证券简称" show-overflow></vxe-column>
11 |     <vxe-column field="ratio" title="占净值比(%)" align="center" :formatter="formatPercent"></vxe-column>
12 |     <vxe-column field="change" title="较上期变动(%)" align="center" :formatter="formatPercent"></vxe-column>
13 |   </vxe-table>
14 |   <div class="update-date">更新日期: {{data.date}}</div>
15 | </div>
16 | </template>
17 | 
18 | <script>
19 | import numeral from "numeral";
20 | import {onMounted, reactive} from "vue";
21 | import { fundKeyBond } from "../../../assets/js/api";
22 | 
23 | export default {
24 |   name: "Bond",
25 |   props: {
26 |     secucode: String,
27 |   },
28 |   setup(props){
29 |     const { secucode } = props
30 | 
31 |     const data = reactive({data: [], date: ''})
32 | 
33 |     const formatPercent = ({cellValue})=>{
34 |       return numeral(cellValue).format('0.00%')
35 |     }
36 | 
37 |     onMounted(()=>{
38 |       fundKeyBond(secucode).then(r=>{
39 |         data.data = r.bond
40 |         data.date = r.date
41 |       })
42 |     })
43 | 
44 |     return {data, formatPercent}
45 |   }
46 | 
47 | }
48 | </script>
49 | 
50 | <style scoped>
51 | .bond {
52 |   width: 100%;
53 | }
54 | 
55 | .update-date {
56 |   margin-top: 20px;
57 |   text-align: left;
58 |   font-size: smaller;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/components/details/allocate/Industry.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="industry">
 3 |     <vxe-table
 4 |         :data="data.data"
 5 |         size="mini"
 6 |         highlight-hover-row stripe highlight-hover-column
 7 |         border
 8 |     >
 9 |       <vxe-column field="industry" title="行业简称"></vxe-column>
10 |       <vxe-column field="ratio" title="占净值比(%)" align="center" :formatter="formatPercent"></vxe-column>
11 |       <vxe-column field="change" title="较上期变动(%)" align="center" :formatter="formatPercent"></vxe-column>
12 |     </vxe-table>
13 |     <div class="update-date">更新日期: {{data.date}}</div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import {defineComponent, onMounted, reactive} from "vue";
19 | import numeral from "numeral";
20 | import { fundIndustryCSI } from "../../../assets/js/api";
21 | 
22 | export default defineComponent({
23 |   name: "Industry",
24 |   props: {
25 |     data: Array,
26 |     date: String,
27 |     secucode: String
28 |   },
29 |   setup(props){
30 |     const { secucode } = props
31 |     const data = reactive({data: [], date: ''})
32 | 
33 |     const fetch = (secucode) => {
34 |       fundIndustryCSI(secucode).then(r=>{
35 |         data.data = r.industry
36 |         data.date = r.date
37 |       })
38 |     }
39 | 
40 |     onMounted(()=>fetch(secucode))
41 | 
42 |     const formatPercent = ({cellValue})=>{
43 |       return numeral(cellValue).format('0.00%')
44 |     }
45 | 
46 |     return {data, formatPercent}
47 |   }
48 | 
49 | })
50 | </script>
51 | 
52 | <style scoped>
53 | .industry {
54 |   width: 100%;
55 | }
56 | 
57 | .update-date {
58 |   margin-top: 20px;
59 |   text-align: left;
60 |   font-size: smaller;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import {createRouter, createWebHistory} from "vue-router";
 2 | 
 3 | const routes = [
 4 |     {
 5 |         name: 'home',
 6 |         path: '/home',
 7 |         component: () => import('../components/Home.vue'),
 8 |         meta: {keepAlive: true}
 9 |     },
10 |     {
11 |         name: 'cart',
12 |         path: '/cart',
13 |         component: () => import('../components/Cart.vue'),
14 |         meta: {keepAlive: true}
15 |     },
16 |     {
17 |         name: 'etf',
18 |         path: '/etf',
19 |         component: () => import('../components/etf/ETFLayout.vue'),
20 |         meta: {keepAlive: true}
21 |     },
22 |     {
23 |         name: 'screen',
24 |         path: '/screen',
25 |         component: () => import('../components/Screen.vue')
26 |     },
27 |     {
28 |         name: 'dashboard',
29 |         path: '/dashboard',
30 |         component: () => import('../components/Dashboard.vue'),
31 |         meta: {keepAlive: true}
32 |     },
33 |     {
34 |         name: 'news',
35 |         path: '/news',
36 |         component: () => import('../components/News.vue'),
37 |         meta: {keepAlive: true}
38 |     },
39 |     {
40 |         name: 'portfolio',
41 |         path: '/portfolio',
42 |         component: () => import('../components/portfolio/Portfolio.vue'),
43 |         meta: {keepAlive: true}
44 |     },
45 |     {
46 |         name: 'info',
47 |         path: '/info/:secucode(\\d+)',
48 |         component: () => import('../components/details/DetailLayout.vue'),
49 |         meta: {keepAlive: true}
50 |     },
51 |     {
52 |         path: '/',
53 |         redirect: () => {
54 |             return {name: 'home'}
55 |         }
56 |     },
57 | ]
58 | 
59 | export default createRouter({
60 |     end: false,
61 |     history: createWebHistory(),
62 |     sensitive: false,
63 |     strict: false,
64 |     routes
65 | })
66 | 


--------------------------------------------------------------------------------
/src/components/details/allocate/Stock.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="stock">
 3 |     <vxe-table
 4 |         :data="data.data"
 5 |         size="mini"
 6 |         highlight-hover-row stripe highlight-hover-column
 7 |         border
 8 |     >
 9 |       <vxe-column field="stockcode" title="证券代码"></vxe-column>
10 |       <vxe-column field="stockname" title="证券简称"></vxe-column>
11 |       <vxe-column field="ratio" title="占净值比(%)" align="center" :formatter="formatPercent"></vxe-column>
12 |       <vxe-column field="change" title="较上期变动(%)" align="center" :formatter="formatPercent"></vxe-column>
13 |       <vxe-column field="pe_ttm" title="PE_TTM" align="center" :formatter="formatFloat"></vxe-column>
14 |       <vxe-column field="pb" title="PB" align="center" :formatter="formatFloat"></vxe-column>
15 |     </vxe-table>
16 |     <div class="update-date">更新日期: {{data.date}}</div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import numeral from "numeral";
22 | import { onMounted, reactive } from "vue";
23 | import { fundKeyStock } from "../../../assets/js/api";
24 | 
25 | export default {
26 |   name: "Stock",
27 |   props: {
28 |     secucode: String
29 |   },
30 |   setup(props){
31 |     const { secucode } = props
32 | 
33 |     const data = reactive({data: [], date: ''})
34 | 
35 |     const formatPercent = ({cellValue})=>{
36 |       return numeral(cellValue).format('0.00%')
37 |     }
38 | 
39 |     const formatFloat = ({cellValue})=>{
40 |       return numeral(cellValue).format('0.00')
41 |     }
42 | 
43 |     onMounted(()=>{
44 |       fundKeyStock(secucode).then(r=>{
45 |         data.data = r.stock
46 |         data.date = r.date
47 |       })
48 |     })
49 | 
50 |     return {data, formatPercent, formatFloat}
51 |   }
52 | }
53 | </script>
54 | 
55 | <style scoped>
56 | .stock {
57 |   width: 100%;
58 | }
59 | 
60 | .update-date {
61 |   margin-top: 20px;
62 |   text-align: left;
63 |   font-size: smaller;
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/components/etf/ETFRecent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="etf-recent">
 3 |     <ElRow>
 4 |       <ElCol :span="12"><div id="etf-total"></div></ElCol>
 5 |       <ElCol :span="12"><div id="etf-theme"></div></ElCol>
 6 |     </ElRow>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import {defineComponent, onMounted} from "vue";
12 | import * as echarts from 'echarts';
13 | import api from '../../request';
14 | 
15 | 
16 | const draw = (id, data) => {
17 |   const [x, y , value, max, min] = data
18 |   const chart = echarts.init(document.getElementById(id))
19 |   const options = {
20 |     tooltip: {
21 |       position: 'top'
22 |     },
23 |     grid: {
24 |       height: '75%',
25 |       top: '10%'
26 |     },
27 |     xAxis: {
28 |       type: 'category',
29 |       data: x,
30 |       splitArea: {
31 |         show: true
32 |       }
33 |     },
34 |     yAxis: {
35 |       type: 'category',
36 |       data: y,
37 |       splitArea: {
38 |         show: true
39 |       }
40 |     },
41 |     visualMap: {
42 |       min: min,
43 |       max: max,
44 |       calculable: true,
45 |       orient: 'horizontal',
46 |       left: 'center',
47 |       bottom: '0%'
48 |     },
49 |     series: [{
50 |       name: '净流入',
51 |       type: 'heatmap',
52 |       data: value,
53 |       label: {
54 |         show: true
55 |       },
56 |       emphasis: {
57 |         itemStyle: {
58 |           shadowBlur: 10,
59 |           shadowColor: 'rgba(0, 0, 0, 0.5)'
60 |         }
61 |       }
62 |     }]
63 |   }
64 |   chart.setOption(options)
65 |   window.onresize = ()=> chart.resize()
66 | }
67 | 
68 | 
69 | export default defineComponent({
70 |   name: "ETFRecent",
71 |   setup(){
72 |     onMounted(()=>{
73 |       api.get('/etf/recent').then(r=>{
74 |         const {category, detail} = r
75 |         draw('etf-total', category)
76 |         draw('etf-theme', detail)
77 |       })
78 |     })
79 |   }
80 | })
81 | </script>
82 | 
83 | <style scoped>
84 | .etf-recent {
85 |   width: 100%;
86 | }
87 | 
88 | #etf-total {
89 |   width: 100%;
90 |   height: 700px;
91 | }
92 | 
93 | #etf-theme {
94 |   width: 100%;
95 |   height: 700px;
96 | }
97 | </style>


--------------------------------------------------------------------------------
/src/components/details/charts/CyclePerformance.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h4 class="desc-title">收益特征</h4>
 4 |     <div :ref="dom" class="chart-style" v-if="ok"></div>
 5 |     <div v-else>当前基金暂无此类数据</div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import {defineComponent, onMounted, ref} from "vue";
11 | import * as echarts from "echarts";
12 | import {cycle} from "../../../assets/js/api";
13 | 
14 | export default defineComponent({
15 |   name: "CyclePerformance",
16 |   props: {
17 |     secucode: String
18 |   },
19 |   setup(props){
20 |     const { secucode } = props
21 |     const refs = ref('')
22 |     const ok = ref(true)
23 | 
24 |     const dom = (el)=>{
25 |       refs.value = el
26 |     }
27 | 
28 |     onMounted(()=>{
29 |       cycle(secucode).then(resp=>{
30 |         if (!!!resp) {
31 |           ok.value = false
32 |           return
33 |         }
34 |         show(resp)
35 |       })
36 |     })
37 | 
38 |     const show = (data)=>{
39 |       const chart = echarts.init(refs.value)
40 |       const options = {
41 |         tooltip: {
42 |           show: true,
43 |           trigger: 'item',
44 |           snap: true,
45 |           formatter: function (param){
46 |             return `<b>${param.name}: </b>`+ param.data.toFixed(2)+'%'
47 |           }
48 |         },
49 |         grid: {
50 |           bottom: '160'
51 |         },
52 |         textStyle: {
53 |           fontFamily: ['arial', 'kaiti'],
54 |         },
55 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
56 |         xAxis: {
57 |           type: 'category',
58 |           data: data.map(x=>x.date),
59 |           axisLabel: {
60 |             rotate: 90
61 |           }
62 |         },
63 |         yAxis: {
64 |           type: 'value',
65 |           axisLabel: {
66 |             formatter: "{value}%"
67 |           }
68 |         },
69 |         series: [{
70 |           data: data.map(x=>x.value*100),
71 |           type: 'bar'
72 |         }]
73 |       }
74 |       chart.setOption(options)
75 |     }
76 | 
77 |     return {dom, ok}
78 |   }
79 | })
80 | </script>
81 | 
82 | <style scoped>
83 | .desc-title {
84 |   text-align: left;
85 |   margin-bottom: 10px;
86 | }
87 | 
88 | .chart-style {
89 |   width: 100%;
90 |   height: 400px;
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/src/components/details/DetailLayout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ElBreadcrumb>
 4 |       <ElBreadcrumbItem>基金详情</ElBreadcrumbItem>
 5 |       <ElBreadcrumbItem>{{ state.currentTab }}</ElBreadcrumbItem>
 6 |     </ElBreadcrumb>
 7 | 
 8 |     <ElTabs type="bordered-card" v-model="state.currentTab" class="tab-wrapper" :key="state.secucode">
 9 |       <ElTabPane label="基金概览" name="基金概览" :lazy="true">
10 |         <Fact :secucode="state.secucode" />
11 |       </ElTabPane>
12 |       <ElTabPane label="业绩表现" name="业绩表现">
13 |         <Performance :secucode="state.secucode" />
14 |       </ElTabPane>
15 |       <ElTabPane label="基金经理" name="基金经理">
16 |         <Manager :secucode="state.secucode" />
17 |       </ElTabPane>
18 |       <ElTabPane label="资产配置" name="资产配置" :lazy="true">
19 |         <Allocate :secucode="state.secucode" />
20 |       </ElTabPane>
21 |       <ElTabPane label="业绩归因" name="业绩归因" :lazy="true">
22 |         <Attribution :secucode="state.secucode" />
23 |       </ElTabPane>
24 |       <ElTabPane label="重仓持股" name="重仓持股">
25 |         <KeyPortfolio :secucode="state.secucode" />
26 |       </ElTabPane>
27 |     </ElTabs>
28 |   </div>
29 | </template>
30 | 
31 | <script lang="ts">
32 | import {defineComponent, reactive, watch} from "vue";
33 | import { useRoute } from "vue-router";
34 | import Performance from "./Performance.vue";
35 | import Fact from "./Fact.vue";
36 | import Manager from "./Manager.vue";
37 | import Allocate from "./Allocate.vue";
38 | import KeyPortfolio from "./KeyPortfolio.vue";
39 | import Attribution from "./Attribution.vue";
40 | 
41 | export default defineComponent({
42 |   name: "DetailLayout",
43 |   components: {Attribution, KeyPortfolio, Allocate, Manager, Fact, Performance},
44 |   setup(){
45 |     const route = useRoute()
46 | 
47 |     const state: any = reactive({
48 |       currentTab: sessionStorage.getItem('detailTab') || '基金概览',
49 |       secucode: route.params.secucode
50 |     })
51 | 
52 |     watch(()=>route.path, ()=>{
53 |       const { secucode } = route.params
54 |       if (secucode){
55 |         state.secucode = secucode
56 |       }
57 |     })
58 | 
59 |     watch(()=>state.currentTab, ()=>{
60 |       sessionStorage.setItem('detailTab', state.currentTab)
61 |     })
62 | 
63 |     return { state }
64 |   }
65 | })
66 | 
67 | </script>
68 | 
69 | <style scoped>
70 | .tab-wrapper{
71 |   margin-top: 15px;
72 |   border-radius: 5px;
73 |   border: #E4E7ED 1px solid;
74 |   padding: 0;
75 | }
76 | </style>


--------------------------------------------------------------------------------
/src/components/layout/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ElContainer>
 3 |   <Header />
 4 |     <div class="main">
 5 |       <router-view v-slot="{ Component }">
 6 |         <keep-alive v-if="$route.meta.keepAlive">
 7 |           <component :is="Component"></component>
 8 |         </keep-alive>
 9 |         <component :is="Component" v-if="!$route.meta.keepAlive"></component>
10 |       </router-view>
11 |     </div>
12 |   <ElFooter class="footer">
13 |     <br>
14 |     <div>
15 |       <ElLink type="info" class="info-link" :href="am" target="_blank">野村东方国际证券-资产管理部</ElLink>
16 |       <ElLink type="info" class="info-link" :href="service" target="_blank">客户服务平台</ElLink>
17 |       <ElLink type="info" class="info-link" :href="manage" target="_blank">财富投管系统</ElLink>
18 |     </div>
19 |     <br>
20 |     <p>Copyright © 2020 Nomura Orient International Securities Co.,Ltd. ALL RIGHTS RESERVED.</p>
21 |     <br>
22 |   </ElFooter>
23 | 
24 |     <el-backtop :bottom="100" class="up-to-top-wrapper">
25 |       <div class="up-to-top">
26 |         UP
27 |       </div>
28 |     </el-backtop>
29 | </ElContainer>
30 | </template>
31 | 
32 | <script>
33 | import {defineComponent, onMounted} from "vue";
34 | import Header from "./Header.vue";
35 | import { useRouter, useRoute } from 'vue-router';
36 | 
37 | export default defineComponent({
38 |   name: "Layout",
39 |   components: { Header },
40 |   setup(){
41 | 
42 |     const am = 'https://www.nomuraoi-sec.com/pages/business/business_introduction.jsp?type=5'
43 |     const service = 'https://sma.nomuraoi-sec.com'
44 |     const manage = 'http://10.170.129.129/manage'
45 | 
46 |     return { am, service, manage }
47 |   }
48 | })
49 | </script>
50 | 
51 | <style scoped>
52 | 
53 | .main {
54 |   margin-top: 80px;
55 |   padding: 0 20px;
56 | }
57 | 
58 | .footer {
59 |   margin-top: 10px;
60 | }
61 | 
62 | .info-link:not(first-child) {
63 |   margin-left: 30px;
64 | }
65 | 
66 | .up-to-top-wrapper {
67 |   position: fixed;
68 |   top: 93%;
69 |   right: 30px;
70 |   height: 1px;
71 |   width: 1px;
72 |   background-color: #f2f5f6;
73 |   box-shadow: 0 0 6px rgba(0,0,0, 0);
74 |   text-align: center;
75 |   line-height: 1px;
76 |   color: #1989fa;
77 | }
78 | 
79 | .up-to-top {
80 |   position: fixed;
81 |   top: 93%;
82 |   right: 30px;
83 |   height: 40px;
84 |   width: 40px;
85 |   background-color: #f2f5f6;
86 |   box-shadow: 0 0 6px rgba(0,0,0, .12);
87 |   text-align: center;
88 |   line-height: 40px;
89 |   color: #1989fa;
90 | }
91 | </style>


--------------------------------------------------------------------------------
/src/components/details/charts/ScaleChange.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  <div class="scale-change-chart" :ref="dom">
 3 |    规模变化
 4 |  </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import {defineComponent, onMounted, ref} from "vue";
 9 | import * as echarts from 'echarts';
10 | import numeral from "numeral";
11 | import {scaleChange} from "../../../assets/js/api";
12 | 
13 | export default defineComponent({
14 |   name: "ScaleChange",
15 |   props: { secucode: String },
16 |   setup(props){
17 |     const { secucode } = props
18 | 
19 |     const refs = ref('')
20 | 
21 |     const dom = (el)=>{
22 |       refs.value = el
23 |     }
24 | 
25 |     const drawTurnoverChart = (data) => {
26 |       const ele = refs.value
27 |       const chart = echarts.init(ele)
28 |       const options = {
29 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
30 |         grid: {
31 |           show: false,
32 |           top: 30,
33 |           left: "10%",
34 |           right: "5%",
35 |           bottom: '10%'
36 |         },
37 |         tooltip: {
38 |           trigger: 'axis',
39 |           axisPointer: {
40 |             type: 'cross',
41 |             label: {
42 |               backgroundColor: '#6a7985'
43 |             }
44 |           },
45 |           snap: true
46 |         },
47 |         xAxis: [
48 |           {
49 |             type: 'category',
50 |             data: data.map(x=>x.date),
51 |             axisPointer: {show: true}
52 |           }
53 |         ],
54 |         yAxis: {
55 |           axisLabel: {
56 |             formatter: (value) => {
57 |               return numeral(value).format('0,00')
58 |             }
59 |           },
60 |           axisPointer: {show: true},
61 |           scale: true
62 |         },
63 |         textStyle: {
64 |           fontFamily: ['Arial', 'kaiti']
65 |         },
66 |         series: [
67 |           {
68 |             name: '规模',
69 |             type: 'line',
70 |             data: data.map(x=>(x.comb_nvi/1e8).toFixed(2)),
71 |             symbol: "circle"
72 |           },
73 |         ]
74 |       }
75 |       chart.setOption(options)
76 |     }
77 | 
78 |     const getScaleChange = () => {
79 |       scaleChange(secucode).then(r=>{
80 |         drawTurnoverChart(r)
81 |       })
82 |     }
83 | 
84 |     onMounted(getScaleChange)
85 | 
86 |     return { dom }
87 |   }
88 | 
89 | })
90 | 
91 | </script>
92 | 
93 | <style scoped>
94 | .scale-change-chart {
95 |   height: 300px;
96 |   width: 100%;
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/components/details/Allocate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="allocate">
 3 |     <div class="row">
 4 |       <div class="col">
 5 |         <ElCard shadow="never" class="card">
 6 |           <h4 class="desc-title">资产配置</h4>
 7 |             <Asset :secucode="secucode"/>
 8 |         </ElCard>
 9 |         <ElCard shadow="never" class="card">
10 |           <h4 class="desc-title">行业配置</h4>
11 |           <Industry :secucode="secucode"/>
12 |         </ElCard>
13 |         <ElCard shadow="never" class="card">
14 |           <h4 class="desc-title">资产配置-多期</h4>
15 |           <AllocateHis :secucode="secucode"/>
16 |         </ElCard>
17 |         <ElCard shadow="never" class="card">
18 |           <h4 class="desc-title">前十大集中度</h4>
19 |           <Concentrate :secucode="secucode"/>
20 |         </ElCard>
21 |       </div>
22 |       <div class="col">
23 |         <ElCard shadow="never" class="card">
24 |           <h4 class="desc-title">重仓债券</h4>
25 |           <Bond :secucode="secucode"/>
26 |         </ElCard>
27 |         <ElCard shadow="never" class="card">
28 |           <h4 class="desc-title">重仓股票</h4>
29 |           <Stock :secucode="secucode"/>
30 |         </ElCard>
31 |         <ElCard shadow="never" class="card">
32 |           <h4 class="desc-title">行业配置</h4>
33 |           <IndustrySw :secucode="secucode"/>
34 |         </ElCard>
35 |       </div>
36 |     </div>
37 |   </div>
38 | </template>
39 | 
40 | <script lang="ts">
41 | import Asset from "./allocate/Asset.vue";
42 | import Bond from "./allocate/Bond.vue";
43 | import Industry from "./allocate/Industry.vue";
44 | import Stock from "./allocate/Stock.vue";
45 | import AllocateHis from "./allocate/AllocateHis.vue";
46 | import IndustrySw from "./allocate/IndustrySw.vue";
47 | import Concentrate from "./allocate/Concentrate.vue";
48 | 
49 | export default {
50 |   name: "Allocate",
51 |   components: {Concentrate, IndustrySw, AllocateHis, Stock, Asset, Bond, Industry},
52 |   props: { secucode: String},
53 |   setup(props: any){
54 |     const { secucode } = props
55 | 
56 |     return { secucode }
57 | 
58 |   }
59 | }
60 | 
61 | </script>
62 | 
63 | <style scoped>
64 | .allocate {
65 |   min-height: 600px;
66 | }
67 | 
68 | .row {
69 |   display: inline-flex;
70 |   width: 100%;
71 | }
72 | 
73 | .col {
74 |   width: 100%;
75 |   flex: 12;
76 |   padding: 10px;
77 | }
78 | 
79 | .card {
80 |   width: 100%;
81 |   margin-bottom: 5px;
82 | }
83 | 
84 | .desc-title {
85 |   text-align: left;
86 |   margin-bottom: 10px;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/dashboard/Simple.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ElCard class="card">
  3 |     <div class="tags-group">
  4 |       <ElTag effect="plain" size="small" class="tag">{{ year }}</ElTag>
  5 |       <ElTag effect="plain" size="small" class="tag" type="warning">{{ style }}</ElTag>
  6 |       <ElTag effect="plain" size="small" class="tag" type="success">{{ industry }}</ElTag>
  7 |     </div>
  8 |     <hr class="divider">
  9 |     <vxe-grid
 10 |         border
 11 |         size="mini"
 12 |         height="216"
 13 |         :columns="columns"
 14 |         :data="tableData"
 15 |     ></vxe-grid>
 16 |     <ElTooltip class="expanded" placement="top" content="点击查看全部同类基金">
 17 |       <i class="el-icon-full-screen" @click="show"></i>
 18 |     </ElTooltip>
 19 |   </ElCard>
 20 | </template>
 21 | 
 22 | <script>
 23 | import numeral from "numeral";
 24 | 
 25 | export default {
 26 |   name: "Simple",
 27 |   props: {
 28 |     index: Number,
 29 |     data: Object
 30 |   },
 31 |   setup(props, {emit}){
 32 |     const columns = [
 33 |       {
 34 |         type: 'seq',
 35 |         width: 30
 36 |       },
 37 |       {
 38 |         title: '基金名称',
 39 |         field: 'secuabbr',
 40 |         showOverflow: true
 41 |       },
 42 |       {
 43 |         title: '基金经理',
 44 |         field: 'manager'
 45 |       },
 46 |       {
 47 |         title: '区间涨跌',
 48 |         field: 'change',
 49 |         align: 'right',
 50 |         formatter: (row) => numeral(row.cellValue).format('0.00')
 51 |       }
 52 |     ]
 53 | 
 54 |     const { index, data } = props
 55 | 
 56 |     const { year, style, industry } = data
 57 |     const tableData = data.data
 58 | 
 59 |     const show = ()=>{
 60 |       emit('show', index)
 61 |     }
 62 | 
 63 |     return {columns, show, year, style, industry, tableData }
 64 |   }
 65 | }
 66 | </script>
 67 | 
 68 | <style scoped>
 69 | 
 70 | .card {
 71 |   position: relative;
 72 |   width: 400px;
 73 |   height: 320px;
 74 |   margin-right: 10px;
 75 |   margin-bottom: 5px;
 76 | }
 77 | 
 78 | .tags-group {
 79 |   display: inline-flex;
 80 |   width: 100%;
 81 |   justify-content: flex-start;
 82 | }
 83 | 
 84 | .tag {
 85 |   margin-right: 5px;
 86 | }
 87 | 
 88 | .divider {
 89 |   border-top: 2px dashed #cccccc;
 90 |   margin-bottom: 10px;
 91 |   margin-top: 5px;
 92 | }
 93 | 
 94 | .title {
 95 |   height: 30px;
 96 |   width: calc(100% - 20px);
 97 |   padding-bottom: 10px;
 98 |   border-bottom: 1px dashed #cccccc;
 99 |   margin: auto;
100 |   text-align: left;
101 | }
102 | 
103 | .expanded {
104 |   position: absolute;
105 |   bottom: 5px;
106 |   right: 10px;
107 |   height: 20px;
108 |   width: 20px;
109 | }
110 | </style>


--------------------------------------------------------------------------------
/src/components/details/allocate/Concentrate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="concentrate">
  3 |     <div class="chart" :ref="reference" v-if="show"></div>
  4 |     <div v-else>此基金没有该配置项</div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import {onMounted, ref} from "vue";
 10 | import * as echarts from 'echarts';
 11 | import numeral from "numeral";
 12 | import { fundConcentrate } from "../../../assets/js/api";
 13 | 
 14 | export default {
 15 |   name: "Concentrate",
 16 |   props: {secucode: String},
 17 |   setup(props) {
 18 |     const { secucode } = props
 19 |     const instance = ref(document.getElementById(''))
 20 |     const show = ref(true)
 21 | 
 22 |     const reference = (el) => {
 23 |       instance.value = el
 24 |     }
 25 | 
 26 |     const draw = (data) => {
 27 |       const el = instance.value
 28 |       const myChart = echarts.init(el);
 29 |       const options = {
 30 |         tooltip : {
 31 |           trigger: 'axis',
 32 |           axisPointer: {
 33 |             type: 'cross',
 34 |             label: {
 35 |               backgroundColor: '#6a7985'
 36 |             }
 37 |           },
 38 |         },
 39 |         textStyle: {
 40 |           fontFamily: ['Arial', 'kaiti']
 41 |         },
 42 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
 43 |         legend: {
 44 |           data: data.names
 45 |         },
 46 |         grid: {
 47 |           left: '3%',
 48 |           right: '4%',
 49 |           bottom: '3%',
 50 |           containLabel: true
 51 |         },
 52 |         xAxis: {
 53 |           type: 'category',
 54 |           data: data.map(x=>x.date)
 55 |         },
 56 |         yAxis: {
 57 |           type: 'value',
 58 |           max: 100
 59 |         },
 60 |         series: [
 61 |           {
 62 |             name: '股票集中度',
 63 |             type: 'line',
 64 |             label: {
 65 |               show: false
 66 |             },
 67 |             emphasis: {
 68 |               focus: 'series'
 69 |             },
 70 |             data: data.map(x=>numeral(x.ratio*100).format('0.00'))
 71 |           }]
 72 |       }
 73 |       myChart.setOption(options)
 74 |     }
 75 | 
 76 |     onMounted(() => {
 77 |       show.value = true
 78 |       fundConcentrate(secucode).then(r=>{
 79 |         if (!!r){
 80 |           draw(r.concentrate)
 81 |         } else {
 82 |           show.value = true
 83 |         }
 84 |       })
 85 |     })
 86 | 
 87 |     return {reference, show}
 88 |   }
 89 | }
 90 | </script>
 91 | 
 92 | <style scoped>
 93 | .concentrate {
 94 |   width: 100%;
 95 | }
 96 | 
 97 | .chart {
 98 |   width: 100%;
 99 |   height: 300px;
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/details/charts/RiskTraceShort.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="width: 100%">
 3 |     <div class="chart" :ref="reference" v-if="ok"></div>
 4 |     <div v-else>当前基金暂无此类数据</div>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import {defineComponent, onMounted, ref} from "vue";
10 | import * as echarts from 'echarts';
11 | import numeral from "numeral";
12 | import {shortRisk, longRisk} from "../../../assets/js/api";
13 | 
14 | numeral.nullFormat('N/A')
15 | 
16 | export default defineComponent({
17 |   name: "RiskTraceShort",
18 |   props: {secucode: String, url: String},
19 |   setup(props: any) {
20 | 
21 |     const {secucode, url} = props
22 | 
23 |     const instance: any = ref(document.body)
24 |     const ok = ref(true)
25 | 
26 |     const reference: any = (el: HTMLElement) => {
27 |       instance.value = el
28 |     }
29 | 
30 |     onMounted(() => {
31 |       switch (url) {
32 |         case "short":
33 |           shortRisk(secucode).then(r => draw(r));
34 |           break
35 |         case "long":
36 |           longRisk(secucode).then(r => draw(r))
37 |       }
38 |     })
39 | 
40 |     const draw = (data: { value: any, legend: any }) => {
41 |       const {value, legend} = data
42 |       const chart = echarts.init(instance.value)
43 |       const options = {
44 |         tooltip: {
45 |           show: true,
46 |           trigger: 'item',
47 |         },
48 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
49 |         grid: {
50 |           bottom: 10,
51 |           containLabel: true
52 |         },
53 |         legend: {
54 |           data: Object.keys(value),
55 |           y: 'bottom',
56 |           bottom: -10,
57 |           textStyle: {
58 |             fontFamily: ['Arial', 'kaiti']
59 |           }
60 |         },
61 |         radar: {
62 |           indicator: legend.map((x: string) => {
63 |             return {name: x, max: 1}
64 |           }),
65 |           axisName: {
66 |             textStyle: {
67 |               padding: [-12, -10],
68 |               fontFamily: ['Arial', 'kaiti']
69 |             }
70 |           }
71 |         },
72 |         series: [
73 |           {
74 |             type: 'radar',
75 |             data: Object.keys(value).map((x: string) => {
76 |               return {
77 |                 name: x,
78 |                 value: value[x].map((x: number) => numeral(x).format('0.00'))
79 |               }
80 |             })
81 |           }
82 |         ]
83 |       }
84 |       chart.setOption(options)
85 |     }
86 | 
87 |     return {reference, ok}
88 |   }
89 | })
90 | 
91 | </script>
92 | 
93 | <style scoped>
94 | .chart {
95 |   width: 100%;
96 |   height: 300px;
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/components/details/charts/Turnover.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div :ref="dom" class="chart-style" v-if="showChart"></div>
  4 |     <div v-else>暂无数据或基金类型不适用</div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import {onMounted, ref} from "vue";
 10 | import * as echarts from 'echarts';
 11 | import {turnover} from "../../../assets/js/api";
 12 | 
 13 | export default {
 14 |   name: "Turnover",
 15 |   props: { secucode: String },
 16 |   setup(props){
 17 |     const { secucode } = props
 18 |     const refs = ref('')
 19 | 
 20 |     const dom = (el)=>{
 21 |       refs.value = el
 22 |     }
 23 | 
 24 |     const showChart = ref(true)
 25 | 
 26 |     const drawTurnoverChart = (data)=>{
 27 |       const ele = refs.value
 28 |       const chart = echarts.init(ele)
 29 |       const options = {
 30 |         // backgroundColor: 'rgba(128, 128, 128, 0.1)',
 31 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
 32 |         grid: {
 33 |           show: false,
 34 |           top: 30,
 35 |           left: "10%",
 36 |           right: "5%",
 37 |           bottom: '10%'
 38 |         },
 39 |         tooltip: {
 40 |           trigger: 'axis',
 41 |           axisPointer: {
 42 |             type: 'cross',
 43 |             label: {
 44 |               backgroundColor: '#6a7985'
 45 |             }
 46 |           }
 47 |         },
 48 |         xAxis: [
 49 |           {
 50 |             type: 'category',
 51 |             data: data.map(x=>x.date),
 52 |             axisPointer: {show: true}
 53 |           }
 54 |         ],
 55 |         yAxis: {
 56 |           axisLabel: {
 57 |             formatter: "{value}%"
 58 |           },
 59 |           axisPointer: {show: true},
 60 |           scale: true
 61 |         },
 62 |         textStyle: {
 63 |           fontFamily: ['arial', 'kaiti']
 64 |         },
 65 |         series: [
 66 |           {
 67 |             name: '换手率',
 68 |             type: 'line',
 69 |             data: data.map(x=>x.ratio),
 70 |             symbol: "circle"
 71 |           },
 72 |         ]
 73 |       }
 74 |       chart.setOption(options)
 75 |       window.onresize = ()=>{
 76 |         chart.resize()
 77 |       }
 78 |     }
 79 | 
 80 |     const getTurnover = ()=>{
 81 |       turnover(secucode).then(r=>{
 82 |         if (r.length === 0){
 83 |           showChart.value = false
 84 |           return
 85 |         }
 86 |         drawTurnoverChart(r)
 87 |       })
 88 |     }
 89 | 
 90 |     onMounted(()=>{ getTurnover() })
 91 | 
 92 |     return { dom, showChart }
 93 |   }
 94 | }
 95 | </script>
 96 | 
 97 | <style scoped>
 98 | .chart-style {
 99 |   width: 100%;
100 |   height: 300px;
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/components/details/charts/HistoryStyle.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h4 class="desc-title">风格分类</h4>
  4 |     <div :ref="dom" class="chart-style" v-if="ok"></div>
  5 |     <div v-else>当前基金暂无此类数据</div>
  6 |   </div>
  7 | </template>
  8 | 
  9 | <script>
 10 | import {defineComponent, onMounted, ref} from "vue";
 11 | import * as echarts from "echarts";
 12 | import dayjs from "dayjs";
 13 | import { historyStyle } from "../../../assets/js/api";
 14 | 
 15 | export default defineComponent({
 16 |   name: "HistoryStyle",
 17 |   props: {
 18 |     secucode: String
 19 |   },
 20 |   setup(props){
 21 |     const { secucode } = props
 22 |     const refs = ref('')
 23 |     const ok = ref(true)
 24 | 
 25 |     const dom = (el)=>{
 26 |       refs.value = el
 27 |     }
 28 | 
 29 |     onMounted(()=>{
 30 |       historyStyle(secucode).then(resp=>{
 31 |         if (!!!resp) {
 32 |           ok.value = false
 33 |           return
 34 |         }
 35 |         show(resp)
 36 |       })
 37 |     })
 38 | 
 39 |     const show = (data)=>{
 40 |       const chart = echarts.init(refs.value)
 41 |       const options = {
 42 |         tooltip: {
 43 |           show: false,
 44 |         },
 45 |         grid: {
 46 |           top: '10',
 47 |           bottom: '50'
 48 |         },
 49 |         textStyle: {
 50 |           fontFamily: ['arial', 'kaiti'],
 51 |         },
 52 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
 53 |         xAxis: {
 54 |           type: 'category',
 55 |           data: data.map(x=>dayjs(x.date).format('YYYYMM')),
 56 |           axisLabel: {
 57 |             rotate: 90,
 58 |           },
 59 |           axisTick: {
 60 |             //x轴刻度相关设置
 61 |             alignWithLabel: true,
 62 |           },
 63 |         },
 64 |         yAxis: {
 65 |           type: 'value',
 66 |           axisLabel: {
 67 |             formatter: function (value) {
 68 |               switch (value) {
 69 |                 case 0:
 70 |                   return '沪深300'
 71 |                 case 1:
 72 |                   return '中证500'
 73 |                 case 2:
 74 |                   return '中证1000'
 75 |                 case 3:
 76 |                   return '创业板综'
 77 |               }
 78 |             }
 79 |           }
 80 |         },
 81 |         series: [{
 82 |           data: data.map(x=>x.value),
 83 |           type: 'line',
 84 |           symbol: "none",
 85 |           step: '1'
 86 |         }]
 87 |       }
 88 |       chart.setOption(options)
 89 |     }
 90 | 
 91 |     return {dom, ok}
 92 |   }
 93 | })
 94 | </script>
 95 | 
 96 | <style scoped>
 97 | .desc-title {
 98 |   text-align: left;
 99 |   margin-bottom: 10px;
100 | }
101 | 
102 | .chart-style {
103 |   width: 100%;
104 |   height: 300px;
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/components/details/charts/Performance.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <vxe-grid :data="data" :columns="columns" size="mini" stripe cell-class-name="vxe-table"/>
  3 | </template>
  4 | 
  5 | <script>
  6 | import {defineComponent, onMounted, ref} from "vue";
  7 | import numeral from "numeral";
  8 | import {riskPerformance} from "../../../assets/js/api";
  9 | 
 10 | numeral.nullFormat('N/A')
 11 | numeral.zeroFormat('-')
 12 | 
 13 | function format(value, digit, pct=false){
 14 |   if (digit === 2 && pct){
 15 |     return numeral(value).format('0.00%')
 16 |   } else if (digit === 2 && !pct) {
 17 |     return numeral(value).format('0.00')
 18 |   }
 19 |   return numeral(value).format('0.0000')
 20 | }
 21 | 
 22 | export default defineComponent({
 23 |   name: "Performance",
 24 |   props: {secucode: String},
 25 |   setup(props){
 26 |     const { secucode } = props
 27 |     const data = ref([])
 28 | 
 29 |     onMounted(()=>{
 30 |       riskPerformance(secucode).then(r=>{
 31 |         data.value = Object.keys(r).map(x=>r[x])
 32 |       })
 33 |     })
 34 | 
 35 |     const columns = [
 36 |       {
 37 |         title: "业绩区间",
 38 |         field: "period",
 39 |         showOverflow: true,
 40 |         width: 80
 41 |       },
 42 |       {
 43 |         title: "绝对收益",
 44 |         field: "absolute",
 45 |         align: 'right',
 46 |         formatter: ({cellValue})=>format(cellValue, 2, true)
 47 |       },
 48 |       {
 49 |         title: "年化收益",
 50 |         field: "annual",
 51 |         align: 'right',
 52 |         formatter: ({cellValue})=>format(cellValue, 2, true)
 53 |       },
 54 |       {
 55 |         title: "超额收益",
 56 |         field: "abnormal",
 57 |         align: 'right',
 58 |         formatter: ({cellValue})=>format(cellValue, 2, true)
 59 |       },
 60 |       {
 61 |         title: "年化波动率",
 62 |         field: "vol",
 63 |         align: 'right',
 64 |         formatter: ({cellValue})=>format(cellValue * Math.pow(250, 0.5), 2, true)
 65 |       },
 66 |       {
 67 |         title: "最大回撤",
 68 |         field: "drawback",
 69 |         align: 'right',
 70 |         formatter: ({cellValue})=>format(cellValue, 2, true)
 71 |       },
 72 |       {
 73 |         title: "Sharpe",
 74 |         field: "sharpe",
 75 |         align: 'right',
 76 |         formatter: ({cellValue})=>format(cellValue, 2)
 77 |       },
 78 |       {
 79 |         title: "Calmar",
 80 |         field: "calmar",
 81 |         align: 'right',
 82 |         formatter: ({cellValue})=>format(cellValue, 2)
 83 |       },{
 84 |         title: "择时能力",
 85 |         field: "timing",
 86 |         align: 'right',
 87 |         formatter: ({cellValue})=>format(cellValue, 2)
 88 |       },{
 89 |         title: "选股能力",
 90 |         field: "selection",
 91 |         align: 'right',
 92 |         formatter: ({cellValue})=>format(cellValue, 4)
 93 |       },
 94 |     ]
 95 | 
 96 |     return { data, columns }
 97 |   }
 98 | })
 99 | </script>
100 | 
101 | <style scoped>
102 | 
103 | </style>
104 | 


--------------------------------------------------------------------------------
/src/components/details/allocate/IndustrySw.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="industry-sw">
  3 |     <div class="chart" :ref="reference" v-if="show"></div>
  4 |     <div v-else>此基金没有该配置项</div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import {onMounted, ref} from "vue";
 10 | import numeral from "numeral";
 11 | import * as echarts from 'echarts';
 12 | import { fundIndustryStyle } from "../../../assets/js/api";
 13 | 
 14 | export default {
 15 |   name: "IndustrySw",
 16 |   props: { secucode: String },
 17 |   setup(props){
 18 |     const { secucode } = props
 19 |     const instance = ref(document.body)
 20 |     const show = ref(true)
 21 | 
 22 |     const reference = (el)=>{
 23 |       instance.value = el
 24 |     }
 25 | 
 26 |     const draw = (data)=>{
 27 |       const myChart = echarts.init(instance.value);
 28 |       const options = {
 29 |         tooltip : {
 30 |           trigger: 'axis',
 31 |           axisPointer: {
 32 |             type: 'shadow',
 33 |             label: {
 34 |               backgroundColor: '#6a7985'
 35 |             }
 36 |           },
 37 |           formatter:function(params){
 38 |             console.log(params[0])
 39 |             let res = params[0].name;
 40 |             for (let i = 0; i < params.length; i++) {
 41 |               res += "<div style='text-align: left'>"+params[i].marker+params[i].seriesName+"："+ params[i].data;
 42 |             }
 43 |             res += "</div>"
 44 |             return res;
 45 |           }
 46 |         },
 47 |         textStyle: {
 48 |           fontFamily: ['Arial', 'kaiti'],
 49 |         },
 50 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', "#CADBF6"],
 51 |         legend: {
 52 |           data: data.names
 53 |         },
 54 |         grid: {
 55 |           left: '3%',
 56 |           right: '4%',
 57 |           bottom: '3%',
 58 |           containLabel: true
 59 |         },
 60 |         xAxis: {
 61 |           type: 'category',
 62 |           data: data.data.map(x=>x.date)
 63 |         },
 64 |         yAxis: {
 65 |           type: 'value',
 66 |           max: 100
 67 |         },
 68 |         series: data.names.map((e)=>{
 69 |           return {
 70 |             name: e,
 71 |             type: 'bar',
 72 |             stack: 'total',
 73 |             label: {
 74 |               show: false
 75 |             },
 76 |             emphasis: {
 77 |               focus: 'series'
 78 |             },
 79 |             data: data.data.map(x=>numeral(x[e]*100).format('0.00'))
 80 |           }
 81 |         })
 82 |       }
 83 |       myChart.setOption(options)
 84 |     }
 85 | 
 86 |     onMounted( ()=> {
 87 |       show.value = true
 88 |       fundIndustryStyle(secucode).then(r=>{
 89 |         if (!!r) {
 90 |           draw(r)
 91 |         } else {
 92 |           show.value = false
 93 |         }
 94 |       })
 95 |     })
 96 | 
 97 |     return { reference, show }
 98 |   }
 99 | }
100 | </script>
101 | 
102 | <style scoped>
103 | .industry-sw {
104 |   width: 100%;
105 | }
106 | 
107 | .chart {
108 |   width: 100%;
109 |   height: 300px;
110 | }
111 | </style>
112 | 


--------------------------------------------------------------------------------
/src/components/details/manager/Managed.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="manager">
  3 |     <ElDescriptions :column="3" title="任职信息" border>
  4 |       <ElDescriptionsItem label="基金经理">
  5 |         {{ state.manager.manager }}
  6 |       </ElDescriptionsItem>
  7 |       <ElDescriptionsItem label="任职日期">
  8 |         {{ state.manager.start }}
  9 |       </ElDescriptionsItem>
 10 |       <ElDescriptionsItem label="管理规模">
 11 |         {{ formatter(state.manager.managed_scale).format('0,000.0') }}亿元
 12 |       </ElDescriptionsItem>
 13 |     </ElDescriptions>
 14 |     <vxe-grid
 15 |         class="table"
 16 |         border auto-resize stripe highlight-hover-row size="mini"
 17 |         :columns="columns"
 18 |         :data="state.managed"
 19 |     ></vxe-grid>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import {onMounted, reactive} from "vue";
 25 | import numeral from "numeral";
 26 | import { managedFund, fundStyle } from "../../../assets/js/api";
 27 | 
 28 | const columns = [
 29 |   {
 30 |     type: 'seq',
 31 |     width: 50,
 32 |     align: 'center'
 33 |   },
 34 |   {
 35 |     title: '基金代码',
 36 |     field: 'secucode',
 37 |     align: 'center'
 38 |   },
 39 |   {
 40 |     title: '基金简称',
 41 |     field: 'secuabbr',
 42 |     align: 'left',
 43 |     showOverflow: true
 44 |   },
 45 |   {
 46 |     title: '基金类型',
 47 |     field: 'classify',
 48 |     align: 'left',
 49 |     showOverflow: true
 50 |   },
 51 |   {
 52 |     title: '成立日期',
 53 |     field: 'launch',
 54 |     align: 'center',
 55 |   },
 56 |   {
 57 |     title: '任职日期',
 58 |     field: 'serve_date',
 59 |     align: 'center',
 60 |   },
 61 |   {
 62 |     title: '基金规模(亿元)',
 63 |     field: 'scale',
 64 |     align: 'right',
 65 |     formatter: (row) => numeral(row.cellValue).format('0,000.0'),
 66 |   },
 67 |   {
 68 |     title: '任职回报(%)',
 69 |     field: 'return_after',
 70 |     align: 'right',
 71 |     formatter: (row) => numeral(row.cellValue).format('0.0%'),
 72 |   },
 73 |   {
 74 |     title: '任职同类排名',
 75 |     field: 'rank',
 76 |     align: 'right'
 77 |   }
 78 | ]
 79 | 
 80 | export default {
 81 |   name: "Managed",
 82 |   props: {secucode: String},
 83 |   setup(props) {
 84 |     const {secucode} = props
 85 | 
 86 |     const state = reactive({
 87 |       manager: {manager: null, managed_scale: 0, start: null},
 88 |       managed: []
 89 |     })
 90 | 
 91 |     const fetchFactManager = () => {
 92 |       fundStyle(secucode).then(r=>{
 93 |         state.manager = r
 94 |       })
 95 |     }
 96 | 
 97 |     const fetchManagerManaged = () => {
 98 |       managedFund(secucode).then((resp) => {
 99 |         state.managed = resp
100 |       })
101 |     }
102 | 
103 |     onMounted(() => {
104 |       fetchManagerManaged()
105 |       fetchFactManager()
106 |     })
107 | 
108 |     const formatter = (value) => {
109 |       return numeral(value)
110 |     }
111 | 
112 |     return {state, columns, formatter}
113 |   }
114 | }
115 | </script>
116 | 
117 | <style scoped>
118 | 
119 | .manager {
120 |   width: 100%;
121 |   padding: 2px;
122 | }
123 | 
124 | .table {
125 |   margin-top: 10px;
126 | }
127 | 
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/components/details/Fact.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="row">
  3 |     <div class="col">
  4 |       <ElCard shadow="never" class="card">
  5 |         <Statistic :secucode="secucode" />
  6 |       </ElCard>
  7 |       <ElCard shadow="never" class="card">
  8 |         <h4 class="desc-title">区间表现</h4>
  9 |         <Performance :secucode="secucode" />
 10 |       </ElCard>
 11 |       <ElCard shadow="never" class="card">
 12 |         <h4 class="desc-title">基金风格</h4>
 13 |         <Style :secucode="secucode" />
 14 |       </ElCard>
 15 |       <ElCard shadow="never" class="card">
 16 |         <h4 class="desc-title">业绩归因</h4>
 17 |         <Brinson :secucode="secucode" />
 18 |       </ElCard>
 19 |       <ElCard shadow="never" class="card">
 20 |         <h4 class="desc-title">换手率</h4>
 21 |         <Turnover :secucode="secucode" />
 22 |       </ElCard>
 23 |       <ElCard shadow="never" class="card">
 24 |         <h4 class="desc-title">业绩评价</h4>
 25 |         <div style="display: inline-flex; width: 100%">
 26 |           <RiskTraceShort :secucode="secucode" url="short"/>
 27 |           <RiskTraceShort :secucode="secucode" url="long"/>
 28 |         </div>
 29 |       </ElCard>
 30 |       <ElCard shadow="never" class="card">
 31 |         <HistoryStyle :secucode="secucode" />
 32 |       </ElCard>
 33 |     </div>
 34 |     <div class="col">
 35 |       <ElCard shadow="never" class="card">
 36 |         <h4 class="desc-title">业绩曲线</h4>
 37 |         <NavChart :secucode="secucode" />
 38 |       </ElCard>
 39 |       <ElCard shadow="never" class="card">
 40 |         <h4 class="desc-title">规模变化</h4>
 41 |         <ScaleChange :secucode="secucode" />
 42 |       </ElCard>
 43 |       <ElCard shadow="never" class="card">
 44 |         <h4 class="desc-title">持有人结构</h4>
 45 |         <HolderInfo :secucode="secucode" />
 46 |       </ElCard>
 47 |       <ElCard shadow="never" class="card">
 48 |         <CyclePerformance :secucode="secucode" />
 49 |       </ElCard>
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | import {defineComponent} from "vue";
 56 | import Style from "./charts/Style.vue";
 57 | import Brinson from "./charts/Brinson.vue";
 58 | import Statistic from "./charts/Statistic.vue";
 59 | import Turnover from "./charts/Turnover.vue";
 60 | import HolderInfo from "./charts/HolderInfo.vue";
 61 | import NavChart from "./charts/NavChart.vue";
 62 | import ScaleChange from "./charts/ScaleChange.vue";
 63 | import RiskTraceShort from "./charts/RiskTraceShort.vue";
 64 | import Performance from "./charts/Performance.vue";
 65 | import CyclePerformance from "./charts/CyclePerformance.vue";
 66 | import HistoryStyle from "./charts/HistoryStyle.vue";
 67 | 
 68 | export default defineComponent({
 69 |   name: "Fact",
 70 |   components: {
 71 |     HistoryStyle,
 72 |     CyclePerformance,
 73 |     Performance, RiskTraceShort, ScaleChange, NavChart, HolderInfo, Turnover, Statistic, Brinson, Style},
 74 |   props: { secucode: String },
 75 |   setup(props){
 76 |     const { secucode } = props
 77 |     return { secucode }
 78 |   }
 79 | 
 80 | })
 81 | 
 82 | </script>
 83 | 
 84 | <style scoped>
 85 | .row {
 86 |   display: inline-flex;
 87 |   width: 100%;
 88 | }
 89 | 
 90 | .col {
 91 |   width: 100%;
 92 |   flex: 12;
 93 |   padding: 10px;
 94 | }
 95 | 
 96 | .card {
 97 |   width: 100%;
 98 |   margin-bottom: 5px;
 99 | }
100 | 
101 | .desc-title {
102 |   text-align: left;
103 |   margin-bottom: 10px;
104 | }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/components/details/allocate/Asset.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="asset">
  3 |       <div class="chart" :ref="instance"></div>
  4 |       <div class="table">
  5 |         <vxe-table
  6 |             size="mini"
  7 |             highlight-hover-row stripe highlight-hover-column
  8 |             auto-resize border
  9 |             style="width: 100%"
 10 |             :data="data.data"
 11 |         >
 12 |           <vxe-column field="asset" title="资产"></vxe-column>
 13 |           <vxe-column field="current" title="占净值比(%)" align="center" :formatter="formatPercent"></vxe-column>
 14 |           <vxe-column field="change" title="较上期变动(%)" align="center" :formatter="formatFloat"></vxe-column>
 15 |         </vxe-table>
 16 |       </div>
 17 |     </div>
 18 |   <div class="update-date">更新日期: {{data.date}}</div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import {onMounted, ref, reactive} from "vue";
 23 | import * as echarts from 'echarts';
 24 | import numeral from "numeral";
 25 | import { fundAllocate } from "../../../assets/js/api";
 26 | 
 27 | export default {
 28 |   name: "Asset",
 29 |   props: { secucode: String },
 30 |   setup(props){
 31 |     const { secucode } = props
 32 |     const data = reactive({data: [], date: ''})
 33 |     const chartInstance = ref('')
 34 | 
 35 |     const draw = (data) => {
 36 |       const myChart = echarts.init(chartInstance.value)
 37 |       const option = {
 38 |         grid: {
 39 |           show: false,
 40 |           top: 40,
 41 |           left: "5%",
 42 |           right: "5%",
 43 |           bottom: '10%'
 44 |         },
 45 |         tooltip: {
 46 |           trigger: 'item',
 47 |           // formatter: "{a} <br/>{b} : {c} ({d}%)"
 48 |         },
 49 |         textStyle: {
 50 |           fontFamily: ['Arial', 'kaiti'],
 51 |         },
 52 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
 53 |         legend: {
 54 |           orient: 'vertical',
 55 |           left: 'right',
 56 |           top: "center",
 57 |           data: data.map(x => {
 58 |             return x.name
 59 |           })
 60 |         },
 61 |         series: [
 62 |           {
 63 |             type: 'pie',
 64 |             radius: '55%',
 65 |             center: ['30%', '50%'],
 66 |             data: data.map(x => {
 67 |               return {value: x.ratio, name: x.name}
 68 |             }),
 69 |             labelLine: {
 70 |               show: false
 71 |             },
 72 |             label: {
 73 |               show: false
 74 |             }
 75 |           }
 76 |         ]
 77 |       };
 78 |       myChart.setOption(option)
 79 |     }
 80 | 
 81 |     onMounted( ()=>{
 82 |       fetch(secucode)
 83 |     })
 84 | 
 85 |     const fetch = (secucode)=>{
 86 |       fundAllocate(secucode).then(r=>{
 87 |         draw(r.chart)
 88 |         data.data = r.table
 89 |         data.date = r.date
 90 |       })
 91 |     }
 92 | 
 93 |     const formatPercent = ({cellValue})=>{
 94 |       return numeral(cellValue? cellValue*100: 0).format('0.00')
 95 |     }
 96 | 
 97 |     const formatFloat = ({cellValue})=>{
 98 |       return numeral(cellValue).format('0.00')
 99 |     }
100 | 
101 |     const instance = (el)=>{
102 |       chartInstance.value = el
103 |     }
104 | 
105 |     return { instance, data, formatPercent, formatFloat }
106 |   }
107 | }
108 | </script>
109 | 
110 | <style scoped>
111 | 
112 | .asset {
113 |   width: 100%;
114 |   display: inline-flex;
115 | }
116 | 
117 | .chart {
118 |   width: 50%;
119 |   height: 250px;
120 | }
121 | 
122 | .table {
123 |   width: 50%;
124 | }
125 | 
126 | .update-date {
127 |   text-align: left;
128 |   font-size: smaller;
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/components/details/charts/HolderInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :ref="dom" class="chart-style"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import {onMounted, ref} from "vue";
  7 | import * as echarts from 'echarts';
  8 | import numeral from "numeral";
  9 | import { holder } from "../../../assets/js/api";
 10 | 
 11 | export default {
 12 |   name: "HolderInfo",
 13 |   props: { secucode: String },
 14 |   setup(props){
 15 |     const { secucode } = props
 16 |     const refs = ref('')
 17 | 
 18 |     const dom = (el)=>{
 19 |       refs.value = el
 20 |     }
 21 | 
 22 |     const show = (data)=>{
 23 |       const ele = refs.value
 24 |       const chart = echarts.init(ele)
 25 |       const options = {
 26 |         // backgroundColor: 'rgba(128, 128, 128, 0.1)',
 27 |         textStyle: {
 28 |           fontFamily: ['Arial', 'kaiti'],
 29 |         },
 30 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
 31 |         grid: {
 32 |           show: false,
 33 |           top: 30,
 34 |           left: "10%",
 35 |           right: "5%",
 36 |           bottom: '10%'
 37 |         },
 38 |         tooltip: {
 39 |           trigger: 'axis',
 40 |           axisPointer: {
 41 |             type: 'cross',
 42 |             label: {
 43 |               backgroundColor: '#6a7985'
 44 |             }
 45 |           },
 46 |           formatter:function(params){
 47 |             let res = params[0].name;
 48 |             for (let i = 0; i < params.length; i++) {
 49 |               res += "<div style='text-align: left'>"+params[i].marker+params[i].seriesName+"："+ params[i].data;
 50 |             }
 51 |             res += "</div>"
 52 |             return res;
 53 |           }
 54 |         },
 55 |         legend: {
 56 |         },
 57 |         xAxis: [
 58 |           {
 59 |             type: 'category',
 60 |             data: data.map(x=>x.date),
 61 |             axisPointer: {show: true}
 62 |           }
 63 |         ],
 64 |         yAxis: {
 65 |           axisLabel: {
 66 |             formatter: (value) => {
 67 |               return `${value}%`
 68 |             }
 69 |           },
 70 |           axisPointer: {show: true},
 71 |           scale: true
 72 |         },
 73 |         series: [
 74 |           {
 75 |             name: '个人投资者',
 76 |             type: 'bar',
 77 |             stack: 'total',
 78 |             label: {
 79 |               show: false
 80 |             },
 81 |             emphasis: {
 82 |               focus: 'series'
 83 |             },
 84 |             data: data.map(x=>numeral(x.individual).format('0.00'))
 85 |           },
 86 |           {
 87 |             name: '机构投资者',
 88 |             type: 'bar',
 89 |             stack: 'total',
 90 |             label: {
 91 |               show: false
 92 |             },
 93 |             emphasis: {
 94 |               focus: 'series'
 95 |             },
 96 |             data: data.map(x=>numeral(x.institution).format('0.00'))
 97 |           },
 98 |           {
 99 |             name: '未明确投资者',
100 |             type: 'bar',
101 |             stack: 'total',
102 |             label: {
103 |               show: false
104 |             },
105 |             emphasis: {
106 |               focus: 'series'
107 |             },
108 |             data: data.map(x=>numeral(x.undefined).format('0.00'))
109 |           }
110 |         ]
111 |       }
112 |       chart.setOption(options)
113 |       window.onresize = ()=>{
114 |         chart.resize()
115 |       }
116 |     }
117 | 
118 |     const getHolder = ()=>{
119 |       holder(secucode).then(resp=>{
120 |         show(resp)
121 |       })
122 |     }
123 | 
124 |     onMounted(()=>{ getHolder() })
125 | 
126 |     return { dom }
127 |   }
128 | }
129 | </script>
130 | 
131 | <style scoped>
132 | .chart-style {
133 |   width: 100%;
134 |   height: 300px;
135 | }
136 | </style>
137 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <h4>基金分类汇总</h4>
  3 |   <div class="row">
  4 |     <div class="col-12">
  5 |       <div class="tree-chart" :ref="dom"></div>
  6 |     </div>
  7 |     <div class="col-12">
  8 |       <vxe-grid
  9 |           border
 10 |           resizable
 11 |           size="small"
 12 |           :tree-config="{children: 'children'}"
 13 |           :data="state.data"
 14 |           :columns="column"
 15 |           :max-height="600"
 16 |       >
 17 |       </vxe-grid>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script lang="ts">
 23 | 
 24 | import request from "../request";
 25 | import {onMounted, reactive, ref} from "vue";
 26 | import numeral from 'numeral';
 27 | import * as echarts from 'echarts';
 28 | import { useRouter } from "vue-router";
 29 | 
 30 | const column = [
 31 |   {
 32 |     field: 'branch',
 33 |     title: '分类',
 34 |     treeNode: true
 35 |   },{
 36 |   field: 'count',
 37 |     title: '数量',
 38 |     align: 'center',
 39 |     formatter: ({row}: any)=>numeral(row.count).format('0,00')
 40 |   },{
 41 |     field: 'count2',
 42 |     title: '数量(合并)',
 43 |     align: 'center',
 44 |     formatter: ({row}: any)=>numeral(row.count2).format('0,00')
 45 |   },{
 46 |     field: 'scale',
 47 |     title: '规模',
 48 |     align: 'center',
 49 |     formatter: ({row}: any)=>numeral(row.scale).format('0,00.00')
 50 |   }
 51 | ]
 52 | 
 53 | export default {
 54 |   name: "Home",
 55 |   setup(){
 56 | 
 57 |     const state = reactive({data: []})
 58 |     const refs = ref('')
 59 |     const router = useRouter()
 60 | 
 61 |     const fetchData = ()=>{
 62 |       request.get('/summary/bc').then(resp => {
 63 |         const { branch, total } = resp
 64 |         const data = branch.map((x: any)=>{
 65 |           x.children = x.children.map((child: any)=>{
 66 |             child.branch = child.classify
 67 |             return child
 68 |           })
 69 |           return x
 70 |         })
 71 |         data.push({branch: '合计', count: total.count, count2: total.count2, scale: total.scale})
 72 |         state.data = data
 73 | 
 74 |         const table = branch.map((x: any) => {
 75 |           return {
 76 |             name: x.branch, value: x.count, children: x.children.map((y: any) => {
 77 |               return {name: y.classify, value: y.count}
 78 |             })
 79 |           }
 80 |         });
 81 | 
 82 |         showTreeChart({name: '合计', value: total.count, children: table})
 83 |       })
 84 |     }
 85 | 
 86 |     const dom = (el: any) => {
 87 |       refs.value = el
 88 |     }
 89 | 
 90 |     const showTreeChart = (data: any)=>{
 91 |       const el: any = refs.value
 92 |       const chart = echarts.init(el)
 93 |       let option = {
 94 |         tooltip: {
 95 |           trigger: 'item',
 96 |           triggerOn: 'mousemove'
 97 |         },
 98 |         series: [
 99 |           {
100 |             type: 'tree',
101 | 
102 |             data: [data],
103 | 
104 |             top: '18%',
105 |             bottom: '14%',
106 | 
107 |             layout: 'radial',
108 | 
109 |             symbol: 'emptyCircle',
110 | 
111 |             symbolSize: 7,
112 | 
113 |             initialTreeDepth: 3,
114 | 
115 |             animationDurationUpdate: 750
116 | 
117 |           }
118 |         ]
119 |       }
120 |       chart.setOption(option);
121 |       chart.on('click', function (params: any) {
122 |         if (!params.data.children) {
123 |           router.push({name: 'stat', params: {'classify': params.name}})
124 |         }
125 |       });
126 |     }
127 | 
128 |     onMounted(()=>{fetchData()})
129 | 
130 |     return {
131 |       state, column, dom
132 |     }
133 | 
134 |   }
135 | }
136 | </script>
137 | 
138 | <style scoped>
139 | 
140 | h4 {
141 |   margin: 10px 0 15px 0;
142 | }
143 | 
144 | .row {
145 |   display: inline-flex;
146 |   width: 100%;
147 |   justify-content: flex-start;
148 |   align-content: center;
149 |   align-items: center;
150 | }
151 | 
152 | .col-12 {
153 |   flex: 12;
154 |   justify-content: center;
155 |   padding: 0 20px;
156 | }
157 | 
158 | .tree-chart {
159 |   width: 100%;
160 |   height: 600px;
161 | }
162 | </style>


--------------------------------------------------------------------------------
/src/components/details/charts/Statistic.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <ElDescriptions :column="2" :title="`${state.info.sec_name}(${secucode})`" border>
  4 |       <ElDescriptionsItem label="单位净值">
  5 |         {{numeral(state.info.nav).format('1.0000')}} ({{state.info.update_date}})
  6 |       </ElDescriptionsItem>
  7 |       <ElDescriptionsItem label="累计净值">
  8 |         {{numeral(state.info.nav_acc).format('1.0000')}} ({{state.info.update_date}})
  9 |       </ElDescriptionsItem>
 10 |     </ElDescriptions>
 11 |     <br>
 12 |     <ElDescriptions :column="3" title="业绩表现" border>
 13 |       <ElDescriptionsItem label="近1周:">
 14 |         {{numeral(state.info.return_1w/100).format('0.00%')}}
 15 |       </ElDescriptionsItem>
 16 |       <ElDescriptionsItem label="近1月:">
 17 |         {{numeral(state.info.return_1m/100).format('0.00%')}}
 18 |       </ElDescriptionsItem>
 19 |       <ElDescriptionsItem label="近3月:">
 20 |         {{numeral(state.info.return_3m/100).format('0.00%')}}
 21 |       </ElDescriptionsItem>
 22 |       <ElDescriptionsItem label="近6月:">
 23 |         {{numeral(state.info.return_6m/100).format('0.00%')}}
 24 |       </ElDescriptionsItem>
 25 |       <ElDescriptionsItem label="近1年:">
 26 |         {{numeral(state.info.return_1y/100).format('0.00%')}}
 27 |       </ElDescriptionsItem>
 28 |       <ElDescriptionsItem label="近3年:">
 29 |         {{numeral(state.info.return_3y/100).format('0.00%')}}
 30 |       </ElDescriptionsItem>
 31 |     </ElDescriptions>
 32 |     <br>
 33 |     <ElDescriptions :column="3" title="基金摘要" border>
 34 |       <ElDescriptionsItem label="基金类型">
 35 |         {{state.manager.classify}}
 36 |       </ElDescriptionsItem>
 37 |       <ElDescriptionsItem label="基金规模">
 38 |         {{numeral(state.manager.scale).format('0,000.0')}}(亿元)
 39 |       </ElDescriptionsItem>
 40 |       <ElDescriptionsItem label="基金经理">
 41 |         {{state.manager.manager}}
 42 |       </ElDescriptionsItem>
 43 |       <ElDescriptionsItem label="成立日期">
 44 |         {{state.manager.setup}}
 45 |       </ElDescriptionsItem>
 46 |       <ElDescriptionsItem label="任职日期">
 47 |         {{state.manager.start}}
 48 |       </ElDescriptionsItem>
 49 |       <ElDescriptionsItem label="管理规模">
 50 |         {{numeral(state.manager.managed_scale).format('0,000.0')}}(亿元)
 51 |       </ElDescriptionsItem>
 52 |     </ElDescriptions>
 53 |     <br>
 54 |     <ElDescriptions :column="3" title="基金标签" border>
 55 |       <ElDescriptionsItem label="股票仓位">
 56 |         {{numeral(state.manager.stock).format('0.00%')}}
 57 |       </ElDescriptionsItem>
 58 |       <ElDescriptionsItem label="风格属性">
 59 |         {{state.manager.style}}
 60 |       </ElDescriptionsItem>
 61 |       <ElDescriptionsItem label="规模属性">
 62 |         {{state.manager.scale_type}}
 63 |       </ElDescriptionsItem>
 64 |       <ElDescriptionsItem label="行业风格">
 65 |         {{state.manager.industry_style}}
 66 |       </ElDescriptionsItem>
 67 |       <ElDescriptionsItem label="行业主题">
 68 |         {{state.manager.industry}}
 69 |       </ElDescriptionsItem>
 70 |       <ElDescriptionsItem label="">
 71 |       </ElDescriptionsItem>
 72 |     </ElDescriptions>
 73 |   </div>
 74 | </template>
 75 | 
 76 | <script>
 77 | import {onMounted, reactive} from "vue";
 78 | import numeral from "numeral";
 79 | import request from "../../../request";
 80 | import {latestPerformance, fundStyle } from "../../../assets/js/api";
 81 | 
 82 | export default {
 83 |   name: "Statistic",
 84 |   props: { secucode: String },
 85 |   setup(props){
 86 |     const { secucode } = props
 87 | 
 88 |     const state = reactive({
 89 |       info: {},
 90 |       manager: {}
 91 |     })
 92 | 
 93 |     const fetchPerformance = ()=>{
 94 |       latestPerformance(secucode).then(r=>{
 95 |         state.info = r
 96 |       })
 97 |     }
 98 | 
 99 |     const fetchManager = ()=>{
100 |       fundStyle(secucode).then(r=>{
101 |         state.manager = r
102 |       })
103 |     }
104 | 
105 |     onMounted(()=>{
106 |       fetchPerformance()
107 |       fetchManager()
108 |     })
109 | 
110 |     return { state, secucode, numeral }
111 |   }
112 | }
113 | </script>
114 | 
115 | <style scoped>
116 | 
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/components/layout/Header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ElHeader class="header">
  3 |     <ElMenu :default-active="activeIndex" class="menu" mode="horizontal" @select="selectMenu">
  4 |       <ElMenuItem index="home" class="menu-item"><i class="el-icon-reading"></i>首页</ElMenuItem>
  5 |       <ElMenuItem index="cart" class="menu-item"><i class="el-icon-shopping-cart-2"></i>基金挑选</ElMenuItem>
  6 |       <ElMenuItem index="dashboard" class="menu-item"><i class="el-icon-trophy-1"></i>基金看板</ElMenuItem>
  7 |       <ElSubmenu index="3">
  8 |         <template #title><i class="el-icon-files"></i>基金入池</template>
  9 |         <ElMenuItem index="etf">ETF统计</ElMenuItem>
 10 |         <ElMenuItem index="screen">基金筛选</ElMenuItem>
 11 |       </ElSubmenu>
 12 |       <ElMenuItem index="portfolio" class="menu-item"><i class="el-icon-data-line"></i>组合管理</ElMenuItem>
 13 |       <ElMenuItem index="news" class="menu-item"><i class="el-icon-tickets"></i>热门新闻</ElMenuItem>
 14 | 
 15 |       <ElSelect
 16 |           size="mini"
 17 |           class="search-bar"
 18 |           prefix-icon="el-icon-search"
 19 |           clearable
 20 |           filterable
 21 |           reserve-keyword
 22 |           placeholder="输入基金代码或简称"
 23 |           v-model="searchText"
 24 |           remote
 25 |           :remote-method="onChange"
 26 |           @change="onSelect"
 27 |           @visible-change="visibleChange"
 28 |       >
 29 |         <ElOption v-for="(row, idx) in searchOptions" :label="row.label" :value="idx" :key="`search${String(idx)}`"
 30 |         >
 31 |           <span style="float: left">{{ row.label }}</span>
 32 |           <span style="float: right; color: #8492a6; font-size: 13px">{{ row.value }}</span>
 33 |         </ElOption>
 34 |       </ElSelect>
 35 |     </ElMenu>
 36 |   </ElHeader>
 37 | </template>
 38 | 
 39 | <script lang="ts">
 40 | import {onMounted, ref} from "vue";
 41 | import {useRouter} from 'vue-router';
 42 | import Storage from "../../assets/js/storage";
 43 | import { searchFund } from "../../assets/js/api";
 44 | 
 45 | export default {
 46 |   name: "Header",
 47 |   setup() {
 48 |     const activeIndex = ref('home')
 49 |     const router = useRouter()
 50 |     const searchText: any = ref(null)
 51 |     const searchOptions: any = ref([])
 52 |     const index = ref(0)
 53 | 
 54 |     const selectMenu = (index: string) => {
 55 |       sessionStorage.setItem('basicRoute', index)
 56 |       router.push({name: index})
 57 |     }
 58 | 
 59 |     onMounted(()=>{
 60 |       const basicRoute = sessionStorage.getItem('basicRoute') || 'home'
 61 |       activeIndex.value = basicRoute.toString()
 62 |       searchOptions.value = Storage.loadSearchHistory()
 63 |     })
 64 | 
 65 |     const onChange = (search: string)=>{
 66 |       searchFund(search).then(r=>{
 67 |         searchOptions.value = r.map((x: any) => {
 68 |           return {label: x[1], value: x[0]}
 69 |         })
 70 |       })
 71 |     }
 72 | 
 73 |     const onSelect = ()=>{
 74 |       if (searchText.value !== null){
 75 |         const selected = searchOptions.value[searchText.value]
 76 |         if (selected){
 77 |           Storage.saveSearchHistory(selected)
 78 |           searchText.value =selected.label
 79 |           router.push({name: 'info', params: {secucode: selected.value}})
 80 |         }
 81 |       }
 82 |     }
 83 | 
 84 |     const visibleChange = (status)=>{
 85 |       if (status) {
 86 |         searchOptions.value = Storage.loadSearchHistory()
 87 |       }
 88 |     }
 89 | 
 90 |     return {
 91 |       activeIndex, selectMenu, searchText, onChange, searchOptions, onSelect, index, visibleChange
 92 |     }
 93 |   }
 94 | }
 95 | </script>
 96 | 
 97 | <style scoped>
 98 | 
 99 | .header {
100 |   position: fixed;
101 |   width: 100%;
102 |   z-index: 100;
103 |   padding: 0;
104 | }
105 | 
106 | .menu {
107 |   width: 100%;
108 |   height: inherit;
109 |   display: inline-flex;
110 |   top: 0;
111 |   left:0;
112 |   position: fixed;
113 | }
114 | 
115 | .menu-item:first-child {
116 |   margin-left: 30px;
117 | }
118 | 
119 | .search-bar {
120 |   width: 250px;
121 |   position: absolute;
122 |   right: 40px;
123 |   top: 50%;
124 |   transform: translateY(-50%);
125 | }
126 | </style>
127 | 


--------------------------------------------------------------------------------
/src/components/details/allocate/AllocateHis.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="allocate-his">
  3 |     <div class="chart" :ref="reference"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import * as echarts from 'echarts'
  9 | import {defineComponent, onMounted, ref} from "vue";
 10 | import numeral from "numeral";
 11 | import { fundHistoricalAllocate } from "../../../assets/js/api";
 12 | 
 13 | export default defineComponent({
 14 |   name: "AllocateHis",
 15 |   props: { secucode: String },
 16 |   setup(props){
 17 |     const { secucode } = props
 18 | 
 19 |     const instance = ref('')
 20 | 
 21 |     const reference = (el)=>{
 22 |       instance.value = el
 23 |     }
 24 | 
 25 |     const draw = (data)=>{
 26 |       let myChart = echarts.init(instance.value);
 27 |       let option = {
 28 |         grid: {
 29 |           show: false,
 30 |           top: 40,
 31 |           left: "5%",
 32 |           right: "5%",
 33 |           bottom: '10%'
 34 |         },
 35 |         textStyle: {
 36 |           fontFamily: ['Arial', 'kaiti'],
 37 |         },
 38 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
 39 |         tooltip : {
 40 |           trigger: 'axis',
 41 |           axisPointer: {
 42 |             type: 'cross',
 43 |             label: {
 44 |               backgroundColor: '#6a7985'
 45 |             }
 46 |           },
 47 |           formatter:function(params){
 48 |             let res = params[0].name;
 49 |             let sum = 0
 50 |             for (let i = 0; i < params.length; i++) {
 51 |               res += "<div style='text-align: left'>"+params[i].marker+params[i].seriesName+"："+ numeral(params[i].data).format('0.00%');
 52 |               sum += params[i].data
 53 |             }
 54 |             res += "<br>合计: " + numeral(sum).format('0.00%')+"</div>"
 55 |             return res;
 56 |           }
 57 |         },
 58 |         legend: {
 59 |           data:['股票','债券','基金','金属','现金','其他']
 60 |         },
 61 |         xAxis : [
 62 |           {
 63 |             type : 'category',
 64 |             boundaryGap : false,
 65 |             data : data.map(e=>e['日期'])
 66 |           }
 67 |         ],
 68 |         yAxis : [
 69 |           {
 70 |             type : 'value',
 71 |           }
 72 |         ],
 73 |         series : [
 74 |           {
 75 |             name:'股票',
 76 |             type:'line',
 77 |             stack: '占比',
 78 |             areaStyle: {},
 79 |             data: data.map(e=>e['股票']),
 80 |             symbol: "circle"
 81 |           },
 82 |           {
 83 |             name:'债券',
 84 |             type:'line',
 85 |             stack: '占比',
 86 |             areaStyle: {},
 87 |             data: data.map(e=>e['债券']),
 88 |             symbol: "circle"
 89 |           },
 90 |           {
 91 |             name:'基金',
 92 |             type:'line',
 93 |             stack: '占比',
 94 |             areaStyle: {},
 95 |             data: data.map(e=>e['基金']),
 96 |             symbol: "circle"
 97 |           },
 98 |           {
 99 |             name:'金属',
100 |             type:'line',
101 |             stack: '占比',
102 |             areaStyle: {},
103 |             data: data.map(e=>e['金属']),
104 |             symbol: "circle"
105 |           },
106 |           {
107 |             name:'现金',
108 |             type:'line',
109 |             stack: '占比',
110 |             areaStyle: {},
111 |             data: data.map(e=>e['现金']),
112 |             symbol: "circle"
113 |           },
114 |           {
115 |             name:'其他',
116 |             type:'line',
117 |             stack: '占比',
118 |             areaStyle: {},
119 |             data: data.map(e=>e['其他']),
120 |             symbol: "circle"
121 |           },
122 |         ]
123 |       };
124 |       myChart.setOption(option)
125 |     }
126 | 
127 |     const fetch = (secucode) => {
128 |       fundHistoricalAllocate(secucode).then(r=>{
129 |         draw(r.history)
130 |       })
131 |     }
132 | 
133 |     onMounted(()=> {fetch(secucode)})
134 | 
135 |     return { reference }
136 |   }
137 | })
138 | </script>
139 | 
140 | <style scoped>
141 | .allocate-his {
142 |   width: 100%;
143 | }
144 | 
145 | .chart {
146 |   width: 100%;
147 |   height: 300px;
148 | }
149 | </style>
150 | 


--------------------------------------------------------------------------------
/src/components/details/manager/TopHolding.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="top-holding">
  3 |     <h4 class="text-left">任职以来持仓前20位</h4>
  4 |     <vxe-grid
  5 |         class="table"
  6 |         border auto-resize stripe highlight-hover-row size="mini"
  7 |         :toolbar-config="tableToolbar"
  8 |         :export-config="{}"
  9 |         :columns="columns"
 10 |         :data="tableData"
 11 |     ></vxe-grid>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | import {defineComponent, onMounted, ref} from "vue";
 17 | import { holdingTop20 } from "../../../assets/js/api";
 18 | import numeral from "numeral";
 19 | 
 20 | 
 21 | const columns = [
 22 |   {
 23 |     type: 'seq',
 24 |     width: 50,
 25 |     align: 'center'
 26 |   },
 27 |   {
 28 |     title: '股票代码',
 29 |     field: 'stockcode',
 30 |     align: 'center',
 31 |   },
 32 |   {
 33 |     title: '股票简称',
 34 |     field: 'stockabbr',
 35 |     align: 'left',
 36 |     showOverflow: true,
 37 |   },
 38 |   {
 39 |     title: '申万行业',
 40 |     field: 'industry',
 41 |     align: 'left',
 42 |     showOverflow: true,
 43 |   },
 44 |   {
 45 |     title: '最早出现',
 46 |     field: 'earliest',
 47 |     align: 'center'
 48 |   },
 49 |   {
 50 |     title: '最晚出现',
 51 |     field: 'latest',
 52 |     align: 'center',
 53 |   },
 54 |   {
 55 |     title: '持有期数',
 56 |     field: 'count',
 57 |     align: 'center',
 58 |     width: 80
 59 |   },
 60 |   {
 61 |     title: '持有期平均市值占净值比',
 62 |     field: 'avg_mkt_cap_ratio',
 63 |     align: 'right',
 64 |     width: 160,
 65 |     formatter: (row) => numeral(row.cellValue).format('0.00%'),
 66 |   },
 67 |   {
 68 |     title: '区间收益',
 69 |     field: 'period_return',
 70 |     align: 'right',
 71 |     width: 85,
 72 |     formatter: (row) => numeral(row.cellValue).format('0.00%'),
 73 |   },
 74 |   {
 75 |     title: '区间年化',
 76 |     field: 'period_annual_return',
 77 |     align: 'right',
 78 |     width: 85,
 79 |     formatter: (row) => numeral(row.cellValue).format('0.00%'),
 80 |   },
 81 |   {
 82 |     title: '同期沪深300收益',
 83 |     field: 'period_index_return',
 84 |     align: 'right',
 85 |     width: 120,
 86 |     formatter: (row) => numeral(row.cellValue).format('0.00%'),
 87 |   },
 88 |   {
 89 |     title: '同期行业指数收益',
 90 |     field: 'industry_return',
 91 |     align: 'right',
 92 |     width: 120,
 93 |     formatter: (row) => numeral(row.cellValue).format('0.00%'),
 94 |   },
 95 |   {
 96 |     title: '超额收益-沪深300',
 97 |     align: 'right',
 98 |     width: 140,
 99 |     formatter: (row) => numeral(row.row.period_return - row.row.period_index_return).format("0.00%"),
100 |   },
101 |   {
102 |     title: '超额收益-行业指数',
103 |     align: 'right',
104 |     width: 140,
105 |     formatter: (row) => numeral(row.row.period_return - row.row.industry_return).format("0.00%"),
106 |   },
107 |   {
108 |     title: '当前流通市值',
109 |     field: 'negotiable_mv',
110 |     align: 'right',
111 |     width: 120,
112 |     formatter: (row) => numeral(row.cellValue/1e8).format('0,000'),
113 |   },
114 |   {
115 |     title: "PE",
116 |     field: "pe_ttm",
117 |     align: "right",
118 |     formatter: (row) => numeral(row.cellValue).format('0.0'),
119 |   },
120 |   {
121 |     title: "PB",
122 |     field: "pb",
123 |     align: "right",
124 |     formatter: (row) => numeral(row.cellValue).format('0.0'),
125 |   }
126 | ]
127 | 
128 | const tableToolbar = {
129 |   export: true,
130 |   print: true,
131 |   zoom: true,
132 |   custom: true
133 | }
134 | 
135 | export default defineComponent({
136 |   name: "TopHolding",
137 |   props: {secucode: String},
138 |   setup(props){
139 |     const {secucode} = props
140 | 
141 |     const tableData = ref([])
142 | 
143 |     const fetchData = ()=>{
144 |       holdingTop20(secucode).then(r=>{
145 |         tableData.value = r
146 |       })
147 |     }
148 | 
149 |     onMounted(()=>{
150 |       fetchData()
151 |     })
152 | 
153 |     return {columns, tableData, tableToolbar}
154 |   }
155 | })
156 | </script>
157 | 
158 | <style scoped>
159 | 
160 | .top-holding {
161 |   width: 100%;
162 |   margin-top: 10px;
163 | }
164 | 
165 | .text-left {
166 |   text-align: left;
167 |   margin-left: 10px;
168 | }
169 | 
170 | .table {
171 |   margin-top: 10px;
172 |   padding: 0 2px;
173 | }
174 | 
175 | </style>
176 | 


--------------------------------------------------------------------------------
/src/components/Dashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="dashboard">
  3 |     <div v-if="!state.show">
  4 |     <div class="row">
  5 |       <div class="period">
  6 |         <span>时间段：</span>
  7 |         <ElRadioGroup v-model="state.period" @change="change">
  8 |           <ElRadio label="近1年"></ElRadio>
  9 |           <ElRadio label="近2年"></ElRadio>
 10 |           <ElRadio label="近3年"></ElRadio>
 11 |           <ElRadio label="近5年"></ElRadio>
 12 |         </ElRadioGroup>
 13 |       </div>
 14 |       <div class="style">
 15 |         <span>风格：</span>
 16 |         <ElRadioGroup v-model="state.style" @change="change">
 17 |           <ElRadio label="成长"></ElRadio>
 18 |           <ElRadio label="均衡"></ElRadio>
 19 |           <ElRadio label="价值"></ElRadio>
 20 |         </ElRadioGroup>
 21 |       </div>
 22 |       <div class="industry">
 23 |         <span>行业：</span>
 24 |         <ElRadioGroup v-model="state.industry" @change="change">
 25 |           <ElRadio label="消费"></ElRadio>
 26 |           <ElRadio label="金融地产"></ElRadio>
 27 |           <ElRadio label="TMT"></ElRadio>
 28 |           <ElRadio label="中游制造"></ElRadio>
 29 |           <ElRadio label="周期"></ElRadio>
 30 |           <ElRadio label="港股"></ElRadio>
 31 |         </ElRadioGroup>
 32 |       </div>
 33 |     </div>
 34 |     <div class="row" :key="index">
 35 |       <Simple @show="showComplex" :index="idx" v-for="(row, idx) in state.data" :key="'simple'+idx.toString()" :data="row"/>
 36 |     </div>
 37 |     </div>
 38 |     <ElCard style="width: 100%" v-else>
 39 |       <template #header>
 40 |         <ElPageHeader title="返回" content="详细" @back="state.show=false"></ElPageHeader>
 41 |       </template>
 42 |       <Detail class="detail" :params="state.params" />
 43 |     </ElCard>
 44 |   </div>
 45 | </template>
 46 | 
 47 | <script>
 48 | import {defineComponent, nextTick, onMounted, reactive, ref} from "vue";
 49 | import Simple from "./dashboard/Simple.vue";
 50 | import request from "../request";
 51 | import Detail from "./dashboard/Detail.vue";
 52 | import { ElLoading } from 'element-plus';
 53 | 
 54 | export default defineComponent({
 55 |   name: "Dashboard",
 56 |   components: {Detail, Simple},
 57 |   setup(){
 58 |     const state = reactive({
 59 |       show: false,
 60 |       backup: [],
 61 |       data: [],
 62 |       period: null,
 63 |       style: null,
 64 |       industry: null,
 65 |       params: {}
 66 |     })
 67 | 
 68 |     // 用于强制刷新页面
 69 |     const index = ref(0)
 70 | 
 71 | 
 72 |     const showComplex = (index)=>{
 73 |       const d = state.data[index]
 74 |       const { year, style, industry } = d
 75 |       state.params = {year: year, style: style, industry: industry}
 76 |       state.show = true
 77 |     }
 78 | 
 79 |     onMounted(()=>{
 80 |       const loadingInstance = ElLoading.service({fullscreen: true})
 81 |       request.get('/dashboard/home').then(r=>{
 82 |         state.backup = r.data
 83 |         state.data = state.backup
 84 |         nextTick(()=>{
 85 |           loadingInstance.close()
 86 |         })
 87 |       })
 88 |     })
 89 | 
 90 |     const change = ()=>{
 91 |       state.data = state.backup
 92 |       if (state.period !== null){
 93 |         state.data = state.data.filter((x)=> x.year === state.period)
 94 |       }
 95 |       if (state.style !== null){
 96 |         state.data = state.data.filter((x)=> x.style === state.style)
 97 |       }
 98 |       if (state.industry !== null) {
 99 |         state.data = state.data.filter((x) => x.industry === state.industry)
100 |       }
101 |       state.data = [...state.data]
102 |       index.value ++
103 |     }
104 | 
105 |     return { state, showComplex, change, index }
106 |   }
107 | })
108 | 
109 | </script>
110 | 
111 | <style scoped>
112 | .dashboard {
113 |   /*border: 1px solid #E6E6E6;*/
114 |   border-radius: 5px;
115 |   min-height: 780px;
116 | }
117 | 
118 | .row {
119 |   margin: 5px;
120 |   width: calc(100% - 10px);
121 |   display: flex;
122 |   justify-content: start;
123 |   flex-wrap: wrap;
124 | }
125 | 
126 | .period {
127 |   width: 410px;
128 | }
129 | 
130 | .style {
131 |   width: 350px;
132 | }
133 | 
134 | .industry {
135 |   width: 650px;
136 | }
137 | 
138 | .detail {
139 |   width: 100%;
140 |   overflow: auto;
141 | }
142 | 
143 | </style>
144 | 


--------------------------------------------------------------------------------
/src/assets/js/cart.js:
--------------------------------------------------------------------------------
  1 | import {defineComponent, onMounted, reactive} from "vue";
  2 | import request from '../../request'
  3 | import CartTable from "../../components/cart/CartTable.vue";
  4 | 
  5 | const checkbox = {
  6 |     indeterminate: false,
  7 |     checkAll: true,
  8 |     checkAllGroup: []
  9 | }
 10 | 
 11 | const props = {
 12 |     multiple: true,
 13 |     expandTrigger: 'hover'
 14 | }
 15 | 
 16 | const createCart = (propName, url)=>{
 17 |     return defineComponent({
 18 |         name: propName,
 19 |         components: { CartTable },
 20 |         setup(){
 21 |             const state = reactive({
 22 |                 init: false,
 23 |                 selections: {checkbox: {}, selectors: {}},
 24 |                 selected: {checkbox: {}, selectors: {}},
 25 |                 data: [],
 26 |                 loading: true
 27 |             })
 28 | 
 29 |             const basicUrl = url
 30 | 
 31 |             // 初始化选项布置
 32 |             const fetchSelections = ()=>{
 33 |                 request.get(basicUrl + '/selections').then(r=>{
 34 |                     state.selections = r.data
 35 |                     const data = r.data.checkbox
 36 |                     for (const attr in data) {
 37 |                         if (data.hasOwnProperty(attr)){
 38 |                             const groups = Object.keys(data[attr].value)
 39 |                             state.selected.checkbox[attr] = {...checkbox, checkAllGroup: groups}
 40 |                         }
 41 |                     }
 42 | 
 43 |                     const { selectors } = r.data
 44 |                     for (const name in selectors) {
 45 |                         if (selectors.hasOwnProperty(name)){
 46 |                             state.selected.selectors[name] = []
 47 |                         }
 48 |                     }
 49 | 
 50 |                     state.init = true
 51 |                 })
 52 |             }
 53 | 
 54 |             onMounted(()=>{
 55 |                 fetchSelections()
 56 |             })
 57 | 
 58 |             const handleCheckAll = (group) => {
 59 |                 if (state.selected.checkbox[group].indeterminate) {
 60 |                     state.selected.checkbox[group].checkAll = false;
 61 |                 } else {
 62 |                     state.selected.checkbox[group].checkAll = !state.selected.checkbox[group].checkAll;
 63 |                 }
 64 |                 state.selected.checkbox[group].indeterminate = false;
 65 | 
 66 |                 if (state.selected.checkbox[group].checkAll) {
 67 |                     state.selected.checkbox[group].checkAllGroup = Object.keys(state.selections.checkbox[group].value);
 68 |                 } else {
 69 |                     state.selected.checkbox[group].checkAllGroup = [];
 70 |                 }
 71 |             }
 72 | 
 73 | 
 74 |             const checkAllGroupChange = (data, group) => {
 75 |                 if (data.length === Object.keys(state.selections.checkbox[group].value).length) {
 76 |                     state.selected.checkbox[group].indeterminate = false;
 77 |                     state.selected.checkbox[group].checkAll = true;
 78 |                 } else if (data.length > 0) {
 79 |                     state.selected.checkbox[group].indeterminate = true;
 80 |                     state.selected.checkbox[group].checkAll = false;
 81 |                 } else {
 82 |                     state.selected.checkbox[group].indeterminate = false;
 83 |                     state.selected.checkbox[group].checkAll = false;
 84 |                 }
 85 |             }
 86 | 
 87 |             const submit = ()=>{
 88 |                 const checkbox = Object.keys(state.selected.checkbox).map(name=>{
 89 |                     return {name: name, value: state.selected.checkbox[name].checkAllGroup }
 90 |                 })
 91 | 
 92 |                 state.loading = true
 93 |                 const params = {checkbox:checkbox, selectors: state.selected.selectors}
 94 |                 request.post(basicUrl, {data: params}).then(r => {
 95 |                     state.data = r.data
 96 |                     state.loading = false
 97 |                 })
 98 |             }
 99 | 
100 |             return { state, props, handleCheckAll, checkAllGroupChange, submit }
101 |         }
102 |     })
103 | }
104 | 
105 | export default createCart


--------------------------------------------------------------------------------
/src/components/details/charts/Style.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div :ref="dom" class="chart-style" v-if="showChart"></div>
  4 |     <div v-else>基金类型不适用</div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import {onMounted, ref} from "vue";
 10 | import * as echarts from 'echarts';
 11 | import {rbsaStyle} from "../../../assets/js/api";
 12 | 
 13 | export default {
 14 |   name: "Style",
 15 |   props: { secucode: String},
 16 |   setup(props){
 17 | 
 18 |     const { secucode } = props
 19 | 
 20 |     const refs = ref('')
 21 |     const showChart = ref(true)
 22 | 
 23 |     const dom = (el)=>{
 24 |       refs.value = el
 25 |     }
 26 | 
 27 |     const fetchData = () => {
 28 |       rbsaStyle(secucode).then(r=>{
 29 |         if (r.length === 0){
 30 |           showChart.value = false
 31 |           return
 32 |         }
 33 |         const ret = {date: [], sv: [], sg: [], mv: [], mg: [], lv: [], lg: [], bd: []};
 34 |         for (const i in r) {
 35 |           if (!r.hasOwnProperty(i)){
 36 |             continue
 37 |           }
 38 |           const row = r[i];
 39 |           ret.date.push(row["date"]);
 40 |           ret.sv.push((row["small_value"] * 100).toFixed(2));
 41 |           ret.sg.push((row["small_growth"] * 100).toFixed(2));
 42 |           ret.mv.push((row["mid_value"] * 100).toFixed(2));
 43 |           ret.mg.push((row["mid_growth"] * 100).toFixed(2));
 44 |           ret.lv.push((row["large_value"] * 100).toFixed(2));
 45 |           ret.lg.push((row["large_growth"] * 100).toFixed(2));
 46 |           ret.bd.push((row["bond"] * 100).toFixed(2));
 47 |         }
 48 |         show(ret)
 49 |       })
 50 |     }
 51 | 
 52 |     const show = (data) => {
 53 |       const myChart = echarts.init(refs.value);
 54 |       const option = {
 55 |         // backgroundColor: 'rgba(128, 128, 128, 0.1)',
 56 |         grid: {
 57 |           show: false,
 58 |           top: 40,
 59 |           left: "5%",
 60 |           right: "5%",
 61 |           bottom: '10%'
 62 |         },
 63 |         tooltip: {
 64 |           trigger: 'axis',
 65 |           axisPointer: {
 66 |             type: 'cross',
 67 |             label: {
 68 |               backgroundColor: '#6a7985'
 69 |             }
 70 |           }
 71 |         },
 72 |         color: ['#7BD9A5', '#F2B3C9', '#22c3AA', '#F58DB2', '#4EA397', '#D0648A', '#e5cf0d'],
 73 |         legend: {
 74 |           data: ['小盘价值', '小盘成长', '中盘价值', '中盘成长', '大盘价值', '大盘成长', '中证全债']
 75 |         },
 76 |         textStyle: {
 77 |           fontFamily: ['Arial', 'kaiti']
 78 |         },
 79 |         xAxis: [
 80 |           {
 81 |             type: 'category',
 82 |             boundaryGap: false,
 83 |             data: data.date
 84 |           }
 85 |         ],
 86 |         yAxis: [
 87 |           {
 88 |             type: 'value',
 89 |             max: 100
 90 |           }
 91 |         ],
 92 |         series: [
 93 |           {
 94 |             name: '小盘价值',
 95 |             type: 'line',
 96 |             stack: '占比',
 97 |             areaStyle: {},
 98 |             data: data.sv,
 99 |             symbol: "circle"
100 |           },
101 |           {
102 |             name: '小盘成长',
103 |             type: 'line',
104 |             stack: '占比',
105 |             areaStyle: {},
106 |             data: data.sg,
107 |             symbol: "circle"
108 |           },
109 |           {
110 |             name: '中盘价值',
111 |             type: 'line',
112 |             stack: '占比',
113 |             areaStyle: {},
114 |             data: data.mv,
115 |             symbol: "circle"
116 |           },
117 |           {
118 |             name: '中盘成长',
119 |             type: 'line',
120 |             stack: '占比',
121 |             areaStyle: {},
122 |             data: data.mg,
123 |             symbol: "circle"
124 |           },
125 |           {
126 |             name: '大盘价值',
127 |             type: 'line',
128 |             stack: '占比',
129 |             areaStyle: {},
130 |             data: data.lv,
131 |             symbol: "circle"
132 |           },
133 |           {
134 |             name: '大盘成长',
135 |             type: 'line',
136 |             stack: '占比',
137 |             areaStyle: {},
138 |             data: data.lg,
139 |             symbol: "circle"
140 |           },
141 |           {
142 |             name: '中证全债',
143 |             type: 'line',
144 |             stack: '占比',
145 |             areaStyle: {},
146 |             data: data.bd,
147 |             symbol: "circle"
148 |           },
149 |         ]
150 |       };
151 |       myChart.setOption(option);
152 |     }
153 | 
154 |     onMounted(()=>{
155 |       fetchData()
156 |     })
157 | 
158 |     return { dom, showChart }
159 | 
160 |   }
161 | }
162 | </script>
163 | 
164 | <style scoped>
165 | .chart-style {
166 |   width: 100%;
167 |   height: 300px;
168 | }
169 | </style>
170 | 


--------------------------------------------------------------------------------
/src/assets/js/api.js:
--------------------------------------------------------------------------------
  1 | import {extend} from "umi-request";
  2 | 
  3 | 
  4 | const baseURL = "https://product.nomuraoi-sec.com/api/v2"
  5 | // const baseURL = "http://localhost:8005/api/v2"
  6 | const request = extend({
  7 |     prefix: baseURL,
  8 |     timeout: 50000,
  9 |     useCache: true
 10 | })
 11 | 
 12 | // 基金周期内业绩表现
 13 | export function cycle(secucode){
 14 |     return request(
 15 |         "/fundinfo/cycle",
 16 |         {params: {secucode}}
 17 |     )
 18 | }
 19 | 
 20 | // 基金最新业绩表现
 21 | export function latestPerformance(secucode){
 22 |     return request(
 23 |         "/fundinfo",
 24 |         {params: {secucode}}
 25 |     )
 26 | }
 27 | 
 28 | // 基金风控指标表格
 29 | export function riskPerformance(secucode){
 30 |     return request(
 31 |         "/fundinfo/performance",
 32 |         {params: {secucode}}
 33 |     )
 34 | }
 35 | 
 36 | // 基金持有人结构
 37 | export function holder(secucode){
 38 |     return request(
 39 |         "/fundinfo/holder",
 40 |         {
 41 |             params: {secucode}
 42 |         }
 43 |     )
 44 | }
 45 | 
 46 | // 基金换手率
 47 | export function turnover(secucode){
 48 |     return request(
 49 |         "/fundinfo/turnover",
 50 |         {params: {secucode}}
 51 |     )
 52 | }
 53 | 
 54 | // 基金规模变化
 55 | export function scaleChange(secucode){
 56 |     return request(
 57 |         "/fundinfo/scale",
 58 |         {params: {secucode}}
 59 |     )
 60 | }
 61 | 
 62 | // 基金与指数相似度
 63 | export function historyStyle(secucode){
 64 |     return request(
 65 |         "/fundinfo/his_style",
 66 |         {params: {secucode}}
 67 |     )
 68 | }
 69 | 
 70 | 
 71 | // 基金风险评价雷达图
 72 | export function shortRisk(secucode) {
 73 |     return request(
 74 |         "/fundinfo/risk/short",
 75 |         {params: {secucode}}
 76 |     )
 77 | }
 78 | 
 79 | export function longRisk(secucode) {
 80 |     return request(
 81 |         "/fundinfo/risk/long",
 82 |         {params: {secucode}}
 83 |     )
 84 | }
 85 | 
 86 | // 基金经理在管基金信息
 87 | export function managedFund(secucode) {
 88 |     return request(
 89 |         "/manager/managed",
 90 |         {params: {secucode}}
 91 |     )
 92 | }
 93 | 
 94 | // 基金经理任职以来持仓前20位股票
 95 | export function holdingTop20(secucode) {
 96 |     return request(
 97 |         "/manager/topHolding",
 98 |         {params: {secucode}}
 99 |     )
100 | }
101 | 
102 | // 基金搜索
103 | export function searchFund(search) {
104 |     return request(
105 |         "/search/fundList",
106 |         {params: {search}}
107 |     )
108 | }
109 | 
110 | // 基金风格
111 | export function rbsaStyle(secucode) {
112 |     return request(
113 |         '/fundinfo/style',
114 |         {params:{secucode}}
115 |     )
116 | }
117 | 
118 | 
119 | // 基金风格指数与宽基指数
120 | export function styleAndBenchmarkIndices(){
121 |     return request(
122 |         "/fundinfo/style&benchmark"
123 |     )
124 | }
125 | 
126 | // 基金与基准指数净值对比
127 | export function netValueSeries(secucode, style, benchmark) {
128 |     return request(
129 |         "/fundinfo/nav",
130 |         {params:{secucode, style, benchmark}}
131 |     )
132 | }
133 | 
134 | // 基金分年度业绩表现
135 | export function yearlyPerformance(secucode, style, benchmark){
136 |     return request(
137 |         "/fundinfo/nav/yearly",
138 |         {params:{secucode, style, benchmark}}
139 |     )
140 | }
141 | 
142 | // 基金与指数近期表现
143 | export function recentPerformance(secucode, style, benchmark){
144 |     return request(
145 |         "/fundinfo/nav/recent",
146 |         {params:{secucode, style, benchmark}}
147 |     )
148 | }
149 | 
150 | // 基金风格信息
151 | export function fundStyle(secucode) {
152 |     return request(
153 |         '/manager',
154 |         { params: {secucode}}
155 |     )
156 | }
157 | 
158 | // 基金资产配置
159 | export function fundAllocate(secucode) {
160 |     return request(
161 |         '/asset',
162 |         { params: {secucode}}
163 |     )
164 | }
165 | 
166 | // 基金历史资产配置
167 | export function fundHistoricalAllocate(secucode) {
168 |     return request(
169 |         '/asset/history',
170 |         { params: {secucode}}
171 |     )
172 | }
173 | 
174 | // 基金重仓持股
175 | export function fundKeyStock(secucode) {
176 |     return request(
177 |         '/asset/keyStock',
178 |         { params: {secucode}}
179 |     )
180 | }
181 | 
182 | // 基金重仓持债
183 | export function fundKeyBond(secucode) {
184 |     return request(
185 |         '/asset/keyBond',
186 |         { params: {secucode}}
187 |     )
188 | }
189 | 
190 | // 基金持股集中度
191 | export function fundConcentrate(secucode) {
192 |     return request(
193 |         '/asset/concentrate',
194 |         { params: {secucode}}
195 |     )
196 | }
197 | 
198 | // 基金行业分布
199 | export function fundIndustryCSI(secucode) {
200 |     return request(
201 |         '/asset/industryCsi',
202 |         { params: {secucode}}
203 |     )
204 | }
205 | 
206 | // 基金行业风格
207 | export function fundIndustryStyle(secucode) {
208 |     return request(
209 |         '/asset/style',
210 |         { params: {secucode}}
211 |     )
212 | }
213 | 


--------------------------------------------------------------------------------
/src/components/portfolio/Portfolio.vue.jsx.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"Portfolio.vue.jsx","sourceRoot":"","sources":["Portfolio.vue"],"names":[],"mappings":"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"}


--------------------------------------------------------------------------------
/src/components/details/KeyPortfolio.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <TopHolding :secucode="secucode" />
  3 |   <hr class="divider">
  4 |   <div class="history">
  5 |     <h4 class="text-left">任职以来重仓股票概览</h4>
  6 |     <div class="reports" v-if="state.show">
  7 |       <div class="layout">
  8 |         <div>
  9 |           <div class="header">名次/报告期</div>
 10 |           <div v-for="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" class="header-cell">
 11 |             {{i}}
 12 |           </div>
 13 |           <div class="header-cell">占权益仓位比例</div>
 14 |         </div>
 15 |         <div v-for="(rows, date) in state.reports" :key="String(date)">
 16 |           <div class="title">{{date}}</div>
 17 |           <div
 18 |               v-for="(row, idx) in rows"
 19 |               :key="String(idx)" class="cell"
 20 |               :title="(row.ratio*100).toFixed(2)+'%'"
 21 |               :style="{backgroundColor: state.color[row.stockname]}">
 22 |             {{row.stockname}}
 23 |           </div>
 24 |           <div style="height: 20px; line-height: 20px; font-size: 14px;">{{sum(rows)}}</div>
 25 |         </div>
 26 |       </div>
 27 |       <br>
 28 |       <div class="summary">
 29 |         <p>总结:</p>
 30 |         <p>{{state.msg}}</p>
 31 |       </div>
 32 |       <br>
 33 |       <div>
 34 |         <div class="table-wrapper">
 35 |           <div v-for="(r, idx) in state.reports" :key="`table${String(idx)}`">
 36 |             <p class="table-title">{{idx}}</p>
 37 |             <div class="table-wrapper">
 38 |               <p class="table-item">股票名称</p>
 39 |               <p class="table-item">占净值比</p>
 40 |             </div>
 41 |             <div v-for="(s, idx2) in r" :key="`${String(idx)}${String(idx2)}`" class="table-wrapper">
 42 |               <p class="table-item">{{s.stockname}}</p>
 43 |               <p class="table-item">{{numeral(s.ratio).format('0.00%')}}</p>
 44 |             </div>
 45 |           </div>
 46 |         </div>
 47 |       </div>
 48 |     </div>
 49 |     <div v-else>
 50 |       <ElEmpty description="基金类型不适用" class="empty"/>
 51 |     </div>
 52 |     <br>
 53 |   </div>
 54 | </template>
 55 | 
 56 | <script lang="ts">
 57 | import {onMounted, reactive} from 'vue';
 58 | import numeral from "numeral";
 59 | import request from "../../request";
 60 | import TopHolding from "./manager/TopHolding.vue";
 61 | 
 62 | export default {
 63 |   name: "KeyPortfolio",
 64 |   components: {TopHolding},
 65 |   props: {secucode: String},
 66 |   setup(props: any){
 67 |     const { secucode } = props
 68 | 
 69 | 
 70 |     const state: any = reactive({
 71 |       reports: [],
 72 |       color: {},
 73 |       msg: '',
 74 |       show: true
 75 |     })
 76 | 
 77 |     const fetch = ()=>{
 78 |       request.get('/reports', {params: {secucode}}).then((r: any)=>{
 79 |         const { reports, color, msg } = r
 80 |         state.reports = reports
 81 |         state.color = color
 82 |         state.msg = msg
 83 |       }).catch(()=>{
 84 |         state.show = false
 85 |       })
 86 |     }
 87 | 
 88 |     const sum = (rows: any) => {
 89 |       let _sum = 0
 90 |       for (let i in rows) {
 91 |         _sum += rows[i]['ratio']
 92 |       }
 93 |       return numeral(_sum).format('0.00%')
 94 |     }
 95 | 
 96 |     onMounted(fetch)
 97 | 
 98 | 
 99 |     return { state, sum, numeral, secucode }
100 |   }
101 | }
102 | </script>
103 | 
104 | <style scoped>
105 | .text-left {
106 |   text-align: left;
107 |   margin-left: 10px;
108 | }
109 | 
110 | .divider {
111 |   margin: 20px 5px;
112 |   border: none;
113 |   border-top: lightgray dashed 2px;
114 | }
115 | 
116 | .history {
117 |   width: 100%;
118 |   overflow-x: auto;
119 | }
120 | 
121 | .reports {
122 |   padding-left: 20px;
123 |   padding-top: 10px;
124 | }
125 | 
126 | .layout {
127 |   display: inline-flex;
128 |   justify-content: center;
129 | }
130 | 
131 | .title {
132 |   font-size: medium;
133 |   font-weight: bold;
134 |   /*width: 150px;*/
135 |   text-align: center;
136 |   background-color: #FAFAFA;
137 |   padding: 5px 15px 5px 15px;
138 | }
139 | 
140 | .cell {
141 |   color: white;
142 |   cursor: pointer;
143 |   font-size: 14px;
144 |   height: 20px;
145 | }
146 | 
147 | .header {
148 |   font-size: medium;
149 |   font-weight: bold;
150 |   width: 120px;
151 |   text-align: center;
152 |   background-color: #FAFAFA;
153 |   padding: 5px 15px 5px 15px;
154 | }
155 | 
156 | .header-cell {
157 |   background-color: #FAFAFA;
158 |   font-size: 14px;
159 |   height: 20px;
160 | }
161 | 
162 | .summary {
163 |   width: fit-content;
164 |   text-align: left;
165 |   margin: auto;
166 | }
167 | 
168 | .table-wrapper {
169 |   display: flex;
170 |   width: fit-content;
171 |   text-align: center;
172 |   margin: auto;
173 |   border: 1px solid #e9e9e9;
174 | }
175 | 
176 | .table-item {
177 |   overflow: hidden;
178 |   width: 60px;
179 |   height: 24px;
180 |   line-height: 24px;
181 |   text-overflow: ellipsis;
182 |   white-space: nowrap;
183 |   font-size: 14px;
184 | }
185 | 
186 | .table-item:hover {
187 |   text-overflow: initial;
188 | }
189 | 
190 | .table-title {
191 |   height: 30px;
192 |   border: 1px solid #e9e9e9;
193 |   line-height: 30px;
194 |   font-size: 16px;
195 | }
196 | 
197 | .table-item:nth-child(odd){
198 |   width: 65px;
199 |   border-right: 1px solid #e9e9e9;
200 | }
201 | 
202 | .table-item:nth-child(even){
203 |   border-left: 1px solid #e9e9e9;
204 | }
205 | 
206 | .empty {
207 |   min-height: 600px;
208 | }
209 | </style>
210 | 


--------------------------------------------------------------------------------
/src/components/dashboard/Detail.vue.jsx.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"Detail.vue.jsx","sourceRoot":"","sources":["Detail.vue"],"names":[],"mappings":"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"}


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # 【FOF】基金筛选系统介绍
  3 | 
  4 | [点击这里](https://pengchuanc.github.io/posts/introduction-fundscreen/) 前往我的主页查看更多项目， 此项目仅为**基金筛选系统前端部分**。
  5 | 
  6 | # 一、系统介绍
  7 | 
  8 | 为了方便基金投资，开发了基金投资相关系统，基金筛选系统为最初开发系统，目前已经过三次迭代。当前基金筛选系统主要包含8个模块，分别为
  9 | 
 10 | 1. 基金市场整体统计
 11 | 2. 基金挑选
 12 | 3. 基金看板
 13 | 4. ETF每日跟踪
 14 | 5. 基金分类筛选入池
 15 | 6. 入池基金管理
 16 | 7. 市场热点资讯
 17 | 8. 基金详细信息
 18 | 
 19 | 
 20 | 
 21 | # 二、功能展示
 22 | 
 23 | ## 1.基金市场统计
 24 | 
 25 | 该模块为整个系统首页，统计截止上个月底的基金市场规模和数量，基金分类为野村东方国际FOF组根据基金发行公告中的投资范围自定义的分类方式。
 26 | 
 27 | ![home1-1](https://pengchuanc.github.io/images/fundscreen/1-1.png)
 28 | 
 29 | ![home1-2](https://pengchuanc.github.io/images/fundscreen/1-2.png)
 30 | 
 31 | ![home1-3](https://pengchuanc.github.io/images/fundscreen/1-3.png)
 32 | 
 33 | 
 34 | 
 35 | ## 2.基金挑选
 36 | 
 37 | 基金挑选模块可以从全市场的公募基金中按一些预设的条件，挑选出符合条件的基金，针对常用的主动权益基金、被动指数基金和债券型基金会有一些更符合基金特点的筛选条件。
 38 | 
 39 | 
 40 | 
 41 | ### 2.1 筛选界面预览
 42 | 
 43 | 界面上方为基金筛选条件，下方为展示表格。
 44 | 
 45 | ![cart2-1](https://pengchuanc.github.io/images/fundscreen/2-1.png)
 46 | 
 47 | 执行筛选条件后：
 48 | 
 49 | ![cart2-2](https://pengchuanc.github.io/images/fundscreen/2-2.png)
 50 | 
 51 | 数据预览表格可全屏，方便查看数据。
 52 | 
 53 | ![cart2-3](https://pengchuanc.github.io/images/fundscreen/2-3.png)
 54 | 
 55 | 
 56 | 
 57 | ## 3.基金看板
 58 | 
 59 | 根据基金年报和半年报持仓股票，对基金持有股票总市值占比大于60%的基金（多为股票型和偏股混合型基金），可以按市值风格将基金分为成长型、均衡性和价值型，根据股票行业占比，可以确定基金的行业风格。
 60 | 
 61 | 基金看板模块即是对这些基金的跟踪，基金看板首页将这些基金类型按小卡片形式展示，单个卡片最多不超过5条记录，点击全屏按钮可以查看全部该类型基金。
 62 | 
 63 | ![outlook3-1](https://pengchuanc.github.io/images/fundscreen/3-1.png)
 64 | 
 65 | 展开后如下：
 66 | 
 67 | ![outlook3-2](https://pengchuanc.github.io/images/fundscreen/3-2.png)
 68 | 
 69 | 
 70 | 
 71 | ## 4.ETF每日跟踪
 72 | 
 73 | ### 4.1 资金概览
 74 | 
 75 | 本页可以按日频、周频、月频查看各类ETF净资金流向，通过图表两种方式展现。
 76 | 
 77 | ![etf4-1](https://pengchuanc.github.io/images/fundscreen/4-1.png)
 78 | 
 79 | 
 80 | 
 81 | ### 4.2 分类统计
 82 | 
 83 | 本页可以查看具体某一类ETF的资金流向情况和场内、场外业绩表现情况。
 84 | 
 85 | ![etf4-2](https://pengchuanc.github.io/images/fundscreen/4-2.png)
 86 | 
 87 | 
 88 | 
 89 | ### 4.3 近期情况
 90 | 
 91 | 本页展示分周度、分类型ETF资金流入热力图。
 92 | 
 93 | ![etf4-3](https://pengchuanc.github.io/images/fundscreen/4-3.png)
 94 | 
 95 | 
 96 | 
 97 | ## 5.基金分类筛选入池
 98 | 
 99 | 此模块本身用于NOI FOF团队每月筛选合适的基金进入**观察池**和**核心池**，便于持续跟踪，对于合适的基金可以放入**精选层**。
100 | 
101 | ### 5.1 基础筛选
102 | 
103 | 基金经过基础筛选，可放入观察池。
104 | 
105 | ![screen5-1](https://pengchuanc.github.io/images/fundscreen/5-1.png)
106 | 
107 | ### 5.2 进阶筛选
108 | 
109 | 进阶筛选结果，可放入核心池。
110 | 
111 | ![screen5-2](https://pengchuanc.github.io/images/fundscreen/5-2.png)
112 | 
113 | 入池保存页面：
114 | 
115 | ![screen5-3](https://pengchuanc.github.io/images/fundscreen/5-3.png)
116 | 
117 | ## 6.组合管理
118 | 
119 | 组合管理模块主要用于跟踪入池的基金，主要功能如下（涉及具体基金数据，仅展示部分数据）：
120 | 
121 | 观察池：
122 | 
123 | ![pool6-1](https://pengchuanc.github.io/images/fundscreen/6-1.png)
124 | 
125 | 核心池：
126 | 
127 | ![pool6-2](https://pengchuanc.github.io/images/fundscreen/6-2.png)
128 | 
129 | 精选层：
130 | 
131 | ![pool6-3](https://pengchuanc.github.io/images/fundscreen/6-3.png)
132 | 
133 | ## 7.市场热点资讯
134 | 
135 | 此模块最初用于收集市场热门新闻整理发布给公司各部门，此后改造进入客户服务系统，目前此模块处于半废弃状态。
136 | 
137 | ![news7-1](https://pengchuanc.github.io/images/fundscreen/7-1.png)
138 | 
139 | ## 8.基金详细信息
140 | 
141 | 在系统其他模块，点击基金代码，即可进入单只基金详细信息页面。
142 | 
143 | ### 8.1 基金概览
144 | 
145 | 概览页面包括如下信息：
146 | 
147 | - 基金摘要
148 | - 近期业绩表现
149 | - 基金与基准净值曲线
150 | - 规模变化
151 | - 风格指标
152 | - 基金风格
153 | - 换手情况
154 | - 规模变化
155 | 
156 | 预览图如下：
157 | 
158 | ![detail8-1](https://pengchuanc.github.io/images/fundscreen/8-1.png)
159 | 
160 | ### 8.2 业绩表现
161 | 
162 | 业绩表现对基金区间业绩从多个维度做一个详细的诊断，预览图如下：
163 | 
164 | ![detail8-2](https://pengchuanc.github.io/images/fundscreen/8-2.png)
165 | 
166 | ### 8.3 基金经理
167 | 
168 | 本页主要展示该基金的基金经理同时在管基金的简单信息汇总，预览图如下：
169 | 
170 | ![detail8-3](https://pengchuanc.github.io/images/fundscreen/8-3.png)
171 | 
172 | ### 8.4 资产配置
173 | 
174 | 基金资产配置情况，预览图如下：
175 | 
176 | ![detail8-4](https://pengchuanc.github.io/images/fundscreen/8-4.png)
177 | 
178 | ###  8.5 业绩归因
179 | 
180 | 基金Brinson归因情况，可选区间，预览图如下：
181 | 
182 | ![detail8-5](https://pengchuanc.github.io/images/fundscreen/8-5.png)
183 | 
184 | ### 8.6 重仓持股
185 | 
186 | 本页主要展示至当前基金经理任职以来，多个报告期的持股情况统计，分析其持股偏好。预览图如下：
187 | ![detail8-6](https://pengchuanc.github.io/images/fundscreen/8-6.png)
188 | 
189 | ## 三、程序设计
190 | 
191 | 项目采用前后端分离设计，前端负责渲染和处理交互，后端以restful api方式提高数据。
192 | 
193 | 整个项目前前后后经过3次迭代，前端完整重构了一次。本系统需要大量的基金数据和常用的股票数据，项目开发早期由于没有数据支持，只能从Wind终端的api接口提取数据，数据库接口也只能按照适合处理wind api的方式来构建，为整个程序的开发带来了巨大的工程量。
194 | 
195 | 第一次版本更新正是考虑到数据维护的复杂性，开始将数据库迁移至恒生聚源数据，主要重构的部分在后端。
196 | 
197 | 第二次版本更新主要是前端的改造，初版基金筛选系统主要功能集中在**基金筛选**这个功能上，所有功能都围绕基金筛选展开，此后产品提出了相当多的基于单个基金展示和基金挑选的需求，前后端进行大改造。
198 | 
199 | 第三次版本更新主要是对后端单只基金信息展示的改造，后端由于Python的性能瓶颈限制，将部分功能的实现通过Golang来扩展了，以保证延迟和并发需求。
200 | 
201 | 目前系统仍有一些小修小改，但整体呈现的效果如前所述。
202 | 
203 | ## 四、技术栈
204 | 
205 | 总体来说，项目基于MySQL+Python+Golang+Typescript，使用到的框架包括Django、Gin和Vue。
206 | 
207 | ### 1.数据库
208 | 
209 | 数据库使用关系型数据库MySQL，采用读写分离模式，部署到了两台服务器上。
210 | 
211 | ### 2.后端程序
212 | 
213 | 后端经过改造和性能提升，目前用到的工具包括：
214 | 
215 | - Python: Django grpc
216 | - Golang: Gin Gorm grpc
217 | 
218 | 后端部分功能使用到了<code>grpc</code>，这功能块通常是与其他系统关联的，如基金分类、Brinson归因、基金风格等功能，会在多个系统中使用到，采用grpc可以降低其他系统的工作量。
219 | 
220 | Python后端项目可[点击这里](https://github.com/PengchuanC/fund_back_django)查看；
221 | 
222 | Golang后端项目可[点击这里](https://github.com/PengchuanC/fund_screen)查看。
223 | 
224 | ### 3.前端程序
225 | 
226 | 前端程序基于<code>Vue3.x</code>开发，UI框架基于<code>Element Plus</code>，开发语言为<code>Typescript</code>，图表插件主要使用到了`vxe-table`和`echarts`。
227 | 
228 | 前端项目地址已开源，可[点击查看](https://github.com/PengchuanC/fund_vue3)。
229 | 
230 | ### 4.前置机配置
231 | 
232 | 前置机采用常用的`Nginx`做反向代理，主要使用到了`httpv2`、`stream`和`grpc`代理等功能。
233 | 
234 | 后端Python网关选用`asgi`框架`uvicorn`，充分利用异步能力。
235 | 
236 | 项目托管软件采用`supervisor`，监控后端程序并赋予多进程能力。
237 | 


--------------------------------------------------------------------------------
/src/components/screen/AddToPool.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="center">
  3 |     <ElCard shadow="never" class="card"
  4 |           title="选择需要更新的基金池"
  5 |     >
  6 |       <div class="row">
  7 |         <div class="col-4">
  8 |           <ElTag class="tag">选择基金池</ElTag>
  9 |         </div>
 10 |         <div class="col-16">
 11 |           <ElSelect v-model="state.pool" clearable placeholder="选择基金池" size="small" style="width:200px"
 12 |                   @on-change="onSelectPool">
 13 |             <ElOption v-for="item in state.poolList" :key="item.value" :value="item.value" :label="item.label"></ElOption>
 14 |           </ElSelect>
 15 |         </div>
 16 |       </div>
 17 |       <br>
 18 |       <div class="row at-row">
 19 |         <div class="col-4">
 20 |           <ElTag class="tag">基金池类型</ElTag>
 21 |         </div>
 22 |         <div class="col-8">
 23 |           <ElSelect v-model="state.poolType" clearable placeholder="选择基金池类型" size="small" style="width:200px"
 24 |                   @on-change="onSelectPoolType">
 25 |             <ElOption v-for="item in state.poolTypeList" :key="item.value" :value="item.value" :label="item.label"></ElOption>
 26 |           </ElSelect>
 27 |         </div>
 28 |         <div class="col-8">
 29 |           <ElDatePicker v-model="state.date" placeholder="选择组合更新日期" size="small" style="width: 200px" type="date"></ElDatePicker>
 30 |         </div>
 31 |       </div>
 32 |       <br>
 33 |       <div class="row at-row">
 34 |         <div class="col-4">
 35 |           <ElTag class="tag">内容提示</ElTag>
 36 |         </div>
 37 |         <div class="col-16">
 38 |           <div v-if="state.message">
 39 |             <ElAlert type="success" class="alert" show-icon :title="state.message"></ElAlert>
 40 |           </div>
 41 |           <div v-else>
 42 |             <ElAlert type="warning" class="alert" title="请选择基金池" show-icon></ElAlert>
 43 |           </div>
 44 |         </div>
 45 |       </div>
 46 |       <br>
 47 |       <div class="row">
 48 |         <div class="col-4">
 49 |           <ElTag class="tag">执行操作</ElTag>
 50 |         </div>
 51 |         <div class="col-3">
 52 |           <ElButton type="success" size="small" @click="commit">提交</ElButton>
 53 |         </div>
 54 |         <div class="col-3">
 55 |           <ElButton type="warning" size="small" @click="reset">重置</ElButton>
 56 |         </div>
 57 |       </div>
 58 |     </ElCard>
 59 |   </div>
 60 | </template>
 61 | 
 62 | <script lang="ts">
 63 | import {defineComponent, onMounted, reactive} from "vue"
 64 | import request from "../../request"
 65 | import dayjs from "dayjs"
 66 | 
 67 | export default defineComponent({
 68 |   name: "AddToPool",
 69 |   props: {funds: Array},
 70 |   setup(props: any){
 71 | 
 72 |     const { funds } = props
 73 | 
 74 |     const state: any = reactive({
 75 |       pool: '',
 76 |       poolList: [],
 77 |       poolType: '',
 78 |       date: '',
 79 |       message: '',
 80 |       poolTypeList: [{label: "观察池", value: 1}, {label: "核心池", value: 2}]
 81 |     })
 82 | 
 83 |     const getFundPool = ()=>{
 84 |       request.get('/portfolio').then((resp: any) => {
 85 |         const data = resp
 86 |         if (!data) {
 87 |           return
 88 |         }
 89 |         state.poolList = data.slice(1, data.length).map(x => {
 90 |           return {label: x.port_name, value: x.port_id}
 91 |         })
 92 |       })
 93 |     }
 94 | 
 95 |     const onSelectPool = ()=>{
 96 |       if (state.poolType) {
 97 |         getPoolMaxUpdateDate()
 98 |       } else {
 99 |         state.message = "请选择基金类型"
100 |       }
101 |     }
102 | 
103 |     const onSelectPoolType = ()=>{
104 |       if (state.pool) {
105 |         getPoolMaxUpdateDate()
106 |       } else {
107 |         state.message = "尚未选择基金池，请选择基金池"
108 |       }
109 |     }
110 | 
111 |     const getPoolMaxUpdateDate = ()=>{
112 |       request.get("/portfolio/date",
113 |           {params: {port_id: state.pool, port_type: state.poolType}}
114 |       ).then((resp: any) => {
115 |        state.message = `当前所选基金池最新更新日期为${resp[0]}，选择更新日期请勿早于此日，建议选择次月末`
116 |       })
117 |     }
118 | 
119 |     const addToPool = ()=>{
120 |       const date = dayjs(state.date).format('YYYY-MM-DD')
121 |       request.post("/portfolio", {data: {
122 |           port_id: state.pool, port_type: state.poolType, funds: funds, date
123 |         }}).then(data => {
124 |         switch (data.code) {
125 |           case 0:
126 |             state.message = "保存成功"
127 |             break
128 |           case -1:
129 |             state.message = "保存失败"
130 |             break
131 |         }
132 |       })
133 |     }
134 | 
135 |     const commit = ()=>{
136 |       if (funds.length === 0) {
137 |         state.message = "筛选出的基金列表为空，或者没有筛选基金，请返回筛选界面筛选基金"
138 |         return
139 |       }
140 |       addToPool()
141 |     }
142 |     const reset = ()=>{
143 |       state.pool = ""
144 |       state.poolType = ""
145 |       state.date = ""
146 |       state.message = "重置完成"
147 |     }
148 | 
149 |     onMounted(()=>{getFundPool()})
150 | 
151 |     return { state, getFundPool, onSelectPoolType, onSelectPool, addToPool, commit, reset }
152 |   }
153 | })
154 | 
155 | </script>
156 | 
157 | <style scoped>
158 | .center {
159 |   padding: 0;
160 | }
161 | 
162 | .card {
163 |   width: 50vw;
164 |   height: 75vh;
165 |   margin-left: 25%;
166 |   margin-right: 25%;
167 | }
168 | 
169 | .row {
170 |   display: inline-flex;
171 |   width: 100%;
172 |   margin-bottom: 15px;
173 | }
174 | 
175 | .col-3 {
176 |   width: 60px;
177 | }
178 | 
179 | .col-4 {
180 |   width: 100px;
181 | }
182 | 
183 | .col-8 {
184 |   width: 200px;
185 |   margin-right: 5px;
186 | }
187 | 
188 | .tag {
189 |   text-align: center;
190 |   width: 90px;
191 |   height: 32px;
192 | }
193 | 
194 | .alert {
195 |   width: 405px;
196 |   height: 32px;
197 | }
198 | </style>


--------------------------------------------------------------------------------
/src/components/News.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="news">
  3 |     <div class="filter-area">
  4 |       <div class="filter-item">
  5 |         <ElInput size="mini" v-model="state.search" placeholder="关键字检索" prefix-icon="el-icon-search" style="width: 160px"></ElInput>
  6 |       </div>
  7 |       <div class="filter-item">
  8 |         <ElSelect size="mini" v-model="state.keyword" placeholder="关键字筛选" prefix-icon="el-icon-folder-opened" style="width: 160px">
  9 |           <ElOption v-for="(o, idx) in state.keywords" :label="o" :value="o" :key="`nf${String(idx)}`"></ElOption>
 10 |         </ElSelect>
 11 |       </div>
 12 |       <div class="filter-item">
 13 |         <ElDatePicker v-model="state.date" size="mini" placeholder="日期筛选" :shortcuts="shortcuts" style="width: 140px"></ElDatePicker>
 14 |       </div>
 15 |       <div class="filter-item" style="width: 30px">
 16 |         <ElSwitch active-color="#13ce66" v-model="state.showSource" style="margin-top: 4px"></ElSwitch>
 17 |       </div>
 18 |     </div>
 19 |     <ElTabs @tab-click="clickTable" :model-value="state.currentTab">
 20 |       <ElTabPane v-for="(tab, idx) in tabs" :key="'new-tab' + idx" :label="tab.label" :name="tab.name"></ElTabPane>
 21 |     </ElTabs>
 22 |     <div class="news-area">
 23 |       <div v-for="n in state.data" :key="'news'+n.id">
 24 |         <a :href="n.url" class="news-title" target="_blank">{{n.title}}</a>
 25 |         <p class="news-abstract">{{n.abstract}}</p>
 26 |         <div class="source-area" v-show="state.showSource">
 27 |           <p class="news-date">{{formatDate(n.savedate)}}</p>
 28 |           <p>{{n.source}}</p>
 29 |         </div>
 30 |         <div class="divider"></div>
 31 |         <br>
 32 |       </div>
 33 |     </div>
 34 |     <ElPagination
 35 |         layout="prev, pager, next"
 36 |         :total="state.pages"
 37 |         :current-page="state.currentPage"
 38 |         @current-change="changePage"
 39 |     ></ElPagination>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script lang="ts">
 44 | import {defineComponent, onMounted, reactive, watch} from "vue";
 45 | import dayjs from "dayjs";
 46 | import request from "../request";
 47 | 
 48 | const tabs = [
 49 |   {label: '全部', name: 'whole'},
 50 |   {label: '宏闻', name: 'economy'},
 51 |   {label: '金闻', name: 'finance'},
 52 |   {label: '商闻', name: 'company'},
 53 |   {label: '日闻', name: 'japan'},
 54 | ]
 55 | 
 56 | 
 57 | const shortcuts = [{
 58 |   text: '今日',
 59 |   value: new Date(),
 60 | }, {
 61 |   text: '昨日',
 62 |   value: (() => {
 63 |     const date = new Date()
 64 |     date.setTime(date.getTime() - 3600 * 1000 * 24)
 65 |     return date
 66 |   })(),
 67 | }, {
 68 |   text: '上周',
 69 |   value: (() => {
 70 |     const date = new Date()
 71 |     date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
 72 |     return date
 73 |   })(),
 74 | }]
 75 | 
 76 | export default defineComponent({
 77 |   name: "News",
 78 |   setup() {
 79 | 
 80 |     const state: any = reactive({
 81 |       data: [],
 82 |       date: null,
 83 |       currentTab: 'whole',
 84 |       currentPage: 1,
 85 |       keywords: [],
 86 |       keyword: null,
 87 |       search: null,
 88 |       showSource: true,
 89 |       pages: 0,
 90 |     })
 91 | 
 92 |     const clickTable = (tab: any) => {
 93 |       const index = tab.index
 94 |       state.currentTab = tabs[index].name
 95 |       state.keyword = null
 96 |       getNews()
 97 |     }
 98 | 
 99 |     const getKeywords = () => {
100 |       request.get("/news/follow/keywords").then((resp) => {
101 |         const data: [] = resp.data;
102 |         state.keywords.push(...data);
103 |       })
104 |     }
105 | 
106 |     const getNews = ()=>{
107 |       const params: any = {
108 |         page: state.currentPage, section: state.keyword, date: state.date, search: state.search
109 |       }
110 |       if (state.keyword){
111 |         params.section = state.keyword
112 |       }else{
113 |         params.section = state.currentTab
114 |       }
115 |       request.get('/news/newslist', {params}).then(resp=>{
116 |         const { per_page, data, total } = resp
117 |         state.pages = total / per_page
118 |         state.data = data
119 |       })
120 |     }
121 | 
122 |     const formatDate = (date: Date) => {
123 |       return dayjs(date).format('YYYY-MM-DD hh:mm')
124 |     }
125 | 
126 |     const changePage = (currentPage: number)=>{
127 |       state.currentPage = currentPage
128 |       getNews()
129 |       document.body.scrollTop = 0
130 |       document.documentElement.scrollTop = 0
131 |     }
132 | 
133 |     onMounted(()=>{
134 |       getNews()
135 |       getKeywords()
136 |     })
137 | 
138 |     watch(()=>state.date, getNews)
139 |     watch(()=>state.keyword, getNews)
140 |     watch(()=>state.search, getNews)
141 | 
142 |     return { tabs, state, shortcuts, clickTable, formatDate, changePage }
143 |   }
144 | })
145 | 
146 | </script>
147 | 
148 | <style scoped>
149 | 
150 | .filter-area {
151 |   display: inline-flex;
152 |   width: 100%;
153 |   justify-content: flex-start;
154 |   justify-items: flex-start;
155 | }
156 | 
157 | .filter-item {
158 |   width: 160px;
159 |   margin-right: 20px;
160 | }
161 | 
162 | .news-area {
163 |   width: 100%;
164 |   text-align: left;
165 | }
166 | 
167 | .news-title {
168 |   color: #2c3e50;
169 |   text-decoration: none;
170 | }
171 | 
172 | .news-title:hover {
173 |   color: #1989fa;
174 |   text-decoration: underline;
175 | }
176 | 
177 | .news-abstract {
178 |   font-size: 15px;
179 |   margin-top: 4px;
180 |   color: rgba(0, 0, 0, 0.6);
181 | }
182 | 
183 | .source-area {
184 |   display: inline-flex;
185 |   width: 100%;
186 |   margin-top: 4px;
187 |   font-size: 13px;
188 | }
189 | 
190 | .divider {
191 |   margin-top: 5px;
192 |   border-bottom: #cccccc 1px solid;
193 |   /*margin-bottom: 5px;*/
194 | }
195 | 
196 | .news-date {
197 |   margin-right: 8px;
198 |   padding-right: 8px;
199 |   border-right: darkgray 1px solid;
200 | }
201 | 
202 | </style>


--------------------------------------------------------------------------------
/src/components/screen/ScreenResult.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <vxe-grid
  3 |       border
  4 |       show-overflow
  5 |       highlight-hover-row
  6 |       size="mini" stripe highlight-hover-column
  7 |       auto-resize
  8 |       class="table"
  9 |       :height="windowHeight"
 10 |       :columns="columns"
 11 |       :column-config="{minWidth: 70}"
 12 |       :data="data"
 13 |       :toolbar-config="tableToolbar"
 14 |       :print-config="{}"
 15 |       :import-config="{}"
 16 |       :export-config="{}"
 17 |   >
 18 |   </vxe-grid>
 19 | 
 20 | </template>
 21 | 
 22 | <script>
 23 | import {defineComponent, onMounted, ref} from "vue"
 24 | import numeral from "numeral";
 25 | 
 26 | const tableToolbar = {
 27 |   import: true,
 28 |   export: true,
 29 |   print: true,
 30 |   zoom: true,
 31 |   custom: true
 32 | }
 33 | 
 34 | const columns = [
 35 |   {
 36 |     type: 'seq',
 37 |     width: 60,
 38 |     align: 'center',
 39 |     fixed: 'left'
 40 |   },
 41 |   {
 42 |     field: 'secucode',
 43 |     title: '基金代码',
 44 |     width: 90,
 45 |     sortable: true,
 46 |     fixed: 'left'
 47 |   },
 48 |   {
 49 |     field: 'secuabbr',
 50 |     title: '基金简称',
 51 |     width: 120,
 52 |     overflow: true
 53 |   },
 54 |   {
 55 |     field: 'name',
 56 |     title: '基金经理',
 57 |     width: 90,
 58 |     overflow: true,
 59 |     sortable: true
 60 |   },
 61 |   {
 62 |     field: 'quarterly_nv',
 63 |     title: '规模(亿元)',
 64 |     width: 95,
 65 |     align: 'right',
 66 |     overflow: true,
 67 |     sortable: true,
 68 |     formatter: ({cellValue})=>numeral(cellValue).format('0,00.0')
 69 |   },
 70 |   {
 71 |     field: 'quarterly_sum',
 72 |     title: '合并规模',
 73 |     width: 90,
 74 |     align: 'right',
 75 |     overflow: true,
 76 |     sortable: true,
 77 |     formatter: ({cellValue})=>numeral(cellValue).format('0,000.0')
 78 |   },
 79 |   {
 80 |     field: 'launch_date',
 81 |     title: '成立日',
 82 |     width: 90,
 83 |     overflow: true,
 84 |     align: 'center'
 85 |   },
 86 |   {
 87 |     field: 'value_date',
 88 |     title: '净值日',
 89 |     width: 90,
 90 |     align: 'center'
 91 |   },
 92 |   {
 93 |     field: 'experience',
 94 |     title: '从业年限',
 95 |     width: 70,
 96 |     align: 'center'
 97 |   },
 98 |   {
 99 |     field: 'managementtime',
100 |     title: '任职天数',
101 |     width: 80,
102 |     align: 'right',
103 |     overflow: true,
104 |     formatter: ({cellValue})=>numeral(cellValue).format('0,000')
105 |   },
106 |   {
107 |     field: 'year1',
108 |     title: '1年回报',
109 |     width: 85,
110 |     align: 'right',
111 |     sortable: true,
112 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
113 |   },
114 |   {
115 |     field: 'year2',
116 |     title: '2年回报',
117 |     width: 85,
118 |     align: 'right',
119 |     sortable: true,
120 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
121 |   },
122 |   {
123 |     field: 'year3',
124 |     title: '3年回报',
125 |     width: 85,
126 |     align: 'right',
127 |     sortable: true,
128 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
129 |   },
130 |   {
131 |     field: 'drawback1',
132 |     title: '最大回撤1',
133 |     width: 80,
134 |     align: 'right',
135 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00%')
136 |   },
137 |   {
138 |     field: 'drawback2',
139 |     title: '最大回撤2',
140 |     width: 80,
141 |     align: 'right',
142 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00%')
143 |   },
144 |   {
145 |     field: 'drawback3',
146 |     title: '最大回撤3',
147 |     width: 80,
148 |     align: 'right',
149 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00%')
150 |   },
151 |   {
152 |     field: 'vol1',
153 |     title: '年化波动1',
154 |     width: 80,
155 |     align: 'right',
156 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00%')
157 |   },
158 |   {
159 |     field: 'vol2',
160 |     title: '年化波动2',
161 |     width: 80,
162 |     align: 'right',
163 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00%')
164 |   },
165 |   {
166 |     field: 'vol3',
167 |     title: '年化波动3',
168 |     width: 80,
169 |     align: 'right',
170 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00%')
171 |   },
172 |   {
173 |     field: 'benchmark1',
174 |     title: '基准1',
175 |     width: 80,
176 |     align: 'right',
177 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
178 |   },
179 |   {
180 |     field: 'benchmark2',
181 |     title: '基准2',
182 |     width: 80,
183 |     align: 'right',
184 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
185 |   },
186 |   {
187 |     field: 'benchmark3',
188 |     title: '基准3',
189 |     width: 80,
190 |     align: 'right',
191 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
192 |   },
193 |   {
194 |     field: 'index_code',
195 |     title: '指数代码',
196 |     width: 80,
197 |     align: 'center'
198 |   },
199 |   {
200 |     field: 'index_ret',
201 |     title: '指数回报',
202 |     width: 80,
203 |     align: 'right',
204 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
205 |   },
206 |   {
207 |     field: 'share_holding',
208 |     title: '单一持有',
209 |     width: 80,
210 |     align: 'right',
211 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
212 |   },
213 |   {
214 |     field: 'annual_performance',
215 |     title: '任职年化',
216 |     width: 80,
217 |     align: 'right',
218 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
219 |   },
220 |   {
221 |     field: 'ret',
222 |     title: '从业年化',
223 |     width: 80,
224 |     align: 'right',
225 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00')
226 |   }
227 | ]
228 | 
229 | export default defineComponent({
230 |   name: "ScreenResult",
231 |   props: {data: Array},
232 |   setup(props){
233 |     const windowHeight = ref(800)
234 | 
235 |     const { data } = props
236 | 
237 |     onMounted(()=>{
238 |       windowHeight.value = window.innerHeight - 100
239 |     })
240 | 
241 |     return { data, tableToolbar, columns, windowHeight }
242 |   }
243 | })
244 | 
245 | </script>
246 | 
247 | <style scoped>
248 | 
249 | </style>


--------------------------------------------------------------------------------
/src/components/cart/Basic.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |  <div v-if="state.init">
  3 |    <div class="items-wrapper" v-for="(selection, abbr) in state.selections.checkbox" :key="String(abbr)">
  4 |      <div class="target">{{ selection.label }}</div>
  5 |      <ElCheckbox
  6 |          class="checkbox" style="width: 80px"
  7 |          v-model="state.selected.checkbox[abbr].checkAll"
  8 |          :indeterminate="state.selected.checkbox[abbr].indeterminate"
  9 |          @click.prevent.native="handleCheckAll(abbr)"
 10 |      >
 11 |        不限
 12 |      </ElCheckbox>
 13 |      <ElCheckboxGroup
 14 |          class="selection-items" v-model="state.selected.checkbox[abbr].checkAllGroup"
 15 |          @change="(data)=>checkAllGroupChange(data, abbr)"
 16 |      >
 17 |          <ElCheckbox class="checkbox"  size="small" v-for="(_, name) in selection.value" :key="`${String(abbr)}${String(name)}`"
 18 |                      style="width: 180px;" :label="name">
 19 |          </ElCheckbox>
 20 |      </ElCheckboxGroup>
 21 |    </div>
 22 | 
 23 |    <!--风控指标-->
 24 |    <div class="items-wrapper" v-for="(item, name) in state.selections.selectors" :key="String(name)">
 25 |      <div class="target">{{item.label}}</div>
 26 |      <div class="selector-items">
 27 |        <ElCascader
 28 |            size="mini" style="width: 50%"
 29 |            :placeholder="`选择 ${item.label} ${item.peer? '同类分位': ''}，同一时间区间请勿多选`"
 30 |            v-model="state.selected.selectors[name]" :props="selectorProps" :options="item.options" clearable
 31 |        ></ElCascader>
 32 |      </div>
 33 |    </div>
 34 | 
 35 |    <!--提交-->
 36 |    <ElButton class="submit-button" type="success" size="small" @click="submit" :loading="state.submitting">执行筛选</ElButton>
 37 |    <ElButton class="submit-button" type="danger" size="small" @click="refreshCache" :loading="state.refreshing">刷新缓存(耗时操作)</ElButton>
 38 | 
 39 |    <CartTable :data="state.data" :loading="state.loading" class="data-present" v-if="!state.loading" />
 40 |    <CartTable :data="[]" v-else/>
 41 |  </div>
 42 | </template>
 43 | 
 44 | <script lang="ts">
 45 | import {defineComponent, onMounted, reactive} from "vue";
 46 | import request from '../../request'
 47 | import CartTable from "./CartTable.vue";
 48 | 
 49 | const checkbox = {
 50 |   indeterminate: false,
 51 |   checkAll: true,
 52 |   checkAllGroup: []
 53 | }
 54 | 
 55 | const selectorProps = {
 56 |   multiple: true,
 57 |   expandTrigger: 'hover'
 58 | }
 59 | 
 60 | export default defineComponent({
 61 |   name: "Basic",
 62 |   components: { CartTable },
 63 |   props: { basicUrl: String },
 64 |   setup(props: any){
 65 |     const state: any = reactive({
 66 |       init: false,
 67 |       selections: {checkbox: {}, selectors: {}},
 68 |       selected: {checkbox: {}, selectors: {}},
 69 |       data: [],
 70 |       loading: true,
 71 |       refreshing: false,
 72 |       submitting: false
 73 |     })
 74 | 
 75 |     const { basicUrl } = props
 76 | 
 77 |     // 初始化选项布置
 78 |     const fetchSelections = ()=>{
 79 |       request.get(basicUrl + '/selections').then((r: any)=>{
 80 |         state.selections = r.data
 81 |         const data = r.data.checkbox
 82 |         for (const attr in data) {
 83 |           if (data.hasOwnProperty(attr)){
 84 |             const groups = Object.keys(data[attr].value)
 85 |             state.selected.checkbox[attr] = {...checkbox, checkAllGroup: groups}
 86 |           }
 87 |         }
 88 | 
 89 |         const { selectors } = r.data
 90 |         for (const name in selectors) {
 91 |           if (selectors.hasOwnProperty(name)){
 92 |             state.selected.selectors[name] = []
 93 |           }
 94 |         }
 95 | 
 96 |         state.init = true
 97 |       })
 98 |     }
 99 | 
100 |     onMounted(()=>{
101 |       fetchSelections()
102 |     })
103 | 
104 |     const handleCheckAll = (group: any) => {
105 |       if (state.selected.checkbox[group].indeterminate) {
106 |         state.selected.checkbox[group].checkAll = false;
107 |       } else {
108 |         state.selected.checkbox[group].checkAll = !state.selected.checkbox[group].checkAll;
109 |       }
110 |       state.selected.checkbox[group].indeterminate = false;
111 | 
112 |       if (state.selected.checkbox[group].checkAll) {
113 |         state.selected.checkbox[group].checkAllGroup = Object.keys(state.selections.checkbox[group].value);
114 |       } else {
115 |         state.selected.checkbox[group].checkAllGroup = [];
116 |       }
117 |     }
118 | 
119 | 
120 |     const checkAllGroupChange = (data: any, group: any) => {
121 |       if (data.length === Object.keys(state.selections.checkbox[group].value).length) {
122 |         state.selected.checkbox[group].indeterminate = false;
123 |         state.selected.checkbox[group].checkAll = true;
124 |       } else if (data.length > 0) {
125 |         state.selected.checkbox[group].indeterminate = true;
126 |         state.selected.checkbox[group].checkAll = false;
127 |       } else {
128 |         state.selected.checkbox[group].indeterminate = false;
129 |         state.selected.checkbox[group].checkAll = false;
130 |       }
131 |     }
132 | 
133 |     const submit = ()=>{
134 |       const checkbox = Object.keys(state.selected.checkbox).map(name=>{
135 |         return {name: name, value: state.selected.checkbox[name].checkAllGroup }
136 |       })
137 | 
138 |       state.loading = true
139 |       state.submitting = true
140 |       const params = {checkbox:checkbox, selectors: state.selected.selectors}
141 |       request.post(basicUrl, {data: params}).then(r => {
142 |         state.data = r.data
143 |         state.loading = false
144 |         state.submitting = false
145 |       }).catch(()=>{
146 |         state.submitting = false
147 |       })
148 |     }
149 | 
150 |     const refreshCache = ()=>{
151 |       state.refreshing = true
152 |       state.tableData = []
153 |       state.loading = true
154 |       request.get('/overview/refresh').then(r=>{
155 |         state.refreshing = false
156 |         submit()
157 |       })
158 |     }
159 | 
160 |     return { state, selectorProps, handleCheckAll, checkAllGroupChange, submit, refreshCache }
161 |   }
162 | })
163 | 
164 | </script>
165 | 
166 | <style scoped>
167 | @import "../../assets/css/cart.css";
168 | </style>


--------------------------------------------------------------------------------
/src/components/portfolio/Portfolio.vue.jsx:
--------------------------------------------------------------------------------
  1 | import { defineComponent, nextTick, onMounted, reactive } from "vue";
  2 | import { useRouter } from "vue-router";
  3 | import request from "../../request";
  4 | import numeral from "numeral";
  5 | import { ElLoading } from "element-plus";
  6 | export default defineComponent({
  7 |     name: "Portfolio",
  8 |     setup() {
  9 |         const state = reactive({
 10 |             portfolio: 1,
 11 |             portType: 1,
 12 |             portfolioOptions: [],
 13 |             date: null,
 14 |             dateOptions: [],
 15 |             data: []
 16 |         });
 17 |         const fetchPortfolio = () => {
 18 |             request.get('/portfolio/new').then((r) => {
 19 |                 state.portfolioOptions = r;
 20 |             });
 21 |         };
 22 |         const fetchDateOptions = () => {
 23 |             request.get('/portfolio/new/date', { params: {
 24 |                     port_id: state.portfolio, port_type: state.portType
 25 |                 } }).then((r) => {
 26 |                 state.dateOptions = r.data;
 27 |             });
 28 |         };
 29 |         onMounted(() => {
 30 |             fetchPortfolio();
 31 |             fetchDateOptions();
 32 |             onChange();
 33 |         });
 34 |         const onChange = () => {
 35 |             const instance = ElLoading.service({ fullscreen: true });
 36 |             state.data = [];
 37 |             fetchDateOptions();
 38 |             request.post('/portfolio/new', { data: {
 39 |                     port_id: state.portfolio, port_type: state.portType, date: state.date
 40 |                 } }).then((r) => {
 41 |                 state.data = r;
 42 |                 nextTick(() => { });
 43 |                 instance.close();
 44 |             });
 45 |         };
 46 |         const router = useRouter();
 47 |         const columns = [
 48 |             {
 49 |                 type: "checkbox",
 50 |                 align: "center",
 51 |                 width: 40
 52 |             },
 53 |             {
 54 |                 type: "seq",
 55 |                 title: '#',
 56 |                 align: "center",
 57 |                 width: 60
 58 |             },
 59 |             {
 60 |                 title: "基金代码",
 61 |                 field: "secucode",
 62 |                 align: "left",
 63 |                 sortable: true,
 64 |                 slots: {
 65 |                     default: ({ row }) => {
 66 |                         const { secucode } = row;
 67 |                         return <div class="secucode" onClick={() => router.push({ name: 'info', params: { secucode } })}>{secucode}</div>;
 68 |                     }
 69 |                 }
 70 |             },
 71 |             {
 72 |                 title: "基金简称",
 73 |                 field: "secuabbr",
 74 |                 align: "left",
 75 |                 sortable: true
 76 |             },
 77 |             {
 78 |                 title: "成立日期",
 79 |                 field: "launch_date",
 80 |                 align: "center",
 81 |                 sortable: true
 82 |             },
 83 |             {
 84 |                 title: "基金经理",
 85 |                 field: "manager",
 86 |                 align: "left",
 87 |                 showOverflow: true
 88 |             },
 89 |             {
 90 |                 title: "规模(亿元)",
 91 |                 field: "scale",
 92 |                 align: "right",
 93 |                 sortable: true,
 94 |                 formatter: ({ row }) => numeral(row.scale).format('0,00.0')
 95 |             },
 96 |             {
 97 |                 title: "净值日期",
 98 |                 field: "date",
 99 |                 align: "center",
100 |                 sortable: true
101 |             },
102 |             {
103 |                 title: "净值",
104 |                 field: "unitnv",
105 |                 align: "right",
106 |                 formatter: ({ row }) => numeral(row.unitnv).format('0.0000')
107 |             },
108 |             {
109 |                 title: "日涨跌",
110 |                 field: "daily",
111 |                 align: "right",
112 |                 sortable: true,
113 |                 formatter: ({ row }) => numeral(row.daily).format('0.00')
114 |             },
115 |             {
116 |                 title: "近1周",
117 |                 field: "week",
118 |                 align: "right",
119 |                 sortable: true,
120 |                 formatter: ({ row }) => numeral(row.week).format('0.00')
121 |             },
122 |             {
123 |                 title: "近1月",
124 |                 field: "month",
125 |                 align: "right",
126 |                 sortable: true,
127 |                 formatter: ({ row }) => numeral(row.month).format('0.00')
128 |             },
129 |             {
130 |                 title: "近3月",
131 |                 field: "month3",
132 |                 align: "right",
133 |                 sortable: true,
134 |                 formatter: ({ row }) => numeral(row.month3).format('0.00')
135 |             },
136 |             {
137 |                 title: "近6月",
138 |                 field: "month6",
139 |                 align: "right",
140 |                 sortable: true,
141 |                 formatter: ({ row }) => numeral(row.month6).format('0.00')
142 |             },
143 |             {
144 |                 title: "近1年",
145 |                 field: "year",
146 |                 align: "right",
147 |                 sortable: true,
148 |                 formatter: ({ row }) => numeral(row.year).format('0.00')
149 |             },
150 |             {
151 |                 title: "近3年",
152 |                 field: "year3",
153 |                 align: "right",
154 |                 sortable: true,
155 |                 formatter: ({ row }) => numeral(row.year3).format('0.00')
156 |             },
157 |             {
158 |                 title: "成立年化",
159 |                 field: "ftd_annual",
160 |                 align: "right",
161 |                 sortable: true,
162 |                 formatter: ({ row }) => numeral(row.ftd_annual).format('0.00')
163 |             },
164 |             {
165 |                 title: "状态",
166 |                 field: "status",
167 |                 align: "center",
168 |                 sortable: true,
169 |                 filters: [{ label: '新增', value: '新增' }, { label: '保持', value: '保持' }, { label: '回归', value: '回归' }, { label: '删除', value: '删除' }],
170 |                 filterMultiple: true,
171 |             }
172 |         ];
173 |         return { state, onChange, columns };
174 |     }
175 | });
176 | //# sourceMappingURL=Portfolio.vue.jsx.map


--------------------------------------------------------------------------------
/src/components/dashboard/Detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <vxe-grid
  3 |       border
  4 |       show-overflow
  5 |       highlight-hover-row
  6 |       auto-resize
  7 |       size="mini"
  8 |       :data="state"
  9 |       :columns="columns"
 10 |       :loading="loading"
 11 |       style="min-height: 600px"
 12 |   >
 13 |   </vxe-grid>
 14 | </template>
 15 | 
 16 | <script lang="tsx">
 17 | import request from "../../request";
 18 | import {onMounted, ref, defineComponent} from "vue";
 19 | import numeral from "numeral";
 20 | import {useRouter} from "vue-router";
 21 | 
 22 | export default defineComponent({
 23 |   name: "Detail",
 24 |   props: {
 25 |     params: Object
 26 |   },
 27 |   setup(props: any){
 28 |     const { params } = props
 29 | 
 30 |     const state: any = ref([])
 31 |     const loading: any = ref(true)
 32 |     const router = useRouter()
 33 | 
 34 |     onMounted(()=>{
 35 |       request.get('/dashboard/detail', {params: params}).then(r=>{
 36 |         const { data } = r
 37 |         state.value = data
 38 |         loading.value = false
 39 |       })
 40 |     })
 41 | 
 42 |     const columns: any[] = [
 43 |       {
 44 |         type: 'seq',
 45 |         width: 50,
 46 |         align: 'center'
 47 |       },
 48 |       {
 49 |         field: 'secucode',
 50 |         title: '证券代码',
 51 |         width: 90,
 52 |         slots: {
 53 |           default: (table: any) => {
 54 |             const {secucode} = table.row
 55 |             return <span onClick={() => router.push({name: 'info', params: {secucode}})}>{secucode}</span>
 56 |           }
 57 |         },
 58 |         sortable: true,
 59 |         align: 'center'
 60 |       },
 61 |       {
 62 |         field: 'secuabbr',
 63 |         title: '证券简称',
 64 |         width: 120,
 65 |         overflow: true
 66 |       },
 67 |       {
 68 |         field: 'manager',
 69 |         title: '基金经理',
 70 |         width: 80
 71 |       },
 72 |       {
 73 |         field: 'nvi',
 74 |         title: '规模(亿元)',
 75 |         width: 100,
 76 |         align: 'right',
 77 |         formatter: (table: any) => {
 78 |           return numeral(table.cellValue).format('0.0')
 79 |         },
 80 |         sortable: true
 81 |       },
 82 |       {
 83 |         field: 'start',
 84 |         title: '任职日期',
 85 |         width: 90,
 86 |         sortable: true
 87 |       },
 88 |       {
 89 |         field: 'nav_date',
 90 |         title: '净值日期',
 91 |         width: 80
 92 |       },
 93 |       {
 94 |         field: 'ftd',
 95 |         title: '成立至今',
 96 |         width: 80,
 97 |         align: 'right',
 98 |         formatter: (table: any) => {
 99 |           return numeral(table.cellValue).format('0.00')
100 |         }
101 |       },
102 |       {
103 |         field: 'manager_yield',
104 |         title: '任职至今',
105 |         width: 80,
106 |         align: 'right',
107 |         formatter: (table: any) => {
108 |           return numeral(table.cellValue).format('0.00')
109 |         },
110 |         visible: true
111 |       },
112 |       {
113 |         field: 'daily',
114 |         title: '单日收益',
115 |         width: 90,
116 |         align: 'right',
117 |         slots: {
118 |           default: (table: any) => {
119 |             const {row} = table
120 |             const {daily} = row
121 |             return (
122 |                 <span style={{color: daily > 0 ? 'red' : 'green'}}>{numeral(daily).format('0.00')}</span>
123 |             )
124 |           }
125 |         },
126 |         sortable: true
127 |       },
128 |       {
129 |         field: 'ytd',
130 |         title: 'YTD收益',
131 |         width: 90,
132 |         align: 'right',
133 |         slots: {
134 |           default: (table: any) => {
135 |             const {row} = table
136 |             const {ytd} = row
137 |             return (<span style={{color: ytd > 0 ? 'red' : 'green'}}>{numeral(ytd).format('0.00')}</span>)
138 |           }
139 |         },
140 |         sortable: true
141 |       },
142 |       {
143 |         field: 'year',
144 |         title: '1年收益',
145 |         width: 90,
146 |         align: 'right',
147 |         slots: {
148 |           default: (table: any) => {
149 |             const {row} = table
150 |             const {year} = row
151 |             return (
152 |                 <span style={{color: year > 0 ? 'red' : 'green'}}>{numeral(year).format('0.00')}</span>
153 |             )
154 |           }
155 |         },
156 |         sortable: true
157 |       },
158 |       {
159 |         field: 'year3',
160 |         title: '3年收益',
161 |         width: 90,
162 |         align: 'right',
163 |         slots: {
164 |           default: (table: any) => {
165 |             const {row} = table
166 |             const {year3} = row
167 |             return (
168 |                 <span style={{color: year3 > 0 ? 'red' : 'green'}}>{numeral(year3).format('0.00')}</span>
169 |             )
170 |           }
171 |         },
172 |         sortable: true
173 |       },
174 |       {
175 |         field: 'year5',
176 |         title: '5年收益',
177 |         width: 90,
178 |         align: 'right',
179 |         slots: {
180 |           default: (table: any) => {
181 |             const {row} = table
182 |             const {year5} = row
183 |             return (
184 |                 <span style={{color: year5 > 0 ? 'red' : 'green'}}>{numeral(year5).format('0.00')}</span>
185 |             )
186 |           }
187 |         },
188 |         sortable: true
189 |       },
190 |       {
191 |         field: 'stock',
192 |         title: '股票仓位',
193 |         width: 90,
194 |         align: 'right',
195 |         formatter: (row: any)=> numeral(row.cellValue).format('00.0')
196 |       },
197 |       {
198 |         field: 'scale_nature',
199 |         title: '规模属性',
200 |         width: 100,
201 |         align: 'right',
202 |         sortable: true
203 |       },
204 |       {
205 |         field: 'style_nature',
206 |         title: '风格属性',
207 |         width: 100,
208 |         align: 'right',
209 |         sortable: true
210 |       },
211 |       {
212 |         field: 'classify_industry',
213 |         title: '行业风格',
214 |         width: 100,
215 |         align: 'right',
216 |         sortable: true
217 |       },
218 |       {
219 |         field: 'apply',
220 |         title: '申购状态',
221 |         width: 100,
222 |         align: 'right',
223 |         sortable: true
224 |       },
225 |       {
226 |         field: 'redeem',
227 |         title: '赎回状态',
228 |         width: 100,
229 |         align: 'right',
230 |         sortable: true
231 |       },
232 |       {
233 |         field: 'limit',
234 |         title: '大额限制',
235 |         width: 100,
236 |         align: 'right',
237 |         sortable: true
238 |       }
239 |     ]
240 | 
241 |     return { state, columns, loading }
242 |   }
243 | })
244 | </script>
245 | 
246 | <style scoped>
247 | 
248 | </style>


--------------------------------------------------------------------------------
/src/components/portfolio/Portfolio.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="portfolio">
  3 |     <ElSelect placeholder="选择组合" size="mini" v-model="state.portfolio" @change="onChange">
  4 |       <ElOption :label="row.label" :value="row.value" :key="row.value" v-for="row in state.portfolioOptions"></ElOption>
  5 |     </ElSelect>
  6 |     <ElRadioGroup v-model="state.portType" class="port-type" @change="onChange">
  7 |       <ElRadio :label="1">观察池</ElRadio>
  8 |       <ElRadio :label="2">核心池</ElRadio>
  9 |       <ElRadio :label="3">精选层</ElRadio>
 10 |     </ElRadioGroup>
 11 |     <ElSelect placeholder="最新一期" size="mini" v-model="state.date" @change="onChange">
 12 |       <ElOption :label="row" :value="row" :key="row" v-for="row in state.dateOptions"></ElOption>
 13 |     </ElSelect>
 14 |     <vxe-grid
 15 |         size="mini" border highlight-hover-row stripe
 16 |         class="vxe-table" show-overflow
 17 |         :columns="columns" :data="state.data"
 18 |         :max-height="100000"
 19 |     />
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script lang="tsx">
 24 | import {defineComponent, nextTick, onMounted, reactive} from "vue";
 25 | import {useRouter} from "vue-router";
 26 | import request from "../../request";
 27 | import numeral from "numeral";
 28 | import {ElLoading} from "element-plus";
 29 | 
 30 | export default defineComponent({
 31 |   name: "Portfolio",
 32 |   setup(){
 33 |     const state: any = reactive({
 34 |       portfolio: 1,
 35 |       portType: 1,
 36 |       portfolioOptions: [],
 37 |       date: null,
 38 |       dateOptions: [],
 39 |       data: []
 40 |     })
 41 | 
 42 |     const fetchPortfolio = ()=>{
 43 |       request.get('/portfolio/new').then((r: any) => {
 44 |         state.portfolioOptions = r
 45 |       })
 46 |     }
 47 | 
 48 |     const fetchDateOptions = ()=>{
 49 |       request.get('/portfolio/new/date', {params: {
 50 |         port_id: state.portfolio, port_type: state.portType
 51 |         }}).then((r: any)=>{
 52 |         state.dateOptions = r.data
 53 |       })
 54 |     }
 55 | 
 56 |     onMounted(()=>{
 57 |       fetchPortfolio()
 58 |       fetchDateOptions()
 59 |       onChange()
 60 |     })
 61 | 
 62 |     const onChange = ()=>{
 63 |       const instance = ElLoading.service({fullscreen: true})
 64 |       state.data = []
 65 |       fetchDateOptions()
 66 |       request.post('/portfolio/new',{data:{
 67 |         port_id: state.portfolio, port_type: state.portType, date: state.date
 68 |         }}).then((r: any)=>{
 69 |         state.data = r
 70 |         nextTick(()=>{})
 71 |         instance.close()
 72 |       })
 73 |     }
 74 | 
 75 |     const router = useRouter()
 76 | 
 77 |     const columns = [
 78 |       {
 79 |         type: "checkbox",
 80 |         align: "center",
 81 |         width: 40
 82 |       },
 83 |       {
 84 |         type: "seq",
 85 |         title: '#',
 86 |         align: "center",
 87 |         width: 60
 88 |       },
 89 |       {
 90 |         title: "基金代码",
 91 |         field: "secucode",
 92 |         align: "left",
 93 |         sortable: true,
 94 |         slots: {
 95 |           default: ({row}: any) => {
 96 |             const {secucode} = row
 97 |             return <div class="secucode" onClick={() => router.push({name: 'info', params: {secucode}})}>{secucode}</div>
 98 |           }
 99 |         }
100 |       },
101 |       {
102 |         title: "基金简称",
103 |         field: "secuabbr",
104 |         align: "left",
105 |         sortable: true
106 |       },
107 |       {
108 |         title: "成立日期",
109 |         field: "launch_date",
110 |         align: "center",
111 |         sortable: true
112 |       },
113 |       {
114 |         title: "基金经理",
115 |         field: "manager",
116 |         align: "left",
117 |         showOverflow: true
118 |       },
119 |       {
120 |         title: "规模(亿元)",
121 |         field: "scale",
122 |         align: "right",
123 |         sortable: true,
124 |         formatter: ({row}: any) => numeral(row.scale).format('0,00.0')
125 |       },
126 |       {
127 |         title: "净值日期",
128 |         field: "date",
129 |         align: "center",
130 |         sortable: true
131 |       },
132 |       {
133 |         title: "净值",
134 |         field: "unitnv",
135 |         align: "right",
136 |         formatter: ({row}: any)=> numeral(row.unitnv).format('0.0000')
137 |       },
138 |       {
139 |         title: "日涨跌",
140 |         field: "daily",
141 |         align: "right",
142 |         sortable: true,
143 |         formatter: ({row}: any)=> numeral(row.daily).format('0.00')
144 |       },
145 |       {
146 |         title: "近1周",
147 |         field: "week",
148 |         align: "right",
149 |         sortable: true,
150 |         formatter: ({row}: any)=> numeral(row.week).format('0.00')
151 |       },
152 |       {
153 |         title: "近1月",
154 |         field: "month",
155 |         align: "right",
156 |         sortable: true,
157 |         formatter: ({row}: any)=> numeral(row.month).format('0.00')
158 |       },
159 |       {
160 |         title: "近3月",
161 |         field: "month3",
162 |         align: "right",
163 |         sortable: true,
164 |         formatter: ({row}: any)=> numeral(row.month3).format('0.00')
165 |       },
166 |       {
167 |         title: "近6月",
168 |         field: "month6",
169 |         align: "right",
170 |         sortable: true,
171 |         formatter: ({row}: any)=> numeral(row.month6).format('0.00')
172 |       },
173 |       {
174 |         title: "近1年",
175 |         field: "year",
176 |         align: "right",
177 |         sortable: true,
178 |         formatter: ({row}: any)=> numeral(row.year).format('0.00')
179 |       },
180 |       {
181 |         title: "近3年",
182 |         field: "year3",
183 |         align: "right",
184 |         sortable: true,
185 |         formatter: ({row}: any)=> numeral(row.year3).format('0.00')
186 |       },
187 |       {
188 |         title: "成立年化",
189 |         field: "ftd_annual",
190 |         align: "right",
191 |         sortable: true,
192 |         formatter: ({row}: any)=> numeral(row.ftd_annual).format('0.00')
193 |       },
194 |       {
195 |         title: "状态",
196 |         field: "status",
197 |         align: "center",
198 |         sortable: true,
199 |         filters: [{label: '新增', value: '新增'}, {label: '保持', value: '保持'}, {label: '回归', value: '回归'}, {label: '删除', value: '删除'}],
200 |         filterMultiple: true,
201 |       }
202 |     ]
203 | 
204 |     return { state, onChange, columns }
205 |   }
206 | })
207 | 
208 | </script>
209 | 
210 | <style scoped>
211 | .portfolio {
212 |   text-align: left;
213 |   padding-left: 50px;
214 |   padding-right: 50px;
215 |   height: 100%;
216 | }
217 | 
218 | .port-type {
219 |   width: 300px;
220 |   margin-left: 50px;
221 |   margin-right: 50px;
222 | }
223 | 
224 | .vxe-table {
225 |   height: 100%;
226 |   width: 100%;
227 |   margin: 20px auto;
228 | }
229 | 
230 | .secucode {
231 |   cursor: pointer;
232 |   width: 100%;
233 | }
234 | </style>


--------------------------------------------------------------------------------
/src/components/cart/General.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="items-wrapper" v-for="(abbr, idx) in state.abbr" :key="`abbr${String(idx)}`">
  4 |       <div class="target">{{ abbr.name }}</div>
  5 |       <ElCheckbox class="checkbox" style="width: 80px" :indeterminate="state.selected[abbr.key].indeterminate"
  6 |                   size="small"
  7 |                   v-model="state.selected[abbr.key].checkAll"
  8 |                   @click.prevent.native="handleCheckAll(abbr.key)">
  9 |         不限
 10 |       </ElCheckbox>
 11 |       <ElCheckboxGroup class="selection-items" v-model="state.selected[abbr.key].checkAllGroup"
 12 |                        @change="(d)=>{checkAllGroupChange(d, abbr.key)}">
 13 |         <ElCheckbox class="checkbox" v-for="(item, idx) in state.selections[abbr.key]" size="small" :key="`${String(abbr.key)}${String(idx)}`"
 14 |                     style="width: 180px;" :label="item">
 15 |         </ElCheckbox>
 16 |       </ElCheckboxGroup>
 17 |     </div>
 18 |     <!--风控指标-->
 19 |     <div class="items-wrapper" v-for="(item, name) in state.riskSelections" :key="String(name)">
 20 |       <div class="target">{{item.label}}</div>
 21 |       <div class="selector-items">
 22 |         <ElCascader
 23 |             size="mini" style="width: 50%"
 24 |             :placeholder="`选择 ${item.label} ${item.peer? '同类分位': ''}，同一时间区间请勿多选`"
 25 |             v-model="state.risks[name]" :props="props" :options="item.options" clearable
 26 |         ></ElCascader>
 27 |       </div>
 28 |     </div>
 29 | 
 30 |     <!--提交-->
 31 |     <ElButton class="submit-button" type="success" size="small" :onclick="submit">执行筛选</ElButton>
 32 |     <ElButton class="submit-button" type="danger" size="small" :onclick="refreshCache" :loading="state.refreshing">刷新缓存(耗时操作)</ElButton>
 33 | 
 34 |     <!--数据展示-->
 35 |     <CartTable :data="state.tableData" :loading="state.loading" class="data-present" v-if="!state.loading"/>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script lang="ts">
 40 | 
 41 | import {defineComponent, onMounted, reactive} from "vue";
 42 | import request from "../../request";
 43 | import CartTable from "./CartTable.vue";
 44 | 
 45 | const checkbox: any = {
 46 |   indeterminate: false,
 47 |   checkAll: true,
 48 |   checkAllGroup: []
 49 | }
 50 | 
 51 | const props: any = {
 52 |   multiple: true,
 53 |   expandTrigger: 'hover'
 54 | }
 55 | 
 56 | export default defineComponent({
 57 |   name: "General",
 58 |   components: { CartTable },
 59 |   setup(){
 60 |     const state: any = reactive({
 61 |       showSelection: true,
 62 |       refreshing: false,
 63 |       loading: true,
 64 |       outlook: [],
 65 |       tableData: [],
 66 |       abbr: [],
 67 |       mapping: {},
 68 |       selections: {},
 69 |       riskSelections: [],
 70 |       selected: {
 71 |         branch: checkbox,
 72 |         category: checkbox,
 73 |         industry: checkbox,
 74 |         classify_industry: checkbox,
 75 |         nature: checkbox,
 76 |         operation: checkbox,
 77 |         stock: checkbox,
 78 |         scale_nature: checkbox,
 79 |         style_nature: checkbox,
 80 |         scale: checkbox,
 81 |         apply: checkbox,
 82 |         redeem: checkbox,
 83 |         init_fund: checkbox
 84 |       },
 85 |       risks: {}
 86 |     })
 87 | 
 88 |     const getOutlook = () => {
 89 |       state.loading = true
 90 |       request.get('/overview/selections').then(r => {
 91 |         const data = r.data
 92 |         state.mapping = data.mapping
 93 |         state.selections = data.selections
 94 |         state.abbr = data.abbr
 95 |         for (let x in state.selections) {
 96 |           if (state.selections.hasOwnProperty(x)) {
 97 |             state.selected[x] = {
 98 |               indeterminate: false,
 99 |               checkAll: true,
100 |               checkAllGroup: state.selections[x]
101 |             }
102 |           }
103 |         }
104 | 
105 |         // 添加风控指标
106 |         state.riskSelections = data.riskSelections
107 |         for (const name in Object.keys(data.riskSelections)){
108 |           state.risks[name] = []
109 |         }
110 |       })
111 |       request.get('/overview/init').then((r: any) => {
112 |         state.tableData = r.data
113 |         state.loading = false
114 |       })
115 |     }
116 | 
117 |     onMounted(()=>{ getOutlook() })
118 | 
119 |     const handleCheckAll = (group: any) => {
120 |       if (state.selected[group].indeterminate) {
121 |         state.selected[group].checkAll = false;
122 |       } else {
123 |         state.selected[group].checkAll = !state.selected[group].checkAll;
124 |       }
125 |       state.selected[group].indeterminate = false;
126 | 
127 |       if (state.selected[group].checkAll) {
128 |         state.selected[group].checkAllGroup = state.selections[group];
129 |       } else {
130 |         state.selected[group].checkAllGroup = [];
131 |       }
132 | 
133 |       handleClick(group)
134 |     }
135 | 
136 |     const checkAllGroupChange = (data: any, group: any) => {
137 |       if (data.length === state.selections[group].length) {
138 |         state.selected[group].indeterminate = false;
139 |         state.selected[group].checkAll = true;
140 |       } else if (data.length > 0) {
141 |         state.selected[group].indeterminate = true;
142 |         state.selected[group].checkAll = false;
143 |       } else {
144 |         state.selected[group].indeterminate = false;
145 |         state.selected[group].checkAll = false;
146 |       }
147 | 
148 |       handleClick(group)
149 |     }
150 | 
151 |     const handleClick = (abbr: string) => {
152 |       if (abbr === 'branch') {
153 |         state.selected.category.checkAllGroup = []
154 |         const selected_branch = Array.from(state.selected.branch.checkAllGroup)
155 |         for (const x in selected_branch) {
156 |           const b: any = selected_branch[x]
157 |           const category = state.mapping.branch[b]
158 |           state.selected.category.checkAllGroup.push(...category)
159 |         }
160 |         state.selected.category.checkAll = false
161 |         state.selected.category.indeterminate = true
162 |       }
163 |     }
164 | 
165 |     const submit = () => {
166 |       state.loading = true
167 |       const selected = {}
168 |       for (let key in state.selected) {
169 |         if (state.selected.hasOwnProperty(key)) {
170 |           selected[key] = state.selected[key].checkAllGroup
171 |         }
172 |       }
173 |       request.post('/overview/selected', {data: {selected: selected, risks: state.risks}}).then(r => {
174 |         state.tableData = r.data
175 |         state.loading = false
176 |       })
177 |     }
178 | 
179 |     const refreshCache = ()=>{
180 |       state.refreshing = true
181 |       state.tableData = []
182 |       state.loading = true
183 |       request.get('/overview/refresh').then(r=>{
184 |         state.refreshing = false
185 |         submit()
186 |       })
187 |     }
188 | 
189 |     return { state, handleCheckAll, checkAllGroupChange, handleClick, props, submit, refreshCache }
190 |   }
191 | })
192 | 
193 | </script>
194 | 
195 | <style scoped>
196 | @import "../../assets/css/cart.css";
197 | </style>


--------------------------------------------------------------------------------
/src/components/details/charts/Brinson.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :ref="dom" class="chart-style"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import {onMounted, ref} from "vue";
  7 | import request from "../../../request";
  8 | import * as echarts from 'echarts';
  9 | 
 10 | export default {
 11 |   name: "Brinson",
 12 |   props: { secucode: String},
 13 |   setup(props){
 14 | 
 15 |     const { secucode } = props
 16 | 
 17 |     const refs = ref('')
 18 | 
 19 |     const dom = (el)=>{
 20 |       refs.value = el
 21 |     }
 22 | 
 23 |     const getAttribution = () => {
 24 |       request.get('/fundinfo/attr', {params: {secucode: secucode}}).then(r=>{
 25 |         const { data, type } = r
 26 |         if (type === 'equity'){ drawBrinson(data) }
 27 |         else if (type === 'fixincome'){ drawCampisi(data) }
 28 |       })
 29 |     }
 30 | 
 31 |     const drawCampisi = (data) => {
 32 |       const ele = refs.value
 33 |       const chart = echarts.init(ele);
 34 |       const options = {
 35 |         // backgroundColor: 'rgba(128, 128, 128, 0.1)',
 36 |         textStyle: {
 37 |           fontFamily: ['Arial', 'kaiti'],
 38 |         },
 39 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
 40 |         grid: {
 41 |           show: false,
 42 |           top: 30,
 43 |           left: "10%",
 44 |           right: "5%",
 45 |           bottom: '10%'
 46 |         },
 47 |         tooltip: {
 48 |           trigger: 'axis',
 49 |           axisPointer: {
 50 |             type: 'cross',
 51 |             label: {
 52 |               backgroundColor: '#6a7985'
 53 |             }
 54 |           },
 55 |           formatter:function(params){
 56 |             let res = params[0].name;
 57 |             for (let i = 0; i < params.length; i++) {
 58 |               res += "<div style='text-align: left'>"+params[i].marker+params[i].seriesName+"："+ params[i].data.toFixed(4);
 59 |             }
 60 |             res += "</div>"
 61 |             return res;
 62 |           }
 63 |         },
 64 |         legend: {
 65 |         },
 66 |         xAxis: [
 67 |           {
 68 |             type: 'category',
 69 |             data: data.map(x=>x.cycle),
 70 |             axisPointer: {show: true}
 71 |           }
 72 |         ],
 73 |         yAxis: {
 74 |           axisLabel: {
 75 |             formatter: (value) => {
 76 |               return `${value}%`
 77 |             }
 78 |           },
 79 |           axisPointer: {show: true},
 80 |           scale: true
 81 |         },
 82 |         series: [
 83 |           {
 84 |             name: '国债效应',
 85 |             type: 'bar',
 86 |             data: data.map(x=>x.duration)
 87 |           },
 88 |           {
 89 |             name: '息差效应',
 90 |             type: 'bar',
 91 |             data: data.map(x=>x.spread)
 92 |           },
 93 |           {
 94 |             name: '票息效应',
 95 |             type: 'bar',
 96 |             data: data.map(x=>x.coupon)
 97 |           },
 98 |           {
 99 |             name: '总收益',
100 |             type: 'bar',
101 |             data: data.map(x=>x.total)
102 |           },
103 |         ]
104 |       }
105 |       chart.setOption(options)
106 |     }
107 | 
108 |     const drawBrinson = (data) => {
109 |       let x1 = data.map(x => {
110 |         return x.rtt ? x.rtt.toFixed(4) : 0
111 |       });
112 |       let max1 = Math.ceil(Math.max(...x1.map(x => {
113 |         return Math.abs(x)
114 |       })) * 20) / 20;
115 |       let x2 = data.map(x => {
116 |         return x.raa ? x.raa.toFixed(4) : 0
117 |       });
118 |       let max2 = Math.ceil(Math.max(...x2.map(x => {
119 |         return Math.abs(x)
120 |       })) * 20) / 20;
121 |       let x3 = data.map(x => {
122 |         return x.rss ? x.rss.toFixed(4) : 0
123 |       });
124 |       let max3 = Math.ceil(Math.max(...x3.map(x => {
125 |         return Math.abs(x)
126 |       })) * 20) / 20;
127 |       let x4 = data.map(x => {
128 |         return x.rin ? x.rin.toFixed(4) : 0
129 |       });
130 |       let max4 = Math.ceil(Math.max(...x4.map(x => {
131 |         return Math.abs(x)
132 |       })) * 20) / 20;
133 |       let y = data.map(x => {
134 |         return x.industry
135 |       }).reverse()
136 |       const ele = refs.value
137 |       const myChart = echarts.init(ele)
138 |       const option = {
139 |         // backgroundColor: 'rgba(128, 128, 128, 0.1)',
140 |         tooltip: {
141 |           trigger: 'axis',
142 |           axisPointer: {
143 |             type: 'cross',
144 |             label: {
145 |               backgroundColor: '#6a7985'
146 |             }
147 |           }
148 |         },
149 |         textStyle: {
150 |           fontFamily: ['Arial', 'kaiti'],
151 |         },
152 |         color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
153 |         grid: [
154 |           {x: '7%', y: '15%', width: '20%', height: '70%', show: false,},
155 |           {x: '30%', y: '15%', width: '18%', height: '70%', show: false,},
156 |           {x: '53%', y: '15%', width: '18%', height: '70%', show: false,},
157 |           {x: '76%', y: '15%', width: '18%', height: '70%', show: false,}
158 |         ],
159 |         xAxis: [
160 |           {gridIndex: 0, min: -max1, max: max1, splitLine: {show: false}},
161 |           {gridIndex: 1, min: -max2, max: max2, splitLine: {show: false}},
162 |           {gridIndex: 2, min: -max3, max: max3, splitLine: {show: false}},
163 |           {gridIndex: 3, min: -max4, max: max4, splitLine: {show: false}}
164 |         ],
165 |         yAxis: [
166 |           {
167 |             gridIndex: 0,
168 |             name: "超额收益(%)",
169 |             type: "category",
170 |             data: y
171 |           },
172 |           {
173 |             gridIndex: 1,
174 |             name: "资产配置(%)",
175 |             type: "category",
176 |             axisLabel: {show: false},
177 |             data: y
178 |           },
179 |           {
180 |             gridIndex: 2,
181 |             name: "个股选择(%)",
182 |             type: "category",
183 |             axisLabel: {show: false},
184 |             data: y
185 |           },
186 |           {
187 |             gridIndex: 3,
188 |             name: "交互收益(%)",
189 |             type: "category",
190 |             axisLabel: {show: false},
191 |             data: y
192 |           },
193 |         ],
194 |         series: [
195 |           {
196 |             type: 'bar',
197 |             xAxisIndex: 0,
198 |             yAxisIndex: 0,
199 |             data: x1.reverse()
200 |           },
201 |           {
202 |             type: 'bar',
203 |             xAxisIndex: 1,
204 |             yAxisIndex: 1,
205 |             data: x2.reverse()
206 |           },
207 |           {
208 |             type: 'bar',
209 |             xAxisIndex: 2,
210 |             yAxisIndex: 2,
211 |             data: x3.reverse()
212 |           },
213 |           {
214 |             type: 'bar',
215 |             xAxisIndex: 3,
216 |             yAxisIndex: 3,
217 |             data: x4.reverse()
218 |           },
219 |         ]
220 |       }
221 |       myChart.setOption(option)
222 |     }
223 | 
224 |     onMounted( () => { getAttribution() })
225 | 
226 |     return { dom }
227 |   }
228 | }
229 | </script>
230 | 
231 | <style scoped>
232 | .chart-style {
233 |   width: 100%;
234 |   height: 300px;
235 | }
236 | </style>
237 | 


--------------------------------------------------------------------------------
/src/components/details/Attribution.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="attribution" v-if="show">
  3 |     <div class="selectors">
  4 |       <ElDatePicker
  5 |           type="monthrange"
  6 |           align="right"
  7 |           size="mini"
  8 |           unlink-panels
  9 |           range-separator="至"
 10 |           start-placeholder="开始月份"
 11 |           end-placeholder="结束月份"
 12 |           :shortcuts="shortcuts"
 13 |           v-model="state.dateRange"
 14 |           @change="onChange"
 15 |       ></ElDatePicker>
 16 |       <ElSelect v-model="state.indexcode" size="mini" class="selectors-index" @change="onChange">
 17 |         <ElOption v-for="r in state.indexOptions" :value="r.value" :label="r.name" :key="r.name"></ElOption>
 18 |       </ElSelect>
 19 |     </div>
 20 |     <div class="attribution-chart" :ref="dom"></div>
 21 |   </div>
 22 |   <ElEmpty v-else description="基金类型不适用" class="attribution" />
 23 | </template>
 24 | 
 25 | <script lang="ts">
 26 | import {defineComponent, nextTick, onMounted, reactive, ref} from "vue";
 27 | import request from "../../request";
 28 | import dayjs from "dayjs";
 29 | import { ElLoading } from 'element-plus';
 30 | import * as echarts from 'echarts';
 31 | 
 32 | 
 33 | const shortcuts = [
 34 |     {
 35 |   text: '本月',
 36 |   value: [new Date(), new Date()],
 37 | }, {
 38 |   text: '今年至今',
 39 |   value: (() => {
 40 |   const end = new Date()
 41 |   const start = new Date(new Date().getFullYear(), 0)
 42 |   return [start, end]
 43 | })(),
 44 | }, {
 45 |   text: '最近六个月',
 46 |       value: (() => {
 47 |     const end = new Date()
 48 |     const start = new Date()
 49 |     start.setMonth(start.getMonth() - 6)
 50 |     return [start, end]
 51 |   })(),
 52 | }]
 53 | 
 54 | export default defineComponent({
 55 |   name: "Attribution",
 56 |   props: { secucode: String},
 57 |   setup(props){
 58 |     const {secucode} = props
 59 | 
 60 |     const state = reactive({
 61 |       start: dayjs().format('YYYY-MM-DD'),
 62 |       end: dayjs().format('YYYY-MM-DD'),
 63 |       dateRange: [Date(), Date()],
 64 |       indexOptions: [
 65 |         {name: '沪深300', value: '000300'},
 66 |         {name: '中证500', value: '000905'},
 67 |         {name: '中证800', value: '000906'},
 68 |       ],
 69 |       indexcode: '000906'
 70 |     })
 71 | 
 72 |     const instance = ref(null)
 73 |     const show = ref(true)
 74 | 
 75 |     const dom = (el) => {
 76 |       instance.value = el
 77 |     }
 78 | 
 79 |     const fetch = ()=>{
 80 |       const loadingInstance = ElLoading.service({fullscreen: true})
 81 |       const {start, end, indexcode} = state
 82 |       request.get("/attr/brinson", {params: {secucode, indexcode, start, end}}).then((r:any)=>{
 83 |         drawChart(r)
 84 |         nextTick(()=>{
 85 |           loadingInstance.close()
 86 |         })
 87 |       }).catch(()=>{
 88 |         show.value=false
 89 |         loadingInstance.close()
 90 |       })
 91 |     }
 92 | 
 93 |     const drawChart = (data: any)=>{
 94 |       let x1 = data.map(x => {
 95 |         return x.rtt ? x.rtt.toFixed(4) : 0
 96 |       });
 97 |       let max1 = Math.ceil(Math.max(...x1.map(x => {
 98 |         return Math.abs(x)
 99 |       })) * 2) / 2;
100 |       let x2 = data.map(x => {
101 |         return x.raa ? x.raa.toFixed(4) : 0
102 |       });
103 |       let max2 = Math.ceil(Math.max(...x2.map(x => {
104 |         return Math.abs(x)
105 |       })) * 2) / 2;
106 |       let x3 = data.map(x => {
107 |         return x.rss ? x.rss.toFixed(4) : 0
108 |       });
109 |       let max3 = Math.ceil(Math.max(...x3.map(x => {
110 |         return Math.abs(x)
111 |       })) * 2) / 2;
112 |       let x4 = data.map(x => {
113 |         return x.rin ? x.rin.toFixed(4) : 0
114 |       });
115 |       let max4 = Math.ceil(Math.max(...x4.map(x => {
116 |         return Math.abs(x)
117 |       })) * 2) / 2;
118 |       let y = data.map(x => {
119 |         return x.industry
120 |       }).reverse();
121 |       const el: any = instance.value
122 |       const myChart = echarts.init(el);
123 |       const option = {
124 |         // backgroundColor: 'rgba(128, 128, 128, 0.1)',
125 |         tooltip: {
126 |           trigger: 'axis',
127 |           axisPointer: {
128 |             type: 'cross',
129 |             label: {
130 |               backgroundColor: '#6a7985'
131 |             }
132 |           }
133 |         },
134 |         grid: [
135 |           {x: '7%', y: '15%', width: '20%', height: '70%', show: false,},
136 |           {x: '30%', y: '15%', width: '18%', height: '70%', show: false,},
137 |           {x: '53%', y: '15%', width: '18%', height: '70%', show: false,},
138 |           {x: '76%', y: '15%', width: '18%', height: '70%', show: false,}
139 |         ],
140 |         xAxis: [
141 |           {gridIndex: 0, min: -max1, max: max1, splitLine: {show: false}},
142 |           {gridIndex: 1, min: -max2, max: max2, splitLine: {show: false}},
143 |           {gridIndex: 2, min: -max3, max: max3, splitLine: {show: false}},
144 |           {gridIndex: 3, min: -max4, max: max4, splitLine: {show: false}}
145 |         ],
146 |         yAxis: [
147 |           {
148 |             gridIndex: 0,
149 |             name: "超额收益(%)",
150 |             type: "category",
151 |             data: y
152 |           },
153 |           {
154 |             gridIndex: 1,
155 |             name: "资产配置(%)",
156 |             type: "category",
157 |             axisLabel: {show: false},
158 |             data: y
159 |           },
160 |           {
161 |             gridIndex: 2,
162 |             name: "个股选择(%)",
163 |             type: "category",
164 |             axisLabel: {show: false},
165 |             data: y
166 |           },
167 |           {
168 |             gridIndex: 3,
169 |             name: "交互收益(%)",
170 |             type: "category",
171 |             axisLabel: {show: false},
172 |             data: y
173 |           },
174 |         ],
175 |         series: [
176 |           {
177 |             type: 'bar',
178 |             xAxisIndex: 0,
179 |             yAxisIndex: 0,
180 |             data: x1.reverse()
181 |           },
182 |           {
183 |             type: 'bar',
184 |             xAxisIndex: 1,
185 |             yAxisIndex: 1,
186 |             data: x2.reverse()
187 |           },
188 |           {
189 |             type: 'bar',
190 |             xAxisIndex: 2,
191 |             yAxisIndex: 2,
192 |             data: x3.reverse()
193 |           },
194 |           {
195 |             type: 'bar',
196 |             xAxisIndex: 3,
197 |             yAxisIndex: 3,
198 |             data: x4.reverse()
199 |           },
200 |         ]
201 |       };
202 |       myChart.setOption(option);
203 |     }
204 | 
205 |     const onChange = ()=>{
206 |       const [start, end] = state.dateRange
207 |       state.start = dayjs(start).format('YYYY-MM-DD')
208 |       state.end = dayjs(end).add(1, "month").add(-1, "day").format('YYYY-MM-DD')
209 |       fetch()
210 |     }
211 | 
212 |     onMounted(fetch)
213 | 
214 |     return {state, shortcuts, dom, onChange, show}
215 | 
216 |   }
217 | })
218 | </script>
219 | 
220 | <style scoped>
221 | .attribution {
222 |   min-height: 600px;
223 | }
224 | 
225 | .selectors {
226 |   text-align: left;
227 |   width: 100%;
228 |   padding: 5px 20px;
229 | }
230 | 
231 | .selectors-index {
232 |   margin-left: 10px;
233 | }
234 | 
235 | .attribution-chart {
236 |   width: 100%;
237 |   height: 800px;
238 | }
239 | </style>
240 | 


--------------------------------------------------------------------------------
/src/components/cart/CartTable.vue.jsx.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"CartTable.vue.jsx","sourceRoot":"","sources":["CartTable.vue"],"names":[],"mappings":"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"}


--------------------------------------------------------------------------------
/src/components/dashboard/Detail.vue.jsx:
--------------------------------------------------------------------------------
  1 | import request from "../../request";
  2 | import { onMounted, ref, defineComponent } from "vue";
  3 | import numeral from "numeral";
  4 | import { useRouter } from "vue-router";
  5 | export default defineComponent({
  6 |     name: "Detail",
  7 |     props: {
  8 |         params: Object
  9 |     },
 10 |     setup(props) {
 11 |         const { params } = props;
 12 |         const state = ref([]);
 13 |         const loading = ref(true);
 14 |         const router = useRouter();
 15 |         onMounted(() => {
 16 |             request.get('/dashboard/detail', { params: params }).then(r => {
 17 |                 const { data } = r;
 18 |                 state.value = data;
 19 |                 loading.value = false;
 20 |             });
 21 |         });
 22 |         const columns = [
 23 |             {
 24 |                 type: 'seq',
 25 |                 width: 50,
 26 |                 align: 'center'
 27 |             },
 28 |             {
 29 |                 field: 'secucode',
 30 |                 title: '证券代码',
 31 |                 width: 90,
 32 |                 slots: {
 33 |                     default: (table) => {
 34 |                         const { secucode } = table.row;
 35 |                         return <span onClick={() => router.push({ name: 'info', params: { secucode } })}>{secucode}</span>;
 36 |                     }
 37 |                 },
 38 |                 sortable: true,
 39 |                 align: 'center'
 40 |             },
 41 |             {
 42 |                 field: 'secuabbr',
 43 |                 title: '证券简称',
 44 |                 width: 120,
 45 |                 overflow: true
 46 |             },
 47 |             {
 48 |                 field: 'manager',
 49 |                 title: '基金经理',
 50 |                 width: 80
 51 |             },
 52 |             {
 53 |                 field: 'nvi',
 54 |                 title: '规模(亿元)',
 55 |                 width: 100,
 56 |                 align: 'right',
 57 |                 formatter: (table) => {
 58 |                     return numeral(table.cellValue).format('0.0');
 59 |                 },
 60 |                 sortable: true
 61 |             },
 62 |             {
 63 |                 field: 'start',
 64 |                 title: '任职日期',
 65 |                 width: 90,
 66 |                 sortable: true
 67 |             },
 68 |             {
 69 |                 field: 'nav_date',
 70 |                 title: '净值日期',
 71 |                 width: 80
 72 |             },
 73 |             {
 74 |                 field: 'ftd',
 75 |                 title: '成立至今',
 76 |                 width: 80,
 77 |                 align: 'right',
 78 |                 formatter: (table) => {
 79 |                     return numeral(table.cellValue).format('0.00');
 80 |                 }
 81 |             },
 82 |             {
 83 |                 field: 'manager_yield',
 84 |                 title: '任职至今',
 85 |                 width: 80,
 86 |                 align: 'right',
 87 |                 formatter: (table) => {
 88 |                     return numeral(table.cellValue).format('0.00');
 89 |                 },
 90 |                 visible: true
 91 |             },
 92 |             {
 93 |                 field: 'daily',
 94 |                 title: '单日收益',
 95 |                 width: 90,
 96 |                 align: 'right',
 97 |                 slots: {
 98 |                     default: (table) => {
 99 |                         const { row } = table;
100 |                         const { daily } = row;
101 |                         return (<span style={{ color: daily > 0 ? 'red' : 'green' }}>{numeral(daily).format('0.00')}</span>);
102 |                     }
103 |                 },
104 |                 sortable: true
105 |             },
106 |             {
107 |                 field: 'ytd',
108 |                 title: 'YTD收益',
109 |                 width: 90,
110 |                 align: 'right',
111 |                 slots: {
112 |                     default: (table) => {
113 |                         const { row } = table;
114 |                         const { ytd } = row;
115 |                         return (<span style={{ color: ytd > 0 ? 'red' : 'green' }}>{numeral(ytd).format('0.00')}</span>);
116 |                     }
117 |                 },
118 |                 sortable: true
119 |             },
120 |             {
121 |                 field: 'year',
122 |                 title: '1年收益',
123 |                 width: 90,
124 |                 align: 'right',
125 |                 slots: {
126 |                     default: (table) => {
127 |                         const { row } = table;
128 |                         const { year } = row;
129 |                         return (<span style={{ color: year > 0 ? 'red' : 'green' }}>{numeral(year).format('0.00')}</span>);
130 |                     }
131 |                 },
132 |                 sortable: true
133 |             },
134 |             {
135 |                 field: 'year3',
136 |                 title: '3年收益',
137 |                 width: 90,
138 |                 align: 'right',
139 |                 slots: {
140 |                     default: (table) => {
141 |                         const { row } = table;
142 |                         const { year3 } = row;
143 |                         return (<span style={{ color: year3 > 0 ? 'red' : 'green' }}>{numeral(year3).format('0.00')}</span>);
144 |                     }
145 |                 },
146 |                 sortable: true
147 |             },
148 |             {
149 |                 field: 'year5',
150 |                 title: '5年收益',
151 |                 width: 90,
152 |                 align: 'right',
153 |                 slots: {
154 |                     default: (table) => {
155 |                         const { row } = table;
156 |                         const { year5 } = row;
157 |                         return (<span style={{ color: year5 > 0 ? 'red' : 'green' }}>{numeral(year5).format('0.00')}</span>);
158 |                     }
159 |                 },
160 |                 sortable: true
161 |             },
162 |             {
163 |                 field: 'stock',
164 |                 title: '股票仓位',
165 |                 width: 90,
166 |                 align: 'right',
167 |                 formatter: (row) => numeral(row.cellValue).format('00.0')
168 |             },
169 |             {
170 |                 field: 'scale_nature',
171 |                 title: '规模属性',
172 |                 width: 100,
173 |                 align: 'right',
174 |                 sortable: true
175 |             },
176 |             {
177 |                 field: 'style_nature',
178 |                 title: '风格属性',
179 |                 width: 100,
180 |                 align: 'right',
181 |                 sortable: true
182 |             },
183 |             {
184 |                 field: 'classify_industry',
185 |                 title: '行业风格',
186 |                 width: 100,
187 |                 align: 'right',
188 |                 sortable: true
189 |             },
190 |             {
191 |                 field: 'apply',
192 |                 title: '申购状态',
193 |                 width: 100,
194 |                 align: 'right',
195 |                 sortable: true
196 |             },
197 |             {
198 |                 field: 'redeem',
199 |                 title: '赎回状态',
200 |                 width: 100,
201 |                 align: 'right',
202 |                 sortable: true
203 |             },
204 |             {
205 |                 field: 'limit',
206 |                 title: '大额限制',
207 |                 width: 100,
208 |                 align: 'right',
209 |                 sortable: true
210 |             }
211 |         ];
212 |         return { state, columns, loading };
213 |     }
214 | });
215 | //# sourceMappingURL=Detail.vue.jsx.map


--------------------------------------------------------------------------------
/src/components/etf/ETFCategory.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="etf-category">
  3 |     <div class="etf-selections">
  4 |       <ElSelect
  5 |           class="etf-category-selector"
  6 |           size="small"
  7 |           v-model="state.category"
  8 |           @change="fetch"
  9 |       >
 10 |         <ElOption v-for="(c, idx) in state.categories" :label="c" :value="c" :key="idx"></ElOption>
 11 |       </ElSelect>
 12 |       <ElDatePicker
 13 |           size="small"
 14 |           v-model="state.date"
 15 |           @change="fetch"
 16 |       />
 17 |     </div>
 18 |     <div class="etf-category-table">
 19 |       <vxe-grid
 20 |           ref="etfTable"
 21 |           size="mini"
 22 |           border
 23 |           stripe
 24 |           show-overflow
 25 |           highlight-hover-row
 26 |           height="700"
 27 |           auto-resize
 28 |           :columns="columns"
 29 |           :data="state.data"
 30 |           :scroll-x="{enable: true}"
 31 |       />
 32 |     </div>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | import {defineComponent, nextTick, onMounted, onUnmounted, reactive, ref} from "vue";
 38 | import api from '../../request';
 39 | import dayjs from "dayjs";
 40 | import numeral from "numeral";
 41 | 
 42 | numeral.nullFormat('N/A')
 43 | numeral.zeroFormat('-')
 44 | 
 45 | const columns = [
 46 |   {
 47 |     type: 'seq',
 48 |     title: '#',
 49 |     width: 50,
 50 |     align: 'center',
 51 |     fixed: 'left'
 52 |   },
 53 |   {
 54 |     field: 'secucode',
 55 |     title: '基金代码',
 56 |     width: 90,
 57 |     align: 'center',
 58 |     sortable: true,
 59 |     fixed: 'left'
 60 |   },
 61 |   {
 62 |     field: 'chinameabbr',
 63 |     title: '基金名称',
 64 |     minWidth: 140,
 65 |     fixed: 'left'
 66 |   },
 67 |   {
 68 |     field: 'launch',
 69 |     title: '成立日期',
 70 |     minWidth: 85,
 71 |   },
 72 |   {
 73 |     field: 'listed',
 74 |     title: '上市日期',
 75 |     sortable: true,
 76 |     minWidth: 90,
 77 |   },
 78 |   // {
 79 |   //   field: 'category',
 80 |   //   title: '分类',
 81 |   //   sortable: true
 82 |   // },
 83 |   {
 84 |     field: 'detail',
 85 |     title: '详细分类',
 86 |     sortable: true,
 87 |     width: 110,
 88 |     filters: [],
 89 | 
 90 |   },
 91 |   {
 92 |     field: 'indexabbr',
 93 |     title: '跟踪指数',
 94 |     sortable: true,
 95 |     minWidth: 90,
 96 |   },
 97 |   {
 98 |     field: 'trace_error',
 99 |     title: '年化跟踪误差(%)',
100 |     align: 'right',
101 |     formatter: ({cellValue}) => numeral(cellValue).format('0.00'),
102 |     sortable: true,
103 |     sortBy: ({row}) => row.trace_error,
104 |     minWidth: 130,
105 |   },
106 |   {
107 |     field: 'date',
108 |     title: '交易日期',
109 |     minWidth: 85,
110 |   },
111 |   {
112 |     field: 'nav',
113 |     title: '单位净值',
114 |     align: 'right',
115 |     width: 80,
116 |     formatter: ({cellValue})=>numeral(cellValue).format('0.0000')
117 |   },
118 |   {
119 |     field: 'nvi',
120 |     title: '总规模(亿元)',
121 |     align: 'right',
122 |     formatter: ({cellValue})=>numeral(cellValue).format('0,000.00'),
123 |     sortable: true,
124 |     sortBy: ({row}) => row.nvi,
125 |     minWidth: 110,
126 |   },
127 |   {
128 |     field: 'nv',
129 |     title: '场内规模(亿元)',
130 |     align: 'right',
131 |     width: 120,
132 |     formatter: ({cellValue})=>numeral(cellValue).format('0,000.00'),
133 |     sortable: true,
134 |     sortBy: ({row}) => row.nv,
135 |   },
136 |   {
137 |     field: 'shares',
138 |     title: '场内份额(亿份)',
139 |     align: 'right',
140 |     formatter: ({cellValue})=>numeral(cellValue/1e8).format('0,000.00'),
141 |     sortBy: ({row}) => row.shares,
142 |     minWidth: 110,
143 |   },
144 |   {
145 |     field: 'wtd',
146 |     title: 'WTD(%)',
147 |     width: 90,
148 |     align: 'right',
149 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00'),
150 |     sortable: true
151 |   },
152 |   {
153 |     field: 'pct',
154 |     title: '场内WTD(%)',
155 |     align: 'right',
156 |     width: 120,
157 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00'),
158 |     sortable: true
159 |   },
160 |   {
161 |     field: 'ytd',
162 |     title: 'YTD(%)',
163 |     width: 85,
164 |     align: 'right',
165 |     formatter: ({cellValue})=>numeral(cellValue).format('0.00'),
166 |     sortable: true
167 |   },
168 |   {
169 |     field: 'day_change',
170 |     title: '日份额变动(万份)',
171 |     width: 140,
172 |     align: 'right',
173 |     formatter: ({cellValue})=>numeral(cellValue*1e4).format('0,000.00'),
174 |     sortBy: ({row}) => row.day_change,
175 |     sortable: true
176 |   },
177 |   {
178 |     field: 'day_capital',
179 |     title: '日净流入(万元)',
180 |     align: 'right',
181 |     formatter: ({cellValue})=>numeral(cellValue*1e4).format('0,000.00'),
182 |     sortable: true,
183 |     sortBy: ({row}) => row.day_capital,
184 |     minWidth: 120,
185 |   },
186 |   {
187 |     field: 'wtd_change',
188 |     title: '周份额变动(万份)',
189 |     width: 140,
190 |     align: 'right',
191 |     formatter: ({cellValue})=>numeral(cellValue*1e4).format('0,000.00'),
192 |     sortBy: ({row}) => row.wtd_change,
193 |     sortable: true
194 |   },
195 |   {
196 |     field: 'wtd_capital',
197 |     title: '周净流入(万元)',
198 |     align: 'right',
199 |     formatter: ({cellValue})=>numeral(cellValue*1e4).format('0,000.00'),
200 |     sortable: true,
201 |     sortBy: ({row}) => row.wtd_capital,
202 |     minWidth: 120,
203 |   },
204 |   {
205 |     field: 'mtd_change',
206 |     title: '月份额变动(万份)',
207 |     width: 140,
208 |     align: 'right',
209 |     formatter: ({cellValue})=>numeral(cellValue*1e4).format('0,000.00'),
210 |     sortBy: ({row}) => row.mtd_change,
211 |     sortable: true
212 |   },
213 |   {
214 |     field: 'mtd_capital',
215 |     title: '月净流入(万元)',
216 |     align: 'right',
217 |     formatter: ({cellValue})=>numeral(cellValue*1e4).format('0,000.00'),
218 |     sortable: true,
219 |     sortBy: ({row}) => row.mtd_capital,
220 |     minWidth: 120,
221 |   },
222 |   {
223 |     field: 'ytd_change',
224 |     title: '年份额变动(万份)',
225 |     width: 140,
226 |     align: 'right',
227 |     formatter: ({cellValue})=>numeral(cellValue*1e4).format('0,000.00'),
228 |     sortBy: ({row}) => row.ytd_change,
229 |     sortable: true
230 |   },
231 |   {
232 |     field: 'ytd_capital',
233 |     title: '年净流入(万元)',
234 |     align: 'right',
235 |     formatter: ({cellValue})=>numeral(cellValue*1e4).format('0,000.00'),
236 |     sortable: true,
237 |     sortBy: ({row}) => row.ytd_capital,
238 |     minWidth: 120,
239 |   }
240 | ]
241 | 
242 | export default defineComponent({
243 |   name: "ETFCategory",
244 |   setup() {
245 |     const state = reactive({
246 |       category: '宽基',
247 |       categories: [],
248 |       date: '',
249 |       data: []
250 |     })
251 | 
252 |     const etfTable = ref(null)
253 | 
254 |     const selections = () => {
255 |       api.get('/etf/category').then(r => {
256 |         const {category, last} = r
257 |         category.push('重点关注')
258 |         state.categories = category
259 |         state.date = last
260 |       })
261 |     }
262 | 
263 |     const fetch = () => {
264 |       const date = dayjs(state.date || new Date()).format('YYYY-MM-DD')
265 |       const {category} = state
266 |       api.get('/etf/wtd', {params: {category, date}}).then(r => {
267 |         state.data = r
268 |         const filterItemSets = new Set()
269 |         r.forEach(x=>{filterItemSets.add(x.detail)})
270 |         const filterItems = Array.from(filterItemSets).map(x=>{return {label: x, value: x}})
271 |         etfTable.value.setFilter('detail', filterItems)
272 |       })
273 |     }
274 | 
275 |     onMounted(() => {
276 |       selections()
277 |       fetch()
278 |     })
279 | 
280 |     return {state, columns, fetch, etfTable}
281 |   }
282 | })
283 | </script>
284 | 
285 | <style scoped>
286 | .etf-category {
287 |   text-align: left;
288 | }
289 | 
290 | .etf-category-selector {
291 |   margin-right: 20px;
292 | }
293 | 
294 | .etf-category-table {
295 |   width: 100%;
296 |   margin-top: 20px;
297 |   max-height: 10000px;
298 | }
299 | </style>


--------------------------------------------------------------------------------
/src/components/etf/ETFHome.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="etf-home">
  3 |     <div class="date-picker">
  4 |       <ElDatePicker
  5 |           size="small"
  6 |           type="daterange"
  7 |           unlink-panels
  8 |           range-separator="至"
  9 |           start-placeholder="开始日期"
 10 |           end-placeholder="结束日期"
 11 |           :shortcuts="state.shortcuts"
 12 |           v-model="state.selected"
 13 |           @change="fetch"
 14 |       />
 15 |       <ElRadioGroup v-model="state.freq" @change="fetch" class="freq-selector">
 16 |         <ElRadio :label="1">日频</ElRadio>
 17 |         <ElRadio :label="2">周频</ElRadio>
 18 |         <ElRadio :label="3">月频</ElRadio>
 19 |       </ElRadioGroup>
 20 |     </div>
 21 |     <ElRow>
 22 |       <ElCol :span="12">
 23 |         <vxe-grid
 24 |             border
 25 |             size="mini"
 26 |             stripe
 27 |             show-overflow
 28 |             highlight-hover-row
 29 |             show-footer
 30 |             :footer-method="footer"
 31 |             :columns="state.columns"
 32 |             :data="state.data"
 33 |         ></vxe-grid>
 34 |       </ElCol>
 35 |       <ElCol :span="12">
 36 |         <div id="etf-bar-chart"></div>
 37 |         <div id="etf-line-chart"></div>
 38 |       </ElCol>
 39 |     </ElRow>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | import {defineComponent, onMounted, reactive} from "vue";
 45 | import dayjs from "dayjs";
 46 | import api from '../../request';
 47 | import numeral from "numeral";
 48 | import * as echarts from 'echarts';
 49 | 
 50 | const shortcuts = [
 51 |   {
 52 |     text: '最近一周',
 53 |     value: (() => {
 54 |       const end = dayjs().subtract(1, 'day')
 55 |       const start = end.subtract(6, 'day')
 56 |       return [start, end]
 57 |     })(),
 58 |   },
 59 |   {
 60 |     text: '最近一个月',
 61 |     value: (() => {
 62 |       const end = dayjs().subtract(1, 'day')
 63 |       const start = end.subtract(1, 'month').add(1, 'day')
 64 |       return [start, end]
 65 |     })(),
 66 |   },
 67 |   {
 68 |     text: '最近三个月',
 69 |     value: (() => {
 70 |       const end = dayjs().subtract(1, 'day')
 71 |       const start = end.subtract(3, 'month').add(1, 'day')
 72 |       return [start, end]
 73 |     })(),
 74 |   }
 75 | ]
 76 | 
 77 | const columns = [
 78 |   {
 79 |     field: 'date',
 80 |     title: '日期',
 81 |     sortable: true
 82 |   },
 83 |   {
 84 |     field: '宽基',
 85 |     title: '宽基',
 86 |     formatter: ({cellValue})=> numeral(cellValue).format('0.00'),
 87 |     sortable: true,
 88 |     align: 'right'
 89 |   },
 90 |   {
 91 |     field: '行业主题',
 92 |     title: '行业主题',
 93 |     formatter: ({cellValue})=> numeral(cellValue).format('0.00'),
 94 |     sortable: true,
 95 |     align: 'right'
 96 |   },
 97 |   {
 98 |     field: '风格',
 99 |     title: '风格',
100 |     formatter: ({cellValue})=> numeral(cellValue).format('0.00'),
101 |     sortable: true,
102 |     align: 'right'
103 |   },
104 |   {
105 |     title: '跨境',
106 |     field: '跨境',
107 |     formatter: ({cellValue})=> numeral(cellValue).format('0.00'),
108 |     sortable: true,
109 |     align: 'right'
110 |   },
111 |   {
112 |     field: '货币',
113 |     title: '货币',
114 |     formatter: ({cellValue})=> numeral(cellValue).format('0.00'),
115 |     sortable: true,
116 |     align: 'right'
117 |   },
118 |   {
119 |     field: '债券',
120 |     title: '债券',
121 |     formatter: ({cellValue})=> numeral(cellValue).format('0.00'),
122 |     sortable: true,
123 |     align: 'right'
124 |   },
125 |   {
126 |     field: '另类',
127 |     title: '另类',
128 |     formatter: ({cellValue})=> numeral(cellValue).format('0.00'),
129 |     sortable: true,
130 |     align: 'right'
131 |   },
132 |   {
133 |     field: '合计',
134 |     title: '合计',
135 |     formatter: ({cellValue})=> numeral(cellValue).format('0.00'),
136 |     sortable: true,
137 |     align: 'right'
138 |   }
139 | ]
140 | 
141 | const drawBar = (data)=>{
142 |   const chart = echarts.init(document.getElementById('etf-bar-chart'))
143 |   const options = {
144 |     color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
145 |     tooltip: {
146 |       trigger: 'item',
147 |     },
148 |     grid: {
149 |       show: false,
150 |       top: 10,
151 |       left: "10%",
152 |       right: "5%",
153 |       bottom: '10%'
154 |     },
155 |     xAxis: {
156 |       type: 'category',
157 |       data: Object.keys(data)
158 |     },
159 |     yAxis: {
160 |       type: 'value',
161 |     },
162 |     series: [{
163 |       data: Object.keys(data).map(x=>numeral(data[x]).format('0.00')),
164 |       type: 'bar',
165 |       label: {
166 |         show: true,
167 |         position: 'top'
168 |       }
169 |     }]
170 |   }
171 |   chart.setOption(options)
172 |   window.onresize = ()=>{chart.resize()}
173 | }
174 | 
175 | const drawLine = (data)=>{
176 |   const chart = echarts.init(document.getElementById('etf-line-chart'))
177 |   const options = {
178 |     color: ['#CB2420', '#80A9AE', '#00305C', '#737374', '#DE7C77', '#B1BED0'],
179 |     tooltip: {
180 |       trigger: 'item',
181 |     },
182 |     grid: {
183 |       show: false,
184 |       top: 30,
185 |       left: "10%",
186 |       right: "5%",
187 |       bottom: '10%'
188 |     },
189 |     legend: {
190 |       data: ['宽基', '行业主题', '中证全指']
191 |     },
192 |     xAxis: {
193 |       type: 'category',
194 |       data: data.map(x=>x.date),
195 |       axisPointer: {
196 |         type: 'shadow'
197 |       }
198 |     },
199 |     yAxis: [
200 |       {
201 |         type: 'value',
202 |         name: 'ETF净流入'
203 |       },
204 |       {
205 |         type: 'value',
206 |         name: '收盘价',
207 |         scale: true
208 |       }
209 |     ],
210 |     series: [
211 |       {
212 |         name: '宽基',
213 |         type: 'bar',
214 |         data: data.map(x=>x['宽基']),
215 |         stack: 'capital'
216 |       },
217 |       {
218 |         name: '行业主题',
219 |         type: 'bar',
220 |         data: data.map(x=>x['行业主题']),
221 |         stack: 'capital'
222 |       },
223 |       {
224 |         name: '中证全指',
225 |         type: 'line',
226 |         data: data.map(x=>x['closeprice']),
227 |         yAxisIndex: 1
228 |       }
229 |     ]
230 |   }
231 |   chart.setOption(options)
232 |   window.onresize = ()=>{chart.resize()}
233 | }
234 | 
235 | export default defineComponent({
236 |   name: "ETFHome",
237 |   setup() {
238 |     const state = reactive({
239 |       last: dayjs(),
240 |       shortcuts: shortcuts,
241 |       selected: [null, null],
242 |       columns: columns,
243 |       data: [],
244 |       freq: 1
245 |     })
246 | 
247 |     const getLatestDate = () => {
248 |       api.get('/etf/category').then(r => {
249 |         const {last} = r
250 |         state.last = dayjs(last)
251 |         state.selected = [dayjs(last).subtract(3, 'week'), dayjs(last)]
252 |         fetch()
253 |       })
254 |     }
255 | 
256 |     const fetch = () => {
257 |       let [start, end] = state.selected
258 |       start = dayjs(start).format('YYYY-MM-DD')
259 |       end = dayjs(end).format('YYYY-MM-DD')
260 |       const { freq } = state
261 |       api.get('/etf/outlook', {params: {start, end, freq}}).then(r => {
262 |         const {data, total} = r
263 |         state.data = data
264 |         drawBar(total)
265 |       })
266 |     }
267 | 
268 |     const weekly = () => {
269 |       api.get('/etf/weekly').then(r=>{
270 |         drawLine(r)
271 |       })
272 |     }
273 | 
274 |     const footer = ({columns, data})=>{
275 |       const sum = (list, field)=>{
276 |         let count = 0
277 |         list.forEach(item => {
278 |           count += Number(item[field])
279 |         })
280 |         return numeral(count).format('0.00')
281 |       }
282 | 
283 |       return [columns.map((column, columnIndex)=>{
284 |         if (columnIndex === 0){return '汇总'}
285 |         return sum(data, column.property)
286 |       })]
287 |     }
288 | 
289 |     onMounted(()=>{
290 |       getLatestDate()
291 |       weekly()
292 |     })
293 | 
294 |     return {state, fetch, footer}
295 |   }
296 | })
297 | </script>
298 | 
299 | <style scoped>
300 | 
301 | .etf-home {
302 |   text-align: left;
303 | }
304 | 
305 | .date-picker {
306 |   margin-bottom: 20px;
307 | }
308 | 
309 | .freq-selector {
310 |   margin-left: 20px;
311 | }
312 | 
313 | #etf-bar-chart {
314 |   width: 100%;
315 |   height: 300px;
316 | }
317 | 
318 | #etf-line-chart {
319 |   width: 100%;
320 |   height: 300px;
321 |   margin-top: 30px;
322 | }
323 | </style>


--------------------------------------------------------------------------------