Skip to content

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

添加大屏

parent cb4d07f1
Expand all 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
This diff is collapsed.
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"; ...@@ -32,7 +32,14 @@ import Layout from "@/layout";
export const constantRoutes = [ export const constantRoutes = [
{ {
path: "/map", 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, 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 { ...@@ -18,10 +18,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.map-content-item { .map-content-item {
width: 100%; width: 100%;
height: 34%;
overflow: hidden; overflow: hidden;
.map-content-inner { .map-content-inner {
height: 100%; height: calc(100% - 30px);
padding: 10px; padding: 10px;
text-align: center; text-align: center;
padding-left: 30px; padding-left: 30px;
...@@ -30,12 +29,13 @@ export default { ...@@ -30,12 +29,13 @@ export default {
.map-content-title { .map-content-title {
width: 100%; width: 100%;
height: 40px; height: 40px;
background: url("../../assets/map/title.png") no-repeat; background-image: url("../../../assets/map/title.png");
background-size: 100% 100%; background-repeat: no-repeat;
font-size: 19px; font-size: 19px;
color: #fff; color: #fff;
padding-left: 64px; padding-left: 64px;
font-weight: 500; font-weight: 500;
text-align: left;
} }
} }
</style> </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 { ...@@ -10,7 +10,7 @@ export default {
return { return {
chartData: [ chartData: [
{ {
name: "危运", name: "重大风险",
value: 40, value: 40,
number: 120, number: 120,
itemStyle: { itemStyle: {
...@@ -21,7 +21,7 @@ export default { ...@@ -21,7 +21,7 @@ export default {
}, },
}, },
{ {
name: "包车", name: "较大风险",
value: 30, value: 30,
number: 80, number: 80,
itemStyle: { itemStyle: {
...@@ -32,7 +32,7 @@ export default { ...@@ -32,7 +32,7 @@ export default {
}, },
}, },
{ {
name: "班车", name: "一般风险",
value: 20, value: 20,
number: 60, number: 60,
itemStyle: { itemStyle: {
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
}, },
}, },
{ {
name: "重货", name: "低风险",
value: 10, value: 10,
number: 10, number: 10,
itemStyle: { itemStyle: {
......
src/views/map/map-table.vue → src/views/map/components/map-table.vue
View file @ 67f6737b
<template> <template>
<div class="map-table-container" ref="mapTableContainer"> <div class="map-table-container" ref="mapTableContainer">
<ul class="map-table-list" ref="mapTableList"> <div><slot name="header" /></div>
<li class="map-table-list-item" v-for="item in 10" :key="item"> <div class="map-table-container-box">
<div class="serial">{{ item }}</div> <ul class="map-table-list" ref="mapTableList">
<div class="name">高德大厦</div> <li
<div class="province">广东区域</div> class="map-table-list-item"
<div class="city">珠海市</div> v-for="(item, index) in tableList"
<div class="num">22</div> :key="index"
</li> >
</ul> <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> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
tableList: {
type: Array,
default: () => [],
},
},
data() { data() {
return { return {
mapTableListHeight: 0, mapTableListHeight: 0,
...@@ -22,26 +39,31 @@ export default { ...@@ -22,26 +39,31 @@ export default {
}; };
}, },
mounted() { mounted() {
this.getHeight(); setTimeout(() => {
this.compareH(); this.getHeight();
this.compareH();
}, 700);
}, },
methods: { methods: {
// 获取map-table-list的高度 // 获取map-table-list的高度
getHeight() { getHeight() {
// 获取map-table-list的高度 // 获取map-table-list的高度
let mapTableContainer = this.$refs.mapTableContainer; 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高度 // 比较map-table-list高度
compareH() { compareH() {
let mapTableList = this.$refs.mapTableList; console.log(this.mapTableContainerHeight, this.mapTableListHeight);
this.mapTableListHeight = mapTableList.offsetHeight;
if (this.mapTableContainerHeight < this.mapTableListHeight) { if (this.mapTableContainerHeight < this.mapTableListHeight) {
console.log(this.mapTableContainerHeight, this.mapTableListHeight);
// 添加定时器滚动map-table-list-item // 添加定时器滚动map-table-list-item
setInterval(() => { setInterval(() => {
this.h -= 25; this.h -= 25;
if (Math.abs(this.h) > this.mapTableListHeight) { if (
Math.abs(this.h) + this.mapTableContainerHeight >
this.mapTableListHeight
) {
this.h = 0; this.h = 0;
} }
this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `; this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `;
...@@ -54,8 +76,13 @@ export default { ...@@ -54,8 +76,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.map-table-container { .map-table-container {
--text-w: 20%;
height: 100%; height: 100%;
overflow: auto; overflow: hidden;
&-box {
height: 100%;
overflow: auto;
}
} }
.map-table-list { .map-table-list {
transition: all 1s; transition: all 1s;
...@@ -75,6 +102,7 @@ export default { ...@@ -75,6 +102,7 @@ export default {
rgba(9, 60, 106, 1) 100%, rgba(9, 60, 106, 1) 100%,
rgba(9, 60, 106, 1) 100% rgba(9, 60, 106, 1) 100%
); );
font-size: 14px;
.serial { .serial {
width: 40px; width: 40px;
height: 100%; height: 100%;
...@@ -101,6 +129,7 @@ export default { ...@@ -101,6 +129,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
margin-left: 18px; margin-left: 18px;
font-weight: bold;
} }
.province, .province,
.city, .city,
...@@ -118,6 +147,10 @@ export default { ...@@ -118,6 +147,10 @@ export default {
color: rgba(217, 0, 27, 0.9); color: rgba(217, 0, 27, 0.9);
font-size: 12px; font-size: 12px;
} }
&-value {
width: var(--text-w);
color: var(--text-color);
}
} }
&-item:hover { &-item:hover {
background: rgba(255, 166, 0, 0.802); background: rgba(255, 166, 0, 0.802);
...@@ -134,4 +167,7 @@ export default { ...@@ -134,4 +167,7 @@ export default {
} }
} }
} }
::-webkit-scrollbar {
display: none;
}
</style> </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
This diff is collapsed.
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 = { ...@@ -57,7 +57,7 @@ module.exports = {
pxtorem({ pxtorem({
rootValue: 192,//这个尺寸可以根据自己的图去配置，这里配置的是宽度375的图（如果用了vant插件） rootValue: 192,//这个尺寸可以根据自己的图去配置，这里配置的是宽度375的图（如果用了vant插件）
propList: ['*'], 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