zxl
2025-03-25 6ae0fcef149ddbe614746023a58a3885b3ac4bde
src/views/index.vue
@@ -65,54 +65,160 @@
          </el-form>
        </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: 360px" />
          <NoticeTable style="height: 340px" />
        </el-card>
      </div>
      <!-- 消息通知 -->
      <div class="flex_card">
        <el-card>
          <TidingsTable style="height: 360px" />
          <TidingsTable style="height: 340px" />
        </el-card>
      </div>
      <!-- 地图 -->
    </div>
    <div class="mt-[10px] min-w-[1600px]">
    <div style="margin-top: 10px">
      <el-card>
        <div>
          <div class="search-form">
            <el-form :model="searchForm" inline>
              <el-form-item label=" ">
            <el-form :model="searchForm" inline size="small">
              <el-form-item label="">
                <el-input
                  v-model="searchForm.name"
                  clearable
                  placeholder="请输入项目名称或项目代码"
                  style="width: 180px"
                  style="width: 240px"
                />
              </el-form-item>
              <el-form-item style="margin-right: 0px">
                <el-button icon="Search" type="primary" @click="searchList"
                <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="flex w-full h-[500px] border border-[#DBDEEA]">
          <div class="map_div">
            <Map
              id="DangerSourceId"
              ref="mapRef"
              :is-show-control="true"
              :list-type="true"
              :list-type="false"
              :map-list="tableDatas"
              :map-type="true"
              class="w-full h-full border-r border-[#DBDEEA]"
@@ -133,31 +239,75 @@
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 { searchByKey } from "@/api/projectEngineering/projectInfo";
import * as echarts from 'echarts';
export default {
  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: [],
      calculation: [],
      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",
        },
      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" },
      ],
    };
  },
@@ -168,7 +318,61 @@
    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: '督办'},
            ]
          }
        ]
      }
    },
    dataPickerChange(val) {
      if (!val) {
        this.queryParams.startTime = "";
@@ -176,20 +380,19 @@
        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);
      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,
@@ -197,7 +400,6 @@
          statistics: item.type,
          statisticsMun: item.amount,
        }));
        // 创建一个对象,以便根据 text 属性快速查找 newArr 中的对象
        const newArrLookup = newArr.reduce((lookup, item) => {
          lookup[item.text] = item;
@@ -205,15 +407,34 @@
        }, {});
        // 更新 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);
    },
    // 地图搜索
    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);
@@ -244,12 +465,6 @@
      };
      this.timeMerge = [];
      this.handleQuery();
    },
    // 地图搜索
    async searchList() {
      // await search()
      this.mapRef.moveTo(105.37281, 30.87145);
    },
    mapQuery() {},
  },
@@ -286,6 +501,9 @@
  }
  .search-form {
    padding: 5px;
    position: absolute;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
  }
@@ -344,5 +562,24 @@
  gap: 10px;
  font-size: 12px;
}
.map_div {
  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>