- <template>
- <!-- 基本信息查看更多 -->
- <div class="stationBase">
- <table cellpadding="0" cellspacing="0">
- <tr>
- <td rowspan="3">基础信息</td>
- <td>
- <p>
- <span>站点名称</span><span class="value">{{ stationInfo.stName }}</span>
- </p>
- </td>
- <td>
- <p>
- <span>站点编号</span><span class="value">{{ stationInfo.stCode }}</span>
- </p>
- </td>
- <td>
- <p>
- <span>安装地址</span><span class="value" :title="stationInfo.address">{{ stationInfo.address }}</span>
- </p>
- </td>
- </tr>
- <tr>
- <td>
- <p>
- <span>安装类型</span>
- <span class="value">
- {{
- stationInfo.monitorTargetType == 'river'
- ? '河道'
- : stationInfo.monitorTargetType == 'lake'
- ? '湖泊'
- : stationInfo.monitorTargetType == 'pipeline'
- ? '管网'
- : stationInfo.monitorTargetType == 'channel'
- ? '港渠'
- : stationInfo.monitorTargetType == 'typical_land'
- ? '典型地块'
- : '--'
- }}
- </span>
- </p>
- </td>
- <td>
- <p>
- <span>关联对象</span><span class="value">{{ stationInfo.belongName || '--' }}</span>
- </p>
- </td>
- <td>
- <p>
- <span>安装时间</span><span class="value">{{ stationInfo.installDate }}</span>
- </p>
- </td>
- </tr>
- <tr>
- <td>
- <p>
- <span>经纬度</span><span class="value" :title="stationInfo.lonLat">{{ stationInfo.lonLat }}</span>
- </p>
- </td>
- <td>
- <p>
- <span>坐标系</span>
- <span class="value">
- {{
- stationInfo.elevationSystem == 'yellow_sea'
- ? '黄海'
- : stationInfo.elevationSystem == '85'
- ? '85国标'
- : stationInfo.elevationSystem == 'wusong'
- ? '吴淞'
- : '--'
- }}
- </span>
- </p>
- </td>
- <td>
- <p>
- <span>所属水系</span><span class="value">{{ stationInfo.drainageSystem }}</span>
- </p>
- </td>
- </tr>
- <tr>
- <td rowspan="2">监测配置</td>
- <td>
- <p>
- <span>监测高程</span>
- <span class="value">
- {{
- stationInfo.elevationSystem == 'yellow_sea'
- ? '黄海'
- : stationInfo.elevationSystem == '85'
- ? '85国标'
- : stationInfo.elevationSystem == 'wusong'
- ? '吴淞'
- : '--'
- }}
- </span>
- </p>
- </td>
- <td>
- <p>
- <span>安装高度</span><span class="value">{{ stationInfo.installHeight }}</span>
- </p>
- </td>
- <td>
- <p>
- <span>监测指标</span>
- <span class="value" :title="extendInfo.monitorPropertyNames">{{ extendInfo.monitorPropertyNames }}</span>
- </p>
- </td>
- </tr>
- <tr>
- <td>
- <p>
- <span>预警公式</span><span class="value">{{ extendInfo.earlyWarnFormulaName || '--' }}</span>
- </p>
- </td>
- <td>
- <p>
- <span>告警公式</span><span class="value">{{ extendInfo.warnFormulaName || '--' }}</span>
- </p>
- </td>
- <td>
- <p>
- <span>数据完整率</span><span class="value">{{ stationInfo.requireDataCompleteRate || '--' }}</span>
- </p>
- </td>
- </tr>
- <tr>
- <td rowspan="2" style="border-bottom: 1px solid #d8ddef">运维相关</td>
- <td>
- <p>
- <span>截止时间</span><span class="value">{{ stationInfo.contractDate }}</span>
- </p>
- </td>
- <td>
- <p>
- <span>责任人</span><span class="value">{{ stationInfo.chargeUser }}</span>
- </p>
- </td>
- <td>
- <p><span>运维单位</span><span class="value">武汉新烽光电</span></p>
- </td>
- </tr>
- <tr>
- <td>
- <p><span>年故障数</span><span class="value">--</span></p>
- </td>
- <td>
- <p><span>年运维数</span><span class="value">--</span></p>
- </td>
- <td>
- <p><span>联系人</span><span class="value">朱方仁 18907171008</span></p>
- </td>
- </tr>
- </table>
- <div class="title">现场照片</div>
- <div class="xcImage" v-if="stationInfo.coverPhotosFileList.length > 0">
- <ImagePreview :src="item.url" :width="100" :height="100" v-for="item in stationInfo.coverPhotosFileList" :key="item.id" />
- </div>
- </div>
- </template>
- <script setup>
- import { getStationDetailExtend } from '@/api/dataAnalysis/syntherticData';
- const props = defineProps({
- stationInfo: Object,
- });
- const { proxy } = getCurrentInstance();
- const myChart = shallowRef(null);
- const extendInfo = ref({});
- // 获取详情数据 扩展
- const getDetailData = id => {
- getStationDetailExtend(props.stationInfo.stCode).then(res => {
- extendInfo.value = res.data;
- });
- };
- onMounted(() => {
- getDetailData();
- });
- </script>
- <style lang="scss">
- .stationBase {
- width: 100%;
- padding-bottom: 50px;
- max-height: 80vh;
- overflow-y: auto;
- table {
- width: 98%;
- tr {
- td:nth-of-type(1) {
- border-left: 1px solid #d8ddef;
- }
- }
- tr:last-child {
- td {
- border-bottom: 1px solid #d8ddef;
- }
- }
- td {
- border-top: 1px solid #d8ddef;
- border-right: 1px solid #d8ddef;
- text-align: center;
- width: 30%;
- color: #c6c6c6;
- &:nth-of-type(1) {
- width: 100px;
- }
- p {
- display: flex;
- justify-content: space-around;
- margin: 8px 0px;
- span:nth-of-type(1) {
- display: inline-block;
- width: 75px;
- }
- .value {
- flex: 1;
- display: inline-block;
- font-weight: bold;
- color: #d8ddef;
- max-width: 200px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- }
- }
- .xcImage {
- .el-image {
- width: 150px;
- margin-right: 10px;
- }
- }
- .title {
- font-weight: bold;
- color: #d8ddef;
- margin: 10px 0px;
- }
- #baseEchart {
- width: 98%;
- height: 300px;
- }
- }
- </style>