BIM应用大屏开发

dev_xd
lj7788@126.com 2025-06-14 17:01:14 +08:00
parent 361b58fda6
commit d973ac872e
10 changed files with 584 additions and 76 deletions

View File

@ -25,6 +25,8 @@
<script src="/cdn/element-ui/lib/index.js"></script> <script src="/cdn/element-ui/lib/index.js"></script>
<script src="/cdn/jquery/3.5.1/jquery.min.js"></script> <script src="/cdn/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script> <script src="./js/echarts.min.js"></script>
<script src="./js/echarts-liquidfill.min.js"></script>
<link rel="stylesheet" href="/cesium/Widgets/widgets.css" /> <link rel="stylesheet" href="/cesium/Widgets/widgets.css" />
<script src="/cesium/jquery-3.0.0.min.js"></script> <script src="/cesium/jquery-3.0.0.min.js"></script>
<script src="/cesium/Cesium.js?v=20230913"></script> <script src="/cesium/Cesium.js?v=20230913"></script>

File diff suppressed because one or more lines are too long

View File

@ -44,10 +44,19 @@ const devIotBimData=query=>{
}) })
} }
//根据项目ID获取计划完成率
const getRootScheduleNode=query=>{
return request({
url: "/manage/api/plan/getRootScheduleNode",
method: "get",
params: query,
})
}
export default{ export default{
listBimModel, listBimModel,
devicePositionGet, devicePositionGet,
devTowerBimData, devTowerBimData,
videoMonitorBimData, videoMonitorBimData,
devIotBimData devIotBimData,
getRootScheduleNode
} }

View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1.6005859375em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1639 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3864"><path d="M1282.80064 648.00128l-161.1264-62.79296c0 0-30.72896-11.9296-42.66624-23.66208-7.67232-7.54176-7.11808-25.33248-0.32896-48.06016 6.78912-22.7264 89.39008-115.08864 89.39008-198.98752 0-129.57312-85.18528-234.6304-190.25664-234.6304-20.34432 0-39.936 3.9552-58.31552 11.24864 21.11232 14.40256 40.46848 31.9936 57.8112 52.576 0.16768-0.00128 0.33664-0.00768 0.50432-0.00768 31.20512 0 61.37728 16.01792 84.96256 45.10208 26.74688 32.98688 41.47712 77.632 41.47712 125.71264 0 38.53312-32.04608 89.52704-54.24 123.21408-1.6128 2.44736-3.17696 4.81152-4.67072 7.06432-13.97504 21.10208-23.20896 35.04256-27.80928 50.44224-4.00768 13.41056-6.48192 25.96608-7.44832 37.6576-2.56128 30.9632 5.51424 55.82848 24.192 74.18368 19.23584 18.90816 51.37664 32.61952 64.30208 37.63712l161.04832 62.76352c0.53376 0.20736 1.07008 0.40832 1.61024 0.60288 10.76992 3.8656 18.27584 14.28864 18.27584 21.22368l0 15.73632c-1.53344 0.53376-4.04864 1.09824-7.53408 1.09824l-51.88096 0c15.33312 18.78784 26.496 40.63232 32.24192 63.81696l19.63904 0c39.34336 0 71.34976-24.11392 71.34976-63.52384l0-17.12768C1343.33056 693.1712 1316.74112 660.1856 1282.80064 648.00128z" p-id="3865"></path><path d="M1124.43264 753.5872l-182.32832-71.05664c0 0-34.77248-13.49888-48.27904-26.77504-8.68224-8.53376-8.05376-28.66688-0.3712-54.38464 7.68256-25.71776 101.152-130.23232 101.152-225.1712 0-146.62272-96.39296-265.504-215.29088-265.504-118.88896 0-215.27552 118.88-215.27552 265.51168 0 90.93248 83.29088 199.33824 93.568 219.04128 10.2848 19.70432 7.7824 49.73312-0.3392 58.8288-12.19328 13.664-56.74752 27.36128-56.74752 27.36128l-164.36736 73.25312c-38.39872 13.79584-68.4864 50.01472-68.4864 90.87488l0 19.38176c0 44.5952 36.2176 71.88224 80.7296 71.88224l275.68128 0 94.49472 0 293.61664 0c44.52096 0 80.73728-27.28704 80.73728-71.88224L1192.92672 845.568C1192.928 804.70016 1162.83904 767.37536 1124.43264 753.5872zM1129.11232 864.95104c0 3.0336-0.54912 3.49824-1.13024 3.98976-2.21696 1.88032-7.68512 4.07552-15.79392 4.07552L448.3968 873.01632c-8.10368 0-13.568-2.1952-15.78496-4.07424-0.58112-0.4928-1.13024-0.95872-1.13024-3.99232l0-19.38048c0-11.9936 11.53024-25.5296 26.24896-30.81856 1.48736-0.53376 2.95552-1.12384 4.39936-1.76768l160.99328-71.7504c27.5904-8.79232 62.78144-23.3984 81.75744-44.66304 30.24512-33.8752 28.3776-94.30016 9.29792-130.85056-3.21792-6.1696-7.60064-12.87552-14.23616-23.02592-12.3968-18.96704-31.13344-47.63136-46.77376-79.99616-20.92288-43.29344-25.31328-70.92864-25.31328-86.48832 0-56.33152 17.33376-108.73216 48.80768-147.552 28.30848-34.91584 64.76416-54.144 102.65088-54.144 37.89184 0 74.35136 19.22944 102.66368 54.14528 31.47648 38.81856 48.81024 91.21664 48.81024 147.54304 0 49.30048-42.60224 113.6256-68.0576 152.0576-15.40096 23.25376-25.57568 38.61504-30.42432 54.84672-15.58016 52.1472-9.9328 91.904 16.78464 118.16448 20.65536 20.30208 55.776 35.26272 69.91744 40.75264l182.25024 71.02464c0.53376 0.20736 1.07008 0.40832 1.61024 0.60288 14.4704 5.19424 26.24256 19.51488 26.24256 31.91936L1129.11232 864.95104 1129.11232 864.95104z" p-id="3866"></path></svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2770"><path d="M654.688607 340.576674A255.737503 255.737503 0 0 0 767.9975 128.00875a95.999063 95.999063 0 0 0-153.5985-76.80925 127.99875 127.99875 0 0 0-204.798 0A95.999063 95.999063 0 0 0 256.0025 128.00875a255.737503 255.737503 0 0 0 113.308893 212.567924C173.893302 401.336081 32.004687 583.594301 32.004687 799.002197c0 124.258787 100.739016 224.997803 224.997803 224.997803h509.99502c124.258787 0 224.997803-100.739016 224.997803-224.997803 0-215.407896-141.888614-397.666117-337.306706-458.425523z m-278.457281-76.79925A190.738137 190.738137 0 0 1 320.001875 128.00875a31.999688 31.999688 0 0 1 31.999687-31.999688 31.669691 31.669691 0 0 1 19.159813 6.369938 63.999375 63.999375 0 0 0 89.609125-12.729875 63.999375 63.999375 0 0 1 102.459 0 63.999375 63.999375 0 0 0 89.609125 12.729875A31.659691 31.659691 0 0 1 671.998438 96.009062a31.999688 31.999688 0 0 1 31.999687 31.999688 191.998125 191.998125 0 0 1-175.458287 191.288132Q520.299919 319.006885 512 319.006885q-8.299919 0-16.529839 0.289997a190.548139 190.548139 0 0 1-119.228835-55.529458z m504.605072 649.063662A159.998438 159.998438 0 0 1 766.99751 960.000625H257.00249A160.998428 160.998428 0 0 1 96.004062 799.002197a415.555942 415.555942 0 0 1 398.226112-415.615941c5.869943 0.399996 11.789885 0.619994 17.769826 0.619994s11.889884-0.219998 17.769826-0.619994A415.575942 415.575942 0 0 1 927.995938 799.002197a159.998438 159.998438 0 0 1-47.15954 113.838889zM630.628842 521.374908a31.999688 31.999688 0 0 0-45.259558 0L512 594.754192l-73.369284-73.369284a31.999688 31.999688 0 0 0-45.249558 45.259558L466.740442 640.00375H416.000937a31.999688 31.999688 0 0 0 0 63.999375h63.999375v63.999375h-63.999375a31.999688 31.999688 0 0 0 0 63.999375h63.999375v31.999687a31.999688 31.999688 0 0 0 63.999376 0v-31.999687h63.999375a31.999688 31.999688 0 0 0 0-63.999375h-63.999375v-63.999375h63.999375a31.999688 31.999688 0 0 0 0-63.999375h-50.739505l73.369284-73.369284a31.999688 31.999688 0 0 0 0-45.259558z" p-id="2771"></path></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1906"><path d="M512 1002.666667C243.2 1002.666667 25.6 785.066667 25.6 516.266667S243.2 29.866667 512 29.866667v42.666666C268.8 72.533333 68.266667 273.066667 68.266667 516.266667S268.8 960 512 960s443.733333-200.533333 443.733333-443.733333h42.666667c0 268.8-217.6 486.4-486.4 486.4z m418.133333-627.2c-46.933333-132.266667-153.6-238.933333-285.866666-281.6l12.8-42.666667c149.333333 46.933333 264.533333 162.133333 315.733333 307.2l-42.666667 17.066667z" p-id="1907"></path><path d="M413.866667 332.8c51.2 4.266667 81.066667 38.4 81.066666 102.4-4.266667 64-29.866667 98.133333-85.333333 98.133333-51.2-4.266667-76.8-38.4-81.066667-98.133333 4.266667-64 34.133333-98.133333 85.333334-102.4z m0 162.133333c25.6 0 38.4-21.333333 38.4-59.733333 0-38.4-12.8-59.733333-38.4-59.733333-25.6 0-38.4 21.333333-38.4 59.733333 0 38.4 12.8 55.466667 38.4 59.733333z m187.733333-162.133333h46.933333l-200.533333 379.733333H401.066667l200.533333-379.733333z m38.4 183.466667c51.2 4.266667 81.066667 38.4 81.066667 102.4-4.266667 59.733333-29.866667 93.866667-85.333334 93.866666-51.2-4.266667-76.8-34.133333-81.066666-93.866666 4.266667-64 29.866667-98.133333 85.333333-102.4z m-4.266667 162.133333c21.333333 0 34.133333-21.333333 38.4-59.733333 0-38.4-12.8-55.466667-34.133333-59.733334-25.6 0-38.4 21.333333-38.4 59.733334 0 38.4 12.8 55.466667 34.133333 59.733333z" p-id="1908"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="731"><path d="M344.792 518.575L303.4 477.184a26.947 26.947 0 0 1 38.13-38.13l60.174 60.173a26.947 26.947 0 0 1 0.27 37.834L114.392 833.16a26.947 26.947 0 0 0 0.27 37.834l68.984 68.958a26.947 26.947 0 0 0 38.077 0l291.301-291.3a26.947 26.947 0 0 1 38.104 0l146.324 146.323a26.947 26.947 0 1 1-38.104 38.13L532.076 705.833 259.853 978.055a80.842 80.842 0 0 1-114.337 0L76.53 909.096a80.842 80.842 0 0 1-0.809-113.475l269.043-277.046z m473.546 155.54a26.947 26.947 0 1 1-38.104 38.104L597.288 529.273a26.947 26.947 0 0 1 0-38.103l148.13-148.103a26.947 26.947 0 0 1 15.36-7.653l88.603-12.18 89.627-170.927-56.697-60.39-167.37 97.254-16.546 85.53a26.947 26.947 0 0 1-7.384 13.96l-148.13 148.102a26.947 26.947 0 0 1-38.103 0l-77.474-77.474a26.947 26.947 0 1 1 38.104-38.103l58.422 58.422 123.23-123.23 17.273-89.466a26.947 26.947 0 0 1 12.935-18.19l196.5-114.175a26.947 26.947 0 0 1 33.173 4.85l84.48 90.004a26.947 26.947 0 0 1 4.203 30.963l-104.96 200.165a26.947 26.947 0 0 1-20.21 14.201l-93.346 12.854-122.637 122.637 163.867 163.894z" p-id="732"></path><path d="M610.816 784.573a26.947 26.947 0 0 1 38.104-38.104l52.089 52.09a26.947 26.947 0 0 1-38.104 38.103l-52.089-52.09zM368.371 543.42a26.947 26.947 0 1 1 37.995-38.185L705.671 803.22a26.947 26.947 0 0 1 7.814 21.45 111.373 111.373 0 0 0 31.475 87.471 107.79 107.79 0 1 0 68.662-183.727c-2.129 0.135-3.934 0.081-5.578-0.054a26.947 26.947 0 0 1-19.537-7.868L485.24 417.954a26.947 26.947 0 1 1 38.05-38.158l295.181 294.481A161.684 161.684 0 1 1 706.83 950.272a165.16 165.16 0 0 1-47.642-117.275L368.37 543.421z" p-id="733"></path><path d="M783.076 874.036a53.895 53.895 0 1 0 76.22-76.219 53.895 53.895 0 1 0-76.22 76.219zM421.807 588.989a26.947 26.947 0 0 1 38.104 38.13L221.723 865.28a26.947 26.947 0 1 1-38.104-38.104L421.807 588.99z m81.597-229.808a26.947 26.947 0 1 1-38.104 38.104l-37.996-37.996a26.947 26.947 0 0 1-5.847-29.345c0.808-1.914 1.05-2.426 3.368-7.06l0.189-0.432c0.754-1.509 1.24-2.506 1.159-2.263a188.632 188.632 0 0 0-43.601-198.818 187.877 187.877 0 0 0-129.698-55.215 189.736 189.736 0 0 0-73.135 13.15l-2.506 0.97-1.752 0.728a26.947 26.947 0 0 1-21.073-49.61c1.887-0.809 1.887-0.809 3.423-1.402l2.102-0.808a242.068 242.068 0 0 1 93.992-16.896 241.772 241.772 0 0 1 166.723 70.98 242.526 242.526 0 0 1 57.722 250.88l25.007 25.033zM25.869 160.013a26.947 26.947 0 0 1 49.61 21.02 187.284 187.284 0 0 0-14.74 65.374 188.039 188.039 0 0 0 55.054 141.743 188.632 188.632 0 0 0 44.463 33.037 26.947 26.947 0 1 1-25.411 47.536 242.526 242.526 0 0 1-57.129-42.47A241.907 241.907 0 0 1 6.9 244.035a243.443 243.443 0 0 1 18.97-84.022z m224.337 337.274a26.947 26.947 0 0 1-0.215-53.895 189.17 189.17 0 0 0 61.79-10.644c4.366-1.51 7.168-2.21 10.94-1.563a26.947 26.947 0 0 1 18.81 7.895l33.145 33.146a26.947 26.947 0 0 1-38.103 38.13l-21.99-22.016a243.308 243.308 0 0 1-64.377 8.947z" p-id="734"></path><path d="M148.48 77.824a26.947 26.947 0 1 1 38.104-38.104l161.792 161.82a26.947 26.947 0 0 1 7.087 25.6l-22.986 91.35a26.947 26.947 0 0 1-19.564 19.565L221.56 361.04a26.947 26.947 0 0 1-25.6-7.06L30.343 188.362a26.947 26.947 0 1 1 38.13-38.103L223.26 305.044l60.901-15.306 15.306-60.9L148.48 77.823z" p-id="735"></path></svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9598"><path d="M845.3 978.7c-8.7-8.7-19.9-14.9-32.4-17.4-7.5-1.5-12.9-7.9-12.9-15.5V578.2c0-159-130.1-290.8-289.1-290.2-158.5 0.6-286.9 129.3-286.9 288v369.8c0 7.6-5.4 14-12.9 15.5-29.2 6-51.1 31.8-51.1 62.7h704c0-17.7-7.2-33.7-18.7-45.3zM567.3 464l-19.4 173.3H624L456.8 880l19.4-173.3H400L567.3 464zM512 208c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32s32 14.3 32 32v144c0 17.7-14.3 32-32 32zM280 296.1c-15.3 8.8-34.9 3.6-43.7-11.7l-72-124.7c-8.8-15.3-3.6-34.9 11.7-43.7 15.3-8.8 34.9-3.6 43.7 11.7l72 124.7c8.8 15.3 3.6 34.8-11.7 43.7zM744 296.1c15.3 8.8 34.9 3.6 43.7-11.7l72-124.7c8.8-15.3 3.6-34.9-11.7-43.7-15.3-8.8-34.9-3.6-43.7 11.7l-72 124.7c-8.8 15.3-3.6 34.8 11.7 43.7zM202.5 444.9c-4.6 17.1-22.1 27.2-39.2 22.6L24.2 430.3C7.1 425.7-3 408.2 1.5 391.1c4.6-17.1 22.1-27.2 39.2-22.6l139.1 37.3c17.1 4.5 27.2 22 22.7 39.1zM821.5 444.9c4.6 17.1 22.1 27.2 39.2 22.6l139.1-37.3c17.1-4.6 27.2-22.1 22.6-39.2-4.6-17.1-22.1-27.2-39.2-22.6l-139.1 37.3c-17 4.6-27.1 22.1-22.6 39.2z" p-id="9599"></path></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

View File

@ -11,41 +11,81 @@
<svg-icon icon-class="signal"></svg-icon> <svg-icon icon-class="signal"></svg-icon>
项目概况 项目概况
</div> </div>
<div> <div class="prj-info">
<div class="floor-area">{{prj.floorArea}}</div> <div class="base-info">
<div>建筑面积:单位(平方米)</div> <div class="floor-area led-number">{{ prj.floorArea }}</div>
<div class="floor-area-text">建筑面积:单位(平方米)</div>
</div>
<table class="tb-prj">
<tr>
<th>项目名称</th>
<td>{{ prj.projectName }}</td>
</tr>
<tr>
<th>建设单位</th>
<td>{{ prj.constructionUnit }}</td>
</tr>
<tr>
<th>总包单位</th>
<td>{{ prj.packageUnit }}</td>
</tr>
<tr>
<th>开工日期</th>
<td>{{ prj.startDate | toDate }}</td>
</tr>
<tr>
<th>计划完工日期</th>
<td>{{ prj.endDate | toDate }}</td>
</tr>
</table>
</div> </div>
<table class="tb-prj">
<tr>
<th>项目名称</th>
<td>{{prj.projectName}}</td>
</tr>
<tr>
<th>建设单位</th>
<td>{{prj.constructionUnit}}</td>
</tr>
<tr>
<th>总包单位</th>
<td>{{prj.packageUnit}}</td>
</tr>
<tr>
<th>开工日期</th>
<td>{{prj.startDate}}</td>
</tr>
<tr>
<th>计划完工日期</th>
<td>{{prj.endDate}}</td>
</tr>
</table>
</div> </div>
<div class="div-row"> <div class="div-row">
<div class="row-title"> <div class="row-title">
<svg-icon icon-class="signal"></svg-icon> <svg-icon icon-class="signal"></svg-icon>
成本产值 成本产值
</div> </div>
<div class="investment-stats-cost">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-title">总投资(万元)</div>
<div class="stat-value led-number">{{ prj.totalCost }}</div>
</div>
<div class="stat-card">
<div class="stat-title">年度投资(万元)</div>
<div class="stat-value led-number">{{ prj.annualCost }}</div>
</div>
<div class="stat-card">
<div class="stat-title">本月完成(万元)</div>
<div class="stat-value led-number">{{ prj.monthCost }}</div>
</div>
<div class="stat-card">
<div class="stat-title">开累完成(万元)</div>
<div class="stat-value led-number">{{ prj.accumulatedCost }}</div>
</div>
<div class="center-icon">
<div class="chart-gif chart-overview-gif"></div>
<span><svg-icon icon-class="money2" /></span>
</div>
</div>
</div>
</div> </div>
<div class="div-row"> <div class="div-row">
<div class="row-title"><svg-icon icon-class="signal"></svg-icon> </div> <div class="row-title"><svg-icon icon-class="signal"></svg-icon> </div>
<div class="prj-worker">
<div class="worker-chart">
<div class="chart-item" v-for="(wk, idx) in workerInfo" :key="idx">
<div class="chart-gif chart-overview-gif"></div>
<div class="chart-text led-number">{{ wk.value }}</div>
</div>
</div>
<div class="worker-title">
<div class="title-item" v-for="(wk, idx) in workerInfo" :key="idx">
<svg-icon icon-class="group2" />
<div>{{ wk.text }}</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</transition> </transition>
@ -59,15 +99,95 @@
<svg-icon icon-class="signal"></svg-icon> <svg-icon icon-class="signal"></svg-icon>
工程进度 工程进度
</div> </div>
<div class="plan-chart">
<div class="chart-item">
<my-chart :key="chart1Key" class="chart-data" id="processChart1" width="100%" height="100%" :render="renderChart1"></my-chart>
<div class="chart-title">计划完成</div>
</div>
<div class="chart-item">
<my-chart :key="chart2Key" class="chart-data" id="processChart2" width="100%" height="100%" :render="renderChart2"></my-chart>
<div class="chart-title">实际完成</div>
</div>
</div>
</div> </div>
<div class="div-row"> <div class="div-row">
<div class="row-title"> <div class="row-title">
<svg-icon icon-class="signal"></svg-icon> <svg-icon icon-class="signal"></svg-icon>
安全检查 安全检查
</div> </div>
<div class="warn-info">
<div class="warn-item">
<div class="czz-number-img czz-number-img-blue">
<svg-icon icon-class="notesearch" />
</div>
<div class="warn-data">
<div class="warn-data-val led-number">888</div>
<div class="warn-data-text">问题数</div>
</div>
</div>
<div class="warn-item">
<div class="czz-number-img czz-number-img-blue">
<svg-icon icon-class="tools" />
</div>
<div class="warn-data">
<div class="warn-data-val led-number">888</div>
<div class="warn-data-text">整改数</div>
</div>
</div>
<div class="warn-item">
<div class="czz-number-img czz-number-img-green">
<svg-icon icon-class="percent" class="green"/>
</div>
<div class="warn-data">
<div class="warn-data-val led-number">888</div>
<div class="warn-data-text">整改率</div>
</div>
</div>
<div class="warn-item">
<div class="czz-number-img czz-number-img-blue">
<svg-icon icon-class="warn" class="red"/>
</div>
<div class="warn-data">
<div class="warn-data-val led-number">888</div>
<div class="warn-data-text">超时数</div>
</div>
</div>
</div>
</div> </div>
<div class="div-row"> <div class="div-row">
<div class="row-title"><svg-icon icon-class="signal"></svg-icon> </div> <div class="row-title"><svg-icon icon-class="signal"></svg-icon> </div>
<div class="photography-list">
<template v-if="photographyList && photographyList.length > 0">
<el-carousel height="100%" :autoplay="false">
<el-carousel-item v-for="(item, idx) in photographyList" :key="idx">
<video controls class="photography-video">
<source :src="item.videoUrl" type="video/mp4" :key="item.videoUrl" />
您的浏览器不支持Video标签
</video>
<div class="photography-list-title">
{{ item.videoDate }}
</div>
</el-carousel-item>
</el-carousel>
</template>
<template v-else>
<div class="photography-list-nodata">
<div>
<i class="video-play">
<svg class="icon" style="width: 30px; height: 30px; vertical-align: middle; fill: currentColor; overflow: hidden" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551">
<path d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z" fill="#3D3D3D" p-id="4552"></path>
</svg>
</i>
</div>
<div class="photography-list-no-title">暂无数据</div>
</div>
</template>
</div>
</div> </div>
</div> </div>
</transition> </transition>
@ -125,17 +245,16 @@
</div> </div>
</div> </div>
<div class="test-box" style="left:400px"> <div class="test-box" style="left: 400px">
<div class='tag-box box-type-3'> <div class="tag-box box-type-3">
<div class="tag-txt">
<div class='tag-txt' > <table class="tb-power">
<table class="tb-power"> <tr>
<tr> <td></td>
<td></td> <td width="150">电压</td>
<td width="150">电压</td> <td width="150">电流</td>
<td width="150">电流</td> <td width="150">功率</td>
<td width="150">功率</td> </tr>
</tr>
<tr> <tr>
<td>A向</td> <td>A向</td>
<td>1</td> <td>1</td>
@ -148,18 +267,17 @@
<td>2</td> <td>2</td>
<td>3</td> <td>3</td>
</tr> </tr>
<tr> <tr>
<td>A向</td> <td>A向</td>
<td>1</td> <td>1</td>
<td>2</td> <td>2</td>
<td>3</td> <td>3</td>
</tr> </tr>
</table> </table>
</div>
<img src='bimImages/4.png' alt='' class="tag-bg-img">
<img src='bimImages/towerMonitor.png' class="tag-img">
</div> </div>
<img src="bimImages/4.png" alt="" class="tag-bg-img" />
<img src="bimImages/towerMonitor.png" class="tag-img" />
</div>
</div> </div>
<video-dialog ref="videoDlg"></video-dialog> <video-dialog ref="videoDlg"></video-dialog>
</div> </div>
@ -227,10 +345,10 @@ const css = `<style>
} }
</style>`; </style>`;
import debounce from "lodash.debounce"; import debounce from "lodash.debounce";
import videoDialog from './bim/videoDialog.vue' import videoDialog from "./bim/videoDialog.vue";
export default { export default {
components: { components: {
videoDialog videoDialog,
}, },
data() { data() {
return { return {
@ -249,14 +367,26 @@ export default {
rightSrc: "./bimImages/arrow_right_retract.png", rightSrc: "./bimImages/arrow_right_retract.png",
leftShow: true, leftShow: true,
towerWarning: [], towerWarning: [],
prj:{ prjInfo: null,
floorArea:0, costOutData: null,
projectName:'', prj: {
constructionUnit:'', floorArea: 0,
packageUnit:'', projectName: "",
startDate:'', constructionUnit: "",
endDate:'', packageUnit: "",
} startDate: "",
endDate: "",
totalCost: 0,
annualCost: 0,
monthCost: 0,
accumulatedCost: 0,
},
workerInfo: [],
chart1Key: 0,
chart2Key: 10000,
planFinishRate: 0,
finishRate: 0,
photographyList: [],
}; };
}, },
beforeDestroy() { beforeDestroy() {
@ -274,9 +404,9 @@ export default {
"projectChange", "projectChange",
debounce((prj) => { debounce((prj) => {
this.selProject = prj; this.selProject = prj;
this.updateProjectInfo();
this.elId++; this.elId++;
this.initEngine(); this.initEngine();
this.updateProjectInfo();
}) })
); );
this.selProject = this.$store.getters.selProject; this.selProject = this.$store.getters.selProject;
@ -289,9 +419,143 @@ export default {
}); });
}, },
methods: { methods: {
updateProjectInfo(){ renderChart1() {
this.prj.floorArea=this.selProject?.floorArea||0; return this.renderChart(0);
console.log(this.selProject) },
renderChart2() {
return this.renderChart(1);
},
renderChart(n) {
let opt = {
tooltip: {
show: true,
formatter: function(params){
return params.seriesName + "<br/>"+params.marker + (params.value * 100).toFixed(2) + "%";
},
},
series: [
{
type: "liquidFill",
data: [n == 0 ? this.planFinishRate : this.finishRate],
name: n == 0 ? "计划完成" : "实际完成",
color: [n==0?"orange":"#47D89F"], //
//
waveAnimation: true,
animationEasingUpdate: "quinticInOut",
backgroundStyle: {
borderWidth: 2,
borderColor: "#156ACF",
},
radius: "70%",
outline: {
show: false,
},
label:{
fontSize: 20,
formatter: function (param) {
return (param.value*100).toFixed(2) + "%";
},
}
},
],
};
return opt;
},
updateProjectInfo() {
if (!this.selProject) {
return;
}
this.getProjectInfo();
this.costOutputSelectYearAndMonth();
this.groupByCraftType();
this.getRootScheduleNode();
this.getFinishRate();
this.selectLastPhotography();
},
selectLastPhotography() {
this.$api.detail.photographyList(this.selProject.id).then((d) => {
this.photographyList = d.data;
});
},
getFinishRate() {
this.$api.planSchedule.findAllPlanDatas(this.selProject.id).then((res) => {
let _ywcjhs = [];
res.data.forEach((item) => {
if (item.taskStatus == "zcwc" || item.taskStatus == "zhwc") {
_ywcjhs.push(item);
}
});
this.finishRate = (_ywcjhs.length / res.data.length).toFixed(4);
this.chart2Key++;
});
},
getProjectInfo() {
this.$api.project.getProjectInfo(this.selProject.id).then((d) => {
this.prjInfo = d.data || {};
let tmps = this.prjInfo.projectDeptsList || [];
const func = (t) => {
let obj = tmps.find((it) => it.deptType == t);
return obj ? obj : {};
};
this.prj.floorArea = this.prjInfo.floorArea || 0;
this.prj.projectName = this.prjInfo.projectName || "";
this.prj.constructionUnit = func("建设单位").deptName;
this.prj.packageUnit = this.prjInfo.disDeptName;
this.prj.startDate = this.prjInfo.actualOperatingTime;
this.prj.endDate = this.prjInfo?.plannedCompletionTime || "";
});
},
costOutputSelectYearAndMonth() {
let dt = this.$dt(new Date());
this.$api.detail
.costOutputSelectYearAndMonth({
comId: this.selProject.comId,
projectId: this.selProject.id,
year: dt.$y,
month: dt.$M + 1,
})
.then((d) => {
this.costOutData = d;
this.prj.totalCost = d.totalInv || 0;
this.prj.annualCost = d.totalYear || 0;
this.prj.monthCost = d.curMonth || 0;
this.prj.accumulatedCost = d.totalMonth || 0;
});
},
groupByCraftType() {
let ajax = this.$api.detail.groupByCraftType;
let posData = {
comId: this.selProject.comId,
projectId: this.selProject.id,
};
ajax(posData).then((d) => {
this.workerInfo = (d.data || [])
.map((it) => {
return {
text: it.createBy,
value: it.id || 0,
id: it.craftType,
};
})
.sort((a, b) => {
return b.id - a.id;
});
});
},
getRootScheduleNode() {
this.$api.bim
.getRootScheduleNode({
projectId: this.selProject.id,
})
.then((d) => {
let objs = d.data || [];
this.planFinishRate = objs.length > 0 ? ((objs[0].scheduleNode || 0) / 100.0).toFixed(4) : 0;
this.chart1Key++;
});
}, },
arrowRetract() { arrowRetract() {
if (this.leftShow == true) { if (this.leftShow == true) {
@ -310,6 +574,9 @@ export default {
}, },
loadDevicePosition() { loadDevicePosition() {
if (!this.selProject) {
return;
}
this.$api.bim this.$api.bim
.devicePositionGet({ .devicePositionGet({
projectId: this.selProject.id, projectId: this.selProject.id,
@ -317,6 +584,7 @@ export default {
.then((res) => { .then((res) => {
let cnt = 0; let cnt = 0;
this.devices = (res.data || []) this.devices = (res.data || [])
.filter((item) => item.enabled != 0)
.map((item) => { .map((item) => {
item.show = item.enabled != 0; item.show = item.enabled != 0;
item.position = this.$tryToJson(item.position, []); item.position = this.$tryToJson(item.position, []);
@ -370,9 +638,9 @@ export default {
this.addLabels.push(item.elId); this.addLabels.push(item.elId);
}, },
deviceClick(item, opt) { deviceClick(item, opt) {
if(item.deviceType==1){ if (item.deviceType == 1) {
let obj=this.videoData.find(d=>d.id==item.deviceId) let obj = this.videoData.find((d) => d.id == item.deviceId);
this.$refs.videoDlg.showDialog(item,obj) this.$refs.videoDlg.showDialog(item, obj);
return; return;
} }
console.log(item, opt); console.log(item, opt);
@ -576,18 +844,17 @@ export default {
</div>` </div>`
); );
}, },
fmtData(item){ fmtData(item) {
if(item){ if (item) {
return (item*1).toFixed(2) return (item * 1).toFixed(2);
} }
return "" return "";
}, },
getIotHtml(item) { getIotHtml(item) {
let txtHtml = ""; let txtHtml = "";
if (item.elId) { if (item.elId) {
txtHtml = ``; txtHtml = ``;
} else { } else {
txtHtml = ` txtHtml = `
<table class="tb-power"> <table class="tb-power">
<tr> <tr>
@ -765,7 +1032,230 @@ export default {
} }
} }
} }
.prj-info {
padding: 20px;
.base-info {
.floor-area {
color: #b0cfff;
font-weight: 700;
font-size: 40px;
}
.floor-area-text {
line-height: 40px;
}
}
.tb-prj {
border-collapse: collapse;
width: 100%;
td,
th {
border: solid 1px #6ea9ab68;
padding: 4px;
}
th {
color: #b0cfff;
}
}
}
.prj-worker {
height: calc(100% - 30px);
.worker-chart {
display: flex;
height: 50%;
.chart-item {
position: relative;
width: 33.33%;
height: 100%;
.chart-gif,
.chart-text {
left: 20px;
top: 20px;
width: 120px;
height: 120px;
}
.chart-text {
color: #3ffcff;
font-weight: 700;
font-size: 40px;
}
}
}
.worker-title {
display: flex;
height: 50%;
.title-item {
flex: 1;
display: flex;
flex-flow: column;
align-items: center;
padding: 10px 0px 10px 0px;
.svg-icon {
fill: #3ffcff;
width: 80px;
height: 80px;
}
color: #3ffcff;
}
}
}
.investment-stats-cost {
margin: 0 auto;
padding: 30px 20px;
top: -18px;
position: relative;
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 24px;
position: relative;
}
.stat-card {
background: linear-gradient(45deg, #122463, #0e79c969);
padding: 16px 0;
text-align: center;
color: #fff;
position: relative;
z-index: 1;
box-shadow: 0 2px 8px #0004;
border: solid 1px #22d0d2;
border-radius: 10px;
}
.stat-title {
font-size: 16px;
color: #b0cfff;
margin-bottom: 8px;
}
.stat-value {
font-size: 40px;
font-weight: bold;
color: #3ffcff;
}
.center-icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #112244;
border: 2px dashed #3ffcff;
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
font-size: 32px;
color: #3ffcff;
box-shadow: 0 0 12px #3ffcff55;
pointer-events: none;
.chart-gif {
width: 70px;
height: 70px;
top: 5px;
left: 5px;
}
}
}
.plan-chart {
height: calc(100% - 30px);
.chart-item {
position: relative;
flex-grow: 1;
display: inline-block;
width: 49%;
height: 100%;
.chart-data {
top: -10px;
}
.chart-title {
position: relative;
top: -40px;
text-align: center;
}
}
}
.photography-list {
height: calc(100% - 30px);
padding: 10px 0px;
.el-carousel {
height: calc(100% - 10px);
}
.photography-video {
width: 100%;
height: calc(100% - 30px);
}
.photography-list-title {
line-height: 20px;
text-align: center;
}
.photography-list-nodata {
background: rgba(255, 255, 255, 0.2);
width: 80%;
height: 80%;
margin-left: 10%;
margin-top: 6%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
.video-play {
width: 80px;
height: 80px;
display: inline-block;
background: rgba(0, 0, 0, 0.4);
line-height: 80px;
text-align: center;
border-radius: 40px;
margin-bottom: 12px;
}
.photography-list-no-title {
color: rgba(255, 255, 255, 0.2);
}
}
}
.warn-info{
height: calc(100% - 30px);
.warn-item{
display: inline-flex;
width:50%;
height:50%;
justify-content: center;
align-items: center;
.czz-number-img{
width:80px;
height: 80px;
line-height: 80px;
.svg-icon{
width: 40px;
height: 40px;
fill: #5cc0eb;
position: relative;
top:12px;
&.red{
fill: red;
}
&.green{
fill: #00e900;
}
}
}
.warn-data{
margin-left:10px;
.warn-data-val{
font-size:30px;
font-weight: 700;
color: #22d0d2;
}
}
}
}
.test-box { .test-box {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -778,14 +1268,14 @@ export default {
align-items: center; align-items: center;
} }
.tag-img { .tag-img {
width: 20px; width: 20px;
height: 20px; height: 20px;
position: absolute; position: absolute;
left:50%; left: 50%;
bottom:18px; bottom: 18px;
margin-left:-10px; margin-left: -10px;
} }
.tag-bg-img{ .tag-bg-img {
width: 16px; width: 16px;
height: 80px; height: 80px;
} }
@ -801,12 +1291,12 @@ export default {
background: #097fca63; background: #097fca63;
border: solid 1px #75fbfdaa; border: solid 1px #75fbfdaa;
} }
.tb-power{ .tb-power {
border-collapse: collapse; border-collapse: collapse;
} }
.tb-power td{ .tb-power td {
border:solid 1px #75fbfd33; border: solid 1px #75fbfd33;
padding:4px 8px; padding: 4px 8px;
} }
} }
} }