hjjc-workbench-web/src/views/dashboard/index.vue

<template>
  <div class="app-container">
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <span>当前登录人：{{ user.name }} </span>

    </div>

    <el-row :gutter="20">
      <el-col :span="allowAuth ? 16 : 24">
        <el-card v-if="allowAuth" class="box-card" style="margin: 20px 0">
          <div slot="header" class="clearfix">
            <span>预算总体执行情况</span>
            <DatePicker
              :value="select.year"
              placeholder="选择所属年份"
              placement="bottom"
              style="width: 130px; float: right"
              type="year"
              @on-change="changeYear"
            ></DatePicker>
          </div>
          <router-link :to="`/statisticalReport/budgetProgress`">
            <div class="progress-card">
              <div class="progress-card-item">
                <div class="progress-card-item__num">
                  {{
                    moneyFormat(
                      statistic.progress ? statistic.progress.money_total_1 : 0
                    )
                  }}
                </div>
                <div class="progress-card-item__label">年初预算合计金额</div>
              </div>
              <div class="progress-card-item">
                <div class="progress-card-item__num">
                  {{
                    moneyFormat(
                      statistic.progress ? statistic.progress.money_total_2 : 0
                    )
                  }}
                </div>
                <div class="progress-card-item__label">调整后预算合计金额</div>
              </div>
              <div class="progress-card-item">
                <div class="progress-card-item__num">
                  {{
                    moneyFormat(
                      statistic.progress
                        ? statistic.progress.use_money_total
                        : 0
                    )
                  }}
                </div>
                <div class="progress-card-item__label">已支付金额</div>
              </div>
              <div class="progress-card-item">
                <div class="progress-card-item__num">
                  {{
                    toper(
                      statistic.progress ? statistic.progress.money_total_1 : 0,
                      statistic.progress ? statistic.progress.money_total_2 : 0,
                      statistic.progress
                        ? statistic.progress.use_money_total
                        : 0
                    )
                  }}%
                </div>
                <div class="progress-card-item__label">执行率</div>
              </div>
            </div>
          </router-link>
        </el-card>

        <div ref="lxHeader">
          <LxHeader
            icon="iconfont/icon--kucunguanli"
            text="待办事项"
            :custom="true"
            style="margin-bottom: 10px; border: 0px; margin-top: 15px"
          >
            <div slot="content" />
            <slot>
              <div></div>
            </slot>
          </LxHeader>
        </div>
        <div class="table-tree">
          <el-table
            :data="list"
            border
            class="v-table"
            style="width: 100%; margin-bottom: 20px"
          >
            <el-table-column type="index" label="序号" align="center" />
            <el-table-column
              prop="type"
              width="100"
              label="类型"
              align="center"
              :formatter="typeFormatter"
            />
            <el-table-column prop="content" label="内容" align="left" />
            <el-table-column
              prop="created_at"
              width="200"
              label="下发时间"
              align="center"
              :formatter="timeFormatter"
            />
            <el-table-column
              width="100"
              label="状态"
              align="center"
              prop="read_count"
            >
              <template slot-scope="{ row, $index }">
                <el-link v-if="row.read_count" type="success" :underline="false"
                  >已读</el-link
                >
                <Button
                  v-else
                  type="error"
                  size="small"
                  style="margin-left: 10px"
                  ghost
                  @click="readIt(row, $index)"
                  >未读</Button
                >
              </template>
            </el-table-column>
            <el-table-column
              width="90"
              header-align="center"
              label="操作"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <Button
                  type="primary"
                  size="small"
                  style="margin-left: 10px"
                  ghost
                  @click="toContract(row)"
                  >查看</Button
                >
              </template>
            </el-table-column>
          </el-table>

          <div style="display: flex; justify-content: flex-end">
            <Page :total="total" show-elevator @on-change="pageChange" />
          </div>
        </div>
      </el-col>
      <el-col v-if="allowAuth" :span="authShowStatic ? 7 : 8">
        <el-card class="box-card" style="margin: 20px 0">
          <div class="text item">
            <pie-chart :chartData="rptChartData"></pie-chart>
          </div>
        </el-card>
      </el-col>

      <el-col :span="1" v-if="authShowStatic">
        <div style="display: flex;flex-direction: column;height: 310px;padding-top: 20px;">
          <div class="show-static-btn" @click="$refs['budgetStatic'].show()">
            统计查看
            <i class="el-icon-d-arrow-left"></i>
          </div>
          <div class="show-static-btn"
               @click="$confirm('选择统计的数据类型','提示',{
                 confirmButtonText: '预算类型',
                 cancelButtonText: '部门科室',
                 showClose: false,
                 callback:(action, instance) => {
                   if (action === 'cancel') {
                     $refs['carryStatic'].setType(1)
                     $refs['carryStatic'].show()
                   }
                   if (action === 'confirm') {
                     $refs['carryStatic'].setType(2)
                     $refs['carryStatic'].show()
                   }
                 }
               })">
            执行统计
            <i class="el-icon-d-arrow-left"></i>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="demo-split" v-if="allowAuth">
      <Split v-model="split" style="height: 570px">
        <template #left>
          <div class="demo-split-pane" style="padding-right: 5px">
            <div ref="lxHeader" v-if="statistic.departmentList">
              <LxHeader
                icon="iconfont/icon--kucunguanli"
                text="科室执行情况"
                :custom="true"
                style="margin-bottom: 10px; border: 0px; margin-top: 15px"
              >
                <div slot="content" />
                <slot>
                  <div style="width: 100%">
                    <xy-table
                      :height="488"
                      :list="statistic.departmentList"
                      :table-item="departmentTable"
                    >
                      <template v-slot:btns>
                        <el-table-column
                          :width="80"
                          fixed="right"
                          label="操作"
                          header-align="center"
                          align="center"
                        >
                          <template slot-scope="scope">
                            <router-link
                              :to="`/contract/statisticalReport/budgetProgress?departmentId=${scope.row.plan_department_id}`"
                              >查看
                            </router-link>
                          </template>
                        </el-table-column>
                      </template>
                    </xy-table>
                  </div>
                </slot>
              </LxHeader>
            </div>
          </div>
        </template>
        <template #right>
          <div class="demo-split-pane" style="padding-left: 10px">
            <div ref="lxHeader" v-if="statistic.typeList">
              <LxHeader
                icon="iconfont/icon--kucunguanli"
                text="预算类型执行情况"
                :custom="true"
                style="margin-bottom: 10px; border: 0px; margin-top: 15px"
              >
                <div slot="content" />
                <slot>
                  <div style="width: 100%">
                    <xy-table
                      :height="488"
                      :list="statistic.typeList"
                      :table-item="typeTable"
                    >
                      <template v-slot:btns>
                        <el-table-column
                          :width="80"
                          fixed="right"
                          label="操作"
                          header-align="center"
                          align="center"
                        >
                          <template slot-scope="scope">
                            <router-link
                              :to="`/contract/statisticalReport/budgetProgress?typeId=${scope.row.type}`"
                              >查看
                            </router-link>
                          </template>
                        </el-table-column>
                      </template>
                    </xy-table>
                  </div>
                </slot>
              </LxHeader>
            </div>
          </div>
        </template>
      </Split>
    </div>

    <Card v-if="allowAuth">
      <template #title>
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <p>各科室预算计划完成对比图</p>
          <el-date-picker v-model="carrySelect.month"
                          format="yyyy-MM"
                          :clearable="false"
                          style="width: 140px;"
                          placeholder="月份"
                          type="month"
                          size="small"
                          @change="e => {
                            carrySelect.month = $moment(e).format('YYYY-MM');
                            getCarry();
                          }"></el-date-picker>
        </div>
      </template>
      <lineChart height="500px" :chart-data="lineChartData"></lineChart>
    </Card>

    <detailContract ref="detailContract"></detailContract>

    <budgetStatic ref="budgetStatic"></budgetStatic>

    <carryStatic ref="carryStatic" :departments="statistic.departmentList" :year="select.year"></carryStatic>
  </div>
</template>

<script>
import echarts from 'echarts'
import detailContract from "@/views/contract/components/detailContract";
import LxHeader from "@/components/LxHeader/index.vue";
import Pagination from "@/components/Pagination";
import PieChart from "./components/PieChart.vue";
import { adminDepartmentList } from '@/api/system/department';
import { adminUserList, getInfo } from '@/api/user';
import { getNotice, readNotice, statistic, carry } from "@/api/dashboard/notice";
import { parseTime, moneyFormatter } from '@/utils';
import { Message } from "element-ui";
import budgetStatic from '@/views/dashboard/components/budgetStatic.vue'
import lineChart from '@/views/dashboard/components/LineChart.vue'
import carryStatic from '@/views/dashboard/components/carryStatic.vue'
export default {
  name: "Manage",
  components: {
    LxHeader,
    Pagination,
    detailContract,
    PieChart,
    budgetStatic,
    lineChart,
    carryStatic
  },
  data() {
    return {
      value2: 12,
      split: 0.5,
      rptChartData: [],
      select: {
        year: "",
      },
      carrySelect: {
        month: this.$moment().format('YYYY-MM')
      },
      lineChartData: {},
      statistic: {
        departmentList: []
      },
      department_id: [],
      userIds: [],
      list: [],
      total: 0,
      pageIndex: 1,
      // listQuery: {
      //   page: 1,
      //   page_size: 10,
      //   show_self: 1,
      // },
      form: {
        id: undefined,
      },
      dialogFormVisible: false,
      departmentTree: [],
      userList: [],
      formLabelWidth: "200px",
      user: {},

      departmentProgress: [],
      departmentTable: [
        {
          label: "科室",
          minWidth: 180,
          prop: "plan_department.name",
          sortable: false,
          align: "left",
          fixed: "left",
        },
        {
          label: "执行情况",
          sortable: false,
          minWidth: 220,
          align: "left",
          fixed: "right",
          customFn: (row) => {
            let m2 = row?.money_total_2;
            let m1 = row?.money_total_1;
            let m3 = row?.use_money_total;
            let per = 0;

            if (m2 != 0) {
              per = ((m3 / m2) * 100).toFixed(2);
            } else if (m1 != 0) {
              per = ((m3 / m1) * 100).toFixed(2);
            }
            return (
              <div>
                <el-progress percentage={Number(per)}> </el-progress>{" "}
              </div>
            );
          },
        },
        {
          label: "年初预算合计金额(元)",
          width: 260,
          align: "right",
          sortable: false,
          prop: "money_total_1",
          formatter: (cell, data, value) => {
            return moneyFormatter(value);
          },
        },
        {
          label: "调整后预算合计金额(元)",
          width: 260,
          align: "right",
          sortable: false,
          prop: "money_total_2",
          formatter: (cell, data, value) => {
            return moneyFormatter(value);
          },
        },
        {
          label: "年中专项资金(元)",
          width: 260,
          align: "right",
          sortable: false,
          prop: "middle_fund_total",
          formatter: (cell, data, value) => {
            return moneyFormatter(value);
          },
        },
        {
          label: "已使用(元)",
          width: 120,
          align: "right",
          sortable: false,
          prop: "use_money_total",
          formatter: (cell, data, value) => {
            return moneyFormatter(value);
          },
        },
      ],
      typeTable: [
        {
          label: "预算类别",
          width: 100,
          prop: "type_text",
          sortable: false,
          fixed: "left",
        },
        {
          label: "执行情况",
          sortable: false,
          minWidth: 220,
          align: "left",
          fixed: "right",
          customFn: (row) => {
            let m2 = row.money_total_2;
            let m1 = row.money_total_1;
            let m3 = row.use_money_total;
            let per = 0;

            if (m2 != 0) {
              per = ((m3 / m2) * 100).toFixed(2);
            } else if (m1 != 0) {
              per = ((m3 / m1) * 100).toFixed(2);
            }
            return (
              <div>
                <el-progress percentage={Number(per)}> </el-progress>{" "}
              </div>
            );
          },
        },
        {
          label: "年初预算合计金额(元)",
          width: 260,
          align: "right",
          sortable: false,
          prop: "money_total_1",
          formatter: (cell, data, value) => {
            return moneyFormatter(value);
          },
        },
        {
          label: "调整后预算合计金额(元)",
          width: 260,
          align: "right",
          sortable: false,
          prop: "money_total_2",
          formatter: (cell, data, value) => {
            return moneyFormatter(value);
          },
        },
        {
          label: "已使用(元)",
          width: 140,
          align: "right",
          sortable: false,
          prop: "use_money_total",
          formatter: (cell, data, value) => {
            return moneyFormatter(value);
          },
        },
      ],
    };
  },
  created() {
    this.select.year = this.$moment().format("YYYY");
    this.getNotices();

    this.getStatistic();
    this.getCarry();

    getInfo()
      .then((response) => {
        console.log(response);
        this.user = response;
      })
      .catch((error) => {});
  },
  methods: {
    formatResult(originalNum) {
      // 1. 先处理浮点数精度问题（乘以100后四舍五入到整数，再除以100保留两位小数）
      if(!originalNum){
        return 0
      }
      const multiplied = Math.round(originalNum * 100); // 0.28 * 100 = 28 → 处理后为28

        // 2. 判断是否为整数（乘以100后是否无小数）
        if (multiplied % 1 === 0) {
          // 是整数，直接显示整数（如28）
          return multiplied;
        } else {
          // 不是整数，保留两位小数（如56.50）
          return (multiplied / 100).toFixed(2);
        }
    },
    async getCarry () {
      const res = await carry(this.carrySelect);

      //组织数据
      let setData = function(data, constData, showData) {
        data.forEach(function(item) {
            if (item && Number(item.value) !== 0) {
                  constData.push(1);
                  showData.push(item);
                } else {
                  constData.push(1);   // 让底部 diamond 始终有
                  showData.push(null); // 顶部 diamond 不显示
                }
          });
      }
      //组织颜色
      let setColor = function(colorArr) {
        let color = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
            x: 0,
            x2: 0,
            y: 0,
            y2: 1, */
          colorStops: [{
            offset: 0,
            color: colorArr[0],
          },
            {
              offset: 0.5,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[1],
            },
            {
              offset: 1,
              color: colorArr[1],
            },
          ],
        };
        return color
      }

      // let curPlan = res?.map(i => {
      //   const { use_money_total,paid_plan_total,money_total_2 } = i
      //   return paid_plan_total ? (Math.round((Number(paid_plan_total||0) / Number(money_total_2 ||0)) * 10000) / 100) :
      //   0;
      // });
      // let curAct = res?.map(i => {
      //   const { use_money_total,money_total_2 } = i
      //   return Number(money_total_2) ? (Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100) :
      //    0;
      // });
      // let nextPlan = res?.map(i => {
      //   const { use_money_total_next,paid_plan_total_next,money_total_2 } = i
      //   return paid_plan_total_next ? (Math.round((Number(paid_plan_total_next||0) / Number(money_total_2||0)) * 10000) / 100) :
      //    0;
      // });
      let curPlan = res?.map(i => {
        const { use_money_total,paid_plan_total,money_total_2,money_total_1,plan_rate } = i
        let curPlan_total = Math.round(Number(paid_plan_total||0)) + Math.round(Number(use_money_total||0))
        return {

          value:this.formatResult(plan_rate),
        //   value:Number(money_total_2) ? ((( curPlan_total / Number(money_total_2 ||0)) * 10000) / 100).toFixed(2) :
        // ((( curPlan_total / Number(money_total_1 ||0)) * 10000) / 100).toFixed(2),
          money:parseFloat(curPlan_total).toFixed(2)
        }
      });

      let curAct = res?.map(i => {
        const { use_money_total,money_total_2,money_total_1,act_rate } = i
        return {
          value:this.formatResult(act_rate),
         //  value:Number(money_total_2) ?
         //  (Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100).toFixed(2) :
         // (Math.round((Number(use_money_total||0) / Number(money_total_1||0)) * 10000) / 100).toFixed(2),
         money:parseFloat(use_money_total).toFixed(2)
        }
      });

      let nextPlan = res?.map(i => {

        const { plan_rate_next,use_money_total,use_money_total_next,paid_plan_total_next,money_total_2,money_total_1 } = i
        // if(Number(paid_plan_total_next)===0){
        //   return 0
        // }
        let nextPlan_total = Math.round(Number(paid_plan_total_next||0)) + Math.round(Number(use_money_total||0))
        return {

          value:this.formatResult(plan_rate_next),
         //  value:Number(money_total_2) ? (((nextPlan_total / Number(money_total_2||0)) * 10000) / 100).toFixed(2) :
         // (((nextPlan_total / Number(money_total_1||0)) * 10000) / 100).toFixed(2),
         money:parseFloat(nextPlan_total).toFixed(2)
        }
      });

      let barWidth = 23;
      let constData1 = [];
      let showData1 = [];
      let constData2 = [];
      let showData2 = [];
      let constData3 = [];
      let showData3 = [];

      setData(curPlan, constData1, showData1)
      setData(curAct, constData2, showData2)
      setData(nextPlan, constData3, showData3)

      let colorArr1 = ["#345A8B", "#387ABD", "#398ac4"];
      let colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
      let colorArr3 = ['#559372','#7ab798','#9edebc']
      let spanColor = ["#345A8B","#51C0DB",'#559372']

      let color1 = setColor(colorArr1)
      let color2 = setColor(colorArr2)
      let color3 = setColor(colorArr3)

      this.lineChartData = {
        rotate: 54,
        xArr: res?.map(i => i.plan_department?.name),
        tooltip: {
            show:true,
            trigger: 'axis', // 触发方式为鼠标悬浮在图形上
            formatter: function (params) {
                // 自定义悬浮窗的内容和样式
                 let result = `<div style=" padding: 10px;">`;
                  // 获取当前悬浮的部门名称
                  const departmentName = params[0].name;
                  result += `<div style="font-weight: bold; margin-bottom: 5px;">${departmentName}</div>`;

                  // 遍历所有参数，找到三个主要柱状图的数据
                  params.forEach((param,index) => {
                      // 只处理主要的柱状图数据（z值为1、4、7的系列）
                    result += `<div style="margin: 3px 0;">
                        <span style="display: inline-block; width: 10px; height: 10px; background-color: ${spanColor[index]}; margin-right: 5px;"></span>
                        <span>${param.seriesName}: ${param.value}%-${param.data.money?param.data.money+'元':0+'元'}</span>
                    </div>`;
                  });
                  result += `</div>`;
                  return result
            }
        },
        series: [
          {
            z: 1,
            type: 'bar',
            barWidth: barWidth,
            name: `${this.carrySelect.month}计划`,
            barGap: "54%", //相邻柱子间距
            itemStyle: {
              borderRadius: [0, 0, 0, 0],//柱子四周圆角
              color: color1//柱子左右颜色（深，浅）
            },
            data: curPlan, //Y轴上的高度
            label: {
              show: true,
              position: 'top',
              textStyle: {//数值样式
                fontSize: 12,
                color: '#4d8bdc',
              },
              formatter: params => `${params.value}%`
            },
          },
          {
            z: 2,
            name: `${this.carrySelect.month}计划`,
            type: "pictorialBar",
            data: constData1,//此数据对应底部组件
            symbol: "diamond",//底部组件形状，不写默认为椭圆
            symbolOffset: ["-154%", "50%"],//与柱子的偏移角度
            symbolSize: [barWidth, 10],//底面[宽，高]
            itemStyle: {
              normal: {
                color: color1//底面左右颜色（深，浅）
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: `${this.carrySelect.month}计划`,
            type: "pictorialBar",
            symbolPosition: "end",
            data: showData1,//此数据对应顶部组件
            symbol: "diamond",
            symbolOffset: ["-184%", "-50%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: colorArr1[2],
                borderWidth: 2,
                color: colorArr1[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 4,
            type: 'bar',
            barWidth: barWidth,
            name: `${this.carrySelect.month}实际`,
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
              color: color2
            },
            data: curAct,
            label: {
              offset:[0,-15],
              show: true,
              position: 'top',
              textStyle: {//数值样式
                fontSize: 12,
                // color: 'red',
              },
              formatter: params => `${params.value}%`
            }
          },
          {
            z: 5,
            name: `${this.carrySelect.month}实际`,
            type: "pictorialBar",
            data: constData2,
            symbol: "diamond",
            symbolOffset: ["0%", "50%"],
            symbolSize: [barWidth, 10], //=========================
            itemStyle: {
              normal: {
                color: color2
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 6,
            name: `${this.carrySelect.month}实际`,
            type: "pictorialBar",
            symbolPosition: "end",
            data: showData2,
            symbol: "diamond",
            symbolOffset: ["0%", "-50%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: colorArr2[2],
                borderWidth: 2,
                color: colorArr2[2]
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 7,
            type: 'bar',
            barWidth: barWidth,
            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
              color: color3
            },
            data: nextPlan,
            label: {
              show: true,
              position: 'top',
              textStyle: {//数值样式
                fontSize: 12,
                color: '#4d8bdc',
              },
              formatter: params => `${params.value}%`
            }
          },
          {
            z: 8,
            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
            type: "pictorialBar",
            data: constData3,
            symbol: "diamond",
            symbolOffset: ["154%", "50%"],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color3
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 9,
            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
            type: "pictorialBar",
            symbolPosition: "end",
            data: showData3,
            symbol: "diamond",
            symbolOffset: ["191%", "-50%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: colorArr3[2],
                borderWidth: 2,
                color: colorArr3[2]
              },
            },
            tooltip: {
              show: false,
            },
          }
        ]
      };
    },

    changeYear(e) {
      this.select.year = e;
      this.getStatistic();
    },
    async getStatistic() {
            const res = await statistic(this.select);
            console.log(res);
            this.statistic = res;
            let m2 = res.progress.money_total_2;
            let m1 = res.progress.money_total_1;
            var user_m = res.progress.use_money_total;
            var m3=m1-user_m
            if (m2 != 0) {
              m3=m2-user_m;
            } else if (m1 != 0) {
              m3=m1-user_m;
            }
      this.rptChartData = {
        xArr: ["预算未执行金额", "预算已执行金额"],
        radiusArr: "50%",
        yArr: [
          {
            value: m3,
            name: "预算未执行金额",
            label: {
              show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
            },
            emphasis: {
              label: {
                show: false, //这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
              },
            },
          },
          { value: user_m, name: "预算已执行金额" },
        ],
      };
    },

    toContract(row) {
      this.$refs["detailContract"].getDetail(row.contract_id);
      this.$refs["detailContract"].isShowDetail = true;
    },

    pageChange(e) {
      this.pageIndex = e;
      this.getNotices();
    },

    timeFormatter(cell, data, value) {
      return parseTime(new Date(value));
    },
    typeFormatter(cell, data, value) {
      return value === 1 ? "合同流程" : "付款计划";
    },
    toper(m1, m2, m3) {
      if (m2 != 0) {
        return ((m3 / m2) * 100).toFixed(2);
      } else if (m1 != 0) {
        return ((m3 / m1) * 100).toFixed(2);
      } else return 0;
    },
    async getNotices() {
      const res = await getNotice({
        page_size: 10,
        page: this.pageIndex,
      });
      this.list = res.data;
      this.total = res.total;
    },

    filterChildren(data) {
      data.forEach((i) => {
        if (i.children && i.children.length > 0) {
          this.filterChildren(i.children);
        } else {
          delete i.children;
        }
      });
    },
    getList() {
      index(this.listQuery)
        .then((response) => {
          this.list = response.data;
          this.total = response.total;
        })
        .catch((error) => {});
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    readIt(row) {
      readNotice({
        id: row.id,
      }).then((res) => {
        Message({
          type: "success",
          message: "已读",
        });
        this.getNotices();
      });
      // show({id: row.id}).then(r => { this.form = r }).catch(error => {})
      // this.list[index].is_read = 1
    },
    save() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.form);
          tempData.admin_id_list = tempData.ids.map((i) => {
            return {
              admin_id: i,
            };
          });
          if (tempData.id) {
            save(tempData)
              .then((r) => {
                this.saved();
              })
              .catch((error) => {});
          } else {
            store(tempData)
              .then((r) => {
                this.saved();
              })
              .catch((error) => {});
          }
        }
      });
    },
    saved() {
      this.handleFilter();
      this.dialogFormVisible = false;
      this.$message.success("保存成功");
    },
    handleDelete(row, index) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          destroy({
            id: row.id,
          })
            .then((response) => {
              this.$message.success("删除成功");
              this.getList();
            })
            .catch((error) => {});
        })
        .catch(() => {});
    },
  },
  computed: {
    moneyFormat () {
      return function (price) {
        return moneyFormatter(price);
      };
    },
    allowAuth () {
      return this.$store.state.user.min_allow_level !== 2
    },
    authShowStatic () {
      return this.$store.state.user.myroles.find(i => i.name === "首页统计")
    }
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-progress--line {
  display: flex;
  align-items: center;
}
::v-deep .el-progress__text {
  word-break: keep-all;
}
.show-static-btn {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: #4d8bdc;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all .2s;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;

  & + & {
    background: darkorange;
    margin-top: 20px;
  }
  &:hover {
    transform: scale(1.05,1.05);
  }
}
::v-deep .el-dialog__body {
  padding: 8px 20px;
}

::v-deep .el-col-5 {
  width: 20%;
}

::v-deep .el-card__body {
  padding: 4px 10px !important;
}

.progress-card {
  display: flex;

  &-item {
    text-align: center;
    flex: 1;

    &__label {
      font-size: 14px;
    }

    &__num {
      font-size: 20px;
      font-weight: 600;

      padding: 6px 0;
    }
  }
}
</style>
<style lang="scss" scoped>
.ivu-btn {
  margin-right: 10px;
}

.table-tree {
  margin-top: 10px;
}

.v-text {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;

  .title {
    color: #338de3;
  }
}

.dataGroup {
  padding: 10px 0;
}

.grid-content {
  border-radius: 5px;
  text-align: center;
  background: #ffffff;
  padding: 15px 0;

  p {
    line-height: 1.8;
  }

  p:first-child {
    font-weight: 700;
    font-size: 16px;
  }
}

.bg-org {
  border: 2px solid #ef6c24;
  color: #ef6c24;
}

.bg-blue {
  border: 2px solid #0800ff;
  color: #0800ff;
}

.bg-green {
  border: 2px solid #0f9700;
  color: #0f9700;
}

.bg-black {
  border: 2px solid #333;
  color: #333;
}

.bg-pink {
  border: 2px solid #ff0000;
  color: #ff0000;
}
</style>