From 50a0f3891d92a712b95ddea77ea68fac7746b908 Mon Sep 17 00:00:00 2001
From: zouyx <1798599149@qq.com>
Date: Wed, 9 Apr 2025 15:15:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=A7=E6=B3=95=E7=AB=AF-=E7=BB=BC=E5=90=88?=
 =?UTF-8?q?=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/enforce/comprehensiveAnalysis.vue | 530 ++++++++++++++++++++
 1 file changed, 530 insertions(+)
 create mode 100644 src/views/enforce/comprehensiveAnalysis.vue

diff --git a/src/views/enforce/comprehensiveAnalysis.vue b/src/views/enforce/comprehensiveAnalysis.vue
new file mode 100644
index 0000000..5bba867
--- /dev/null
+++ b/src/views/enforce/comprehensiveAnalysis.vue
@@ -0,0 +1,530 @@
+<template>
+<html>
+<body>
+<div class="page_wrapper">
+  <div class="tab_title"> <span :class="{'active':data.ontabClass1}" @click="searchTypeChange('user')"><b>个人</b>维度</span> <span :class="{'active':data.ontabClass2}" @click="searchTypeChange('bureauDept')" ><b>部门</b>维度</span> </div>
+  <div class="tab_cont">
+    <div class="time_now">{{ data.dateStr }}</div>
+    <div class="time_select"> <span :class="{'active':data.submitData.dateType=='month'}" @click="dateTypeChange('month')">月度</span><span :class="{'active':data.submitData.dateType=='quarter'}" @click="dateTypeChange('quarter')">季度</span><span :class="{'active':data.submitData.dateType=='year'}" @click="dateTypeChange('year')">年度</span>
+      <span :class="{'active':data.submitData.dateType=='day'}" @click="dateTypeChange('day')">筛选</span> 
+    </div>
+    <van-popup 
+        :show="data.openDateType=='month'"
+        position="bottom">
+        <van-date-picker
+        v-model="data.monthList"
+        title="选择月度"
+        :min-date="data.minDate"
+        :max-date="data.maxDate"
+        :columns-type="data.columnsMonthType"
+        @cancel="closeColumns"
+        @confirm="confirmMonth"
+      />
+    </van-popup>
+    <van-popup 
+        :show="data.openDateType=='quarter'"
+        position="bottom">
+        <van-date-picker
+        v-model="data.quarterList"
+        title="选择季度"
+        :min-date="data.minDate"
+        :max-date="data.maxQuarterDate"
+        :columns-type="data.columnsQuarterType"
+        @cancel="closeColumns"
+        :filter="filter"
+        :formatter="formatter"
+        @confirm="confirmQuarter"
+      />
+    </van-popup>
+    <van-popup 
+        :show="data.openDateType=='year'"
+        position="bottom">
+        <van-date-picker
+        v-model="data.yearList"
+        title="选择年度"
+        :min-date="data.minDate"
+        :max-date="data.maxDate"
+        :columns-type="data.columnsYearType"
+        @cancel="closeColumns"
+        @confirm="confirmYear"
+      />
+    </van-popup>
+    <div>
+      <van-calendar :show="data.openDateType=='day'" type="range" :min-date="data.minDate" :max-date="data.maxDate" allow-same-day="true" close-on-click-overlay="true" @close="closeColumns" @confirm="confirmDay" />
+    </div>
+    <div class="inspact_card">
+      <h3 class="card_tit">涉企检查数量</h3>
+      <div class="inspact_box"> <span class="counts" >{{ data.whole.total }}</span>
+        <div class="ratioes">
+          <div class="ratio_yeaer">
+            <label>环比：</label>
+            <span class="data-rise" id="regis-dw-huan-top" v-if="data.whole.huanPercentage>0">&#8593<b>{{ data.whole.huanPercentageStr }}</b></span>
+            <span class="data-fall" id="regis-dw-huan-top" v-else-if="data.whole.huanPercentage<0">&#8593<b>{{ data.whole.huanPercentageStr }}</b></span>
+            <span class="data-rise" id="regis-dw-huan-top" v-else><b>-</b><b>{{ data.whole.huanPercentageStr }}</b></span>
+          </div>
+          <div class="ratio_month">
+            <label>同比：</label>
+            <span class="data-rise" id="regis-dw-huan-top" v-if="data.whole.tongPercentage>0">&#8593<b>{{ data.whole.tongPercentageStr }}</b></span>
+            <span class="data-fall" id="regis-dw-huan-top" v-else-if="data.whole.tongPercentage<0">&#8593<b>{{ data.whole.tongPercentageStr }}</b></span>
+            <span class="data-rise" id="regis-dw-huan-top" v-else><b>-</b><b>{{ data.whole.tongPercentageStr }}</b></span>
+          </div>
+        </div>
+        <div class="item_box"> <span class="item_sub">
+          <label>联合检查</label>
+          <b>{{data.whole.uniteTotal}}</b> </span> <span class="item_sub">
+          <label>行政检查预告</label>
+          <b>{{data.whole.noticeTotal}}</b> </span> <span class="item_sub">
+          <label>评价</label>
+          <b>{{data.whole.evaluateTotal}}</b> </span> <span class="item_sub comst">
+          <label>投诉</label>
+          <b>{{data.whole.complaintTotal}}</b> </span> </div>
+      </div>
+    </div>
+    <h3 class="card_tit">检查类别</h3>
+    <div class="count_wrap">
+      <div class="count_item" v-for="item in data.whole.checkCategoryList">
+        <label>{{ item.checkCategory }}</label>
+        <span class="number_count">{{item.checkCategoryNumber}}</span>
+        <span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}%</span>
+        <span class="number_percent" v-else>-</span>
+      </div>
+    </div>
+    <h3 class="card_tit">企业类别</h3>
+    <div class="count_wrap ent_cate">
+      <div class="count_item" v-for="item in data.whole.companyOrgTypeList">
+        <label>{{ item.companyOrgType }}</label>
+        <span class="number_count">{{item.companyOrgTypeNumber}}</span>
+        <span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}%</span>
+        <span class="number_percent" v-else>-</span>
+      </div>
+    </div>
+    <h3 class="card_tit">投诉类别</h3>
+    <div class="count_wrap com_cate">
+      <div class="count_item" v-for="item in data.whole.complaintTypeList">
+        <label>{{ item.complaintType }}</label>
+        <span class="number_count">{{item.complaintTotal}}</span>
+        <span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}%</span>
+        <span class="number_percent" v-else>-</span>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
+</template>
+
+<script setup name="comprehensiveAnalysis">
+import { onMounted, reactive } from "vue";
+import { whole } from "../../api/enforce";
+const { useCommon } = $globalStore;
+
+const data = reactive({
+  submitData: {
+    searchType: "user",
+    // userId:useCommon.userId,
+    // userId: "17608514096",
+    userId: "17608508256",
+    dateType: "year",
+    beginTime: "",
+    endTime: "",
+    year:new Date().getFullYear(),
+    quarter:"",
+    month:"",
+  },
+  whole: reactive({
+    total: 0,
+    tongPercentage: 0,
+    tongPercentageStr: "-",
+    huanPercentage: 0,
+    huanPercentageStr: "-",
+    uniteTotal: 0,
+    evaluateTotal: 0,
+    complaintTotal: 0,
+    checkCategoryList: [],
+    companyOrgTypeList: [],
+    complaintTypeList: [],
+  }),
+  ontabClass1: true,
+  ontabClass2: false,
+  dateStr: new Date().getFullYear()+"年",
+  openDateType: "",
+  minDate: new Date("2024-01-01"),
+  maxDate: new Date(),
+  maxQuarterDate: new Date(new Date().getFullYear()+"-"+Math.ceil((new Date().getMonth()+1)/3)),
+  columnsYearType : ['year'],
+  columnsMonthType : ['year', 'month'],
+  columnsQuarterType : ['year', 'month'],
+  yearList:[new Date().getFullYear()],
+  quarterList:[new Date().getFullYear(),Math.ceil((new Date().getMonth()+1)/3)],
+  monthList:[new Date().getFullYear(),new Date().getMonth()+1],
+});
+
+
+onMounted(() => {
+  getWhole();
+});
+
+const getWhole = () => {
+  whole(
+    data.submitData,
+    (success) => {
+      console.log(success);
+      data.whole.total = success.total;
+      data.whole.tongPercentage = success.tongPercentage;
+      if (success.tongPercentage == null || success.tongPercentage == 0) {
+        data.whole.tongPercentageStr = "-";
+      } else {
+        data.whole.tongPercentageStr = success.tongPercentage + "%";
+      }
+      data.whole.huanPercentage = success.huanPercentage;
+      if (success.huanPercentage == null || success.huanPercentage == 0) {
+        data.whole.huanPercentageStr = "-";
+      } else {
+        data.whole.huanPercentageStr = success.huanPercentage + "%";
+      }
+      if (success.uniteTotal == null || success.uniteTotal == 0) {
+        data.whole.uniteTotal = "-";
+      } else {
+        data.whole.uniteTotal = success.uniteTotal;
+      }
+      if (success.noticeTotal == null || success.noticeTotal == 0) {
+        data.whole.noticeTotal = "-";
+      } else {
+        data.whole.noticeTotal = success.noticeTotal;
+      }
+      if (success.evaluateTotal == null || success.evaluateTotal == 0) {
+        data.whole.evaluateTotal = "-";
+      } else {
+        data.whole.evaluateTotal = success.evaluateTotal;
+      }
+      if (success.complaintTotal == null || success.complaintTotal == 0) {
+        data.whole.complaintTotal = "-";
+      } else {
+        data.whole.complaintTotal = success.complaintTotal;
+      }
+      data.whole.checkCategoryList = success.checkCategoryList;
+      data.whole.companyOrgTypeList = success.companyOrgTypeList;
+      data.whole.complaintTypeList = success.complaintTypeList;
+      console.log(success.total);
+      console.log(data.whole);
+    },
+    (error) => {}
+  );
+};
+const searchTypeChange = (searchType) => {
+  console.log(searchType);
+  data.submitData.searchType = searchType;
+  if (searchType == "user") {
+    data.ontabClass1 = true;
+    data.ontabClass2 = false;
+  } else if (searchType == "bureauDept") {
+    data.ontabClass1 = false;
+    data.ontabClass2 = true;
+  }
+  getWhole();
+};
+/**筛选转换 */
+const dateTypeChange = (type) => {
+  console.log(type);
+  data.openDateType = type;
+  console.log(data.submitData.dateType);
+  // getWhole();
+};
+/**
+ * 关闭各个筛选条件
+ */
+const closeColumns = () => {
+  data.openDateType = "";
+};
+/**季度过滤 */
+const filter = (type, options) => {
+  if (type === 'month') {
+    return options.filter((option) => Number(option.value) < 5);
+  }
+  return options;
+};
+const formatter = (type, option) => {
+      if (type === 'month') {
+        option.text=(option.text.slice(0,1)=="0"?option.text.slice(1):option.text)
+      }
+      return option;
+    };
+const confirmMonth=(value)=>{
+  reset();
+  console.log(value);
+  data.submitData.dateType = "month";
+  data.openDateType = "";
+  data.submitData.year=value.selectedValues[0];
+  data.submitData.month=value.selectedValues[1];
+  data.dateStr=data.submitData.year+"年"+(data.submitData.month.slice(0,1)=="0"?data.submitData.month.slice(1):data.submitData.month)+"月"
+  getWhole();
+}
+const confirmQuarter=(value)=>{
+  reset();
+  console.log(value);
+  data.submitData.dateType = "quarter";
+  data.openDateType = "";
+  data.submitData.year=value.selectedValues[0];
+  data.submitData.quarter=value.selectedValues[1];
+  data.dateStr=data.submitData.year+"年第"+(data.submitData.quarter.slice(0,1)=="0"?data.submitData.quarter.slice(1):data.submitData.quarter)+"季度"
+  getWhole();
+}
+const confirmYear=(value)=>{
+  reset();
+  console.log(value);
+  data.submitData.dateType = "year";
+  data.openDateType = "";
+  data.submitData.year=value.selectedValues[0];
+  data.dateStr=data.submitData.year+"年"
+  getWhole();
+}
+/**
+ * 打开自定义筛选框
+ * @param value 
+ */
+const confirmDay = (value) => {
+  reset();
+  data.submitData.dateType = "day";
+  data.openDateType = "";
+  console.log(value);
+  let startTime = new Date(value[0]);
+  let endTime = new Date(value[1]);
+  console.log(startTime.getFullYear());
+  data.submitData.beginTime =
+    startTime.getFullYear() +
+    "-" +
+    (startTime.getMonth()+1) +
+    "-" +
+    startTime.getDate();
+  data.submitData.endTime =
+    endTime.getFullYear() + "-" + (endTime.getMonth()+1) + "-" + endTime.getDate();
+  data.dateStr = data.submitData.beginTime + "~" + data.submitData.endTime;
+  getWhole();
+};
+  const reset=()=>{
+    data.submitData.year="";
+    data.submitData.month="";
+    data.submitData.quarter="";
+    data.submitData.beginTime="";
+    data.submitData.endTime="";
+  }
+</script>
+
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 40px;
+}
+.page_wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.tab_title {
+  display: flex;
+  margin: 1% 3%;
+  width: 94%;
+  height: 1.2rem;
+}
+.tab_title span {
+  width: 50%;
+  height: 100%;
+  background: url(../../assets/images/tab_bg.png) no-repeat;
+  background-size: 100% 100%;
+  color: #5889fe;
+  font-size: 0.3rem;
+  line-height: 2.5;
+  text-align: center;
+}
+.tab_title span:first-child {
+  background: url(../../assets/images/tab_bg1_1.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tab_title span b {
+  margin-right: 0.25rem;
+  font-size: 0.5rem;
+}
+.tab_title span.active {
+  background: url(../../assets/images/tab_bg_1.png) no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+}
+.tab_title span:first-child.active {
+  background: url(../../assets/images/tab_bg1.png) no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+}
+.tab_cont {
+  width: 100%;
+  height: calc(100% - 1.5rem);
+  overflow: hidden;
+  overflow-y: auto;
+}
+.time_now {
+  float: left;
+  margin: 3.5% 4%;
+  color: #4767fe;
+  font-size: 0.35rem;
+}
+.time_select {
+  float: right;
+  display: flex;
+  justify-content: space-around;
+  margin: 3% 2% 5%;
+  padding: 0.5% 1%;
+  min-width: 50%;
+  background: #f2f3f4;
+  border-radius: 1rem;
+  color: #757575;
+  font-size: 0.3rem;
+}
+.time_select span {
+  padding: 1% 4%;
+  white-space: nowrap;
+}
+.time_select span.active {
+  color: #4767fe;
+  background: #fff;
+  border-radius: 1rem;
+}
+.inspact_card {
+  display: table;
+  margin: 1% 2% 3.5%;
+  width: 96%;
+  height: 5.25rem;
+  background: url(../../assets/images/bg_analy_v4.jpg) no-repeat;
+  background-size: 100% 100%;
+  border-radius: 0.2rem;
+}
+.card_tit {
+  margin: 3% 3%;
+  width: 100%;
+  font-size: 0.35rem;
+}
+.inspact_box {
+  margin: 1% 2%;
+  width: 96%;
+}
+.counts {
+  float: left;
+  margin: 1% 2%;
+  color: #4767fe;
+  font-size: 1.2rem;
+}
+.ratioes {
+  float: left;
+  margin: 1% 3%;
+  min-width: 40%;
+  color: #999;
+  font-size: 0.3rem;
+}
+.ratio_yeaer,
+.ratio_month {
+  display: flex;
+  align-items: center;
+  margin: 3.5% 3%;
+}
+.data-rise,
+.data-fall {
+  margin: 2% 2% 0 2.5%;
+  color: #03a159;
+  font-size: 0.42rem;
+  font-weight: 700;
+  display: flex;
+}
+.data-fall {
+  color: #ff3333;
+}
+.data-rise b,
+.data-fall b {
+  margin: 0 0 0 10%;
+}
+.item_box {
+  float: left;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  margin: 6% 2% 0;
+  width: 94%;
+  height: 1.5rem;
+}
+.item_sub {
+  position: relative;
+  margin: 0 1.5%;
+  height: 100%;
+  text-align: center;
+}
+.item_sub label {
+  display: block;
+  color: #79a3ca;
+  font-size: 0.32rem;
+  white-space: nowrap;
+}
+.item_sub b {
+  color: #4767fe;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.75;
+}
+.comst b {
+  color: #ff3333;
+}
+.item_sub::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: -5%;
+  width: 2px;
+  height: 85%;
+}
+.count_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2% 2% -2%;
+  width: 96%;
+}
+.count_item {
+  float: left;
+  position: relative;
+  margin: -1% 0.5% 2.5% 1.5%;
+  width: 31.3%;
+  height: 3rem;
+  background: url(../../assets/images/bg_analy_card.jpg) no-repeat;
+  background-size: cover;
+  border-radius: 0.2rem;
+  font-size: 0.35rem;
+  text-align: center;
+}
+.count_item label {
+  display: inline-flex;
+  margin: 8% 5% 5%;
+  width: 90%;
+  color: #4c4c4c;
+  text-align: left;
+}
+.number_count {
+  display: block;
+  color: #4767fe;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.75;
+}
+.number_percent {
+  color: #666;
+}
+.ent_cate .number_count {
+  color: #000;
+}
+.com_cate .number_count {
+  color: #f73b3b;
+}
+.com_cate .count_item {
+  background: url(../../assets/images/bg_analy_card_2.jpg) no-repeat;
+  background-size: cover;
+}
+</style>
\ No newline at end of file