| | |
| | | <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> |
| | |
| | | <script> |
| | | import itemSubheading from '../screen/components/subheading.vue' // 环形统计图 |
| | | import lineChart from '../screen/components/lineChart.vue' // 折线统计图 |
| | | import mapApp from '../screen/components/map.vue' // 地图 |
| | | import mapApp from '../screen/components/map3.vue' // 地图 |
| | | import { |
| | | getDepartmentData, |
| | | getDeviceData, |
| | |
| | | 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) => { |
| | |
| | | item2.color = '#ff7b72' |
| | | item2.title = '未处理' |
| | | this.statistics.push(item2) |
| | | console.log( this.statistics) |
| | | }, |
| | | |
| | | videoData() { |
| | |
| | | background-repeat: no-repeat; |
| | | display: flex; |
| | | flex-direction: column; |
| | | //justify-content: center; |
| | | //align-items: center; |
| | | |
| | | .item-facility-icon { |
| | | margin: 0 auto; |
| | |
| | | flex-direction: column; |
| | | justify-content: space-around; |
| | | text-align: center; |
| | | font-size: 14px; |
| | | list-style-type: none; |
| | | //font-size: 14px; |
| | | //padding-left: 0; |
| | | |
| | | li:nth-child(1) { |
| | | .value { |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 0; |
| | | overflow: hidden; |
| | | //overflow: hidden; |
| | | |
| | | .title { |
| | | width: 100%; |
| | |
| | | |
| | | .list-title-container { |
| | | width: 100%; |
| | | height: 45px; |
| | | margin: 4px 0 0 0; |
| | | line-height: 45px; |
| | | //height: 45px; |
| | | //margin: 4px 0 0 0; |
| | | //line-height: 45px; |
| | | height: 4.17vh; |
| | | line-height: 4.17vh; |
| | | list-style-type: none; |
| | | display: flex; |
| | | flex-direction: row; |
| | |
| | | |
| | | .list-content-to { |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | overflow-y: hidden; |
| | | overflow-x: hidden; |
| | | padding: 10px 0; |
| | | //padding: 10px 0; |
| | | } |
| | | |
| | | .item-list { |
| | |
| | | align-items: center; |
| | | list-style-type: none; |
| | | border-bottom: 1px dashed #223654; |
| | | margin: 10px 0; |
| | | margin: 7px 0; |
| | | |
| | | li { |
| | | width: 25%; |
| | | text-align: center; |
| | | font-size: 14px; |
| | | //font-size: 14px; |
| | | font-size: 0.72916667vw !important; |
| | | color: #dcf8ff; |
| | | flex-shrink: 0; |
| | | flex-grow: 0; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | height: 28px; |
| | | line-height: 28px; |
| | | //height: 28px; |
| | | //line-height: 28px; |
| | | height: 2.59vh; |
| | | line-height: 2.59vh; |
| | | } |
| | | |
| | | .name { |
| | |
| | | } |
| | | |
| | | .footer-container { |
| | | height: 220px; |
| | | //height: 220px; |
| | | height: 24.15vh; |
| | | box-sizing: border-box; |
| | | position: relative; |
| | | background-image: url("../../assets/images/footer-bg.png"); |
| | |
| | | position: relative; |
| | | |
| | | background-image: url("../../assets/images/face-bg.png"); |
| | | background-size: 500px 200px; |
| | | //background-size: 500px 200px; |
| | | background-size: 26.04166vw auto; |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | |
| | | // .face-bj-img { |
| | | // position: absolute; |
| | | // left: 50%; |
| | | // top: 50%; |
| | | // transform: translate(-50%, -50%); |
| | | // width: 83.1946755%; |
| | | // display: block; |
| | | // z-index: 2; |
| | | // } |
| | | |
| | | .item-face-container { |
| | | position: absolute; |
| | |
| | | width: 22.296173%; |
| | | |
| | | .proportion { |
| | | width: 50px; |
| | | //width: 50px; |
| | | width: 2.60416vw; |
| | | margin: 0 auto; |
| | | color: #00eaff; |
| | | text-shadow: 2px 2px 4px #152944; |
| | |
| | | left: 50%; |
| | | top: 53%; |
| | | transform: translate(-50%, -50%); |
| | | font-size: 14px; |
| | | //font-size: 14px; |
| | | } |
| | | } |
| | | |
| | | .title { |
| | | text-align: center; |
| | | font-size: 12px; |
| | | //font-size: 12px; |
| | | font-size: 0.625vw; |
| | | color: #dcf8ff; |
| | | white-space: nowrap; /* 不换行 */ |
| | | overflow: hidden; /* 隐藏超出的内容 */ |
| | |
| | | .car-container { |
| | | position: relative; |
| | | background-image: url("../../assets/images/car-bg2.png"); |
| | | background-size: 500px 200px; |
| | | //background-size: 500px 200px; |
| | | background-size: 26.04166vw auto; |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | |
| | |
| | | font-size: 12px; |
| | | line-height: 26px; |
| | | padding: 0 15px; |
| | | font-size: 0.625vw; |
| | | position: absolute; |
| | | z-index: 5; |
| | | |
| | |
| | | left: 50%; |
| | | top: 50%; |
| | | transform: translate(-50%, -50%); |
| | | font-size: 20px; |
| | | //font-size: 20px; |
| | | font-size: 1.04166vw; |
| | | font-weight: bold; |
| | | color: #00fcff; |
| | | text-shadow: 2px 2px 4px #152944; |
| | |
| | | .item-video-title { |
| | | text-align: center; |
| | | color: #dcf8ff; |
| | | height: 32px; |
| | | font-size: 13px; |
| | | //height: 32px; |
| | | //font-size: 13px; |
| | | //flex-shrink: 0; |
| | | //flex-grow: 0; |
| | | flex-shrink: 0; |
| | | flex-grow: 0; |
| | | height: 3.51851vh; |
| | | display: -webkit-box; |
| | | -webkit-line-clamp: 2; /* 显示的行数 */ |
| | | -webkit-box-orient: vertical; |