Skip to content

R
rongtong-pc
Commit 67f6737b authored by p-wanping.song's avatar p-wanping.song
Browse files
Options

添加大屏

parent cb4d07f1
Hide whitespace changes
Inline Side-by-side
Showing with 1195 additions and 497 deletions
src/assets/map/tabs-item0.svg 0 → 100644
View file @ 67f6737b
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; z-index: 1; position: relative; shape-rendering: auto;" width="500" height="350" preserveAspectRatio="xMidYMid" viewBox="0 0 500 350">
<g transform=""><linearGradient id="ldbk-nq4q5u6dq7r" x1="-0.1" y1="0" x2="1.1" y2="0.278783">
<animate attributeName="y2" repeatCount="indefinite" dur="1s" keyTimes="0;0.5;1" values="-0.32;0.32;-0.32" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" calcMode="spline"/>
<stop stop-color="#6C7CEE" offset="0"/>
<stop stop-color="#F988E3" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="500" height="350" fill="url(#ldbk-nq4q5u6dq7r)"/></g>
<style type="text/css">.lded &gt; .content, .lded &gt; .content &gt; .inner { height: 100%; }
.lded &gt; .content &gt; .inner &gt; .viewer { width: 100%; height: 100%; max-width: 100%; }
.lded &gt; .content &gt; .inner &gt; .panel {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
opacity: 0.3;
}
.lded &gt; .content &gt; .inner &gt; .panel:hover { opacity: 1; }
.lded &gt; .content &gt; .inner &gt; .ctrl {
position: absolute;
bottom: 13px;
left: 0;
right: 0;
margin: auto;
}
.lded &gt; .content &gt; .inner &gt; .ctrl:hover {
z-index: 10;
}
#editor &gt; .inner &gt; .title {
position: absolute;
bottom: 195px;
left: 0;
right: 0;
z-index: 11;
}
#editor &gt; .inner &gt; .title &gt; a:first-child {
margin-left: 0!important;
#editor .lded .viewer { border-radius: 0 }</style></svg>
\ No newline at end of file
src/assets/map/tabs-item1.svg 0 → 100644
View file @ 67f6737b
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; z-index: 1; position: relative; shape-rendering: auto;" width="500" height="350" preserveAspectRatio="xMidYMid" viewBox="0 0 500 350">
<g transform=""><linearGradient id="ldbk-nq4q5u6dq7r" x1="-0.1" y1="1" x2="1.1" y2="0.278783">
<animate attributeName="y2" repeatCount="indefinite" dur="1.5s" keyTimes="0;0.5;1" values="-0.32;0.32;-0.32" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" calcMode="spline"/>
<stop stop-color="#EB2CFF" offset="0"/>
<stop stop-color="#317BE0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="500" height="350" fill="url(#ldbk-nq4q5u6dq7r)"/></g>
<style type="text/css">.lded &gt; .content, .lded &gt; .content &gt; .inner { height: 100%; }
.lded &gt; .content &gt; .inner &gt; .viewer { width: 100%; height: 100%; max-width: 100%; }
.lded &gt; .content &gt; .inner &gt; .panel {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
opacity: 0.3;
}
.lded &gt; .content &gt; .inner &gt; .panel:hover { opacity: 1; }
.lded &gt; .content &gt; .inner &gt; .ctrl {
position: absolute;
bottom: 13px;
left: 0;
right: 0;
margin: auto;
}
.lded &gt; .content &gt; .inner &gt; .ctrl:hover {
z-index: 10;
}
#editor &gt; .inner &gt; .title {
position: absolute;
bottom: 195px;
left: 0;
right: 0;
z-index: 11;
}
#editor &gt; .inner &gt; .title &gt; a:first-child {
margin-left: 0!important;
#editor .lded .viewer { border-radius: 0 }</style></svg>
\ No newline at end of file
src/assets/map/tabs-item2.svg 0 → 100644
View file @ 67f6737b
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(); display: block; z-index: 1; position: relative; shape-rendering: auto;" width="500" height="350" preserveAspectRatio="xMidYMid" viewBox="0 0 500 350">
<g transform=""><circle cx="0" cy="0" r="610.3277807866851" fill="#ff00ff" fill-opacity="0.4" transform="scale(1.01145 1.01145)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-2s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="563.3794899569401" fill="#e64fff" fill-opacity="0.4" transform="scale(1.02002 1.02002)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-1.8461538461538463s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="516.4311991271951" fill="#c771ff" fill-opacity="0.4" transform="scale(1.02382 1.02382)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-1.6923076923076923s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="469.48290829745014" fill="#a38aff" fill-opacity="0.4" transform="scale(1.02272 1.02272)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-1.5384615384615385s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="422.53461746770506" fill="#759fff" fill-opacity="0.4" transform="scale(1.01667 1.01667)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-1.3846153846153846s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="375.5863266379601" fill="#2eb0ff" fill-opacity="0.4" transform="scale(1.00635 1.00635)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-1.2307692307692308s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="328.6380358082151" fill="#00bfff" fill-opacity="0.4" transform="scale(0.994199 0.994199)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-1.0769230769230769s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="281.68974497847006" fill="#00ccff" fill-opacity="0.4" transform="scale(0.983719 0.983719)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-0.9230769230769231s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="234.74145414872507" fill="#00d7ff" fill-opacity="0.4" transform="scale(0.977451 0.977451)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-0.7692307692307693s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="187.79316331898005" fill="#00e1ff" fill-opacity="0.4" transform="scale(0.976123 0.976123)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-0.6153846153846154s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="140.84487248923503" fill="#00eaff" fill-opacity="0.4" transform="scale(0.97969 0.97969)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-0.46153846153846156s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="93.89658165949002" fill="#00f2ff" fill-opacity="0.4" transform="scale(0.988063 0.988063)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-0.3076923076923077s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="46.94829082974501" fill="#00f9ff" fill-opacity="0.4" transform="scale(0.999744 0.999744)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="-0.15384615384615385s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle><circle cx="0" cy="0" r="0" fill="#00ffff" fill-opacity="0.4" transform="scale(1.01145 1.01145)">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" begin="0s" keyTimes="0;0.5;1" values="0.976;1.024;0.976" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</circle></g>
<style type="text/css">.lded &gt; .content, .lded &gt; .content &gt; .inner { height: 100%; }
.lded &gt; .content &gt; .inner &gt; .viewer { width: 100%; height: 100%; max-width: 100%; }
.lded &gt; .content &gt; .inner &gt; .panel {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
opacity: 0.3;
}
.lded &gt; .content &gt; .inner &gt; .panel:hover { opacity: 1; }
.lded &gt; .content &gt; .inner &gt; .ctrl {
position: absolute;
bottom: 13px;
left: 0;
right: 0;
margin: auto;
}
.lded &gt; .content &gt; .inner &gt; .ctrl:hover {
z-index: 10;
}
#editor &gt; .inner &gt; .title {
position: absolute;
bottom: 195px;
left: 0;
right: 0;
z-index: 11;
}
#editor &gt; .inner &gt; .title &gt; a:first-child {
margin-left: 0!important;
#editor .lded .viewer { border-radius: 0 }</style></svg>
\ No newline at end of file
src/assets/map/tabs-item3.svg 0 → 100644
View file @ 67f6737b
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(); display: block; z-index: 1; position: relative; shape-rendering: auto;" width="500" height="350" preserveAspectRatio="xMidYMid" viewBox="0 0 500 350">
<g transform=""><linearGradient id="ldb-nq4q5u6dq7r-lg" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#EC27FF" offset="0"/>
<stop stop-color="#3CD6FF" offset="1"/>
</linearGradient><rect x="-27.77777777777778" y="-350" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(-0.836995 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="-2.25s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect><rect x="27.77777777777778" y="-306.25" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(-2.69058 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="-2s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect><rect x="83.33333333333334" y="-262.5" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(-2.96524 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="-1.75s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect><rect x="138.88888888888889" y="-218.75" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(-1.59812 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="-1.5s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect><rect x="194.44444444444446" y="-175" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(0.836996 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="-1.25s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect><rect x="250" y="-131.25" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(2.69058 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="-0.1s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect><rect x="305.55555555555554" y="-87.5" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(2.96524 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="-0.75s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect><rect x="361.11111111111114" y="-43.75" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(1.59812 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="-0.5s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect><rect x="416.6666666666667" y="0" width="111.11111111111111" height="700" fill="url(#ldb-nq4q5u6dq7r-lg)" transform="translate(-0.836995 0)">
<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" begin="0s" keyTimes="0;0.5;1" values="-3.055555555555556;3.055555555555556;-3.055555555555556" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" calcMode="spline"/>
</rect></g>
<style type="text/css">.lded &gt; .content, .lded &gt; .content &gt; .inner { height: 100%; }
.lded &gt; .content &gt; .inner &gt; .viewer { width: 100%; height: 100%; max-width: 100%; }
.lded &gt; .content &gt; .inner &gt; .panel {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
opacity: 0.3;
}
.lded &gt; .content &gt; .inner &gt; .panel:hover { opacity: 1; }
.lded &gt; .content &gt; .inner &gt; .ctrl {
position: absolute;
bottom: 13px;
left: 0;
right: 0;
margin: auto;
}
.lded &gt; .content &gt; .inner &gt; .ctrl:hover {
z-index: 10;
}
#editor &gt; .inner &gt; .title {
position: absolute;
bottom: 195px;
left: 0;
right: 0;
z-index: 11;
}
#editor &gt; .inner &gt; .title &gt; a:first-child {
margin-left: 0!important;
#editor .lded .viewer { border-radius: 0 }</style></svg>
\ No newline at end of file
src/assets/map/tabs-item4.svg 0 → 100644
View file @ 67f6737b
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(153, 153, 153); display: block; z-index: 1; position: relative; shape-rendering: auto;" width="500" height="350" preserveAspectRatio="xMidYMid" viewBox="0 0 500 350">
<g transform=""><linearGradient id="lg-0.6590519274487807" x1="0" x2="0.5" y1="0" y2="0" gradientUnits="objectBoundingBox">
<stop stop-color="#06ADD3" offset="0"/>
<stop stop-color="#900DFB" offset="1"/>
</linearGradient><path d="M -238.12 350 Q -214.608 270.27 -201.994 190.336 T -97.152 46.3006 T 66.1437 -68.0064 T 271.908 -141.396 T 500 -166.684 T 728.092 -141.396 T 933.856 -68.0064 T 1097.15 46.3006 T 1201.99 190.336 T 1238.12 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M -238.12041339345637 350.00000000000006Q -209.33935609827722 271.76204648512294 -201.99422896831925 190.33577385645236T -97.15195833036773 46.300594613911926T 66.14370659130259 -68.00637083125736T 271.90824836636034 -141.3959602778234T 499.9999999999999 -166.68428937541944T 728.0917516336394 -141.39596027782346T 933.8562934086972 -68.00637083125747T 1097.1519583303677 46.300594613911755T 1201.9942289683192 190.3357738564522T 1238.1204133934564 349.9999999999999;M -238.12041339345637 350.00000000000006Q -208.46136874840477 271.2338233997407 -201.99422896831925 190.33577385645236T -97.15195833036773 46.300594613911926T 66.14370659130259 -68.00637083125736T 271.90824836636034 -141.3959602778234T 499.9999999999999 -166.68428937541944T 728.0917516336394 -141.39596027782346T 933.8562934086972 -68.00637083125747T 1097.1519583303677 46.300594613911755T 1201.9942289683192 190.3357738564522T 1238.1204133934564 349.9999999999999;M -238.12041339345637 350.00000000000006Q -216.35493302468558 269.7751552289379 -201.99422896831925 190.33577385645236T -97.15195833036773 46.300594613911926T 66.14370659130259 -68.00637083125736T 271.90824836636034 -141.3959602778234T 499.9999999999999 -166.68428937541944T 728.0917516336394 -141.39596027782346T 933.8562934086972 -68.00637083125747T 1097.1519583303677 46.300594613911755T 1201.9942289683192 190.3357738564522T 1238.1204133934564 349.9999999999999;M -238.12041339345637 350.00000000000006Q -209.33935609827722 271.76204648512294 -201.99422896831925 190.33577385645236T -97.15195833036773 46.300594613911926T 66.14370659130259 -68.00637083125736T 271.90824836636034 -141.3959602778234T 499.9999999999999 -166.68428937541944T 728.0917516336394 -141.39596027782346T 933.8562934086972 -68.00637083125747T 1097.1519583303677 46.300594613911755T 1201.9942289683192 190.3357738564522T 1238.1204133934564 349.9999999999999"/>
</path><path d="M -164.308 350 Q -139.515 271.292 -124.246 190.955 T -8.88974 51.0936 T 167.846 -52.7155 T 384.644 -107.951 T 615.356 -107.951 T 832.154 -52.7155 T 1008.89 51.0936 T 1124.25 190.955 T 1164.31 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-0.4s" values="M -164.3083720541108 350.00000000000006Q -128.4530171775399 270.49680626702656 -124.2456751455477 190.955208764328T -8.889736929466267 51.09356660280736T 167.8458139729443 -52.71554830188097T 384.6440617839185 -107.9512246328647T 615.3559382160813 -107.9512246328647T 832.154186027055 -52.7155483018812T 1008.889736929466 51.09356660280724T 1124.2456751455477 190.95520876432803T 1164.3083720541108 349.9999999999999;M -164.3083720541108 350.00000000000006Q -137.63641587714335 272.42825028650225 -124.2456751455477 190.955208764328T -8.889736929466267 51.09356660280736T 167.8458139729443 -52.71554830188097T 384.6440617839185 -107.9512246328647T 615.3559382160813 -107.9512246328647T 832.154186027055 -52.7155483018812T 1008.889736929466 51.09356660280724T 1124.2456751455477 190.95520876432803T 1164.3083720541108 349.9999999999999;M -164.3083720541108 350.00000000000006Q -152.99990223512089 272.2613041641177 -124.2456751455477 190.955208764328T -8.889736929466267 51.09356660280736T 167.8458139729443 -52.71554830188097T 384.6440617839185 -107.9512246328647T 615.3559382160813 -107.9512246328647T 832.154186027055 -52.7155483018812T 1008.889736929466 51.09356660280724T 1124.2456751455477 190.95520876432803T 1164.3083720541108 349.9999999999999;M -164.3083720541108 350.00000000000006Q -128.4530171775399 270.49680626702656 -124.2456751455477 190.955208764328T -8.889736929466267 51.09356660280736T 167.8458139729443 -52.71554830188097T 384.6440617839185 -107.9512246328647T 615.3559382160813 -107.9512246328647T 832.154186027055 -52.7155483018812T 1008.889736929466 51.09356660280724T 1124.2456751455477 190.95520876432803T 1164.3083720541108 349.9999999999999"/>
</path><path d="M -90.4963 350 Q -53.6484 272.386 -45.5475 191.819 T 82.456 57.7192 T 274.027 -31.8832 T 500 -63.3474 T 725.973 -31.8832 T 917.544 57.7192 T 1045.55 191.819 T 1090.5 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-0.6s" values="M -90.49633071476512 350.00000000000006Q -51.46399344574354 272.80424862005 -45.54747397038739 191.8187861541578T 82.45604028581528 57.7192282000708T 274.02683736308217 -31.883231779271057T 499.9999999999999 -63.347431500335574T 725.9731626369177 -31.883231779271114T 917.5439597141844 57.71922820007069T 1045.5474739703873 191.8187861541575T 1090.496330714765 349.9999999999999;M -90.49633071476512 350.00000000000006Q -53.65700481319641 272.84858934981133 -45.54747397038739 191.8187861541578T 82.45604028581528 57.7192282000708T 274.02683736308217 -31.883231779271057T 499.9999999999999 -63.347431500335574T 725.9731626369177 -31.883231779271114T 917.5439597141844 57.71922820007069T 1045.5474739703873 191.8187861541575T 1090.496330714765 349.9999999999999;M -90.49633071476512 350.00000000000006Q -65.99156468378112 270.01951207853375 -45.54747397038739 191.8187861541578T 82.45604028581528 57.7192282000708T 274.02683736308217 -31.883231779271057T 499.9999999999999 -63.347431500335574T 725.9731626369177 -31.883231779271114T 917.5439597141844 57.71922820007069T 1045.5474739703873 191.8187861541575T 1090.496330714765 349.9999999999999;M -90.49633071476512 350.00000000000006Q -51.46399344574354 272.80424862005 -45.54747397038739 191.8187861541578T 82.45604028581528 57.7192282000708T 274.02683736308217 -31.883231779271057T 499.9999999999999 -63.347431500335574T 725.9731626369177 -31.883231779271114T 917.5439597141844 57.71922820007069T 1045.5474739703873 191.8187861541575T 1090.496330714765 349.9999999999999"/>
</path><path d="M -16.6843 350 Q 15.208 271.896 34.4835 193.073 T 177.853 67.228 T 385.027 -2.61095 T 614.973 -2.61095 T 822.147 67.228 T 965.516 193.073 T 1016.68 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-0.8s" values="M -16.68428937541944 350.00000000000006Q 14.37530813648948 271.8961905157313 34.48354073846241 193.07336200774625T 177.8526147937991 67.22796924877275T 385.02692936762696 -2.610954848548829T 614.9730706323728 -2.610954848548829T 822.1473852062007 67.22796924877264T 965.5164592615375 193.07336200774614T 1016.6842893754194 349.9999999999999;M -16.68428937541944 350.00000000000006Q 19.92907511686741 271.89592833411956 34.48354073846241 193.07336200774625T 177.8526147937991 67.22796924877275T 385.02692936762696 -2.610954848548829T 614.9730706323728 -2.610954848548829T 822.1473852062007 67.22796924877264T 965.5164592615375 193.07336200774614T 1016.6842893754194 349.9999999999999;M -16.68428937541944 350.00000000000006Q 20.909770434179563 270.0326714596134 34.48354073846241 193.07336200774625T 177.8526147937991 67.22796924877275T 385.02692936762696 -2.610954848548829T 614.9730706323728 -2.610954848548829T 822.1473852062007 67.22796924877264T 965.5164592615375 193.07336200774614T 1016.6842893754194 349.9999999999999;M -16.68428937541944 350.00000000000006Q 14.37530813648948 271.8961905157313 34.48354073846241 193.07336200774625T 177.8526147937991 67.22796924877275T 385.02692936762696 -2.610954848548829T 614.9730706323728 -2.610954848548829T 822.1473852062007 67.22796924877264T 965.5164592615375 193.07336200774614T 1016.6842893754194 349.9999999999999"/>
</path><path d="M 57.1278 350 Q 85.0464 273.43 116.461 194.995 T 278.564 81.523 T 500 39.9894 T 721.436 81.523 T 883.539 194.995 T 942.872 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-1s" values="M 57.12775196392613 350.00000000000006Q 78.98324375552181 273.919417903673 116.46138256963701 194.99471318737423T 278.56387598196284 81.52296779874598T 499.99999999999994 39.98942637474829T 721.4361240180367 81.52296779874581T 883.538617430363 194.99471318737426T 942.8722480360739 349.99999999999994;M 57.12775196392613 350.00000000000006Q 92.44981997494358 272.8320148158399 116.46138256963701 194.99471318737423T 278.56387598196284 81.52296779874598T 499.99999999999994 39.98942637474829T 721.4361240180367 81.52296779874581T 883.538617430363 194.99471318737426T 942.8722480360739 349.99999999999994;M 57.12775196392613 350.00000000000006Q 103.52035741728639 269.8828631332794 116.46138256963701 194.99471318737423T 278.56387598196284 81.52296779874598T 499.99999999999994 39.98942637474829T 721.4361240180367 81.52296779874581T 883.538617430363 194.99471318737426T 942.8722480360739 349.99999999999994;M 57.12775196392613 350.00000000000006Q 78.98324375552181 273.919417903673 116.46138256963701 194.99471318737423T 278.56387598196284 81.52296779874598T 499.99999999999994 39.98942637474829T 721.4361240180367 81.52296779874581T 883.538617430363 194.99471318737426T 942.8722480360739 349.99999999999994"/>
</path><path d="M 130.94 350 Q 157.451 273.943 201.424 198.15 T 385.954 104.302 T 614.046 104.302 T 798.576 198.15 T 869.06 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-1.2s" values="M 130.9397933032718 350.00000000000006Q 175.10992733234053 274.3076300358554 201.42402083481613 198.15029730695596T 385.95412418318017 104.3020198610883T 614.0458758168197 104.30201986108827T 798.5759791651839 198.15029730695588T 869.0602066967282 349.99999999999994;M 130.9397933032718 350.00000000000006Q 151.5819494210599 273.8213743898631 201.42402083481613 198.15029730695596T 385.95412418318017 104.3020198610883T 614.0458758168197 104.30201986108827T 798.5759791651839 198.15029730695588T 869.0602066967282 349.99999999999994;M 130.9397933032718 350.00000000000006Q 155.11676717031781 271.4813605877956 201.42402083481613 198.15029730695596T 385.95412418318017 104.3020198610883T 614.0458758168197 104.30201986108827T 798.5759791651839 198.15029730695588T 869.0602066967282 349.99999999999994;M 130.9397933032718 350.00000000000006Q 175.10992733234053 274.3076300358554 201.42402083481613 198.15029730695596T 385.95412418318017 104.3020198610883T 614.0458758168197 104.30201986108827T 798.5759791651839 198.15029730695588T 869.0602066967282 349.99999999999994"/>
</path><path d="M 204.752 350 Q 239.276 275.093 291.228 203.86 T 500 143.326 T 708.772 203.86 T 795.248 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-1.4s" values="M 204.75183464261744 350Q 247.18478332855474 280.4943822612599 291.22802014290767 203.8596141000354T 499.99999999999994 143.3262842498322T 708.7719798570922 203.85961410003534T 795.2481653573825 349.99999999999994;M 204.75183464261744 350Q 239.1029032083893 275.2197418863336 291.22802014290767 203.8596141000354T 499.99999999999994 143.3262842498322T 708.7719798570922 203.85961410003534T 795.2481653573825 349.99999999999994;M 204.75183464261744 350Q 242.5211948772237 272.71936974527404 291.22802014290767 203.8596141000354T 499.99999999999994 143.3262842498322T 708.7719798570922 203.85961410003534T 795.2481653573825 349.99999999999994;M 204.75183464261744 350Q 247.18478332855474 280.4943822612599 291.22802014290767 203.8596141000354T 499.99999999999994 143.3262842498322T 708.7719798570922 203.85961410003534T 795.2481653573825 349.99999999999994"/>
</path><path d="M 278.564 350 Q 327.691 280.141 389.282 215.761 T 610.718 215.761 T 721.436 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-1.6s" values="M 278.56387598196306 350Q 338.84379594276004 275.045789027646 389.2819379909814 215.761483899373T 610.7180620090184 215.7614838993729T 721.4361240180369 349.99999999999994;M 278.56387598196306 350Q 325.12839810824494 282.4270581534763 389.2819379909814 215.761483899373T 610.7180620090184 215.7614838993729T 721.4361240180369 349.99999999999994;M 278.56387598196306 350Q 332.44783440328007 275.8975868691497 389.2819379909814 215.761483899373T 610.7180620090184 215.7614838993729T 721.4361240180369 349.99999999999994;M 278.56387598196306 350Q 338.84379594276004 275.045789027646 389.2819379909814 215.761483899373T 610.7180620090184 215.7614838993729T 721.4361240180369 349.99999999999994"/>
</path><path d="M 352.376 350 Q 400.266 287.969 500 246.663 T 647.624 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-1.8s" values="M 352.37591732130875 350Q 403.4938677794952 289.892017845025 500 246.6631421249161T 647.6240826786913 350;M 352.37591732130875 350Q 403.23033756454157 288.4154364029218 500 246.6631421249161T 647.6240826786913 350;M 352.37591732130875 350Q 398.6659429666166 287.72828105993455 500 246.6631421249161T 647.6240826786913 350;M 352.37591732130875 350Q 403.4938677794952 289.892017845025 500 246.6631421249161T 647.6240826786913 350"/>
</path><path d="M 426.188 350 Q 500 317.771 573.812 350" fill="url(#lg-0.6590519274487807)" opacity="1">
<animate attributeName="d" dur="1s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-2s" values="M 426.1879586606544 350Q 500 312.64318263613796 573.8120413393457 350;M 426.1879586606544 350Q 500 298.8967114347111 573.8120413393457 350;M 426.1879586606544 350Q 500 318.7876461116747 573.8120413393457 350;M 426.1879586606544 350Q 500 312.64318263613796 573.8120413393457 350"/>
</path></g>
<style type="text/css">.lded &gt; .content, .lded &gt; .content &gt; .inner { height: 100%; }
.lded &gt; .content &gt; .inner &gt; .viewer { width: 100%; height: 100%; max-width: 100%; }
.lded &gt; .content &gt; .inner &gt; .panel {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
opacity: 0.3;
}
.lded &gt; .content &gt; .inner &gt; .panel:hover { opacity: 1; }
.lded &gt; .content &gt; .inner &gt; .ctrl {
position: absolute;
bottom: 13px;
left: 0;
right: 0;
margin: auto;
}
.lded &gt; .content &gt; .inner &gt; .ctrl:hover {
z-index: 10;
}
#editor &gt; .inner &gt; .title {
position: absolute;
bottom: 195px;
left: 0;
right: 0;
z-index: 11;
}
#editor &gt; .inner &gt; .title &gt; a:first-child {
margin-left: 0!important;
#editor .lded .viewer { border-radius: 0 }</style></svg>
\ No newline at end of file
src/assets/map/tabs-item5.svg 0 → 100644
View file @ 67f6737b
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; display: block; z-index: 1; position: relative; shape-rendering: auto;" width="500" height="350" preserveAspectRatio="xMidYMid" viewBox="0 0 500 350">
<g transform=""><g transform="translate(628.6777727800563,-17.945962389307397) scale(100)" opacity="0.8">
<path d="M4.10125 0 C4.10125 0.5525000000000001 4.354191740445465 0.8338297787537277 4.183459851053307 1.3592885040068001 S3.642732300071845 1.963672376572347 3.3179809481802534 2.4106542659645056 S3.0325022679136753 3.233912152115209 2.5855203785215166 3.5586635040068004 S1.792814673433326 3.72978864806334 1.2673559481802534 3.9005205374554985 S0.5525000000000003 4.398750000000001 2.6934575538747103e-16 4.398750000000001 S-0.7418972229271803 4.071252426847657 -1.2673559481802528 3.900520537455499 S-2.1385384891293575 3.883414855898392 -2.585520378521516 3.5586635040068004 S-2.9932295962886615 2.8576361553566647 -3.317980948180253 2.410654265964506 S-4.012727961661149 1.884747229259873 -4.183459851053307 1.3592885040068006 S-4.10125 0.5525000000000007 -4.10125 5.022582685003083e-16 S-4.354191740445466 -0.833829778753727 -4.183459851053308 -1.3592885040067995 S-3.642732300071845 -1.9636723765723465 -3.3179809481802534 -2.410654265964505 S-3.0325022679136757 -3.2339121521152085 -2.585520378521517 -3.5586635040068 S-1.7928146734333263 -3.72978864806334 -1.2673559481802539 -3.9005205374554985 S-0.5525000000000009 -4.398750000000001 -8.080372661624131e-16 -4.398750000000001 S0.7418972229271799 -4.071252426847657 1.2673559481802523 -3.900520537455499 S2.138538489129357 -3.8834148558983923 2.5855203785215157 -3.558663504006801 S2.9932295962886615 -2.857636155356665 3.317980948180253 -2.4106542659645065 S4.012727961661148 -1.8847472292598735 4.183459851053307 -1.359288504006801 S4.10125 -0.5525000000000011 4.10125 -1.0045165370006166e-15" fill="#25B0F8" stroke-width="0" transform="rotate(19.0221)">
<animateTransform attributeName="transform" type="rotate" dur="10s" repeatCount="indefinite" values="0;36"></animateTransform>
</path>
</g><g transform="translate(704.4133273360676,-56.53515486716887) scale(100)" opacity="0.8">
<path d="M4.9215 0 C4.9215 0.6630000000000001 5.225030088534559 1.000595734504473 5.020151821263968 1.63114620480816 S4.371278760086214 2.3564068518868164 3.981577137816304 2.8927851191574065 S3.63900272149641 3.8806945825382506 3.1026244542258197 4.2703962048081605 S2.151377608119991 4.475746377676008 1.5208271378163039 4.680624644946598 S0.6630000000000005 5.2785 3.232149064649652e-16 5.2785 S-0.8902766675126164 4.885502912217189 -1.5208271378163034 4.680624644946598 S-2.5662461869552287 4.66009782707807 -3.102624454225819 4.2703962048081605 S-3.5918755155463935 3.429163386427997 -3.9815771378163034 2.892785119157407 S-4.815273553993378 2.2616966751118475 -5.020151821263968 1.6311462048081604 S-4.9215 0.6630000000000007 -4.9215 6.027099222003699e-16 S-5.2250300885345595 -1.0005957345044723 -5.020151821263969 -1.6311462048081593 S-4.371278760086214 -2.356406851886816 -3.981577137816304 -2.892785119157406 S-3.6390027214964102 -3.8806945825382497 -3.10262445422582 -4.27039620480816 S-2.1513776081199913 -4.475746377676008 -1.5208271378163045 -4.680624644946598 S-0.6630000000000011 -5.2785 -9.696447193948956e-16 -5.2785 S0.8902766675126157 -4.885502912217189 1.5208271378163027 -4.680624644946598 S2.5662461869552278 -4.66009782707807 3.1026244542258183 -4.2703962048081605 S3.5918755155463935 -3.4291633864279976 3.9815771378163034 -2.8927851191574074 S4.815273553993378 -2.261696675111848 5.020151821263968 -1.631146204808161 S4.9215 -0.6630000000000014 4.9215 -1.2054198444007398e-15" fill="#AF45F5" stroke-width="0" transform="rotate(2.04427)">
<animateTransform attributeName="transform" type="rotate" dur="5s" repeatCount="indefinite" values="0;36"></animateTransform>
</path>
</g></g>
</svg>
\ No newline at end of file
src/router/index.js
View file @ 67f6737b
......@@ -32,7 +32,14 @@ import Layout from "@/layout";
export const constantRoutes = [
{
path: "/map",
component: () => import('@/views/map.vue'),
name: 'mapIndex',
component: () => import('@/views/map/map-layout.vue'),
hidden: true,
},
{
path: "/map/detail",
name: 'mapDetail',
component: () => import('@/views/map/map-layout.vue'),
hidden: true,
},
{
......
src/views/map/components/index.js 0 → 100644
View file @ 67f6737b
export { default as mapItemContainer } from './map-item-container.vue';
export { default as mapTable } from './map-table.vue';
export { default as echartMap } from './map-item-pie.vue';
export { default as mapDetailTab } from './map-detail-tab.vue';
\ No newline at end of file
src/views/map/components/map-detail-tab.vue 0 → 100644
View file @ 67f6737b
<template>
<div class="tabs">
<div class="tabs-item" v-for="item in tabs" :key="item.title">
<div class="tabs-item-left">
<i class="tabs-item-icon" :class="item.icon"></i>
</div>
<div class="tabs-item-right">
<div class="tabs-item-right-title">{{ item.title }}</div>
<slot :name="item.name" />
</div>
</div>
</div>
</template>
<script>
export default {
props: {
tabs: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
@for $i from 0 through 5 {
.tabs-item:nth-child(#{$i + 1}) {
background: url("../../../assets/map/tabs-item#{$i}.svg")
left
top
no-repeat;
background-size: cover;
background-color: rgba(42, 132, 221, 1);
}
}
.tabs {
display: flex;
gap: 20px;
&-item {
width: 16%;
height: 120px;
display: flex;
align-items: center;
border-radius: 5px;
color: #fff;
padding: 0 20px;
gap: 20px;
&-left {
.tabs-item-icon {
font-size: 50px;
vertical-align: middle;
}
}
&-right {
flex: 1;
text-align: left;
&-title {
font-size: 17px;
font-weight: bold;
}
}
}
}
</style>
\ No newline at end of file
src/views/map/map-item-container.vue → src/views/map/components/map-item-container.vue
View file @ 67f6737b
......@@ -18,10 +18,9 @@ export default {
<style lang="scss" scoped>
.map-content-item {
width: 100%;
height: 34%;
overflow: hidden;
.map-content-inner {
height: 100%;
height: calc(100% - 30px);
padding: 10px;
text-align: center;
padding-left: 30px;
......@@ -30,12 +29,13 @@ export default {
.map-content-title {
width: 100%;
height: 40px;
background: url("../../assets/map/title.png") no-repeat;
background-size: 100% 100%;
background-image: url("../../../assets/map/title.png");
background-repeat: no-repeat;
font-size: 19px;
color: #fff;
padding-left: 64px;
font-weight: 500;
text-align: left;
}
}
</style>
\ No newline at end of file
src/views/pie.vue → src/views/map/components/map-item-pie.vue
View file @ 67f6737b
......@@ -10,7 +10,7 @@ export default {
return {
chartData: [
{
name: "危运",
name: "重大风险",
value: 40,
number: 120,
itemStyle: {
......@@ -21,7 +21,7 @@ export default {
},
},
{
name: "包车",
name: "较大风险",
value: 30,
number: 80,
itemStyle: {
......@@ -32,7 +32,7 @@ export default {
},
},
{
name: "班车",
name: "一般风险",
value: 20,
number: 60,
itemStyle: {
......@@ -43,7 +43,7 @@ export default {
},
},
{
name: "重货",
name: "低风险",
value: 10,
number: 10,
itemStyle: {
......
src/views/map/map-table.vue → src/views/map/components/map-table.vue
View file @ 67f6737b
<template>
<div class="map-table-container" ref="mapTableContainer">
<ul class="map-table-list" ref="mapTableList">
<li class="map-table-list-item" v-for="item in 10" :key="item">
<div class="serial">{{ item }}</div>
<div class="name">高德大厦</div>
<div class="province">广东区域</div>
<div class="city">珠海市</div>
<div class="num">22</div>
</li>
</ul>
<div><slot name="header" /></div>
<div class="map-table-container-box">
<ul class="map-table-list" ref="mapTableList">
<li
class="map-table-list-item"
v-for="(item, index) in tableList"
:key="index"
>
<div class="serial">{{ index + 1 }}</div>
<div
v-for="(key, value) of item"
:key="value + index"
class="map-table-list-item-value"
:style="[{ '--text-color': key.color, '--text-w': key.width }]"
>
{{ key.name }}
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
tableList: {
type: Array,
default: () => [],
},
},
data() {
return {
mapTableListHeight: 0,
......@@ -22,26 +39,31 @@ export default {
};
},
mounted() {
this.getHeight();
this.compareH();
setTimeout(() => {
this.getHeight();
this.compareH();
}, 700);
},
methods: {
// 获取map-table-list的高度
getHeight() {
// 获取map-table-list的高度
let mapTableContainer = this.$refs.mapTableContainer;
this.mapTableContainerHeight = mapTableContainer.offsetHeight;
this.mapTableContainerHeight = mapTableContainer.offsetHeight - 50;
let mapTableList = this.$refs.mapTableList;
this.mapTableListHeight = mapTableList.offsetHeight;
},
// 比较map-table-list高度
compareH() {
let mapTableList = this.$refs.mapTableList;
this.mapTableListHeight = mapTableList.offsetHeight;
console.log(this.mapTableContainerHeight, this.mapTableListHeight);
if (this.mapTableContainerHeight < this.mapTableListHeight) {
console.log(this.mapTableContainerHeight, this.mapTableListHeight);
// 添加定时器滚动map-table-list-item
setInterval(() => {
this.h -= 25;
if (Math.abs(this.h) > this.mapTableListHeight) {
if (
Math.abs(this.h) + this.mapTableContainerHeight >
this.mapTableListHeight
) {
this.h = 0;
}
this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `;
......@@ -54,8 +76,13 @@ export default {
<style lang="scss" scoped>
.map-table-container {
--text-w: 20%;
height: 100%;
overflow: auto;
overflow: hidden;
&-box {
height: 100%;
overflow: auto;
}
}
.map-table-list {
transition: all 1s;
......@@ -75,6 +102,7 @@ export default {
rgba(9, 60, 106, 1) 100%,
rgba(9, 60, 106, 1) 100%
);
font-size: 14px;
.serial {
width: 40px;
height: 100%;
......@@ -101,6 +129,7 @@ export default {
text-overflow: ellipsis;
overflow: hidden;
margin-left: 18px;
font-weight: bold;
}
.province,
.city,
......@@ -118,6 +147,10 @@ export default {
color: rgba(217, 0, 27, 0.9);
font-size: 12px;
}
&-value {
width: var(--text-w);
color: var(--text-color);
}
}
&-item:hover {
background: rgba(255, 166, 0, 0.802);
......@@ -134,4 +167,7 @@ export default {
}
}
}
::-webkit-scrollbar {
display: none;
}
</style>
\ No newline at end of file
src/views/map/index.js deleted 100644 → 0
View file @ cb4d07f1
export { default as mapItemContainer } from './map-item-container.vue';
export { default as mapTable } from './map-table.vue';
\ No newline at end of file
src/views/map/map-detail.vue 0 → 100644
View file @ 67f6737b
<template>
<div class="map-detail">
<map-item-container title="香格里拉国际大厦">
<map-detail-tab :tabs="tabs">
<template #tab1>
<div class="tab1">
<div class="tab1-year">2023年</div>
<div class="tab1-time">05-26 16:25</div>
</div>
</template>
<template #tab2>
<div class="tab2">
<div class="tab2-item">
<span>楼宇</span>
<span>共25栋</span>
</div>
<div class="tab2-item">
<span>楼层</span>
<span>共25栋</span>
</div>
</div>
</template>
<template #tab3>
<div class="tab3">
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
</template>
<template #tab4>
<div class="tab4">
<div class="tab4-item">
<span class="title">固有风险</span>
<span>256</span>
</div>
<div class="tab4-item">
<span class="title">现状风险</span>
<span>960</span>
</div>
</div>
</template>
<template #tab5>
<div class="tab5">
<div class="tab5-item">
<span>重大</span>
<span>36</span>
</div>
<div class="tab5-item">
<span>较大</span>
<span>36</span>
</div>
<div class="tab5-item">
<span>一般</span>
<span>36</span>
</div>
<div class="tab5-item">
<span>低</span>
<span>36</span>
</div>
</div>
</template>
<template #tab6>
<div class="tab6">
<div class="tab6-item">
<span>较大</span>
<span>36</span>
</div>
<div class="tab6-item">
<span>重大</span>
<span>30</span>
</div>
<div class="tab6-item">
<span>一般</span>
<span>15</span>
</div>
<div class="tab6-item">
<span>低</span>
<span>36</span>
</div>
</div>
</template>
</map-detail-tab>
</map-item-container>
<map-item-container title="项目风险信息" class="map-detail-info-container">
<el-form :inline="true" :model="formInline" class="map-detail-filter">
<el-form-item label="选择位置">
<el-select
v-model="formInline.position"
placeholder="地上"
style="width: 100px"
>
<el-option label="地上" value="shanghai"></el-option>
<el-option label="底下" value="beijing"></el-option>
</el-select>
<el-select
v-model="formInline.position1"
placeholder="1层"
style="width: 100px"
>
<el-option label="1层" value="shanghai"></el-option>
<el-option label="2层" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="风险类型">
<el-select v-model="formInline.present" placeholder="固有风险">
<el-option label="固有风险" value="固有风险"></el-option>
<el-option label="现状风险" value="现状风险"></el-option>
</el-select>
</el-form-item>
<el-form-item label="风险等级">
<el-select v-model="formInline.level" placeholder="重大风险">
<el-option label="重大风险" value="重大风险"></el-option>
<el-option label="较大风险" value="较大风险"></el-option>
<el-option label="一般风险" value="一般风险"></el-option>
<el-option label="低风险" value="低风险"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" @click="onSubmit"
>查询</el-button
>
<el-button plain class="cancel-btn" @click="onSubmit">重置</el-button>
</el-form-item>
</el-form>
<div class="map-detail-info">
<div class="map-detail-info-table">
<map-table :tableList="tableList" class="info-map-table">
<template #header>
<ul class="info-table-header">
<li style="text-align: center; width: 15%">序号</li>
<li>风险名称</li>
<li style="width: 30%">风险类型</li>
<li>风险等级</li>
<li style="text-align: center">操作</li>
</ul>
</template>
</map-table>
</div>
<div class="map-detail-info-img"></div>
</div>
</map-item-container>
</div>
</template>
<script>
import { mapItemContainer, mapDetailTab, mapTable } from "./components";
export default {
components: { mapItemContainer, mapDetailTab, mapTable },
data() {
return {
formInline: {},
tableList: [],
tabs: [
{
title: "评估时间（最新）",
icon: "el-icon-basketball",
name: "tab1",
},
{
title: "评估数据",
icon: "el-icon-basketball",
name: "tab2",
},
{
title: "风险总数量",
icon: "el-icon-basketball",
name: "tab3",
},
{
title: "",
icon: "el-icon-basketball",
name: "tab4",
},
{
title: "风险等级（固有）",
icon: "el-icon-basketball",
name: "tab5",
},
{
title: "风险等级（现状）",
icon: "el-icon-basketball",
name: "tab6",
},
],
};
},
mounted() {
this.getTableList();
},
methods: {
getTableList() {
for (let i = 0; i < 30; i++) {
this.tableList.push({
colunm1: {
name: i % 2 == 0 ? "火灾" : i % 3 === 0 ? "触电" : "其他",
color: "#fff",
},
colunm2: {
name: "固有",
color: "rgb(0, 255, 186)",
width: "30%",
},
colunm3: {
name: "一般风险",
color: "rgb(255, 234, 0)",
},
colunm4: {
name: "详情",
color: "rgb(2, 167, 240)",
},
});
}
},
},
};
</script>
<style lang="scss" scoped>
.map-detail {
width: calc(100% - 100px);
margin: 0 auto;
display: flex;
flex-direction: column;
height: 100%;
.map-detail-info-container {
flex: 1;
}
.map-detail-filter {
text-align: left;
::v-deep .el-input__inner {
background: transparent;
color: #fff;
border-color: rgb(15, 134, 235);
}
::v-deep .el-form-item__label {
font-size: 16px;
color: #fff;
}
.search-btn {
background: linear-gradient(
-90deg,
rgb(35, 255, 226) 0%,
rgb(15, 134, 235) 100%
);
}
.cancel-btn {
background: transparent;
border-image: linear-gradient(
-90deg,
rgb(35, 255, 226) 0%,
rgb(15, 134, 235) 100%
)
5 5;
color: #fff;
padding-top: 9px;
padding-bottom: 9px;
clip-path: inset(0 round 3px);
}
}
.map-detail-info {
height: calc(100% - 100px);
display: grid;
grid-template-columns: 23% 73%;
gap: 20px;
box-sizing: border-box;
&-table {
height: 100%;
overflow: auto;
}
&-img {
height: 100%;
border: 1px solid rgb(15, 134, 235);
border-radius: 10px;
box-sizing: border-box;
}
}
.info-table-header {
display: flex;
background: rgba(0, 150, 255, 0.298);
padding-left: 0;
margin-bottom: 5px;
margin-top: 0;
li {
width: 20%;
color: rgb(201, 229, 255);
font-weight: 400;
text-align: center;
font-size: 14px;
padding: 5px 0;
}
}
}
ul,
li {
list-style: none;
}
::-webkit-scrollbar {
display: none;
}
.tab1 {
&-year {
opacity: 0.8;
font-size: 14px;
margin: 5px 0;
}
&-time {
font-size: 27px;
font-weight: bold;
}
}
.tab2 {
.tab2-item {
display: flex;
justify-content: space-between;
background: linear-gradient(
90deg,
rgba(0, 125, 183, 0.4) 30%,
rgba(0, 0, 0, 0) 70%
);
padding: 3px 10px;
margin: 10px 0;
font-size: 14px;
font-weight: 500;
}
}
.tab3 {
margin-top: 10px;
span {
display: inline-block;
background-color: rgba(35, 145, 255, 0.098);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgb(35, 145, 255);
border-radius: 10px;
box-shadow: none;
font-family: "DIN ", DIN, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 28px;
color: rgb(255, 255, 255);
width: 32px;
height: 43px;
line-height: 43px;
text-align: center;
margin-right: 10px;
}
}
.tab4 {
.tab4-item {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(
90deg,
rgba(0, 125, 183, 0.4) 30%,
rgba(0, 0, 0, 0) 70%
);
padding: 0 10px;
margin: 10px 0;
font-size: 14px;
font-weight: 500;
border-radius: 40px;
height: 30px;
line-height: 30px;
.title {
&:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgb(0, 125, 183);
margin-right: 10px;
}
}
}
.tab4-item:first-child {
background: linear-gradient(
90deg,
rgba(243, 90, 76, 0.6) 30%,
rgba(0, 0, 0, 0) 70%
);
.title:before {
background-color: rgb(243, 90, 76);
}
}
.tab4-item:last-child {
background: linear-gradient(
90deg,
rgba(234, 156, 71, 0.6) 30%,
rgba(0, 0, 0, 0) 70%
);
.title:before {
background-color: rgb(234, 156, 71);
}
}
}
.tab5,
.tab6 {
display: flex;
flex-wrap: wrap;
font-size: 14px;
.tab5-item,
.tab6-item {
width: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: rgba($color: #fff, $alpha: 0.3);
padding: 3px 10px;
margin-right: 10px;
margin-top: 8px;
position: relative;
&::before {
content: "";
display: block;
width: 5px;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
}
.tab5-item:nth-of-type(1),
.tab6-item:nth-of-type(1) {
&::before {
background-color: red;
}
}
.tab5-item:nth-of-type(2),
.tab6-item:nth-of-type(2) {
&::before {
background-color: rgb(245, 154, 35);
}
}
.tab5-item:nth-of-type(3),
.tab6-item:nth-of-type(3) {
&::before {
background-color: rgb(255, 255, 0);
}
}
.tab5-item:nth-of-type(4),
.tab6-item:nth-of-type(4) {
&::before {
background-color: rgb(2, 167, 240);
}
}
}
</style>
\ No newline at end of file
src/views/map.vue → src/views/map/map-index.vue
View file @ 67f6737b
<template>
<div class="map-layout">
<div class="map-header">
<div class="map-header-center">
<div class="map-header-center-title">融通地产危险源辨识系统</div>
<div class="map-header-center-tip">
Rongtong Real Estate Hazard Identification System
</div>
<div class="map-index">
<div class="map-index-left">
<div class="map-index-left-wrap">
<map-item-container title="评估数据统计">
<div class="content-assess-tab">
<div class="active">评估</div>
<div>巡查</div>
</div>
<div
v-for="item in 3"
:key="item"
style="width: 30%; display: inline-block"
class="content-assess-item"
>
<div class="content-assess-title">评估项目</div>
<div :id="'leftTop' + item" style="height: 100%"></div>
<div class="content-assess-num">
<div class="content-assess-num-txt">100<span>栋</span></div>
</div>
</div>
</map-item-container>
<map-item-container title="项目风险排名">
<mapTable :tableList="tableList" />
</map-item-container>
<map-item-container title="项目风险排名">
<div ref="bar" style="width: 100%; height: 100%"></div>
</map-item-container>
</div>
</div>
<div class="map-content">
<div class="map-content-left">
<div class="map-content-left-wrap">
<map-item-container title="评估数据统计">
<div ref="myEchart" class="echart-instance"></div>
<div class="map-index-right">
<div class="map-index-right-wrap">
<map-item-container title="风险级别统计">
<echartMap />
</map-item-container>
<map-item-container title="事故类型统计">
<div style="columns: 4">
<div
v-for="item in 3"
v-for="item in 10"
:key="item"
style="width: 30%; display: inline-block"
class="content-assess-item"
:style="randomCircle()"
class="map-circle-item"
>
<div class="content-assess-title">评估项目</div>
<div :id="'leftTop' + item" style="height: 100%"></div>
</div>
</map-item-container>
<map-item-container title="项目风险排名">
<mapTable />
</map-item-container>
<map-item-container title="项目风险排名">
<div ref="bar" style="width: 100%; height: 100%"></div>
</map-item-container>
</div>
</div>
<div ref="myEchart" class="echart-instance"></div>
<div class="map-content-right">
<div class="map-content-right-wrap">
<map-item-container title="风险级别统计">
<echartMap />
</map-item-container>
<map-item-container title="事故类型统计">
<div style="columns: 4">
<div
v-for="item in 10"
:key="item"
:style="randomCircle()"
class="map-circle-item"
>
<div>物体打击</div>
<div>1455</div>
</div>
<div>物体打击</div>
<div>1455</div>
</div>
</map-item-container>
<map-item-container title="项目风险排名">
<div ref="bar1" style="width: 100%; height: 100%"></div>
</map-item-container>
</div>
</div>
</map-item-container>
<map-item-container title="项目风险排名">
<div ref="bar1" style="width: 100%; height: 100%"></div>
</map-item-container>
</div>
</div>
<div class="map-footer"></div>
</div>
</template>
......@@ -64,14 +59,11 @@
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";
import echartMap from "./pie.vue";
import echartMap2 from "./pie2.vue";
import { mapTable, mapItemContainer } from "@/views/map/index.js";
import { mapTable, mapItemContainer, echartMap } from "./components/index";
export default {
name: "echarts",
components: {
echartMap,
echartMap2,
mapTable,
mapItemContainer,
},
......@@ -81,6 +73,8 @@ export default {
myMap: null,
mapData: [],
myTopLeft: [],
tableList: [],
level: "",
};
},
mounted() {
......@@ -88,8 +82,32 @@ export default {
this.initMap();
this.initListeners();
this.initEcharts();
this.getTableList();
},
methods: {
getTableList() {
for (let i = 0; i < 30; i++) {
this.tableList.push({
colunm1: {
name: i % 2 == 0 ? "高德大厦" : "碧桂园大厦",
color: "#fff",
width: "30%",
},
colunm2: {
name: "北京地区",
color: "rgb(0, 255, 186)",
},
colunm3: {
name: "天津市",
color: "rgb(255, 234, 0)",
},
colunm4: {
name: "22",
color: "red",
},
});
}
},
randomCircle() {
const w = parseInt(Math.random() * 40 + 50);
let r = Math.floor(Math.random() * 256); //0-255.999999
......@@ -117,8 +135,36 @@ export default {
}
echarts.registerMap(this.name, { geoJSON: geoJson.data });
this.mapData = geoJson.data.features;
this.level = this.mapData[0].properties.level;
var regions = [];
this.mapData.forEach(function (feature) {
if (feature.properties.center && feature.properties.center.length) {
regions.push({
name: feature.properties.name,
value: [...feature.properties.center, Math.random() * 10],
});
}
});
this.myMap.setOption(
{
geo3D: {
map: this.name,
show: false,
boxWidth: 85,
regionHeight: 4,
viewControl: {
alpha: 60,
},
},
xAxis3D: {
name: "protein",
},
yAxis3D: {
name: "fiber",
},
zAxis3D: {
name: "sodium",
},
series: [
{
type: "map3D",
......@@ -143,10 +189,17 @@ export default {
borderWidth: 2,
borderColor: "#2cb0e2",
color: "rgba(0, 0, 0, 0.3)",
// opacity: 0.6,
shadowColor: "rgba(0, 0, 0, 1)",
shadowBlur: 1,
},
data: regions,
},
{
type: "scatter3D",
coordinateSystem: "geo3D",
symbolSize: 20,
data: regions,
zlevel: 1,
},
],
},
......@@ -159,6 +212,9 @@ export default {
initListeners() {
const _this = this;
this.myMap.on("click", "series.map3D", function (params) {
if (_this.level == "district") {
_this.$router.push("/map/detail");
}
const selectData = _this.mapData.find(
(x) => x.properties.name == params.name
);
......@@ -280,17 +336,17 @@ export default {
];
const data = [
[1, 0, 5],
[1, 17, 4],
[1, 16, 7],
[1, 1, 3],
[1, 13, 4],
[1, 8, 11],
[1, 20, 3],
[0, 16, 14],
[0, 10, 2],
[0, 6, 0],
[0, 3, 12],
[0, 20, 16],
[0.1, 17, 4],
[0.1, 16, 7],
[0.1, 1, 3],
[0.1, 13, 4],
[0.1, 8, 11],
[0.1, 20, 3],
[0.1, 16, 14],
[0.1, 10, 2],
[0.1, 6, 0],
[0.1, 3, 12],
[0.1, 20, 16],
];
const option = {
visualMap: {
......@@ -315,23 +371,38 @@ export default {
xAxis3D: {
type: "category",
data: hours,
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.3)",
},
},
},
yAxis3D: {
type: "value",
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.3)",
},
},
},
zAxis3D: {
type: "value",
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.3)",
},
},
},
grid3D: {
boxWidth: 150,
boxHeight: 80,
boxWidth: 200,
boxHeight: 100,
boxDepth: 90,
viewControl: {
alpha: 15,
alpha: 0,
beta: 0,
},
axisLine: {
lineStyle: { color: "rgba(255,255,255,0.3)" },
lineStyle: { color: "rgba(255,255,255,0.1)" },
},
light: {
main: {
......@@ -356,7 +427,7 @@ export default {
borderWidth: 1,
},
itemStyle: {
opacity: 0.8,
opacity: 1,
},
emphasis: {
label: {
......@@ -423,107 +494,73 @@ export default {
</script>
<style lang="scss" scoped>
.map-layout {
.map-index {
width: 100%;
height: 100%;
background: #000;
background: url("../assets/map/bg.png") no-repeat;
background-size: 100% 100%;
.map-header {
height: 83px;
z-index: 10;
color: #fff;
padding: 5px 16px;
background: url("../assets/map/top.png") no-repeat;
background-size: 100% 100%;
box-shadow: border-box;
&-center {
text-align: center;
&-title {
text-shadow: 0px 0px 10px rgba(21, 203, 249, 1);
font-weight: 700;
font-size: 24px;
}
&-tip {
font-family: "微软雅黑", sans-serif;
font-size: 16px;
color: rgba(215, 215, 215, 0.4);
}
}
}
.map-footer {
background: url("../assets/map/bottom.png") no-repeat;
background-size: 100% 100%;
height: 44px;
}
.map-content {
width: 100%;
height: calc(100% - 128px);
&-left,
&-right {
width: 25%;
height: 100%;
float: left;
position: relative;
}
&-left::after,
&-right::after {
content: "";
width: 44px;
height: 84%;
background: url("../assets/map/hud-left.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 50%;
z-index: 10;
transform: translateY(-52%);
}
&-right::after {
background-image: url("../assets/map/hud-right.png");
position: absolute;
right: 0;
left: auto;
}
&-left-wrap {
margin-left: 20px;
height: 100%;
}
&-right-wrap {
margin-right: 40px;
height: 100%;
}
}
.echart-instance {
width: 50%;
&-left,
&-right {
width: 25%;
height: 100%;
margin: 0 auto;
float: left;
position: relative;
}
.map-circle-item {
border-radius: 50%;
animation: circleAnimation 0.5s infinite;
margin: 10px;
break-inside: avoid;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.map-circle-item:nth-of-type(2n) {
animation: circleAnimation 0.4s infinite;
}
.map-circle-item:nth-of-type(2n + 1) {
animation: circleAnimation 0.3s infinite;
// &-left::after,
// &-right::after {
// content: "";
// width: 44px;
// height: 84%;
// background: url("../../assets/map/hud-left.png") no-repeat;
// background-size: 100% 100%;
// position: absolute;
// left: 0;
// top: 50%;
// z-index: 10;
// transform: translateY(-52%);
// }
// &-right::after {
// background-image: url("../../assets/map/hud-right.png");
// position: absolute;
// right: 0;
// left: auto;
// }
&-left-wrap {
margin-left: 20px;
height: 100%;
}
.map-circle-item:last-child {
animation: circleAnimation 0.6s infinite;
&-right-wrap {
margin-right: 40px;
height: 100%;
}
}
.echart-instance {
width: 50%;
height: 100%;
margin: 0 auto;
float: left;
}
.map-circle-item {
border-radius: 50%;
animation: circleAnimation 0.5s infinite;
margin: 10px;
break-inside: avoid;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
}
.map-circle-item:nth-of-type(2n) {
animation: circleAnimation 1s infinite;
}
.map-circle-item:nth-of-type(2n + 1) {
animation: circleAnimation 1.3s infinite;
}
.map-circle-item:last-child {
animation: circleAnimation 1.6s infinite;
}
@keyframes circleAnimation {
0% {
transform: translateY(0);
......@@ -544,15 +581,57 @@ export default {
.content-assess-item {
display: inline-block;
width: 40%;
text-align: center;
.content-assess-title {
height: 60px;
width: 100%;
background: url("../assets/map/content-assess-title.png") center center;
background: url("../../assets/map/content-assess-title.png") center center;
background-size: 100% 100%;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: bold;
font-size: 12px;
}
.content-assess-num {
width: 100%;
height: 30px;
margin: 0 auto;
background: url("../../assets/map/content-assess-bottom.png") center center;
background-size: 100% 100%;
font-size: 22px;
color: #48aefb;
position: relative;
&-txt {
display: inline-block;
transform: translateY(-25px);
}
}
}
.content-assess-tab {
font-size: 10px;
color: #fff;
text-align: left;
& > div {
display: inline-block;
width: 45px;
text-align: center;
border: 1px solid transparent;
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
}
& > .active {
border-radius: 50%;
border-image: linear-gradient(90deg, #48aefb, #87cafc) 1 1;
}
}
.map-index {
.map-content-item {
height: 34%;
}
}
::v-deep .map-content-title {
background-size: 100% 100%;
}
</style>
src/views/map/map-layout.vue 0 → 100644
View file @ 67f6737b
<template>
<div class="map-layout">
<div class="map-header">
<!-- <div ><el-input /></div> -->
<div class="map-header-center">
<div class="map-header-center-title">融通地产危险源辨识系统</div>
<div class="map-header-center-tip">
Rongtong Real Estate Hazard Identification System
</div>
</div>
</div>
<div class="map-content">
<div class="map-content-left"></div>
<mapDetail v-if="$route.name == 'mapDetail'" />
<mapIndex v-if="$route.name == 'mapIndex'" />
<div class="map-content-right"></div>
</div>
<div class="map-footer"></div>
</div>
</template>
<script>
import mapIndex from "./map-index.vue";
import mapDetail from "./map-detail.vue";
export default {
name: "echarts",
components: { mapIndex, mapDetail },
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.map-layout {
width: 100%;
height: 100%;
background: #000;
background: url("../../assets/map/bg.png") no-repeat;
background-size: 100% 100%;
.map-header {
height: 83px;
z-index: 10;
color: #fff;
padding: 5px 16px;
background: url("../../assets/map/top.png") no-repeat;
background-size: 100% 100%;
box-shadow: border-box;
&-center {
text-align: center;
&-title {
text-shadow: 0px 0px 10px rgba(21, 203, 249, 1);
font-weight: 700;
font-size: 24px;
}
&-tip {
font-family: "微软雅黑", sans-serif;
font-size: 16px;
color: rgba(215, 215, 215, 0.4);
}
}
}
.map-footer {
background: url("../../assets/map/bottom.png") no-repeat;
background-size: 100% 100%;
height: 44px;
}
.map-content {
width: 100%;
height: calc(100% - 128px);
position: relative;
&-left::after,
&-right::after {
content: "";
width: 44px;
height: 84%;
background: url("../../assets/map/hud-left.png") no-repeat;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 50%;
z-index: 10;
transform: translateY(-52%);
}
&-right::after {
background-image: url("../../assets/map/hud-right.png");
position: absolute;
right: 0;
left: auto;
}
}
}
::-webkit-scrollbar {
display: none;
}
</style>
src/views/pie2.vue deleted 100644 → 0
View file @ cb4d07f1
<template>
<div ref="myEchart" style="width: 100%; height: 180px"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
export default {
data() {
return {
pieChart: [
{
name: "a",
value: 25,
itemStyle: {
color: "#00d8ff",
},
},
{
name: "b",
value: 5,
itemStyle: {
color: "#018ef1",
},
},
{
name: "c",
value: 4,
itemStyle: {
color: "#f8bc87",
},
},
{
name: "d",
value: 3,
itemStyle: {
color: "#ffa130",
},
},
{
name: "e",
value: 2,
itemStyle: {
color: "#c23531",
},
},
{
name: "f",
value: 1,
itemStyle: {
color: "#fd5d48",
},
},
],
};
},
mounted() {
// this.getPie3D(this.pieChart, 0.59);
this.myMap = echarts.init(this.$refs.myEchart);
this.myMap.setOption(this.getPie3D(this.pieChart, 0.71));
},
methods: {
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return (
offsetX +
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return (
offsetY +
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u);
}
return Math.sin(v) > 0 ? 1 : -1;
},
};
},
// 生成模拟 3D 饼图的配置项
getPie3D(pieData, internalDiameterRatio) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k =
typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name:
typeof pieData[i].name === "undefined"
? `series${i}`
: pieData[i].name,
type: "surface",
parametric: true,
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k,
},
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
typeof pieData[i].itemStyle.color != "undefined"
? (itemStyle.color = pieData[i].itemStyle.color)
: null;
typeof pieData[i].itemStyle.opacity != "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = this.getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
true,
false,
1
);
startValue = endValue;
legendData.push(series[i].name);
}
// 补充一个透明的圆环，用于支撑高亮功能的近似实现。
series.push({
name: "mouseoutSeries",
type: "surface",
parametric: true,
wireframe: {
show: false,
},
itemStyle: {
opacity: 1,
color: "rgba(18,236,252,.5)",
},
parametricEquation: {
u: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
v: {
min: 0,
max: Math.PI,
step: Math.PI / 1.4,
},
x: function (u, v) {
return Math.sin(v) * Math.sin(u) + Math.sin(u);
},
y: function (u, v) {
return Math.sin(v) * Math.cos(u) + Math.cos(u);
},
z: function (u, v) {
return Math.cos(v) > 0 ? 0.1 : -0.1;
},
},
});
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
//animation: false,
legend: {
show: true,
data: legendData,
},
tooltip: {
formatter: (params) => {
if (params.seriesName !== "mouseoutSeries") {
return `${
params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
params.color
};"></span>${option.series[params.seriesIndex].pieData.value}`;
}
},
},
xAxis3D: {
min: -1.3,
max: 1.3,
},
yAxis3D: {
min: -1.3,
max: 1.3,
},
zAxis3D: {
min: -1.3,
max: 1.3,
},
grid3D: {
show: false,
boxHeight: 10,
// top: '30%',
left: "0",
bottom: "50%",
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 20,
// beta: 40,
rotateSensitivity: 0,
zoomSensitivity: 0,
panSensitivity: 0,
autoRotate: true,
// autoRotateSpeed: 5,
// autoRotateAfterStill: 10
},
},
series: series,
};
return option;
},
},
// 传入数据生成 option
};
</script>
<style lang="scss" scoped></style>
vue.config.js
View file @ 67f6737b
......@@ -57,7 +57,7 @@ module.exports = {
pxtorem({
rootValue: 192,//这个尺寸可以根据自己的图去配置，这里配置的是宽度375的图（如果用了vant插件）
propList: ['*'],
exclude: /(element-ui|node_modules)/
exclude: /(element-ui|node_modules|layout|assets)/
})
]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment