| | |
| | | <div class="map-container" ref="isMap"> |
| | | <img src="@/assets/map/texture/rotating-point2.png" alt="Rotating Image" class="rotating-image"> |
| | | <img src="@/assets/map/texture/rotatingAperture.png" alt="Rotating Image" class="rotating-image-in"> |
| | | <mapApp @clickMap="getDeptId" :geoCoordinates=scoreData></mapApp> |
| | | <mapApp @clickMap="getDeptId" :geoCoordinates=scoreData :platformData = platformData></mapApp> |
| | | <div class="btn-container"> |
| | | <img src="@/assets/images/btn-bg.png" class="bg-img"/> |
| | | <div class="btn-list" v-model="activerBtnType"> |
| | |
| | | /> |
| | | <ul> |
| | | <li v-for="(item, index) in facilityData.video" :key="index"> |
| | | <div class="value"> |
| | | <div style="font-size: 14px" class="value"> |
| | | <animate-number from="0" :to="item.value" :key="item.value"></animate-number> |
| | | </div> |
| | | <div class="title">{{ item.title }}</div> |
| | | <div style="font-size: 14px" class="title">{{ item.title }}</div> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | |
| | | <ul> |
| | | <li v-for="(item, index) in facilityData.car" :key="index"> |
| | | <!-- <div class="value">{{ item.value ? item.value : "-" }}</div>--> |
| | | <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div> |
| | | <div class="title">{{ item.title }}</div> |
| | | <div style="font-size: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div> |
| | | <div style="font-size: 14px" class="title">{{ item.title }}</div> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | |
| | | :key="index" |
| | | > |
| | | <!-- <div class="value">{{ item.value ? item.value : "-" }}</div>--> |
| | | <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div> |
| | | <div class="title">{{ item.title }}</div> |
| | | <div style="font-size: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div> |
| | | <div style="font-size: 14px" class="title">{{ item.title }}</div> |
| | | </li> |
| | | </ul> |
| | | </div> |
| | |
| | | checkFace, |
| | | checkCar, |
| | | checkVideo, |
| | | checkScore |
| | | checkScore, |
| | | getPlatform |
| | | } from "@/api/newpage"; |
| | | |
| | | export default { |
| | |
| | | return { |
| | | deptList: [], |
| | | deptId: '', |
| | | intervalId: null, // 用于存储定时器的ID |
| | | carList: [], |
| | | videoList: [], |
| | | faceList: [], |
| | | workOrderData: [], |
| | | workOrderRegion: [], |
| | | platformData: null, |
| | | scoreData: { |
| | | 自流井区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 高新区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 大安区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 沿滩区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 贡井区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 荣县: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 富顺县: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ] |
| | | }, |
| | | 自流井区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 高新区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 大安区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 沿滩区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 贡井区: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 荣县: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ], |
| | | 富顺县: [ |
| | | { |
| | | value: 0, |
| | | name: '得分' |
| | | } |
| | | ] |
| | | }, |
| | | // 设备数据 |
| | | facilityData: { |
| | | video: [], |
| | |
| | | }) |
| | | .catch((err) => { |
| | | }); |
| | | // 查询数据 |
| | | this.getData(); |
| | | // 查询数据 |
| | | this.intervalId = setInterval(this.getData, 3600000); //一小时一次 |
| | | }, |
| | | beforeDestroy() { |
| | | // 组件销毁前清除定时器,防止内存泄漏 |
| | | if (this.intervalId) { |
| | | clearInterval(this.intervalId); |
| | | this.intervalId = null; |
| | | } |
| | | }, |
| | | methods: { |
| | | getDeptId(deptName) { |
| | |
| | | }); |
| | | checkScore(this.activerBtnType, this.deptId) |
| | | .then((res) => { |
| | | if(res.data && Object.keys(res.data).length > 0){ |
| | | if (res.data && Object.keys(res.data).length > 0) { |
| | | this.scoreData = res.data; |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | }); |
| | | getPlatform(this.activerBtnType, this.deptId) |
| | | .then((res) => { |
| | | if (res.data && Object.keys(res.data).length > 0) { |
| | | this.platformData = res.data; |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | |
| | | align-items: center; |
| | | list-style-type: none; |
| | | border-bottom: 1px dashed #223654; |
| | | margin: 8px 0; |
| | | margin: 7px 0; |
| | | |
| | | li { |
| | | width: 25%; |
| | | text-align: center; |