人物画像
This commit is contained in:
parent
9f4272b1d4
commit
b092ea2ba0
5
package-lock.json
generated
5
package-lock.json
generated
@ -3292,6 +3292,11 @@
|
||||
"integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
|
||||
"dev": true
|
||||
},
|
||||
"china-location": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/china-location/-/china-location-2.1.0.tgz",
|
||||
"integrity": "sha512-ZUvn1LnoNcTIbCrhM+xHYurb+F2xP7+g0WE87Ksw5IOmycy9uUq2O+fe8mD0m5vliSOhyiGIZOdQDTCxyFaBjw=="
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.27.2",
|
||||
"china-location": "^2.1.0",
|
||||
"core-js": "^3.6.4",
|
||||
"echarts": "^5.1.1",
|
||||
"element-ui": "^2.15.6",
|
||||
|
||||
3
src/assets/icons/svg/hx-15-active.svg
Normal file
3
src/assets/icons/svg/hx-15-active.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9875 1.58994C11.7756 1.59325 11.5736 1.6805 11.426 1.83254C11.2784 1.98457 11.1971 2.18897 11.2 2.40088V3.20088H1.59997C1.49396 3.19938 1.38871 3.21896 1.29033 3.2585C1.19196 3.29803 1.10242 3.35672 1.02693 3.43115C0.951431 3.50559 0.891482 3.59428 0.850564 3.69209C0.809646 3.7899 0.788574 3.89486 0.788574 4.00088C0.788574 4.1069 0.809646 4.21186 0.850564 4.30967C0.891482 4.40747 0.951431 4.49617 1.02693 4.57061C1.10242 4.64504 1.19196 4.70373 1.29033 4.74326C1.38871 4.78279 1.49396 4.80238 1.59997 4.80088V16.8009C1.59997 17.6849 2.31597 18.4009 3.19997 18.4009H9.42966L8.11872 20.8353C7.85703 20.8983 7.62416 21.0476 7.45753 21.259C7.29089 21.4704 7.20018 21.7317 7.19997 22.0009C7.19997 22.3191 7.3264 22.6244 7.55144 22.8494C7.77648 23.0744 8.08171 23.2009 8.39997 23.2009C8.71823 23.2009 9.02345 23.0744 9.2485 22.8494C9.47354 22.6244 9.59997 22.3191 9.59997 22.0009C9.59964 21.8623 9.57532 21.7249 9.52809 21.5946L11.2468 18.4009H12.7531L14.4718 21.5946C14.4246 21.7249 14.4003 21.8623 14.4 22.0009C14.4 22.3191 14.5264 22.6244 14.7514 22.8494C14.9765 23.0744 15.2817 23.2009 15.6 23.2009C15.9182 23.2009 16.2235 23.0744 16.4485 22.8494C16.6735 22.6244 16.8 22.3191 16.8 22.0009C16.7998 21.7317 16.709 21.4704 16.5424 21.259C16.3758 21.0476 16.1429 20.8983 15.8812 20.8353L14.5703 18.4009H20.8C21.684 18.4009 22.4 17.6849 22.4 16.8009V4.80088C22.506 4.80238 22.6112 4.78279 22.7096 4.74326C22.808 4.70373 22.8975 4.64504 22.973 4.57061C23.0485 4.49617 23.1085 4.40747 23.1494 4.30967C23.1903 4.21186 23.2114 4.1069 23.2114 4.00088C23.2114 3.89486 23.1903 3.7899 23.1494 3.69209C23.1085 3.59428 23.0485 3.50559 22.973 3.43115C22.8975 3.35672 22.808 3.29803 22.7096 3.2585C22.6112 3.21896 22.506 3.19938 22.4 3.20088H12.8V2.40088C12.8014 2.29385 12.7814 2.18761 12.7411 2.08846C12.7007 1.98931 12.6409 1.89925 12.5652 1.82364C12.4894 1.74802 12.3992 1.68838 12.3 1.64823C12.2008 1.60809 12.0945 1.58827 11.9875 1.58994ZM18.4 7.20088C18.6046 7.20088 18.8092 7.27885 18.9656 7.43525C19.2784 7.74805 19.2784 8.2537 18.9656 8.5665L14.1656 13.3665C13.8528 13.6793 13.3471 13.6793 13.0343 13.3665L11.2 11.5321L8.56559 14.1665C8.40959 14.3225 8.20477 14.4009 7.99997 14.4009C7.79517 14.4009 7.59034 14.3225 7.43434 14.1665L5.83434 12.5665C5.52154 12.2537 5.52154 11.7481 5.83434 11.4353C6.14714 11.1225 6.65279 11.1225 6.96559 11.4353L7.99997 12.4696L10.6343 9.83525C10.9471 9.52245 11.4528 9.52245 11.7656 9.83525L13.6 11.6696L17.8343 7.43525C17.9907 7.27885 18.1954 7.20088 18.4 7.20088Z" fill="#BC6F60"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
3
src/assets/icons/svg/hx-15.svg
Normal file
3
src/assets/icons/svg/hx-15.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9875 1.58994C11.7756 1.59325 11.5736 1.6805 11.426 1.83254C11.2784 1.98457 11.1971 2.18897 11.2 2.40088V3.20088H1.59997C1.49396 3.19938 1.38871 3.21896 1.29033 3.2585C1.19196 3.29803 1.10242 3.35672 1.02693 3.43115C0.951431 3.50559 0.891482 3.59428 0.850564 3.69209C0.809646 3.7899 0.788574 3.89486 0.788574 4.00088C0.788574 4.1069 0.809646 4.21186 0.850564 4.30967C0.891482 4.40747 0.951431 4.49617 1.02693 4.57061C1.10242 4.64504 1.19196 4.70373 1.29033 4.74326C1.38871 4.78279 1.49396 4.80238 1.59997 4.80088V16.8009C1.59997 17.6849 2.31597 18.4009 3.19997 18.4009H9.42966L8.11872 20.8353C7.85703 20.8983 7.62416 21.0476 7.45753 21.259C7.29089 21.4704 7.20018 21.7317 7.19997 22.0009C7.19997 22.3191 7.3264 22.6244 7.55144 22.8494C7.77648 23.0744 8.08171 23.2009 8.39997 23.2009C8.71823 23.2009 9.02345 23.0744 9.2485 22.8494C9.47354 22.6244 9.59997 22.3191 9.59997 22.0009C9.59964 21.8623 9.57532 21.7249 9.52809 21.5946L11.2468 18.4009H12.7531L14.4718 21.5946C14.4246 21.7249 14.4003 21.8623 14.4 22.0009C14.4 22.3191 14.5264 22.6244 14.7514 22.8494C14.9765 23.0744 15.2817 23.2009 15.6 23.2009C15.9182 23.2009 16.2235 23.0744 16.4485 22.8494C16.6735 22.6244 16.8 22.3191 16.8 22.0009C16.7998 21.7317 16.709 21.4704 16.5424 21.259C16.3758 21.0476 16.1429 20.8983 15.8812 20.8353L14.5703 18.4009H20.8C21.684 18.4009 22.4 17.6849 22.4 16.8009V4.80088C22.506 4.80238 22.6112 4.78279 22.7096 4.74326C22.808 4.70373 22.8975 4.64504 22.973 4.57061C23.0485 4.49617 23.1085 4.40747 23.1494 4.30967C23.1903 4.21186 23.2114 4.1069 23.2114 4.00088C23.2114 3.89486 23.1903 3.7899 23.1494 3.69209C23.1085 3.59428 23.0485 3.50559 22.973 3.43115C22.8975 3.35672 22.808 3.29803 22.7096 3.2585C22.6112 3.21896 22.506 3.19938 22.4 3.20088H12.8V2.40088C12.8014 2.29385 12.7814 2.18761 12.7411 2.08846C12.7007 1.98931 12.6409 1.89925 12.5652 1.82364C12.4894 1.74802 12.3992 1.68838 12.3 1.64823C12.2008 1.60809 12.0945 1.58827 11.9875 1.58994ZM18.4 7.20088C18.6046 7.20088 18.8092 7.27885 18.9656 7.43525C19.2784 7.74805 19.2784 8.2537 18.9656 8.5665L14.1656 13.3665C13.8528 13.6793 13.3471 13.6793 13.0343 13.3665L11.2 11.5321L8.56559 14.1665C8.40959 14.3225 8.20477 14.4009 7.99997 14.4009C7.79517 14.4009 7.59034 14.3225 7.43434 14.1665L5.83434 12.5665C5.52154 12.2537 5.52154 11.7481 5.83434 11.4353C6.14714 11.1225 6.65279 11.1225 6.96559 11.4353L7.99997 12.4696L10.6343 9.83525C10.9471 9.52245 11.4528 9.52245 11.7656 9.83525L13.6 11.6696L17.8343 7.43525C17.9907 7.27885 18.1954 7.20088 18.4 7.20088Z" fill="#86909C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
3
src/assets/icons/svg/hx-16-active.svg
Normal file
3
src/assets/icons/svg/hx-16-active.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.4 3.19922C7.84235 3.19922 6.36558 5.19442 6.36558 7.59922C6.36558 8.40882 6.75308 9.22266 6.75308 9.22266C6.59788 9.31226 6.3422 9.59834 6.4062 10.1023C6.5262 11.0431 6.9337 11.2808 7.1937 11.3008C7.2929 12.1792 8.46955 13.436 8.79995 13.5992V14.9336C8.06635 17.1336 3.19995 15.9992 3.19995 20.7992H17.6C17.6 15.9992 12.7336 17.1336 12 14.9336V13.5992C12.3304 13.436 13.507 12.1792 13.6062 11.3008C13.8662 11.2808 14.2729 11.0431 14.3937 10.1023C14.4585 9.59674 14.2028 9.31226 14.0468 9.22266C14.0468 9.22266 14.4343 8.48802 14.4343 7.59922C14.4343 5.81842 13.7351 4.29922 12.2343 4.29922C12.2343 4.29922 11.9592 3.19922 10.4 3.19922ZM15.4343 4.79922C15.8143 5.57042 16.0343 6.51438 16.0343 7.60078C16.0343 8.13358 15.9432 8.61816 15.8328 9.01016C15.9768 9.37656 16.0444 9.81027 15.9812 10.3055C15.8492 11.3359 15.4391 12.0116 14.9359 12.4148C14.8799 12.5452 14.8101 12.6736 14.7421 12.8008H15.2V15.2008L18.3968 12.8008H21.6C22.9256 12.8008 24 11.7264 24 10.4008V7.19922C24 5.87362 22.9256 4.79922 21.6 4.79922H15.4343Z" fill="#BC6F60"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
src/assets/icons/svg/hx-16.svg
Normal file
3
src/assets/icons/svg/hx-16.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.4 3.19922C7.84235 3.19922 6.36558 5.19442 6.36558 7.59922C6.36558 8.40882 6.75308 9.22266 6.75308 9.22266C6.59788 9.31226 6.3422 9.59834 6.4062 10.1023C6.5262 11.0431 6.9337 11.2808 7.1937 11.3008C7.2929 12.1792 8.46955 13.436 8.79995 13.5992V14.9336C8.06635 17.1336 3.19995 15.9992 3.19995 20.7992H17.6C17.6 15.9992 12.7336 17.1336 12 14.9336V13.5992C12.3304 13.436 13.507 12.1792 13.6062 11.3008C13.8662 11.2808 14.2729 11.0431 14.3937 10.1023C14.4585 9.59674 14.2028 9.31226 14.0468 9.22266C14.0468 9.22266 14.4343 8.48802 14.4343 7.59922C14.4343 5.81842 13.7351 4.29922 12.2343 4.29922C12.2343 4.29922 11.9592 3.19922 10.4 3.19922ZM15.4343 4.79922C15.8143 5.57042 16.0343 6.51438 16.0343 7.60078C16.0343 8.13358 15.9432 8.61816 15.8328 9.01016C15.9768 9.37656 16.0444 9.81027 15.9812 10.3055C15.8492 11.3359 15.4391 12.0116 14.9359 12.4148C14.8799 12.5452 14.8101 12.6736 14.7421 12.8008H15.2V15.2008L18.3968 12.8008H21.6C22.9256 12.8008 24 11.7264 24 10.4008V7.19922C24 5.87362 22.9256 4.79922 21.6 4.79922H15.4343Z" fill="#86909C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
src/assets/icons/svg/hx-4-active.svg
Normal file
3
src/assets/icons/svg/hx-4-active.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.6 2C3.49003 2 3.38184 2.01171 3.27812 2.03281C2.65305 2.16064 2.16064 2.65305 2.03281 3.27813V3.27969C2.01171 3.3834 2 3.49003 2 3.6V13.2C2 13.3093 2.01127 13.4168 2.03281 13.5203V13.5219C2.16064 14.147 2.65305 14.6394 3.27812 14.7672H3.27969C3.38321 14.7887 3.49069 14.8 3.6 14.8H21.2C21.31 14.8 21.4166 14.7883 21.5203 14.7672H21.5219C22.147 14.6394 22.6394 14.147 22.7672 13.5219V13.5203C22.7887 13.4168 22.8 13.3093 22.8 13.2V3.6C22.8 3.49069 22.7887 3.38165 22.7672 3.27813C22.6394 2.65305 22.1454 2.16064 21.5203 2.03281C21.4168 2.01127 21.3093 2 21.2 2H3.6ZM5.2 3.6H19.6C19.6 4.484 20.316 5.2 21.2 5.2V11.6C20.316 11.6 19.6 12.316 19.6 13.2H5.2C5.2 12.316 4.484 11.6 3.6 11.6V5.2C4.484 5.2 5.2 4.484 5.2 3.6ZM12.4 5.2C10.6328 5.2 9.2 6.812 9.2 8.8C9.2 9.9376 9.67814 10.94 10.4109 11.6H14.3891C15.1219 10.94 15.6 9.9376 15.6 8.8C15.6 6.812 14.1672 5.2 12.4 5.2ZM6 7.6C5.5584 7.6 5.2 7.9584 5.2 8.4C5.2 8.8416 5.5584 9.2 6 9.2C6.4416 9.2 6.8 8.8416 6.8 8.4C6.8 7.9584 6.4416 7.6 6 7.6ZM18.8 7.6C18.3584 7.6 18 7.9584 18 8.4C18 8.8416 18.3584 9.2 18.8 9.2C19.2416 9.2 19.6 8.8416 19.6 8.4C19.6 7.9584 19.2416 7.6 18.8 7.6ZM21.1875 16.3891C21.1487 16.3899 21.1101 16.3936 21.0719 16.4H20.4V17.2V18C19.729 18 19.1565 18.4131 18.9187 18.9984C18.1543 18.7138 17.1977 18.3776 15.9594 18.0297C13.0533 17.2132 8.88205 16.4 3.6 16.4C3.49399 16.3985 3.38874 16.4181 3.29037 16.4576C3.19199 16.4971 3.10245 16.5558 3.02696 16.6303C2.95146 16.7047 2.89151 16.7934 2.8506 16.8912C2.80968 16.989 2.78861 17.094 2.78861 17.2C2.78861 17.306 2.80968 17.411 2.8506 17.5088C2.89151 17.6066 2.95146 17.6953 3.02696 17.7697C3.10245 17.8442 3.19199 17.9029 3.29037 17.9424C3.38874 17.9819 3.49399 18.0015 3.6 18C8.71795 18 12.7376 18.7868 15.5266 19.5703C16.921 19.9621 18.0059 20.3525 18.7734 20.6469C19.1572 20.7941 19.4612 20.917 19.6937 21.0078C19.81 21.0532 19.9064 21.0903 20 21.1219C20.0822 21.1496 20.1382 21.1846 20.3344 21.1938C20.3567 21.1958 20.3775 21.2078 20.4 21.2078C21.2609 21.2078 21.9495 20.5272 21.9922 19.6812C21.9943 19.6646 21.9958 19.648 21.9969 19.6313C21.9982 19.6193 21.9992 19.6073 22 19.5953C22.0001 19.5865 22.0001 19.5776 22 19.5688V18V17.2V16.4H21.3234C21.2785 16.3925 21.233 16.3888 21.1875 16.3891Z" fill="#BC6F60"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
3
src/assets/icons/svg/hx-4.svg
Normal file
3
src/assets/icons/svg/hx-4.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.6 2C3.49003 2 3.38184 2.01171 3.27812 2.03281C2.65305 2.16064 2.16064 2.65305 2.03281 3.27813V3.27969C2.01171 3.3834 2 3.49003 2 3.6V13.2C2 13.3093 2.01127 13.4168 2.03281 13.5203V13.5219C2.16064 14.147 2.65305 14.6394 3.27812 14.7672H3.27969C3.38321 14.7887 3.49069 14.8 3.6 14.8H21.2C21.31 14.8 21.4166 14.7883 21.5203 14.7672H21.5219C22.147 14.6394 22.6394 14.147 22.7672 13.5219V13.5203C22.7887 13.4168 22.8 13.3093 22.8 13.2V3.6C22.8 3.49069 22.7887 3.38165 22.7672 3.27813C22.6394 2.65305 22.1454 2.16064 21.5203 2.03281C21.4168 2.01127 21.3093 2 21.2 2H3.6ZM5.2 3.6H19.6C19.6 4.484 20.316 5.2 21.2 5.2V11.6C20.316 11.6 19.6 12.316 19.6 13.2H5.2C5.2 12.316 4.484 11.6 3.6 11.6V5.2C4.484 5.2 5.2 4.484 5.2 3.6ZM12.4 5.2C10.6328 5.2 9.2 6.812 9.2 8.8C9.2 9.9376 9.67814 10.94 10.4109 11.6H14.3891C15.1219 10.94 15.6 9.9376 15.6 8.8C15.6 6.812 14.1672 5.2 12.4 5.2ZM6 7.6C5.5584 7.6 5.2 7.9584 5.2 8.4C5.2 8.8416 5.5584 9.2 6 9.2C6.4416 9.2 6.8 8.8416 6.8 8.4C6.8 7.9584 6.4416 7.6 6 7.6ZM18.8 7.6C18.3584 7.6 18 7.9584 18 8.4C18 8.8416 18.3584 9.2 18.8 9.2C19.2416 9.2 19.6 8.8416 19.6 8.4C19.6 7.9584 19.2416 7.6 18.8 7.6ZM21.1875 16.3891C21.1487 16.3899 21.1101 16.3936 21.0719 16.4H20.4V17.2V18C19.729 18 19.1565 18.4131 18.9187 18.9984C18.1543 18.7138 17.1977 18.3776 15.9594 18.0297C13.0533 17.2132 8.88205 16.4 3.6 16.4C3.49399 16.3985 3.38874 16.4181 3.29037 16.4576C3.19199 16.4971 3.10245 16.5558 3.02696 16.6303C2.95146 16.7047 2.89151 16.7934 2.8506 16.8912C2.80968 16.989 2.78861 17.094 2.78861 17.2C2.78861 17.306 2.80968 17.411 2.8506 17.5088C2.89151 17.6066 2.95146 17.6953 3.02696 17.7697C3.10245 17.8442 3.19199 17.9029 3.29037 17.9424C3.38874 17.9819 3.49399 18.0015 3.6 18C8.71795 18 12.7376 18.7868 15.5266 19.5703C16.921 19.9621 18.0059 20.3525 18.7734 20.6469C19.1572 20.7941 19.4612 20.917 19.6937 21.0078C19.81 21.0532 19.9064 21.0903 20 21.1219C20.0822 21.1496 20.1382 21.1846 20.3344 21.1938C20.3567 21.1958 20.3775 21.2078 20.4 21.2078C21.2609 21.2078 21.9495 20.5272 21.9922 19.6812C21.9943 19.6646 21.9958 19.648 21.9969 19.6313C21.9982 19.6193 21.9992 19.6073 22 19.5953C22.0001 19.5865 22.0001 19.5776 22 19.5688V18V17.2V16.4H21.3234C21.2785 16.3925 21.233 16.3888 21.1875 16.3891Z" fill="#86909C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/assets/image/Vector.png
Normal file
BIN
src/assets/image/Vector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
@ -338,113 +338,8 @@
|
||||
<!-- 右边 -->
|
||||
<div class="layout-center-right-wrap flex-row">
|
||||
<div class="right-wrap-left">
|
||||
<div class="right-wrap-left-title f22 pl-16 f-weight600">人物画像</div>
|
||||
<div class="flex-row">
|
||||
<div class="right-wrap-left-tab" :style="'height:'+`${rightContentHeight}`+'px'">
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center"
|
||||
@click="rightActive = 1" :class="rightActive == 1 ?'active':''">
|
||||
<svg-icon
|
||||
:icon-class="rightActive == 1 ? `hx-1-active` : 'hx-1'"
|
||||
className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center"
|
||||
@click="rightActive = 2" :class="rightActive == 2 ?'active':''">
|
||||
<svg-icon
|
||||
:icon-class="rightActive == 2 ? `hx-2-active` : 'hx-2'"
|
||||
className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center"
|
||||
@click="rightActive = 3" :class="rightActive == 3 ?'active':''">
|
||||
<svg-icon
|
||||
:icon-class="rightActive == 3 ? `hx-3-active` : 'hx-3'"
|
||||
className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="right-wrap-left-content">
|
||||
<div class="hx-1-content" v-if="rightActive == 1">
|
||||
<div class="f12 pl-16 pt-16 pb-6">人物画像标签</div>
|
||||
<div class="pl-16 pr-16">
|
||||
<div class="echartsWordCloud" id="echartsWordCloud"></div>
|
||||
</div>
|
||||
<el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
|
||||
<div class="flex-row justify-content-between p-16">
|
||||
<div class="character-info theme-blue">
|
||||
<div class="character-info-title">基本信息</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-info theme-yellow">
|
||||
<div class="character-info-title">基本信息</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 人物画像 -->
|
||||
<portraitPerson :caseId="caseId" />
|
||||
</div>
|
||||
<div class="right-wrap-right p-16">
|
||||
<div class="line-height-30 f22 f-weight600">沟通记录</div>
|
||||
@ -663,6 +558,7 @@ export default {
|
||||
contactPerson: () => import('./contactPerson'),//联系人左
|
||||
cassWrit: () => import('./cassWrit'),//
|
||||
caseVideoReservationDialog: () => import('./caseVideoReservationDialog'),//
|
||||
portraitPerson: () => import('./portraitPerson.vue'),//人物画像
|
||||
|
||||
singleofficeWritPopover: () => import('./singleofficeWritPopover.vue'),//发起签字
|
||||
singleofficeSealPopover: () => import('./singleofficeSealPopover.vue'),//发起签章
|
||||
@ -1129,99 +1025,7 @@ export default {
|
||||
height: 100%;
|
||||
.right-wrap-left{
|
||||
width: 367px;
|
||||
.right-wrap-left-title{
|
||||
width: 100%;
|
||||
line-height: 47px;
|
||||
border-bottom: 1px solid var(--fill-3, #E5E6EB);
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
.right-wrap-left-tab{
|
||||
width: 48px;
|
||||
background-color: #F7F8FA;
|
||||
.left-tab-icon{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.tabs-svg{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
.right-wrap-left-content{
|
||||
width: 318px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.hx-1-content{
|
||||
.echartsWordCloud{
|
||||
width: 286px;
|
||||
height: 300px;
|
||||
background: url('~@/assets/image/mediate/rwhx.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.character-info{
|
||||
width: calc(50% - 5px);
|
||||
border: 1px solid;
|
||||
padding: 4px;
|
||||
color: #4E5969;
|
||||
.character-info-title{
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.character-info-details{
|
||||
margin-bottom: 2px;
|
||||
font-size: 10px;
|
||||
.character-info-details-label{
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
line-height: 16px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.character-info-details-text{
|
||||
width: 60%;
|
||||
text-align: left;
|
||||
line-height: 16px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-blue{
|
||||
border-color: #E1EDF4;
|
||||
.character-info-title{
|
||||
color: #4787F0;
|
||||
}
|
||||
.character-info-details{
|
||||
.character-info-details-label{
|
||||
background-color: #BBD3FB;
|
||||
}
|
||||
.character-info-details-text{
|
||||
background-color: #ECF2FE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-yellow{
|
||||
border-color: #FFE2B9;
|
||||
.character-info-title{
|
||||
color: #ED7B2F;
|
||||
}
|
||||
.character-info-details{
|
||||
.character-info-details-label{
|
||||
background-color: #FFCF8B;
|
||||
}
|
||||
.character-info-details-text{
|
||||
background-color: #FFF7E8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-wrap-right{
|
||||
|
||||
692
src/pages/mediation-page/components/portraitPerson.vue
Normal file
692
src/pages/mediation-page/components/portraitPerson.vue
Normal file
@ -0,0 +1,692 @@
|
||||
<template>
|
||||
<div class="portraitPerson">
|
||||
<div class="right-wrap-left-title f22 pl-16 f-weight600">人物画像</div>
|
||||
<div class="flex-row">
|
||||
<div class="right-wrap-left-tab" :style="'height:'+`${rightContentHeight}`+'px'">
|
||||
<el-tooltip
|
||||
popper-class="custom-tooltip"
|
||||
effect="dark"
|
||||
content="XXX"
|
||||
placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 1" :class="rightActive == 1 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 1 ? `hx-1-active` : 'hx-1'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="身份信息" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 2" :class="rightActive == 2 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 2 ? `hx-2-active` : 'hx-2'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="地理位置" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 3" :class="rightActive == 3 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 3 ? `hx-3-active` : 'hx-3'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="经济状况" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 4" :class="rightActive == 4 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 4 ? `hx-4-active` : 'hx-4'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="雇佣状态" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 5" :class="rightActive == 5 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 5 ? `hx-5-active` : 'hx-5'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信用报告" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 6" :class="rightActive == 6 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 6 ? `hx-6-active` : 'hx-6'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信贷记录" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 7" :class="rightActive == 7 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 7 ? `hx-7-active` : 'hx-7'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信用卡" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 8" :class="rightActive == 8 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 8 ? `hx-8-active` : 'hx-8'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="负债情况" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 9" :class="rightActive == 9 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 9 ? `hx-9-active` : 'hx-9'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="婚姻状况" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 11" :class="rightActive == 11 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 11 ? `hx-12-active` : 'hx-12'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="家庭成员" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 12" :class="rightActive == 12 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 12 ? `hx-11-active` : 'hx-11'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="消费行为" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 13" :class="rightActive == 13 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 13 ? `hx-13-active` : 'hx-13'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="还款行为" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 14" :class="rightActive == 14 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 14 ? `hx-14-active` : 'hx-14'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="风险评估" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 15" :class="rightActive == 15 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 15 ? `hx-15-active` : 'hx-15'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="建议措施" placement="right">
|
||||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 16" :class="rightActive == 16 ?'active':''">
|
||||
<svg-icon :icon-class="rightActive == 16 ? `hx-16-active` : 'hx-16'" className="tabs-svg" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="right-wrap-left-content">
|
||||
<div class="hx-1-content" v-if="rightActive == 1">
|
||||
<div class="f12 pl-16 pt-16 pb-6">人物画像</div>
|
||||
<el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
|
||||
<div class="p-16 personghximg">
|
||||
<!-- 基本信息 -->
|
||||
<div class="position_info character-info theme-blue">
|
||||
<div class="character-info-title">基本信息</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名姓名姓</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 家庭情况 -->
|
||||
<div class="position_family character-info theme-green">
|
||||
<div class="character-info-title">家庭情况</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 执行情况 -->
|
||||
<div class="position_carry character-info theme-pink">
|
||||
<div class="character-info-title">执行情况</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 财务资产情况 -->
|
||||
<div class="position_finance character-info theme-yellow">
|
||||
<div class="character-info-title">财务资产情况</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 风险情况 -->
|
||||
<div class="position_risk character-info theme-pink2">
|
||||
<div class="character-info-title">风险情况</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 适诉情况 -->
|
||||
<div class="position_lawsuit character-info theme-purple">
|
||||
<div class="character-info-title">适诉情况</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
<div class="character-info-details flex-row">
|
||||
<div class="character-info-details-label">姓名</div>
|
||||
<div class="character-info-details-text">陈继平</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="portrait-marker" v-if="rightActive != 1">
|
||||
<el-scrollbar :style="'height:'+`${portraitcontentHeight}`+'px'">
|
||||
<div class="flex-column p-16">
|
||||
<div class="f18">基本信息</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>身份信息</div>
|
||||
<div class="person-info flex-column mt-16">
|
||||
<span>姓名：<a class="color-000">XXXXX</a></span>
|
||||
<span>性别：<a class="color-000">XXXXX</a></span>
|
||||
<span>年龄：<a class="color-000">XXXXX</a></span>
|
||||
<span>手机号码：<a class="color-000">XXXXX</a></span>
|
||||
<span>身份证号：<a class="color-000">XXXXX</a></span>
|
||||
</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>地理位置</div>
|
||||
<div class="flex-column">
|
||||
<span class="mt-8">户籍所在地：</span>
|
||||
<span class="mt-8">
|
||||
<el-cascader size="small" v-model="portraitInfo.value1" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
|
||||
</span>
|
||||
<span class="mt-8">
|
||||
<el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
|
||||
</span>
|
||||
<span class="mt-8">常住地址：</span>
|
||||
<span class="mt-8">
|
||||
<el-cascader size="small" v-model="portraitInfo.value2" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }"></el-cascader>
|
||||
</span>
|
||||
<span class="mt-8">
|
||||
<el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
|
||||
</span>
|
||||
<span class="mt-8">工作地点：</span>
|
||||
<span class="mt-8">
|
||||
<el-cascader size="small" v-model="portraitInfo.value3" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
|
||||
</span>
|
||||
<span class="mt-8">
|
||||
<el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
|
||||
</span>
|
||||
</div>
|
||||
<div class="f18 mt-16">经济状况</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>经济收入</div>
|
||||
<div class="box-list">
|
||||
<span>收入0-5K</span>
|
||||
<span>收入5-10K</span>
|
||||
<span>收入10K以上</span>
|
||||
<span>无收入</span>
|
||||
</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>雇佣状态</div>
|
||||
<div class="box-list">
|
||||
<span>待业</span>
|
||||
<span>零工</span>
|
||||
<span>稳定工作</span>
|
||||
<span>个体户</span>
|
||||
<span>小微企业</span>
|
||||
<span>企业法人</span>
|
||||
</div>
|
||||
<div class="f18 mt-16">信用历史</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>信用报告</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>信贷记录</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>信用卡</div>
|
||||
<div class="f18 mt-16">财务资产和负债</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>财产情况</div>
|
||||
<div class="box-list">
|
||||
<span>有房</span>
|
||||
<span>有车</span>
|
||||
<span>存款</span>
|
||||
<span>投资</span>
|
||||
<span>小微企业</span>
|
||||
<span>企业法人</span>
|
||||
</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>负债情况</div>
|
||||
<div class="box-list">
|
||||
<span>多头借贷</span>
|
||||
<span>信用卡负债</span>
|
||||
<span>银行其他负债</span>
|
||||
<span>非银负债</span>
|
||||
<span>民间借贷或高利贷</span>
|
||||
<span>负债0-10W</span>
|
||||
<span>负债10-50W</span>
|
||||
<span>负债50-100W</span>
|
||||
<span>负债100W以上</span>
|
||||
<span>存在还款竞争</span>
|
||||
</div>
|
||||
|
||||
<div class="f18 mt-16">家庭状况</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>婚姻状况</div>
|
||||
<div class="box-list">
|
||||
<span>未婚</span>
|
||||
<span>已婚</span>
|
||||
<span>离婚</span>
|
||||
</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>家庭成员</div>
|
||||
<div class="box-list">
|
||||
<span>无子女</span>
|
||||
<span>有子女</span>
|
||||
<span>有父母</span>
|
||||
<span>无父母</span>
|
||||
</div>
|
||||
<div class="f18 mt-16">行为分析</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>消费行为</div>
|
||||
<div class="box-list">
|
||||
<span>收入匹配消费</span>
|
||||
<span>超前消费</span>
|
||||
<span>滞后消费</span>
|
||||
<span>日常消费</span>
|
||||
<span>娱乐消费</span>
|
||||
<span>奢侈品消费</span>
|
||||
<span>冲动消费</span>
|
||||
<span>本地消费</span>
|
||||
<span>异地消费</span>
|
||||
<span>线上消费</span>
|
||||
<span>消费增长</span>
|
||||
<span>消费下降</span>
|
||||
</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>还款行为</div>
|
||||
<div class="box-list">
|
||||
<span>按时还</span>
|
||||
<span>不按时还</span>
|
||||
</div>
|
||||
<div class="f18 mt-16">风险评估和建议</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>风险评估</div>
|
||||
<div class="box-list">
|
||||
<span>低风险</span>
|
||||
<span>中风险</span>
|
||||
<span>高风险</span>
|
||||
</div>
|
||||
<div class="f16 mt-16"><a class="dot"></a>建议措施</div>
|
||||
<div class="box-list">
|
||||
<span>调整还款计划</span>
|
||||
<span>增加收入</span>
|
||||
<span>减少支出</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import chinalist from 'china-location/dist/location.json';
|
||||
import ChinaLocation from 'china-location';
|
||||
|
||||
import caseMaterial from "@/services/caseMaterial";
|
||||
import { forEach } from 'lodash';
|
||||
export default {
|
||||
components: {
|
||||
uploadFile: () => import('@/components/uploadFile.vue'),//上传
|
||||
},
|
||||
props: {
|
||||
eventDialog: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
portraitInfo:{},
|
||||
initlocation: null,
|
||||
provinces: [],
|
||||
|
||||
rightActive: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 左侧
|
||||
leftContentHeight() {
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh - 100
|
||||
},
|
||||
// 获取右侧滚动高度
|
||||
rightContentHeight() {
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh - 57
|
||||
},
|
||||
// 获取抽屉drawer的内容高度
|
||||
OfficecontentHeight() {
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh - 185
|
||||
},
|
||||
CommunicationcontentHeight() {
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh - 57 - 90
|
||||
},
|
||||
portraitcontentHeight() {
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh - 57 - 130
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initlocation = new ChinaLocation(chinalist);
|
||||
|
||||
},
|
||||
methods: {
|
||||
loadOptions(node, resolve) {
|
||||
const { level } = node;
|
||||
// 模拟异步加载数据
|
||||
setTimeout(() => {
|
||||
if(level == 0)
|
||||
{
|
||||
this.provinces = []
|
||||
this.initlocation.currentProvinces.forEach(item =>{
|
||||
this.provinces.push({value: item.code,label: item.name,leaf: false})
|
||||
})
|
||||
}
|
||||
if(level == 1)
|
||||
{
|
||||
let location = new ChinaLocation(chinalist);
|
||||
location.changeProvince(node.value);
|
||||
let children = []
|
||||
location.currentCities.forEach(item =>{
|
||||
children.push({value: item.code,label: item.name,leaf: false})
|
||||
})
|
||||
resolve(children)
|
||||
}
|
||||
if(level == 2)
|
||||
{
|
||||
let location = new ChinaLocation(chinalist);
|
||||
location.changeProvince(node.parent.value);
|
||||
location.changeCity(node.value);
|
||||
let children = []
|
||||
location.currentDistricts.forEach(item =>{
|
||||
children.push({value: item.code,label: item.name,leaf: true})
|
||||
})
|
||||
resolve(children)
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
|
||||
daysAfterDate() {
|
||||
console.log(this.mrObj.timeType,'timeType')
|
||||
// 获取当前日期
|
||||
let currentDate = new Date();
|
||||
// 获取昨天的日期
|
||||
const nextDate = currentDate
|
||||
currentDate.setDate(currentDate.getDate() + this.mrObj.timeType)
|
||||
const year = nextDate.getFullYear();
|
||||
const month = (nextDate.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = nextDate.getDate().toString().padStart(2, '0');
|
||||
this.mrObj.nextDate = year +'-'+ month +'-'+ day;
|
||||
},
|
||||
handleUploadFile(fileList){
|
||||
// console.log('获取上传文件信息',fileList)
|
||||
fileList = JSON.parse(JSON.stringify(fileList))
|
||||
this.fileList = fileList.map((item,i) => {
|
||||
return {
|
||||
url: item.url,
|
||||
fileName: item.fileName,
|
||||
previewUrl:item.previewUrl,
|
||||
objectName: item.objectName
|
||||
}
|
||||
})
|
||||
this.repaymentObj.url = this.fileList.length?this.fileList[0].fileName : '';
|
||||
this.repaymentObj.name = this.fileList.length?this.fileList[0].objectName : '';
|
||||
},
|
||||
handleClose() {
|
||||
this.$emit('update:visiblemediatRecord', false)
|
||||
},
|
||||
handleSubmit() {
|
||||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||||
console.log(this.mrObj,'this.mrObj')
|
||||
// caseMaterial.addCaseFile(this.repaymentObj).then(res => {
|
||||
// this.$parent.getFileCaseList()
|
||||
// this.handleClose()
|
||||
// this.$message.success("操作成功");
|
||||
// })
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.portraitPerson{
|
||||
.right-wrap-left-title{
|
||||
width: 100%;
|
||||
line-height: 47px;
|
||||
border-bottom: 1px solid var(--fill-3, #E5E6EB);
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
.right-wrap-left-tab{
|
||||
width: 48px;
|
||||
background-color: #F7F8FA;
|
||||
.left-tab-icon{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.tabs-svg{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
.right-wrap-left-content{
|
||||
width: 318px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.hx-1-content{
|
||||
.personghximg{
|
||||
background: url('~@/assets/image/Vector.png') no-repeat;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.character-info{
|
||||
width: calc(50% - 5px);
|
||||
// border: 1px solid;
|
||||
padding: 4px;
|
||||
color: #4E5969;
|
||||
.character-info-title{
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.character-info-details{
|
||||
margin-bottom: 2px;
|
||||
font-size: 10px;
|
||||
.character-info-details-label{
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
line-height: 16px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.character-info-details-text{
|
||||
width: 60%;
|
||||
text-align: left;
|
||||
line-height: 16px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// position_info position_family position_carry position_finance position_risk position_lawsuit
|
||||
.position_info{position:absolute; top: 110px;left: 8px;}
|
||||
.position_family{position:absolute; top: 300px;left: 8px;}
|
||||
.position_carry{position:absolute; top: 400px;left: 8px;}
|
||||
|
||||
.position_finance{position:absolute; top: 160px;left: 160px;}
|
||||
.position_risk{position:absolute; top: 350px;left: 160px;}
|
||||
.position_lawsuit{position:absolute; top: 460px;left: 160px;}
|
||||
|
||||
.theme-blue{
|
||||
.character-info-title{
|
||||
color: #4787F0;
|
||||
}
|
||||
.character-info-details{
|
||||
.character-info-details-label{
|
||||
background-color: #BBD3FB;
|
||||
}
|
||||
.character-info-details-text{
|
||||
background-color: #165DFFB2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
.theme-green{
|
||||
.character-info-title{
|
||||
color: #00A870;
|
||||
}
|
||||
.character-info-details{
|
||||
.character-info-details-label{
|
||||
background-color: #00B42A33;
|
||||
}
|
||||
.character-info-details-text{
|
||||
background-color: #00B42AB2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-pink{
|
||||
.character-info-title{
|
||||
color: #F36DA0;
|
||||
}
|
||||
.character-info-details{
|
||||
.character-info-details-label{
|
||||
background-color: #F36DA033;
|
||||
}
|
||||
.character-info-details-text{
|
||||
background-color: #F36DA0B2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-yellow{
|
||||
.character-info-title{
|
||||
color: #ED7B2F;
|
||||
}
|
||||
.character-info-details{
|
||||
.character-info-details-label{
|
||||
background-color: #ED7B2F33;
|
||||
}
|
||||
.character-info-details-text{
|
||||
background-color: #ED7B2FB2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-pink2{
|
||||
.character-info-title{
|
||||
color: #F36D78;
|
||||
}
|
||||
.character-info-details{
|
||||
.character-info-details-label{
|
||||
background-color: #F36D7833;
|
||||
}
|
||||
.character-info-details-text{
|
||||
background-color: #F36D78B2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-purple{
|
||||
.character-info-title{
|
||||
color: #936DF3;
|
||||
}
|
||||
.character-info-details{
|
||||
.character-info-details-label{
|
||||
background-color: #936DF333;
|
||||
}
|
||||
.character-info-details-text{
|
||||
background-color: #936DF3B2;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.portrait-marker{
|
||||
/* 方法1 */
|
||||
.dot {
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
padding-left: 10px; /* 调整圆点与文本之间的距离 */
|
||||
}
|
||||
|
||||
.dot::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #000; /* 圆点的颜色 */
|
||||
}
|
||||
|
||||
.person-info{
|
||||
color: #86909C;
|
||||
border:solid 1px #E5E6EB;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
span{
|
||||
padding: 5px 10px;
|
||||
}
|
||||
span:nth-child(even) {
|
||||
background-color: #F7F8FA;
|
||||
}
|
||||
}
|
||||
.box-list{
|
||||
span{
|
||||
border:solid 1px #E5E6EB;
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.portraitPerson{
|
||||
.el-scrollbar__view{height: 100%;}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user