widget.html 7.84 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/frontweb/libs/element-ui/lib-master/theme-chalk/index.css"/>
    <link rel="stylesheet" href="./css/style.css">

    <script src="/frontweb/libs/vue/vue.js"></script>
    <script src="/frontweb/libs/element/index.js"></script>
</head>
<body>
    <div id="zbxq">
        <div class="zbxq_left">
            <div class="zblb_title">指标列表</div>
            <div class="zbxq_search">
                    <el-input v-model="input4" class="input">
                    <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <div class="zbxq_left_content" v-for="(item,index) in zblb" :key="index" :class="['listStyle','active']" v-cloak>
                <span class="content">{{item}}</span>
            </div>
        </div>
        <div class="zbxq_right">
            <div class="zbxq_title">
                    城乡建设用地规模
                <el-button type="primary" size="medium" icon="el-icon-back" style="float:right;margin-left:15px;" @click="goBack">返回</el-button>
                <el-button type="primary" size="medium" icon="el-icon-edit" style="float:right;margin-left:15px;" @click="edit">编辑</el-button>

            </div>
            <div class="zbxq_right_part">
                <div class="zbxq_right_part_title">
                    <span>|</span>基本属性
                </div>
                <!-- 指标名称 -->
                <div class="zbxq-right-part-rows-bgrows">
                    <span class="mc">指标名称:</span>
                    <span class="val">城乡建设用地规模</span>
                </div>
                <!-- 定义 -->
                <div class="zbxq-right-part-rows">
                    <span class="mc">&nbsp;&nbsp;&nbsp;&nbsp;义:</span>
                    <span class="val">指城镇用地,采矿用地和村庄用地规模</span>
                </div>
                <!-- 指标类型 -->
                <div class="zbxq-right-part-rows-bgrows">
                    <span class="mc">指标类型:</span>
                    <span class="val">核心</span>
                    <span class="mc1">指标属性:</span>
                    <span class="val">约束性</span>
                    <span class="mc1">适用范围:</span>
                    <span class="val">全域</span>
                    <span class="mc1">单位:</span>
                    <span class="val">平方千米</span>
                </div>
                <!-- 数据来源单位 -->
                <div class="zbxq-right-part-rows">
                    <span class="mc">数据来源单位:</span>
                    <span class="val">城乡建设用地规模</span>
                </div>
                <!-- 指标体系 -->
                <div class="zbxq-right-part-rows">
                    <span class="mc">指标体系:</span>
                    <div class="tables">
                        <el-table :data='tableData' size="small">
                            <el-table-column prop="xh" label="序号" width="180" >
                            </el-table-column>
                            <el-table-column prop="zbtxlx" label="指标体系类型" width="550">
                            </el-table-column>
                            <el-table-column prop="yjfl" label="一级分类" width="200">
                            </el-table-column>
                            <el-table-column prop="ejfl" label="二级分类" width="180">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="zbxq_right_part_title">
                        <span>|</span>计算属性
                </div>
                <div class="zbxq-right-part-rows-bgrows">
                    <span class="mc">采集周期:</span>
                    <span class="val">月度</span>
                    <!-- <span class="val">季度</span>
                    <span class="val">年度</span> -->
                </div>
                <div class="zbxq-right-part-rows">
                    <span class="mc">计算方式:</span>
                    <span class="val" v-if="mxpz">模型配置</span>
                    <span class="val" v-else="!mxpz">人工录入</span>
                </div>
                <div class="zbxq-right-part-rows-bgrows">
                    <span class="mc2">关联模型:</span>
                    <span class="val">XXXX计算模型</span>
                </div>
            <div class="zbxq-right-part-rglr-content" v-else="!mxpz">
                <div class="zbxq-right-part-date">
                    获取时间:
                    <el-date-picker
                        v-model="value1"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </div>
                <div class="zbxq-right-part-rglr">
                    <tbody>
                        <table style="width: 1122px;height: 339px;margin-left: 84px;border-color: #fff;text-align: center;font-size: 14px;color: rgba(0,0,0,0.85)" cellpadding="0" border="1" cellspacing="0">
                                <tr style="text-align: center;background:#F2F2F2;font-size: 14px;color: rgba(0,0,0,0.85);font-weight: bold;">
                                    <td style="width: 111px;">行政级别</td>
                                    <td style="width: 180px;">指标范围</td>
                                    <td>监测值</td>
                                </tr>
                                <tr>
                                    <td>市域</td>
                                    <td>西安市</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td rowspan="7">区县</td>
                                    <td>雁塔区</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <!-- <td></td> -->
                                    <td>未央区</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <!-- <td></td> -->
                                    <td>新域区</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <!-- <td></td> -->
                                    <td>碑林区</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <!-- <td></td> -->
                                    <td>莲湖区</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <!-- <td></td> -->
                                    <td>长安区</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <!-- <td></td> -->
                                    <td>澎湖区</td>
                                    <td></td>
                                </tr>
                        </table>
                    </tbody>
                </div>
              </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/widget.js"></script>
</html>