BIM应用大屏开发
parent
361b58fda6
commit
d973ac872e
|
|
@ -25,6 +25,8 @@
|
|||
<script src="/cdn/element-ui/lib/index.js"></script>
|
||||
<script src="/cdn/jquery/3.5.1/jquery.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" />
|
||||
<script src="/cesium/jquery-3.0.0.min.js"></script>
|
||||
<script src="/cesium/Cesium.js?v=20230913"></script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -44,10 +44,19 @@ const devIotBimData=query=>{
|
|||
})
|
||||
|
||||
}
|
||||
//根据项目ID获取计划完成率
|
||||
const getRootScheduleNode=query=>{
|
||||
return request({
|
||||
url: "/manage/api/plan/getRootScheduleNode",
|
||||
method: "get",
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
export default{
|
||||
listBimModel,
|
||||
devicePositionGet,
|
||||
devTowerBimData,
|
||||
videoMonitorBimData,
|
||||
devIotBimData
|
||||
devIotBimData,
|
||||
getRootScheduleNode
|
||||
}
|
||||
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -11,41 +11,81 @@
|
|||
<svg-icon icon-class="signal"></svg-icon>
|
||||
项目概况
|
||||
</div>
|
||||
<div>
|
||||
<div class="floor-area">{{prj.floorArea}}</div>
|
||||
<div>建筑面积:单位(平方米)</div>
|
||||
<div class="prj-info">
|
||||
<div class="base-info">
|
||||
<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>
|
||||
<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 class="div-row">
|
||||
<div class="row-title">
|
||||
<svg-icon icon-class="signal"></svg-icon>
|
||||
成本产值
|
||||
</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 class="div-row">
|
||||
<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>
|
||||
</transition>
|
||||
|
|
@ -59,15 +99,95 @@
|
|||
<svg-icon icon-class="signal"></svg-icon>
|
||||
工程进度
|
||||
</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 class="div-row">
|
||||
<div class="row-title">
|
||||
<svg-icon icon-class="signal"></svg-icon>
|
||||
安全检查
|
||||
</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 class="div-row">
|
||||
<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>
|
||||
</transition>
|
||||
|
|
@ -125,17 +245,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-box" style="left:400px">
|
||||
<div class='tag-box box-type-3'>
|
||||
|
||||
<div class='tag-txt' >
|
||||
<table class="tb-power">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td width="150">电压</td>
|
||||
<td width="150">电流</td>
|
||||
<td width="150">功率</td>
|
||||
</tr>
|
||||
<div class="test-box" style="left: 400px">
|
||||
<div class="tag-box box-type-3">
|
||||
<div class="tag-txt">
|
||||
<table class="tb-power">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td width="150">电压</td>
|
||||
<td width="150">电流</td>
|
||||
<td width="150">功率</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A向</td>
|
||||
<td>1</td>
|
||||
|
|
@ -148,18 +267,17 @@
|
|||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>A向</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<img src='bimImages/4.png' alt='' class="tag-bg-img">
|
||||
<img src='bimImages/towerMonitor.png' class="tag-img">
|
||||
</table>
|
||||
</div>
|
||||
<img src="bimImages/4.png" alt="" class="tag-bg-img" />
|
||||
<img src="bimImages/towerMonitor.png" class="tag-img" />
|
||||
</div>
|
||||
</div>
|
||||
<video-dialog ref="videoDlg"></video-dialog>
|
||||
</div>
|
||||
|
|
@ -227,10 +345,10 @@ const css = `<style>
|
|||
}
|
||||
</style>`;
|
||||
import debounce from "lodash.debounce";
|
||||
import videoDialog from './bim/videoDialog.vue'
|
||||
import videoDialog from "./bim/videoDialog.vue";
|
||||
export default {
|
||||
components: {
|
||||
videoDialog
|
||||
videoDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -249,14 +367,26 @@ export default {
|
|||
rightSrc: "./bimImages/arrow_right_retract.png",
|
||||
leftShow: true,
|
||||
towerWarning: [],
|
||||
prj:{
|
||||
floorArea:0,
|
||||
projectName:'',
|
||||
constructionUnit:'',
|
||||
packageUnit:'',
|
||||
startDate:'',
|
||||
endDate:'',
|
||||
}
|
||||
prjInfo: null,
|
||||
costOutData: null,
|
||||
prj: {
|
||||
floorArea: 0,
|
||||
projectName: "",
|
||||
constructionUnit: "",
|
||||
packageUnit: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
totalCost: 0,
|
||||
annualCost: 0,
|
||||
monthCost: 0,
|
||||
accumulatedCost: 0,
|
||||
},
|
||||
workerInfo: [],
|
||||
chart1Key: 0,
|
||||
chart2Key: 10000,
|
||||
planFinishRate: 0,
|
||||
finishRate: 0,
|
||||
photographyList: [],
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
|
@ -274,9 +404,9 @@ export default {
|
|||
"projectChange",
|
||||
debounce((prj) => {
|
||||
this.selProject = prj;
|
||||
this.updateProjectInfo();
|
||||
this.elId++;
|
||||
this.initEngine();
|
||||
this.updateProjectInfo();
|
||||
})
|
||||
);
|
||||
this.selProject = this.$store.getters.selProject;
|
||||
|
|
@ -289,9 +419,143 @@ export default {
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
updateProjectInfo(){
|
||||
this.prj.floorArea=this.selProject?.floorArea||0;
|
||||
console.log(this.selProject)
|
||||
renderChart1() {
|
||||
return this.renderChart(0);
|
||||
},
|
||||
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() {
|
||||
if (this.leftShow == true) {
|
||||
|
|
@ -310,6 +574,9 @@ export default {
|
|||
},
|
||||
|
||||
loadDevicePosition() {
|
||||
if (!this.selProject) {
|
||||
return;
|
||||
}
|
||||
this.$api.bim
|
||||
.devicePositionGet({
|
||||
projectId: this.selProject.id,
|
||||
|
|
@ -317,6 +584,7 @@ export default {
|
|||
.then((res) => {
|
||||
let cnt = 0;
|
||||
this.devices = (res.data || [])
|
||||
.filter((item) => item.enabled != 0)
|
||||
.map((item) => {
|
||||
item.show = item.enabled != 0;
|
||||
item.position = this.$tryToJson(item.position, []);
|
||||
|
|
@ -370,9 +638,9 @@ export default {
|
|||
this.addLabels.push(item.elId);
|
||||
},
|
||||
deviceClick(item, opt) {
|
||||
if(item.deviceType==1){
|
||||
let obj=this.videoData.find(d=>d.id==item.deviceId)
|
||||
this.$refs.videoDlg.showDialog(item,obj)
|
||||
if (item.deviceType == 1) {
|
||||
let obj = this.videoData.find((d) => d.id == item.deviceId);
|
||||
this.$refs.videoDlg.showDialog(item, obj);
|
||||
return;
|
||||
}
|
||||
console.log(item, opt);
|
||||
|
|
@ -576,18 +844,17 @@ export default {
|
|||
</div>`
|
||||
);
|
||||
},
|
||||
fmtData(item){
|
||||
if(item){
|
||||
return (item*1).toFixed(2)
|
||||
fmtData(item) {
|
||||
if (item) {
|
||||
return (item * 1).toFixed(2);
|
||||
}
|
||||
return ""
|
||||
return "";
|
||||
},
|
||||
getIotHtml(item) {
|
||||
let txtHtml = "";
|
||||
if (item.elId) {
|
||||
txtHtml = ``;
|
||||
} else {
|
||||
|
||||
txtHtml = `
|
||||
<table class="tb-power">
|
||||
<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 {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
|
@ -778,14 +1268,14 @@ export default {
|
|||
align-items: center;
|
||||
}
|
||||
.tag-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
bottom:18px;
|
||||
margin-left:-10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.tag-bg-img{
|
||||
.tag-bg-img {
|
||||
width: 16px;
|
||||
height: 80px;
|
||||
}
|
||||
|
|
@ -801,12 +1291,12 @@ export default {
|
|||
background: #097fca63;
|
||||
border: solid 1px #75fbfdaa;
|
||||
}
|
||||
.tb-power{
|
||||
.tb-power {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.tb-power td{
|
||||
border:solid 1px #75fbfd33;
|
||||
padding:4px 8px;
|
||||
.tb-power td {
|
||||
border: solid 1px #75fbfd33;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue