| | |
| | | <span></span> |
| | | <span></span> |
| | | <span></span> |
| | | <!-- <el-tabs v-model="activeName" @tab-click="handleClick">--> |
| | | <!-- <el-tab-pane label="实时数据" name="first">--> |
| | | <!-- <RealData></RealData>--> |
| | | <!-- </el-tab-pane>--> |
| | | <!-- <el-tab-pane label="小时数居" name="second">--> |
| | | <!-- <HourData></HourData>--> |
| | | <!-- </el-tab-pane>--> |
| | | <!-- <el-tab-pane label="日数据" name="third">--> |
| | | <!-- <DayData></DayData>--> |
| | | <!-- </el-tab-pane>--> |
| | | <!-- <el-tab-pane label="人工监测数据" name="fourth">--> |
| | | <!-- <Detail></Detail>--> |
| | | <!-- </el-tab-pane>--> |
| | | <!-- </el-tabs>--> |
| | | <div class="navigation"> |
| | | <div class="navigation-left"> |
| | | <div :class="active===0?'hover':''" class="uncheck" @click='tabTaggle("RealData",0)'>实时数据</div> |
| | |
| | | <div :class="active===2?'hover':''" class="uncheck" @click='tabTaggle("DayData",2)'>日数据</div> |
| | | <div :class="active===3?'hover':''" class="uncheck" @click='tabTaggle("Detail",3)'>人工监测数据</div> |
| | | </div> |
| | | <div class="navigation-right"> |
| | | <div class="navigation-right" v-if="active !== 3"> |
| | | <p>正常</p> |
| | | <i style=" background: #4ec99c;"></i> |
| | | <p>预警</p> |
| | | <i style=" background: orange;"></i> |
| | | <i style=" background: #fc9303;"></i> |
| | | <p>超标</p> |
| | | <i style=" background: red;"></i> |
| | | <i style=" background: #fc1d04;"></i> |
| | | </div> |
| | | </div> |
| | | <component :is="currentTab" ref="RealData"></component> |
| | |
| | | import PublicSector from '../PublicSector' |
| | | // 图表组件 |
| | | import RealData from './WasteWaterRealChart' |
| | | import HourData from './HourData' |
| | | import DayData from './DayData' |
| | | import HourData from './WasteWaterHoursChart' |
| | | import DayData from './WasteWaterDayChart' |
| | | import Detail from './Detail' |
| | | |
| | | export default { |
| | |
| | | |
| | | .default-uncheck { |
| | | background-color: #0e639e; |
| | | color: #fff; |
| | | color: #C0C0C0; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .hover { |
| | | background-color: #0e639e; |
| | | color: #fff; |
| | | background-color: #0e539e; |
| | | color: #ffffff; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .hover:hover { |
| | | cursor: pointer; |
| | | padding: 5px; |
| | | border: 1px solid #2b87c8; |
| | | border: 1px solid #5F9EA0; |
| | | border-radius: 4px; |
| | | text-align: center; |
| | | color: #fff; |
| | | color: #F0FFFF; |
| | | } |
| | | } |
| | | |