| | |
| | | <template> |
| | | <div class="home-contianer"> |
| | | <div class="qhuan"> |
| | | <div v-for="item in datalist"> |
| | | |
| | | <div v-if="item.stationLocation === '2033'"> |
| | | |
| | | <el-button class="bun1" type="success" v-if="item.stationStatus === '1'" |
| | | v-on:click="selectss(1)">1鍙峰帇瑁呮満</el-button> |
| | | |
| | | <el-button class="bun1" type="danger" v-if="item.stationStatus === '0'" |
| | | v-on:click="selectss(1)">1鍙峰帇瑁呮満</el-button> |
| | | <p> |
| | | 2鍙峰帇瑁呮満 : |
| | | <el-tag type="success" v-if="item.stationStatus === '1'">鍚敤</el-tag> |
| | | <el-tag type="danger" v-if="item.stationStatus === '0'">绂佺敤</el-tag> |
| | | </p> |
| | | </div> |
| | | |
| | | |
| | | <div v-if="item.stationLocation === '2043'"> |
| | | <el-button class="bun2" type="success" v-if="item.stationStatus === '1'" |
| | | v-on:click="selectss(2)">2鍙峰帇瑁呮満</el-button> |
| | | <el-button class="bun2" type="danger" v-if="item.stationStatus === '0'" |
| | | v-on:click="selectss(2)">2鍙峰帇瑁呮満</el-button> |
| | | <p> |
| | | 1鍙峰帇瑁呮満 : |
| | | <el-tag type="success" v-if="item.stationStatus === '1'">鍚敤</el-tag> |
| | | <el-tag type="danger" v-if="item.stationStatus === '0'">绂佺敤</el-tag> |
| | | </p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </template> |
| | | <script> |
| | | import { ref, onMounted, onUnmounted } from 'vue'; |
| | | import axios from 'axios'; |
| | | export default { |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | datalist: [], |
| | | url: "http://192.168.12.189/:8098/api/", |
| | | |
| | | n: 90, |
| | | value1: '1', |
| | | }; |
| | | }, |
| | | setup() { |
| | | let open = (item) => { |
| | | window.open(item.url, '_blank'); |
| | | }; |
| | | let interval; |
| | | onMounted(() => { |
| | | mounted() { |
| | | // setInterval(() => { |
| | | this.AddTask(); |
| | | // }, 5000); |
| | | |
| | | // interval = setInterval(() => { |
| | | // chart2.xAxis[0].data.splice(0, 1); |
| | | // let lastYear = |
| | | // chart2.xAxis[0].data[chart2.xAxis[0].data.length - 1] * 1 + 1; |
| | | // chart2.xAxis[0].data.push(lastYear); |
| | | |
| | | // chart2.series[0].data.splice(0, 1); |
| | | // chart2.series[0].data.push(~~(Math.random() * 1000)); |
| | | |
| | | // chart2.series[1].data.splice(0, 1); |
| | | // chart2.series[1].data.push(~~(Math.random() * 1000)); |
| | | // $chart2.setOption(chart2); |
| | | // }, 2000); |
| | | }); |
| | | onUnmounted(() => { |
| | | |
| | | }); |
| | | return { open }; |
| | | }, |
| | | destroyed() { |
| | | created() { |
| | | // this.AddTask(); |
| | | // this.selList(); |
| | | }, |
| | | |
| | | methods: { |
| | | //鍒囨崲 |
| | | selectss(selvelue) { |
| | | |
| | | axios.post("http://172.21.1.139:9291/api/StationManager/UpdateStation",{MainData: { |
| | | stationid: selvelue, |
| | | }}) |
| | | .then(response => { |
| | | if(response.data.status){ |
| | | this.AddTask(); |
| | | }else{ |
| | | alert(selvelue) |
| | | } |
| | | }; |
| | | // window.addEventListener("resize", function () { |
| | | // $chart2.setOption(chart2); |
| | | // }); |
| | | |
| | | |
| | | }) |
| | | }, |
| | | AddTask() { |
| | | axios.post("http://172.21.1.139:9291/api/StationManager/GetStation") |
| | | .then(response => { |
| | | if(response.status){ |
| | | this.datalist = response.data.data; |
| | | } |
| | | |
| | | }) |
| | | } |
| | | |
| | | }, |
| | | |
| | | props: { |
| | | value: String |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .home-contianer { |
| | | padding: 6px; |
| | | background: #eee; |
| | | width: 100%; |
| | | height: 100%; |
| | | // max-width: 800px; |
| | | // position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | left: 0; |
| | | margin: 0 auto; |
| | | |
| | | .h-top { |
| | | display: flex; |
| | | .h-top-left { |
| | | height: 100%; |
| | | width: 300px; |
| | | background: white; |
| | | } |
| | | height: 300px; |
| | | } |
| | | .h-top > div { |
| | | border: 1px solid #e8e7e7; |
| | | border-radius: 5px; |
| | | // margin: 6px; |
| | | } |
| | | .h-top-center { |
| | | height: 100%; |
| | | background: white; |
| | | margin: 0 6px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | flex: 1; |
| | | .item1 .num { |
| | | padding-top: 28px; |
| | | } |
| | | .item2 .num { |
| | | padding-bottom: 20px; |
| | | } |
| | | |
| | | .n-item { |
| | | width: 100%; |
| | | height: 100%; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | // display: flex; |
| | | .item { |
| | | border-right: 1px solid #e5e5e5; |
| | | width: 33.3333333%; |
| | | float: left; |
| | | height: 50%; |
| | | border-bottom: 1px solid #e5e5e5; |
| | | padding: 47px 0; |
| | | font-size: 13px; |
| | | } |
| | | .item:hover { |
| | | background: #f9f9f9; |
| | | cursor: pointer; |
| | | } |
| | | .item:last-child { |
| | | border-right: 0; |
| | | } |
| | | .item3, |
| | | .item6 { |
| | | border-right: 0; |
| | | } |
| | | .num { |
| | | word-break: break-all; |
| | | color: #282727; |
| | | font-size: 30px; |
| | | transition: transform 0.8s; |
| | | } |
| | | .num:hover { |
| | | color: #55ce80; |
| | | transform: scale(1.2); |
| | | } |
| | | .text { |
| | | font-size: 13px; |
| | | color: #777; |
| | | } |
| | | } |
| | | } |
| | | .h-top-right { |
| | | // flex: 1; |
| | | |
| | | width: 400px; |
| | | height: 100%; |
| | | background: white; |
| | | } |
| | | .h3 { |
| | | padding: 7px 15px; |
| | | font-weight: 500; |
| | | background: #fff; |
| | | border-bottom: 1px dotted #d4d4d4; |
| | | } |
| | | } |
| | | .task-table { |
| | | table { |
| | | width: 100%; |
| | | .thead { |
| | | font-weight: bold; |
| | | } |
| | | tr { |
| | | cursor: pointer; |
| | | td { |
| | | border-bottom: 1px solid #f3f3f3; |
| | | padding: 9px 8px; |
| | | font-size: 12px; |
| | | } |
| | | } |
| | | tr:hover { |
| | | background: #eee; |
| | | } |
| | | } |
| | | } |
| | | .h-chart { |
| | | height: 340px; |
| | | margin: 6px 0px; |
| | | display: flex; |
| | | .h-left-grid { |
| | | width: 300px; |
| | | height: 100%; |
| | | background: white; |
| | | display: inline-block; |
| | | .name { |
| | | margin-left: 7px; |
| | | } |
| | | .item:hover { |
| | | background: #f9f9f9; |
| | | cursor: pointer; |
| | | } |
| | | .item { |
| | | padding: 22px 14px; |
| | | float: left; |
| | | width: 50%; |
| | | height: 33.33333%; |
| | | border-bottom: 1px solid #eee; |
| | | border-right: 1px solid #eee; |
| | | i { |
| | | font-size: 30px; |
| | | } |
| | | .desc { |
| | | font-size: 12px; |
| | | color: #c3c3c3; |
| | | padding: 5px 0 0 4px; |
| | | line-height: 1.5; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | #h-chart2 { |
| | | border-radius: 3px; |
| | | background: white; |
| | | padding-top: 10px; |
| | | height: 100%; |
| | | width: 0; |
| | | flex: 1; |
| | | margin: 0 7px; |
| | | } |
| | | #h-chart3 { |
| | | border-radius: 3px; |
| | | padding: 10px 10px 0 10px; |
| | | background: white; |
| | | // padding-top: 10px; |
| | | height: 100%; |
| | | |
| | | width: 400px; |
| | | } |
| | | </style> |