| | |
| | | <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"> |
| | |
| | | <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 { |
| | |
| | | faceList: [], |
| | | workOrderData: [], |
| | | workOrderRegion: [], |
| | | platformData: null, |
| | | scoreData: { |
| | | 自流井区: [ |
| | | { |
| | |
| | | }) |
| | | .catch((err) => { |
| | | }); |
| | | getPlatform(this.activerBtnType, this.deptId) |
| | | .then((res) => { |
| | | if(res.data && Object.keys(res.data).length > 0){ |
| | | this.platformData = res.data; |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | }); |
| | | }, |
| | | returnPath() { |
| | | this.$router.push("/index"); |
| | |
| | | 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; |