From e788995330a3fd588d0d80f28ee7510e4b7c787f Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期三, 12 二月 2025 15:35:07 +0800
Subject: [PATCH] 只在项目中心展示审核按钮
---
src/views/index.vue | 834 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 519 insertions(+), 315 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 954a9f3..00052f0 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,143 +1,236 @@
<template>
- <div class="home">
- <div class="overview">
- <div class="overview-top">
- <div class="title">椤圭洰鎬昏</div>
- <div class="qurey">
- <el-form ref="queryFormRef" :model="queryParams">
- <div class="search_from">
- <el-form-item label="鏃ユ湡">
- <el-date-picker
- style="width: 300px"
- v-model="timeMerge"
- clearable
- end-placeholder="缁撴潫鏃堕棿"
- format="YYYY-MM-DD"
- placeholder="璇烽�夋嫨鏃ユ湡"
- size="default"
- start-placeholder="寮�濮嬫椂闂�"
- type="daterange"
- value-format="YYYY-MM-DD"
- @change="dataPickerChange"
- />
- </el-form-item>
- <el-form-item label="琛屾斂鍖哄垝">
- <el-select
- v-model="queryParams.area"
- clearable
- placeholder="璇烽�夋嫨鍖哄垝"
- style="width: 180px"
- >
- <el-option
- v-for="item in sys_administrative_divisions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item
- label="鎶曡祫閲戦"
- style="margin-right: 50px"
- >
- <div class="from_input">
- <el-input
- v-model="queryParams.start"
- clearable
- placeholder="璇疯緭鍏�"
- style="width: 100px"
- type="number"
- />
- 鑷�
- <el-input
- v-model="queryParams.end"
- clearable
- placeholder="璇疯緭鍏�"
- style="width: 100px"
- type="number"
- />
- </div>
- </el-form-item>
- <el-form-item style="margin-right: 20px">
- <el-button
- icon="Search"
- type="primary"
- @click="handleQuery"
- >鎼滅储</el-button
- >
- <el-button icon="Refresh" @click="resetQuery"
- >閲嶇疆</el-button
- >
- </el-form-item>
- </div>
- </el-form>
+ <div class="home">
+ <div class="overview">
+ <div class="overview-top">
+ <div class="title">椤圭洰鎬昏</div>
+ <div class="qurey">
+ <el-form ref="queryFormRef" :model="queryParams">
+ <div class="search_from">
+ <el-form-item label="鏃ユ湡">
+ <el-date-picker
+ style="width: 300px"
+ v-model="timeMerge"
+ clearable
+ end-placeholder="缁撴潫鏃堕棿"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨鏃ユ湡"
+ size="default"
+ start-placeholder="寮�濮嬫椂闂�"
+ type="daterange"
+ value-format="YYYY-MM-DD"
+ @change="dataPickerChange"
+ />
+ </el-form-item>
+ <el-form-item label="琛屾斂鍖哄垝">
+ <el-select
+ v-model="queryParams.area"
+ clearable
+ placeholder="璇烽�夋嫨鍖哄垝"
+ style="width: 180px"
+ >
+ <el-option
+ v-for="item in sys_administrative_divisions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鎶曡祫閲戦" style="margin-right: 50px">
+ <div class="from_input">
+ <el-input
+ v-model="queryParams.start"
+ clearable
+ placeholder="璇疯緭鍏�"
+ style="width: 100px"
+ type="number"
+ />
+ 鑷�
+ <el-input
+ v-model="queryParams.end"
+ clearable
+ placeholder="璇疯緭鍏�"
+ style="width: 100px"
+ type="number"
+ />
</div>
+ </el-form-item>
+ <el-form-item style="margin-right: 20px">
+ <el-button icon="Search" type="primary" @click="handleQuery"
+ >鎼滅储</el-button
+ >
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
</div>
- <!-- 缁熻鎯呭喌 -->
- <ProjectOverview
- :calculation="calculation"
- :countExceptionProjectData="countExceptionProjectData"
- />
+ </el-form>
</div>
- <!-- 浠ｅ姙浜嬮」 -->
- <div class="flex">
- <div class="flex_card">
- <el-card>
- <NoticeTable style="height: 340px" />
- </el-card>
- </div>
- <!-- 娑堟伅閫氱煡 -->
- <div class="flex_card">
- <el-card>
- <TidingsTable style="height: 340px" />
- </el-card>
- </div>
- <!-- 鍦板浘 -->
- </div>
- <div style="margin-top: 10px">
- <el-card>
- <div>
- <div class="search-form">
- <el-form :model="searchForm" inline>
- <el-form-item label=" ">
- <el-input
- v-model="searchForm.name"
- clearable
- placeholder="璇疯緭鍏ラ」鐩悕绉版垨椤圭洰浠ｇ爜"
- style="width: 180px"
- />
- </el-form-item>
- <el-form-item style="margin-right: 0px">
- <el-button
- icon="Search"
- type="primary"
- @click="searchList"
- >鎼滅储</el-button
- >
- <el-button icon="Refresh" @click="mapQuery"
- >閲嶇疆</el-button
- >
- </el-form-item>
- </el-form>
- </div>
- <div class="map_div">
- <Map
- id="DangerSourceId"
- ref="mapRef"
- :is-show-control="true"
- :list-type="true"
- :map-list="tableDatas"
- :map-type="true"
- class="w-full h-full border-r border-[#DBDEEA]"
- @label-click="showDetails"
- @mark-click="showDetails"
- @current-label-style-change="labelStyleChange"
- />
- </div>
- </div>
- </el-card>
- </div>
+ </div>
+
+ <!-- 缁熻鎯呭喌 -->
+ <ProjectOverview
+ :calculation="calculation"
+ :countExceptionProjectData="countExceptionProjectData"
+ />
</div>
+<!-- <el-card>-->
+<!-- <div style="display: flex;min-height: 300px">-->
+<!-- <div style="flex: 2;display: flex;flex-direction: column; justify-content: center;align-items: flex-start">-->
+<!-- <div class="flex justify-between mb-[15px]" style="align-items: center;margin-bottom: 5px">-->
+<!-- <div class="block mb-3 font-semibold fonts">娴佺▼鎺ㄨ繘鎯呭喌鎬昏</div>-->
+<!-- </div>-->
+<!-- <el-table-->
+<!-- :data="projectProcessData"-->
+<!-- :header-cell-style="{-->
+<!-- background: '#F5F7FC',-->
+<!-- color: '#454B5E',-->
+<!-- fontSize: '12px'-->
+<!-- }"-->
+<!-- min-height="280"-->
+<!-- max-height="280"-->
+<!-- >-->
+<!-- <el-table-column-->
+<!-- label="椤圭洰鍚嶇О"-->
+<!-- prop="name"-->
+<!-- :show-overflow-tooltip="true"-->
+<!-- >-->
+<!-- </el-table-column>-->
+<!-- <el-table-column-->
+<!-- label="褰撳墠/鎬昏"-->
+<!-- width="100px"-->
+<!-- prop="num"-->
+<!-- >-->
+<!-- </el-table-column>-->
+<!-- </el-table>-->
+<!-- </div>-->
+<!-- <div style="flex: 1.5;display: flex;justify-content: center;align-items: center">-->
+<!-- <div ref="pie" style="width: 85%; height: 100%;"></div>-->
+<!-- </div>-->
+<!-- <div style="flex: 2;display: flex;flex-direction: column; justify-content: center;align-items: flex-start">-->
+<!-- <div style="display: flex;align-items: center;margin-bottom: 5px;width: 100%">-->
+<!-- <div class="block font-semibold fonts" style="width: 100%">-->
+<!-- <div style="display: flex; font-size: 12px; justify-content: flex-end;width: 100%">-->
+<!-- <div-->
+<!-- :class="{ active: true }"-->
+<!-- class="tab"-->
+<!-- >-->
+<!-- 鍑嗘椂鐜�-->
+<!-- </div>-->
+<!-- <div-->
+<!-- :class="{ active: false }"-->
+<!-- class="tab"-->
+<!-- >-->
+<!-- 寮傚父鐜�-->
+<!-- </div>-->
+<!-- <div-->
+<!-- :class="{ active: false }"-->
+<!-- class="tab"-->
+<!-- >-->
+<!-- 鍔炵粨鐜�-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- <el-table-->
+<!-- :data="projectProcessData1"-->
+<!-- :header-cell-style="{-->
+<!-- background: '#F5F7FC',-->
+<!-- color: '#454B5E',-->
+<!-- fontSize: '12px'-->
+<!-- }"-->
+<!-- min-height="280"-->
+<!-- max-height="280"-->
+<!-- >-->
+<!-- <el-table-column-->
+<!-- label="鍙戝竷鍗曚綅"-->
+<!-- width="150"-->
+<!-- prop="name"-->
+<!-- >-->
+<!-- </el-table-column>-->
+<!-- <el-table-column-->
+<!-- label="鍐呭"-->
+<!-- prop="content"-->
+<!-- width="250"-->
+<!-- :show-overflow-tooltip="true"-->
+<!-- >-->
+<!-- </el-table-column>-->
+<!-- <el-table-column-->
+<!-- label="鏃堕棿"-->
+<!-- prop="time"-->
+<!-- >-->
+<!-- </el-table-column>-->
+<!-- <el-table-column-->
+<!-- fixed="right"-->
+<!-- align="center"-->
+<!-- label="鎿嶄綔"-->
+<!-- >-->
+<!-- <template slot-scope="scope">-->
+<!-- <el-button type="text" size="small">鏌ョ湅</el-button>-->
+<!-- </template>-->
+<!-- </el-table-column>-->
+<!-- </el-table>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </el-card>-->
+
+ <!-- 寰呭姙浜嬮」 -->
+ <div class="flex">
+ <div class="flex_card">
+ <el-card>
+ <NoticeTable style="height: 340px" />
+ </el-card>
+ </div>
+ <!-- 娑堟伅閫氱煡 -->
+ <div class="flex_card">
+ <el-card>
+ <TidingsTable style="height: 340px" />
+ </el-card>
+ </div>
+ <!-- 鍦板浘 -->
+ </div>
+ <div style="margin-top: 10px">
+ <el-card>
+ <div>
+ <div class="search-form">
+ <el-form :model="searchForm" inline size="small">
+ <el-form-item label="">
+ <el-input
+ v-model="searchForm.name"
+ clearable
+ placeholder="璇疯緭鍏ラ」鐩悕绉版垨椤圭洰浠ｇ爜"
+ style="width: 240px"
+ />
+ </el-form-item>
+ <el-form-item style="margin-right: 0px">
+ <el-button
+ clearable
+ @clear="searchList"
+ icon="Search"
+ type="primary"
+ @click="searchList"
+ >鎼滅储</el-button
+ >
+ <el-button icon="Refresh" @click="mapQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="map_div">
+ <Map
+ id="DangerSourceId"
+ ref="mapRef"
+ :is-show-control="true"
+ :list-type="false"
+ :map-list="tableDatas"
+ :map-type="true"
+ class="w-full h-full border-r border-[#DBDEEA]"
+ @label-click="showDetails"
+ @mark-click="showDetails"
+ @current-label-style-change="labelStyleChange"
+ />
+ </div>
+ </div>
+ </el-card>
+ </div>
+ </div>
</template>
<script>
@@ -146,236 +239,347 @@
import NoticeTable from "./components/noticeTable.vue";
import TidingsTable from "./components/tidingsTable.vue";
import Map from "./components/Map/index.vue";
-import { getCalculatioln, getAbnormalData } from '@/api/login';
+import { getCalculatioln, getAbnormalData } from "@/api/login";
+import { searchByKey } from "@/api/projectEngineering/projectInfo";
+import * as echarts from 'echarts';
+
export default {
- name: "Index",
- data() {
- return {
- queryParams: {},
- timeMerge: [],
- sys_administrative_divisions: [],
- countExceptionProjectData: {},
- searchForm: {},
- tableDatas: [
- {
- name: "灏勬椽甯�",
- value: 105.37281,
- lat: 30.87145,
- lon: 105.37281,
- id: "222222222",
- },
- {
- name: "xxxx",
- value: 105.22332,
- lat: 31.52421,
- lon: 106.22332,
- id: "11112",
- },
- ],
- calculation: [
- { text: '鍌�', mun: 0, statistics: '', statisticsMun: '0' },
- { text: '寤�', mun: 0, statistics: '', statisticsMun: '0' },
- { text: '鐪�', mun: 0, statistics: '', statisticsMun: '0' },
- { text: '甯�', mun: 0, statistics: '', statisticsMun: '0' },
- { text: '鏂�', mun: 0, statistics: '', statisticsMun: '0' },
- { text: '绔�', mun: 0, statistics: '', statisticsMun: '0' },
- { text: '鍘�', mun: 0, statistics: '', statisticsMun: '0' },
- { text: '鏅�', mun: 0, statistics: '', statisticsMun: '0' }
+ name: "Index",
+ data() {
+ return {
+ pie: null,
+ pieData: {},
+ projectProcessData: [
+ // {
+ // name: '浜ら�氱被椤圭洰瀹℃壒娴佺▼(绠�鏄撶▼搴�)',
+ // num: '11/45'
+ // },
+ // {
+ // name: '浜ら�氱被椤圭洰瀹℃壒娴佺▼(涓�鑸啘鏉戝叕璺�)',
+ // num: '12/15'
+ // },
+ // {
+ // name: '浜ら�氱被椤圭洰瀹℃壒娴佺▼(閲嶈鍐滄潙鍏矾)',
+ // num: '16/30'
+ // },
+ // {
+ // name: '浜ら�氱被椤圭洰瀹℃壒娴佺▼(鍥界渷閬�)',
+ // num: '2/18'
+ // },
+ // {
+ // name: '绀句細鎶曡祫椤圭洰瀹℃壒娴佺▼',
+ // num: '9/16'
+ // },
+ ],
+ projectProcessData1: [
+ // {
+ // name: '灏勬椽甯備汉姘戞斂搴�',
+ // content: '灏勬椽缁忓紑鍖虹豢鐒跺垢绂忓皬鍖烘梺宸ュ湴闀挎湡澶滈棿',
+ // time: '2025-01-06'
+ // },
+ // {
+ // name: '灏勬椽甯備汉姘戞斂搴�',
+ // content: '鍏充簬鍝ㄦゼ鏉戞媶杩� 鏂规鍜� 鎷嗚縼鍗忚鐨勭枒闂�',
+ // time: '2025-01-02'
+ // },
+ // {
+ // name: '灏勬椽甯備汉姘戞斂搴�',
+ // content: '灏勬椽鏁存不涓�涓嬪煄鍖烘苯杞﹂殢鎰忎贡楦ｇ瑳琛屼负',
+ // time: '2025-01-02'
+ // },
+ // {
+ // name: '灏勬椽甯備汉姘戞斂搴�',
+ // content: '缁村崱鍥介檯鍏寮�鍙戝晢鏈寜鏃跺姙鐞嗘埧浜ц瘉',
+ // time: '2025-01-01'
+ // }
+ ],
+ queryParams: {},
+ timeMerge: [],
+ sys_administrative_divisions: [],
+ countExceptionProjectData: {},
+ searchForm: {},
+ tableDatas: [],
+ calculation: [
+ { text: "鍌�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "寤�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "鐪�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "甯�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "鏂�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "绔�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "鍘�", mun: 0, statistics: "", statisticsMun: "0" },
+ { text: "鏅�", mun: 0, statistics: "", statisticsMun: "0" },
+ ],
+ };
+ },
+ components: {
+ SvgIcon,
+ ProjectOverview,
+ NoticeTable,
+ TidingsTable,
+ Map,
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.pie = echarts.init(this.$refs.pie)
+ this.pie.setOption(this.getPieOption())
+ })
+
+ this.handleQuery();
+ this.searchList();
+ },
+ methods: {
+ getPieOption() {
+ return {
+ title: {
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'horizontal',
+ left: 'center',
+ bottom: 1,
+ data: ['瓒呮椂', '鍑嗘椂', '寤舵椂', '鐫ｅ姙']
+ },
+ series: [
+ {
+ name: '楗煎浘鍚嶇О',
+ type: 'pie',
+ radius: ['50%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '30',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {value: 335, name: '瓒呮椂'},
+ {value: 310, name: '鍑嗘椂'},
+ {value: 234, name: '寤舵椂'},
+ {value: 135, name: '鐫ｅ姙'},
]
- };
+ }
+ ]
+ }
},
- components: {
- SvgIcon,
- ProjectOverview,
- NoticeTable,
- TidingsTable,
- Map,
+ dataPickerChange(val) {
+ if (!val) {
+ this.queryParams.startTime = "";
+ this.queryParams.endTime = "";
+ return;
+ }
+
+ this.queryParams.startTime = this.timeMerge[0];
+ this.queryParams.endTime = this.timeMerge[1];
},
- created() {
- this.handleQuery()
+ handleQuery() {
+ const obj = {
+ startDate: this.queryParams.startTime,
+ endDate: this.queryParams.endTime,
+ areaCode: this.queryParams.area,
+ minInvestment: this.queryParams.start,
+ maxInvestment: this.queryParams.end,
+ };
+
+ getCalculatioln(obj).then((res) => {
+ const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO);
+ const newArr = arr.map((item) => ({
+ text: item.text,
+ mun: item.count,
+ statistics: item.type,
+ statisticsMun: item.amount,
+ }));
+ // 鍒涘缓涓�涓璞★紝浠ヤ究鏍规嵁 text 灞炴�у揩閫熸煡鎵� newArr 涓殑瀵硅薄
+ const newArrLookup = newArr.reduce((lookup, item) => {
+ lookup[item.text] = item;
+ return lookup;
+ }, {});
+
+ // 鏇存柊 calculation 鏁扮粍锛屼繚鎸佸叾鍘熷椤哄簭
+ this.calculation = this.calculation.map((item) => {
+ const newItem = newArrLookup[item.text];
+ return newItem ? newItem : item; // 濡傛灉 newItem 瀛樺湪锛屽垯杩斿洖 newItem锛屽惁鍒欒繑鍥炲師濮� item
+ });
+ });
+
+ this.abnormalData(obj);
},
- methods: {
- dataPickerChange(val) {
- if (!val) {
- this.queryParams.startTime = "";
- this.queryParams.endTime = "";
- return;
- }
- this.queryParams.startTime = this.timeMerge[0];
- this.queryParams.endTime = this.timeMerge[1];
- },
- handleQuery() {
- console.log(this.queryParams);
- const obj = {
- startDate: this.queryParams.startTime,
- endDate: this.queryParams.endTime,
- areaCode: this.queryParams.area,
- minInvestment: this.queryParams.start,
- maxInvestment: this.queryParams.end,
- };
-
- getCalculatioln(obj).then((res) => {
-
- const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO);
- const newArr = arr.map((item) => ({
- text: item.text,
- mun: item.count,
- statistics: item.type,
- statisticsMun: item.amount,
- }));
- // 鍒涘缓涓�涓璞★紝浠ヤ究鏍规嵁 text 灞炴�у揩閫熸煡鎵� newArr 涓殑瀵硅薄
- const newArrLookup = newArr.reduce((lookup, item) => {
- lookup[item.text] = item;
- return lookup;
- }, {});
-
- // 鏇存柊 calculation 鏁扮粍锛屼繚鎸佸叾鍘熷椤哄簭
- this.calculation = this.calculation.map((item) => {
- const newItem = newArrLookup[item.text];
- return newItem ? newItem : item; // 濡傛灉 newItem 瀛樺湪锛屽垯杩斿洖 newItem锛屽惁鍒欒繑鍥炲師濮� item
- });
-
- });
-
- this.abnormalData(obj);
- },
-
- // 鑾峰彇寮傚父鏁版嵁
- async abnormalData(obj) {
- const res = await getAbnormalData(obj);
- this.countExceptionProjectData = res.data;
- },
-
- //鍦板浘璇︽儏
- showDetails(row) {
- console.log(row);
- },
-
- labelStyleChange(currentLabel) {
- if (lastLabel) {
- lastLabel.setBackgroundColor("#fff");
- lastLabel.setFontColor("var(--el-color-primary)");
- }
- currentLabel.setBackgroundColor("var(--el-color-primary)");
- currentLabel.setFontColor("#fff");
- lastLabel = currentLabel;
- },
- resetQuery() {
- this.queryParams = {
- area: "",
- start: "",
- end: "",
- startTime: "",
- endTime: "",
- };
- this.timeMerge = [];
- this.handleQuery();
- },
-
- // 鍦板浘鎼滅储
- async searchList() {
- // await search()
- this.mapRef.moveTo(105.37281, 30.87145);
- },
- mapQuery() { },
+ // 鍦板浘鎼滅储
+ searchList() {
+ var _this = this;
+ searchByKey({ wordKey: this.searchForm.name }).then((res) => {
+ if (res.code == 200) {
+ if (res.data.length > 0) {
+ // this.$refs["mapRef"].showProjectInfo(res.data);
+ // _this.tableDatas = res.data;
+ setTimeout(() => {
+ _this.$refs["mapRef"].makeAllMask(res.data);
+ }, 2000);
+ } else {
+ // _this.$message.error("鏈煡璇㈠埌瀵瑰簲椤圭洰");
+ }
+ } else {
+ _this.$message.error(res.msg);
+ }
+ });
},
+ // 鑾峰彇寮傚父鏁版嵁
+ async abnormalData(obj) {
+ const res = await getAbnormalData(obj);
+ this.countExceptionProjectData = res.data;
+ },
+
+ //鍦板浘璇︽儏
+ showDetails(row) {
+ console.log(row);
+ },
+
+ labelStyleChange(currentLabel) {
+ if (lastLabel) {
+ lastLabel.setBackgroundColor("#fff");
+ lastLabel.setFontColor("var(--el-color-primary)");
+ }
+ currentLabel.setBackgroundColor("var(--el-color-primary)");
+ currentLabel.setFontColor("#fff");
+ lastLabel = currentLabel;
+ },
+ resetQuery() {
+ this.queryParams = {
+ area: "",
+ start: "",
+ end: "",
+ startTime: "",
+ endTime: "",
+ };
+ this.timeMerge = [];
+ this.handleQuery();
+ },
+ mapQuery() {},
+ },
};
</script>
<style scoped lang="scss">
.home {
- padding: 10px;
- background-color: #f3f7fc;
- min-height: calc(100vh - 85px);
- overflow-x: auto;
+ padding: 10px;
+ background-color: #f3f7fc;
+ min-height: calc(100vh - 85px);
+ overflow-x: auto;
- .overview {
- padding: 10px 0 0 10px;
- height: 280px;
- min-width: 1600px;
- background-color: #fff;
- border-radius: 6px;
+ .overview {
+ padding: 10px 0 0 10px;
+ height: 280px;
+ min-width: 1600px;
+ background-color: #fff;
+ border-radius: 6px;
- .overview-top {
- display: flex;
- justify-content: space-between;
+ .overview-top {
+ display: flex;
+ justify-content: space-between;
- .title {
- font-size: 16px;
- }
+ .title {
+ font-size: 16px;
+ }
- .qurey {
- font-size: 12px;
- font-weight: 100;
- }
- }
+ .qurey {
+ font-size: 12px;
+ font-weight: 100;
+ }
}
+ }
- .search-form {
- display: flex;
- justify-content: flex-end;
- }
+ .search-form {
+ padding: 5px;
+ position: absolute;
+ z-index: 999;
+ display: flex;
+ justify-content: flex-end;
+ }
}
// ::v-deep .el-form-item {
// display: inline-block !important;
// margin-right: 10px;
// }
::v-deep .el-form-item--medium .el-form-item__content {
- display: inline-block !important;
+ display: inline-block !important;
}
::v-deep .el-form-item__label {
- font-size: 12px;
- font-weight: 400;
+ font-size: 12px;
+ font-weight: 400;
}
::v-deep .el-button {
- font-size: 12px;
+ font-size: 12px;
}
::v-deep.el-input__inner {
- font-size: 12px;
- height: 32px;
+ font-size: 12px;
+ height: 32px;
}
::v-deep.el-range-input {
- font-size: 12px;
+ font-size: 12px;
}
::v-deep.el-select__placeholder {
- font-size: 12px;
+ font-size: 12px;
}
-::v-deep input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
+::v-deep input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
}
-input[type='number'] {
- -moz-appearance: textfield;
+input[type="number"] {
+ -moz-appearance: textfield;
}
.search_from {
- display: flex;
- justify-self: justify-end;
- gap: 10px;
+ display: flex;
+ justify-self: justify-end;
+ gap: 10px;
}
.flex {
- display: flex;
- gap: 2%;
+ display: flex;
+ gap: 2%;
}
.flex_card {
- width: 49%;
- margin: 10px 0px;
+ width: 49%;
+ margin: 10px 0px;
}
.from_input {
- display: flex;
- gap: 10px;
- font-size: 12px;
+ display: flex;
+ gap: 10px;
+ font-size: 12px;
}
.map_div {
- display: flex;
- width: 100%;
- height: 500px;
- border: #dbdeea;
+ display: flex;
+ width: 100%;
+ height: 500px;
+ border: #dbdeea;
+}
+.tab {
+ padding: 6px;
+ border: 1px solid #dbdeea;
+ cursor: pointer;
+ width: 72px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.active {
+ border: 1px solid #3369ff;
+ color: #3369ff;
}
</style>
--
Gitblit v1.8.0