首页新增静态内容

xiangpei

2025-01-20 c702199e8b384ea25d4f1778a297d309d392b9f3

首页新增静态内容

 src/views/index.vue

@@ -65,12 +65,98 @@
          </el-form>
        </div>
      </div>

      <!-- 统计情况 -->
      <ProjectOverview
        :calculation="calculation"
        :countExceptionProjectData="countExceptionProjectData"
      />
    </div>
    <el-card>
      <div style="display: flex;">
        <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="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>
    </el-card>

    <!-- 待办事项 -->
    <div class="flex">
      <div class="flex_card">
@@ -140,10 +226,36 @@
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'
        },
      ],
      queryParams: {},
      timeMerge: [],
      sys_administrative_divisions: [],
@@ -169,11 +281,61 @@
    TidingsTable,
    Map,
  },
  created() {
  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 = "";
@@ -369,5 +531,18 @@
  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>