el-row 样式修改

zhanghua

2024-11-25 efa31c94b13ec01c7ba4de8535b3c11a1f51a4a2

 src/views/index.vue

@@ -94,7 +94,7 @@
            </div>
            <!-- 地图 -->
        </div>
        <div class="mt-[10px] min-w-[1600px]">
        <div style="margin-top: 10px">
            <el-card>
                <div>
                    <div class="search-form">
@@ -120,8 +120,8 @@
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="flex w-full h-[500px] border border-[#DBDEEA]">
                        <!-- <Map
                    <div class="map_div">
                        <Map
                            id="DangerSourceId"
                            ref="mapRef"
                            :is-show-control="true"
@@ -132,7 +132,7 @@
                            @label-click="showDetails"
                            @mark-click="showDetails"
                            @current-label-style-change="labelStyleChange"
                        /> -->
                        />
                    </div>
                </div>
            </el-card>
@@ -141,11 +141,12 @@
</template>

<script>
import SvgIcon from '@/components/SvgIcon/index.vue';
import ProjectOverview from './components/projectOverview.vue';
import NoticeTable from './components/noticeTable.vue';
import TidingsTable from './components/tidingsTable.vue';
// import Map from './components/Map/index.vue';
import SvgIcon from "@/components/SvgIcon/index.vue";
import ProjectOverview from "./components/projectOverview.vue";
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';
export default {
    name: "Index",
    data() {
@@ -153,49 +154,76 @@
            queryParams: {},
            timeMerge: [],
            sys_administrative_divisions: [],
            calculation: [],
            countExceptionProjectData: {},
            searchForm: {},
            tableDatas: []
            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' }
            ]
        };
    },
    components: {
        SvgIcon,
        ProjectOverview,
        NoticeTable,
        TidingsTable
        TidingsTable,
        Map,
    },
    created() {
        this.handleQuery()
    },
    methods: {

        dataPickerChange(val) {
            if (!val) {
                this.queryParams.startTime = '';
                this.queryParams.endTime = '';
                this.queryParams.startTime = "";
                this.queryParams.endTime = "";
                return;
            }

            this.queryParams.startTime = timeMerge[0];
            this.queryParams.endTime = timeMerge[1];
            this.queryParams.startTime = this.timeMerge[0];
            this.queryParams.endTime = this.timeMerge[1];
        },
        handleQuery() {
            console.log(queryParams);
            console.log(this.queryParams);
            const obj = {
                startDate: queryParams.startTime,
                endDate: queryParams.endTime,
                areaCode: queryParams.area,
                minInvestment: queryParams.start,
                maxInvestment: queryParams.end
                startDate: this.queryParams.startTime,
                endDate: this.queryParams.endTime,
                areaCode: this.queryParams.area,
                minInvestment: this.queryParams.start,
                maxInvestment: this.queryParams.end,
            };

            this.getCalculatioln(obj).then((res) => {
            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
                    statisticsMun: item.amount,
                }));

                // 创建一个对象，以便根据 text 属性快速查找 newArr 中的对象
                const newArrLookup = newArr.reduce((lookup, item) => {
                    lookup[item.text] = item;
@@ -203,13 +231,14 @@
                }, {});

                // 更新 calculation 数组，保持其原始顺序
                calculation.value = calculation.value.map((item) => {
                this.calculation = this.calculation.map((item) => {
                    const newItem = newArrLookup[item.text];
                    return newItem ? newItem : item; // 如果 newItem 存在，则返回 newItem，否则返回原始 item
                });

            });

            abnormalData(obj);
            this.abnormalData(obj);
        },

        // 获取异常数据
@@ -225,20 +254,20 @@

        labelStyleChange(currentLabel) {
            if (lastLabel) {
                lastLabel.setBackgroundColor('#fff');
                lastLabel.setFontColor('var(--el-color-primary)');
                lastLabel.setBackgroundColor("#fff");
                lastLabel.setFontColor("var(--el-color-primary)");
            }
            currentLabel.setBackgroundColor('var(--el-color-primary)');
            currentLabel.setFontColor('#fff');
            currentLabel.setBackgroundColor("var(--el-color-primary)");
            currentLabel.setFontColor("#fff");
            lastLabel = currentLabel;
        },
        resetQuery() {
            this.queryParams = {
                area: '',
                start: '',
                end: '',
                startTime: '',
                endTime: ''
                area: "",
                start: "",
                end: "",
                startTime: "",
                endTime: "",
            };
            this.timeMerge = [];
            this.handleQuery();
@@ -249,11 +278,9 @@
            // await search()
            this.mapRef.moveTo(105.37281, 30.87145);
        },
        mapQuery() {

        }
    }
}
        mapQuery() { },
    },
};
</script>

<style scoped lang="scss">
@@ -344,5 +371,11 @@
    gap: 10px;
    font-size: 12px;
}
.map_div {
    display: flex;
    width: 100%;
    height: 500px;
    border: #dbdeea;
}
</style>