| | |
| | | <ul class="tab"> |
| | | <li @click='tabTaggle("ECharts")'>实时数据</li> |
| | | <li @click='tabTaggle("EChartsHour")'>小时数据</li> |
| | | <li @click='tabTaggle("ECharts")'>日数据</li> |
| | | <li @click='tabTaggle("EChartsDate")'>日数据</li> |
| | | <li @click='tabTaggle("ECharts")'>人工数据</li> |
| | | </ul> |
| | | <div id="title" > |
| | | <span><strong> </strong></span> |
| | | <span >正常</span> |
| | | <span ></span> |
| | | <span >预警</span> |
| | | <span ></span> |
| | | <span >超标</span> |
| | | <span ></span> |
| | | </div> |
| | | <component :is="currentTab" v-bind="$attrs"></component> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import EChartsHour from './EChartsHour' |
| | | import EChartsDate from './EChartsDate' |
| | | |
| | | export default { |
| | | name: 'PublicChart', |
| | | components: { |
| | | EChartsHour |
| | | EChartsHour, |
| | | EChartsDate |
| | | }, |
| | | data () { |
| | | return { |
| | |
| | | methods: { |
| | | tabTaggle (taggleMenu) { |
| | | this.currentTab = taggleMenu |
| | | debugger |
| | | // debugger |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .win { |
| | | position: relative; |
| | | margin-bottom: 13px; |
| | | /*margin-bottom: 13px;*/ |
| | | background-color: rgba(33, 41, 69, 0.9); |
| | | border: 0.8px solid #396d83; |
| | | height: 1.5rem; |
| | | /*height: 1.5rem;*/ |
| | | } |
| | | |
| | | .border_corner { |
| | |
| | | color: #682000; |
| | | cursor: pointer; |
| | | } |
| | | #title{ |
| | | height: 30px; |
| | | /* margin-top: 30px; */ |
| | | color: #ffffff; |
| | | margin-top: 5px; |
| | | } |
| | | |
| | | #title span:nth-child(1){ |
| | | /*margin-left: 478px*/ |
| | | } |
| | | #title span:nth-child(2){ |
| | | /*margin-left: 177px*/ |
| | | } |
| | | #title span:nth-child(3){ |
| | | display: inline-block; |
| | | background-color: #4ec99c; |
| | | height: 15px; |
| | | width: 35px; |
| | | margin-left: 10px; |
| | | border-radius: 5px; |
| | | } |
| | | #title span:nth-child(6){ |
| | | /*margin-left: 21px*/ |
| | | } |
| | | #title span:nth-child(7){ |
| | | display: inline-block; |
| | | background-color: red; |
| | | height: 15px; |
| | | width: 35px; |
| | | margin-left: 7px; |
| | | border-radius: 5px; |
| | | } |
| | | #title span:nth-child(4){ |
| | | margin-left: 17px; |
| | | } |
| | | #title span:nth-child(5){ |
| | | display: inline-block; |
| | | background-color: orange; |
| | | height: 15px; |
| | | width: 35px; |
| | | margin-left: 9px; |
| | | border-radius: 5px; |
| | | } |
| | | </style> |