| | |
| | | <div class="control-panel"> |
| | | <div class="form-group"> |
| | | <label>åºåï¼</label> |
| | | <el-select |
| | | size="mini" |
| | | filterable |
| | | v-model="Area.areaCode" |
| | | placeholder="è¯·éæ©" |
| | | class="full-width" |
| | | > |
| | | <el-option |
| | | v-for="item in slectData" |
| | | :value="item.areaCode" |
| | | :label="item.areaName" |
| | | :key="item.areaName" |
| | | ></el-option> |
| | | <el-select size="mini" filterable v-model="Area.areaCode" placeholder="è¯·éæ©" class="full-width"> |
| | | <el-option v-for="item in slectData" :value="item.areaCode" :label="item.areaName" |
| | | :key="item.areaName"></el-option> |
| | | </el-select> |
| | | </div> |
| | | |
| | |
| | | <div class="legend-section"> |
| | | <h4>说æ</h4> |
| | | <div class="legend-grid"> |
| | | <div |
| | | class="legend-item" |
| | | v-for="item in infoMsg" |
| | | :key="item.bgcolor" |
| | | > |
| | | <span |
| | | class="color-box" |
| | | :style="{ 'background-color': item.bgcolor }" |
| | | ></span> |
| | | <div class="legend-item" v-for="item in infoMsg" :key="item.bgcolor"> |
| | | <span class="color-box" :style="{ 'background-color': item.bgcolor }"></span> |
| | | <span class="legend-label">{{ item.msg }}</span> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <!-- è´§ä½å±ç¤ºåºå --> |
| | | <div class="location-view"> |
| | | <div |
| | | class="layer-container" |
| | | v-for="layer in locationData" |
| | | :key="layer.index" |
| | | > |
| | | <div class="layer-container" v-for="layer in locationData" :key="layer.index"> |
| | | <h3 class="layer-title">第{{ layer.index }}å±</h3> |
| | | <div class="row" v-for="row in layer.rows" :key="row.index"> |
| | | <div |
| | | class="location-cell" |
| | | :style="{ 'background-color': GetBgColor(col) }" |
| | | v-for="col in row.cols" |
| | | :key="col.index" |
| | | @mouseenter="showTooltip(col, $event)" |
| | | @mouseleave="hideTooltip" |
| | | > |
| | | {{ row.index }}-{{ col.index }}-{{ layer.index }} |
| | | <div class="location-cell" :style="{ 'background-color': GetBgColor(col) }" v-for="col in row.cols" |
| | | :key="col.index" @mouseenter="showTooltip(col, $event)" @mouseleave="hideTooltip"> |
| | | {{ row.index }}-{{ layer.index }}-{{ col.index }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- æ¬æµ®æç¤ºæ¡ --> |
| | | <div |
| | | v-if="showTooltipFlag" |
| | | class="location-tooltip" |
| | | :style="{ |
| | | <div v-if="showTooltipFlag" class="location-tooltip" :style="{ |
| | | left: tooltipPosition.x + 'px', |
| | | top: tooltipPosition.y + 'px', |
| | | }" |
| | | > |
| | | }"> |
| | | <div v-if="currentLocation"> |
| | | <p><strong>è´§ä½å·:</strong>{{ currentLocation.locationCode }}</p> |
| | | <!-- <p> |