soc_web/src/views/scorestatistics/scorestatisticsDialog.vue

<template>
  <div class="rule-type">
    <DialogCom
      @colse="onHide"
      title="查看"
      :visible.sync="isShow"
      width="1400px"
     
      @open="openHandler"
    >
      <div class="pageNum-body">
        <el-form
          :model="queryParams"
          size="small"
          ref="form"
          label-position="right"
          label-width="130px"
          label-prefix=":"
          :inline="true"
        >
          <el-form-item label="年月:"> {{ queryParams.date }}</el-form-item>
          <el-form-item label="机构名称:"
            >{{ queryParams.orgName }}
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          height="400px"
        >
          <el-table-column label="序号" type="index" width="100">
          </el-table-column>
          <el-table-column prop="orgName" label="营业场所"> </el-table-column>
          <el-table-column prop="orgTypeText" label="场所分类">
          </el-table-column>
          <el-table-column prop="orgScore" label="安全指数">
            <template slot-scope="{ row }">
              <div>
                <span class="text" @click="clickHandlerRow(row)">{{
                  row.orgScore
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="levelName" label="安全等级"> </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :pageNum.sync="queryParams.pageNum"
          :limit.sync="queryParams.size"
          @pagination="getDetailList"
        />
      </div>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
        <el-button @click="onHide">关闭</el-button>
      </div>
      <!-- 月度指数弹框 -->
    </DialogCom>

    <DialogCom title="月度指数" width="1200px" :visible.sync="monthNum">
      <el-form :inline="true" class="demo-form-inline">
        <el-row>
          <el-col :span="8">
            <el-form-item label="上级机构1">
              {{ monthNumeData.firstOrgName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上级机构2">
              {{ monthNumeData.secondOrgName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="营业场所">
              {{ monthNumeData.orgTypeText }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="年月"> {{ monthNumeData.date }} </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安全指数">
              {{ monthNumeData.orgScore }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安全等级">
              {{ monthNumeData.levelName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="指标分类">
            <div v-if="zbTableList && zbTableList.dataList.length > 0">
              <el-radio-group v-model="radio" class="bigbox_card">
                <div
                  :key="index"
                  v-for="(item, index) in zbTableList.dataList"
                  @click="cardHandler(item)"
                >
                  <el-card class="box-card">
                    <el-radio :label="item.typeCode">
                      <span>{{ item.typeName }}</span>
                      <div>数量:{{ item.times }},扣分:{{ item.score }}</div>
                    </el-radio>
                  </el-card>
                </div>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        border
        height="650"
        pageSize="small"
        v-loading="loading"
        :data="itemTableList"
        align="center"
        fixed
      >
        <el-table-column label="指标分类" prop="typeName"> </el-table-column>
        <el-table-column label="指标项目" prop="projectName"> </el-table-column>
        <el-table-column label="指标要点" prop="pointName"> </el-table-column>
        <el-table-column label="计算项目" prop="itemName"> </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="{ row }">
            <div>
              <span class="text" v-if="row.typeCode!='1005'" @click="clickHandlerDialog(row)">{{
                row.times
              }}</span>
              <span  v-else>{{
                row.times
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="扣分" prop="score"> </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
        <el-button @click="closeHandler">关闭</el-button>
      </div>
    </DialogCom>
    <!-- 扣分明细弹框 -->
    <points ref="points" :monthNumeData="monthNumeData"></points>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { sum, unionBy } from "lodash";
import {
  detail,
  getBysingleOrg,
} from "@/api/scorestatistics/scorestatistics.js";
import points from './pointsDialog.vue'
export default {
  components:{
    points
  },
  data() {
    return {
      tableData: [],
      zbTableList: { dataList: [] },
      itemTableList: [],
      radio: "0",
      id: null,
      isShow: false,
      monthNum: false,
      monthNumeData: {
        firstOrgName: "",
        secondOrgName: "",
        orgTypeText: "",
        date: "",
        levelName: "",
        dataScore: "",
      },
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orgId: "",
        date: null,
        levelId: "",
        orgName: null,
      },
    };
  },
  props: {
    targetList: {
      type: Array,
    },
  },
  watch: {},

  mounted() {},
  methods: {
    onOrgTypeChanged() {},
    show(row) {
      let month = row.dataMonth + "";
      this.queryParams.date =
        row.dataYear + "-" + (row.dataMonth < 10 ? "0" + month : month);
      this.queryParams.orgName = row.orgName;
      this.queryParams.orgId = row.orgId;
      this.queryParams.levelId = row.levelId;
      this.tableData = [];

      this.getDetailList();
    },
    //获取分页数据
    getDetailList() {
      this.loading = true;
      detail(this.queryParams).then((res) => {
        let { code, msg, rows, total } = res;
        if (code == 200) {
          this.tableData = rows || [];
          this.total = total || 0;
          this.isShow = true;
        } else {
          this.$message.error(msg);
        }
        this.loading = false;
      });
    },
    // 事件
    onHide() {
      this.$refs.form.resetFields();
      this.isShow = false;
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };

      this.tableData = [];
    },
    closeHandler(){
      this.monthNum=false
      this.itemTableList=[]
      this.monthNumeData={
        firstOrgName: "",
        secondOrgName: "",
        orgTypeText: "",
        date: "",
        levelName: "",
        dataScore: "",
      }
    },
    monthNumInit(row) {
      this.monthNum = true;

      // this.monthNumeData=JSON.parse(JSON.stringify(row))
      // console.log(row);

      getBysingleOrg({
        orgId: row.orgId,
        // orgId: "4358025846358081",
        // date: "2023-10-01",
        date: row.date,
      }).then((res) => {
        console.log(res);
        let { code, data, msg } = res;
        if (code == 200) {
          this.monthNumeData.orgScore = row.orgScore;
          this.monthNumeData.levelName = row.levelName;
          this.monthNumeData.date = row.date;
          this.monthNumeData.orgId =row.orgId;
      
         
          this.monthNumeData.orgTypeText = data.orgTypeText;
          this.monthNumeData.secondOrgName = data.secondOrgName;
          this.monthNumeData.firstOrgName = data.firstOrgName;
          this.zbTableList = JSON.parse(JSON.stringify(data));

          if (data && data.dataList.length > 0) {
            let list = [];
            data.dataList.forEach((item) => {
              item.detailList.forEach((i) => {
                list.push(i);
              });
            });
            this.zbTableList.dataList.unshift({
              score: sum(this.zbTableList.dataList.map((item) => item.score)), //分数
              times: sum(this.zbTableList.dataList.map((item) => item.times)), //数量
              typeCode: "0",
              typeName: "全部",
              detailList: list,
            });

            this.itemTableList = this.zbTableList.dataList[0].detailList || [];
          }
        }
        // this.zbTableList=res
      });
    },
    clickHandlerRow(row) {
      this.monthNumInit(row);
    },
    clickHandlerDialog(row) {
      this.$refs.points.init(row);
    },
    cardHandler(item) {
      this.radio = item.typeCode;
      this.itemTableList = item.detailList;
      
    },
    //打开前的回调
    openHandler() {},

    // 事件
    //apimark//
  },
};
</script>

<style lang="scss" scoped>
.brand_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
.form-item-comment {
  font-size: 12px;
  color: #999;
  height: 10px;
}
.el-select {
  width: 100%;
}
.text {
  color: #008cd6;
  text-decoration: underline;
  cursor: pointer;
}
.box-card {
  cursor: pointer;
  width: 200px;
  text-align: center;
  margin-left: 20px;
}
.bigbox_card {
  display: flex;
  justify-content: space-between;
}
</style>