首頁

zh

2024-11-25 e176ec0f4e2e35342bef6c909786c31d7fd8316f

 src/views/index.vue

@@ -1,130 +1,143 @@
<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 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>
              </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>
      </div>
      <!-- 统计情况 -->
      <ProjectOverview
        :calculation="calculation"
        :countExceptionProjectData="countExceptionProjectData"
      />
    </div>
    <!-- 代办事项 -->
    <div class="flex">
      <div class="flex_card">
        <el-card>
          <NoticeTable style="height: 360px" />
        </el-card>
      </div>
      <!-- 消息通知 -->
      <div class="flex_card">
        <el-card>
          <TidingsTable style="height: 360px" />
        </el-card>
      </div>
      <!-- 地图 -->
    </div>
    <div class="mt-[10px] min-w-[1600px]">
      <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="flex w-full h-[500px] border border-[#DBDEEA]">
            <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"
            <!-- 统计情况 -->
            <ProjectOverview
                :calculation="calculation"
                :countExceptionProjectData="countExceptionProjectData"
            />
          </div>
        </div>
      </el-card>
        <!-- 代办事项 -->
        <div class="flex">
            <div class="flex_card">
                <el-card>
                    <NoticeTable style="height: 360px" />
                </el-card>
            </div>
            <!-- 消息通知 -->
            <div class="flex_card">
                <el-card>
                    <TidingsTable style="height: 360px" />
                </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>
  </div>
</template>

<script>
@@ -133,216 +146,236 @@
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() {
    return {
      queryParams: {},
      timeMerge: [],
      sys_administrative_divisions: [],
      calculation: [],
      countExceptionProjectData: {},
      searchForm: {},
      tableDatas: [
        {
          name: "射洪市",
          value: 105.37281,
          lat: 30.87145,
          lon: 105.37281,
          id: "222222222",
    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' }
            ]
        };
    },
    components: {
        SvgIcon,
        ProjectOverview,
        NoticeTable,
        TidingsTable,
        Map,
    },
    created() {
        this.handleQuery()
    },
    methods: {
        dataPickerChange(val) {
            if (!val) {
                this.queryParams.startTime = "";
                this.queryParams.endTime = "";
                return;
            }

            this.queryParams.startTime = this.timeMerge[0];
            this.queryParams.endTime = this.timeMerge[1];
        },
        {
          name: "xxxx",
          value: 105.22332,
          lat: 31.52421,
          lon: 106.22332,
          id: "11112",
        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);
        },
      ],
    };
  },
  components: {
    SvgIcon,
    ProjectOverview,
    NoticeTable,
    TidingsTable,
    Map,
  },
  methods: {
    dataPickerChange(val) {
      if (!val) {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
        return;
      }

      this.queryParams.startTime = timeMerge[0];
      this.queryParams.endTime = timeMerge[1];
        // 获取异常数据
        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() { },
    },
    handleQuery() {
      console.log(queryParams);
      const obj = {
        startDate: queryParams.startTime,
        endDate: queryParams.endTime,
        areaCode: queryParams.area,
        minInvestment: queryParams.start,
        maxInvestment: queryParams.end,
      };

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

      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() {},
  },
};
</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 {
        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;
}
</style>