|
|
@@ -3,6 +3,20 @@ export default {
|
|
|
name: "BasicInfoModalContent",
|
|
|
data() {
|
|
|
return {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '1111'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '2222'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '3333'
|
|
|
+ }
|
|
|
+ ],
|
|
|
tableData: [
|
|
|
{
|
|
|
idx: 1,
|
|
|
@@ -21,6 +35,29 @@ export default {
|
|
|
height: 30,
|
|
|
},
|
|
|
],
|
|
|
+ unitList:[
|
|
|
+ {
|
|
|
+ title:'高层建筑总数(栋)',
|
|
|
+ unitNum:487
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'超高层建筑总数(栋)',
|
|
|
+ unitNum:87
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'老旧高层建筑总数(栋)',
|
|
|
+ unitNum:165
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'公共建筑总数(栋)',
|
|
|
+ unitNum:173
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'住宅建筑总数(栋)',
|
|
|
+ unitNum:287
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ value:'全市'
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -32,7 +69,39 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div >
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <div class="maintenance-supervision">
|
|
|
+ <div class="maintenance-supervision_header">
|
|
|
+ <div>
|
|
|
+ <el-select v-model="value" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <el-input v-model="search" placeholder="请输入建筑名称"></el-input>
|
|
|
+ </div>
|
|
|
+ <el-button>搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 建筑数 -->
|
|
|
+ <div class="unit-bulid">
|
|
|
+ <div class="unit-num" v-for="(item,index) in unitList" :key="index">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <!-- <span class="build-num">{{ item.unitNum }}</span> -->
|
|
|
+ <LinearText
|
|
|
+ style="display: inline-block"
|
|
|
+ :text="item.unitNum"
|
|
|
+ fontSize="40px"
|
|
|
+ ></LinearText>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<basic-table :data="tableData" @row-click="rowClickHandler">
|
|
|
<el-table-column prop="idx" label="序号" width="180"> </el-table-column>
|
|
|
<el-table-column prop="area" label="区域" width="180"> </el-table-column>
|
|
|
@@ -51,4 +120,128 @@ export default {
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<style scoped lang="less"></style>
|
|
|
+<style scoped lang="less">
|
|
|
+.maintenance-supervision {
|
|
|
+ // padding: 10px 10px 0px 20px;
|
|
|
+ ::v-deep(.el-input__inner) {
|
|
|
+ border: none;
|
|
|
+ background: linear-gradient(360deg, rgba(0,148,255, .5) 0%, rgba(0,148,255, .31) 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ ::v-deep(.el-button) {
|
|
|
+ border: none;
|
|
|
+ background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .maintenance-supervision_header {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-around;
|
|
|
+ // border-bottom: 1px solid #154956;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgb(79, 149, 186);
|
|
|
+ }
|
|
|
+
|
|
|
+ .warp {
|
|
|
+ height: 520px;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ .item {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background-color: #184254;
|
|
|
+ width: 150px;
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
+}
|
|
|
+/deep/.el-button {
|
|
|
+ width: 100px;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 2px;
|
|
|
+ background: #184254;
|
|
|
+ margin: 0 20px 0 30px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+// /deep/.el-select-dropdown{
|
|
|
+
|
|
|
+// background-color:#184254 !important;
|
|
|
+// position: fixed;
|
|
|
+
|
|
|
+// }
|
|
|
+/deep/.select_btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 225px;
|
|
|
+ right: 320px;
|
|
|
+ //下拉框
|
|
|
+}
|
|
|
+/deep/.el-input{
|
|
|
+ width: 150px;
|
|
|
+ // margin-left: 20px;
|
|
|
+}
|
|
|
+ .header {
|
|
|
+ color: #fff;
|
|
|
+ height: 33px !important;
|
|
|
+ line-height: 33px !important;
|
|
|
+ background-color: rgba(0, 163, 255, 0.3) !important;
|
|
|
+ color: #61dbff;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row,
|
|
|
+ li,
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ height: 39px;
|
|
|
+ line-height: 39px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ .time,
|
|
|
+ .num,
|
|
|
+ .person,
|
|
|
+ .result {
|
|
|
+ flex: 0.33;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ flex: 0.15;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .inp{
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.unit-bulid{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.unit-num{
|
|
|
+ width: 200px;
|
|
|
+ height: 109px;
|
|
|
+ border: 1px solid #0463A7;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ line-height: 59px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
