|
|
@@ -0,0 +1,168 @@
|
|
|
+<template>
|
|
|
+ <div class="ydjc">
|
|
|
+ <Title title='用地监管'></Title>
|
|
|
+ <div class="selectTab">
|
|
|
+
|
|
|
+ <el-select v-model="left_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+import { QueryOne, QueryList } from "../../api/cockpitNew";
|
|
|
+import DiscountedAColumnar from './common/DiscountedAColumnar.vue';
|
|
|
+import Title from './common/Title.vue';
|
|
|
+export default {
|
|
|
+ components: { DiscountedAColumnar, Title },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: 'first',
|
|
|
+ radio: 'cut',
|
|
|
+ left_value: 'lsyd_qxjc',
|
|
|
+ options: [
|
|
|
+ { value: "lsyd_qxjc", label: "临时用地(期限检测)" },
|
|
|
+ { value: "lsyd_fkjc", label: "临时用地(复垦监测)" },
|
|
|
+
|
|
|
+ { value: "nzyd", label: "农转用地" },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
+ created() {
|
|
|
+
|
|
|
+ }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const that = this;
|
|
|
+ this.$nextTick((res) => {
|
|
|
+ // this.init_info();
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
+ destroy() { },//生命周期 - 销毁完成
|
|
|
+ activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
+ deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.ydjc {
|
|
|
+
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+
|
|
|
+ border-width: 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ background: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-image: url("/static/images/overview/titlebox.gif");
|
|
|
+ /* display: -webkit-box; */
|
|
|
+ display: -ms-flexbox;
|
|
|
+ /* display: flex; */
|
|
|
+ -webkit-box-pack: justify;
|
|
|
+ -ms-flex-pack: justify;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ position: absolute;
|
|
|
+ top: 0.3rem;
|
|
|
+ left: 2.5rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.selectTab {
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ right: 48px;
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ // padding-right: 30px;
|
|
|
+ width: 128px !important;
|
|
|
+ height: 24px !important;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-left: 22px;
|
|
|
+ padding-right: 0px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #bcd3e5;
|
|
|
+ border: none;
|
|
|
+ // background: url("/static/images/overview/selectBg.png") no-repeat !important;
|
|
|
+ background-color: rgba(0, 0, 0, 0) !important;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__icon {
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-input__suffix {
|
|
|
+ right: -36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown__list {
|
|
|
+ color: #bcd3e5 !important;
|
|
|
+ background: linear-gradient(180deg,
|
|
|
+ rgba(3, 115, 177, 0) 11%,
|
|
|
+ rgba(3, 115, 177, 0.48) 100%);
|
|
|
+ border-image: linear-gradient(360deg,
|
|
|
+ rgba(75, 185, 250, 0.2),
|
|
|
+ rgba(75, 185, 250, 0.05)) 1 1 !important;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown__item.hover,
|
|
|
+ .el-select-dropdown__item:hover {
|
|
|
+ background-color: rgba(87, 163, 226, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-select-dropdown__item {
|
|
|
+ color: #ecf6ff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ {
|
|
|
+ .el-select-dropdown__item.selected {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-popper[x-placement^="bottom"] {
|
|
|
+ margin-top: 12px;
|
|
|
+ background: #163253;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-select-dropdown {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
|
|
|
+ border-bottom-color: #163253;
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+</style>
|
zpf