ui问题修改

2 years ago · 1f8cea79c1
5 changed files with 74 additions and 152 deletions
--- a/src/views/dataBoard/cpts/map/index.vue
+++ b/src/views/dataBoard/cpts/map/index.vue
@ -527,12 +527,12 @@ export default {
        })
        .active(true);
      scene.addLayer(textLayer);
-
+      let popup;
      polygonLayer.on("mousemove", (e) => {
        if (this.level === "grid") {
          return;
        }
-        const popup = new Popup({
+        popup = new Popup({
          offsets: [60, 60],
          closeButton: false,
          maxWidth: 400,
@ -551,6 +551,9 @@ export default {
 `);
        scene.addPopup(popup);
      });
+      polygonLayer.on("mouseout", (e) => {
+        popup.remove();
+      });
      polygonLayer.on("click", (e) => {
        console.log(this.level);
        if (this.level === "grid") {
@ -990,12 +993,12 @@ export default {
    //box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
    width: 416px;
    padding: 0 20px !important;
-    background: url('@/assets/images/overview/dia_con.png');
+    background: url("@/assets/images/overview/dia_con.png");

    &:before {
-      content: '';
+      content: "";
      display: block;
-      background: url('@/assets/images/overview/dia_head.png');
+      background: url("@/assets/images/overview/dia_head.png");
      height: 29px;
      width: 100%;
      position: absolute;
@ -1004,9 +1007,9 @@ export default {
    }

    &:after {
-      content: '';
+      content: "";
      display: block;
-      background: url('@/assets/images/overview/dia_foot.png');
+      background: url("@/assets/images/overview/dia_foot.png");
      height: 26px;
      width: 100%;
      left: 0;
@ -1141,7 +1144,7 @@ export default {

    & > div {
      flex: 0 0 33%;
-      width:  33%;
+      width: 33%;
      height: 14px;
      font-size: 14px;
      font-weight: 400;
--- a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
@ -1,78 +1,48 @@
 <template>
-  <div
-    class="personnel-portrait"
-    v-loading="loading"
-    element-loading-text="加载中..."
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0,0,0,0.5)"
-  >
-    <Tabs
-      v-model="resultType"
-      :list="resultTypeList"
-      @changeVal="resultTypeChange"
-    />
+  <div class="personnel-portrait" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)">
+    <Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange" />
    <div class="screen">
      <div class="txt">不满意人员画像</div>
-      <el-select
-        v-if="resultType == 'provinceAndSelf'"
-        v-model="typeCondition"
-        @change="getData"
-        placeholder="请选择"
-        class="select"
-        popper-class="selectPopClass"
-      >
-        <el-option
-          v-for="item in typeConditionList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
+      <el-select v-if="resultType == 'provinceAndSelf'" v-model="typeCondition" @change="getData" placeholder="请选择" class="select" popper-class="selectPopClass">
+        <el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>

    <div class="portrait">
      <div class="tag yellow" v-if="gridName">
-        <div class="text">{{ gridName }}</div>
+        <div :class="[gridName.length > 5 ? 'smallSize' : '', 'text']">{{ gridName }}</div>
      </div>
      <div class="tag blue" v-if="ageClassification">
-        <div class="text">{{ ageClassification }}</div>
+        <div :class="[ageClassification.length > 5 ? 'smallSize' : '', 'text']">{{ ageClassification }}</div>
      </div>
      <div class="tag red" v-if="residentTagName">
-        <div class="text">{{ residentTagName }}</div>
+        <div :class="[residentTagName.length > 5 ? 'smallSize' : '', 'text']">{{ residentTagName }}</div>
      </div>
      <div class="tag light" v-if="monthIncomeLevel">
-        <div class="text">{{ monthIncomeLevel }}</div>
+        <div :class="[monthIncomeLevel.length > 5 ? 'smallSize' : '', 'text']">{{ monthIncomeLevel }}</div>
      </div>
      <div class="tag green" v-if="cultureName">
-        <div class="text">{{ cultureName }}</div>
+        <div :class="[cultureName.length > 5 ? 'smallSize' : '', 'text']">{{ cultureName }}</div>
      </div>
      <div class="tag orange" v-if="marriageName">
-        <div class="text">{{ marriageName }}</div>
+        <div :class="[marriageName.length > 5 ? 'smallSize' : '', 'text']">{{ marriageName }}</div>
      </div>
      <div class="tag purple" v-if="gender">
        <div class="text">
-          {{
-            gender === "1"
-              ? "男"
-              : gender === "2"
-              ? "女"
-              : gender === "0"
-              ? "未知"
-              : ""
-          }}
+          {{ gender === "1" ? "男" : gender === "2" ? "女" : gender === "0" ? "未知" : "" }}
        </div>
      </div>
    </div>
-
-    <div class="btn" @click="gotopage">
-      <div>
-        按画像匹配到同类：<span>
-          <b>{{ matchPeopleNum ? matchPeopleNum : 0 }}</b
-          >人</span
-        >
+    <div style="display: flex">
+      <div class="btn" @click="gotopage">
+        <div>
+          按画像匹配到同类：<span>
+            <b>{{ matchPeopleNum ? matchPeopleNum : 0 }}</b
+            >人</span
+          >
+        </div>
+        <i class="el-icon-arrow-right"></i>
      </div>
-      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
 </template>
@ -130,18 +100,13 @@ export default {
      this.getData();
    },
    gotopage() {
-      this.$router.push(
-        "/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" +
-          this.searchParams
-      );
+      this.$router.push("/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" + this.searchParams);
    },
    getDisKey() {
-      this.$http
-        .post("/sys/dict/data/dictlist", { dictType: "satisfaction_category" })
-        .then(({ data: { data } }) => {
-          this.typeCondition = data[0].value;
-          this.typeConditionList = data;
-        });
+      this.$http.post("/sys/dict/data/dictlist", { dictType: "satisfaction_category" }).then(({ data: { data } }) => {
+        this.typeCondition = data[0].value;
+        this.typeConditionList = data;
+      });
    },
    getData() {
      this.loading = true;
@ -151,23 +116,18 @@ export default {
        queryType: this.resultType,
        category: this.resultType == "provinceAndSelf" ? this.typeCondition : null,
      };
-      this.$http
-        .get(
-          "/governance/satisfactionOverview/satisfactionCrowdPortrait?" +
-            this.$paramsFormat(params)
-        )
-        .then(({ data: { data } }) => {
-          this.gender = data.gender;
-          this.marriageName = data.marriageName;
-          this.ageClassification = data.ageClassification;
-          this.cultureName = data.cultureName;
-          this.gridName = data.gridName;
-          this.monthIncomeLevel = data.monthIncomeLevel;
-          this.residentTagName = data.residentTagName;
-          this.matchPeopleNum = data.matchPeopleNum;
-          this.loading = false;
-          this.searchParams = JSON.stringify({ ...data, ...params });
-        });
+      this.$http.get("/governance/satisfactionOverview/satisfactionCrowdPortrait?" + this.$paramsFormat(params)).then(({ data: { data } }) => {
+        this.gender = data.gender;
+        this.marriageName = data.marriageName;
+        this.ageClassification = data.ageClassification;
+        this.cultureName = data.cultureName;
+        this.gridName = data.gridName;
+        this.monthIncomeLevel = data.monthIncomeLevel;
+        this.residentTagName = data.residentTagName;
+        this.matchPeopleNum = data.matchPeopleNum;
+        this.loading = false;
+        this.searchParams = JSON.stringify({ ...data, ...params });
+      });
    },
  },
 };
@ -239,6 +199,10 @@ $purple: #6642fd;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
+      text-align: center;
+    }
+    .smallSize {
+      font-size: 10px;
    }

    &:after {
@ -359,7 +323,7 @@ $purple: #6642fd;
 }

 .btn {
-  width: 240px;
+  min-width: 240px;
  height: 46px;
  border: 1px solid #125aaa;
  border-radius: 23px;
@ -367,7 +331,7 @@ $purple: #6642fd;
  font-weight: 400;
  color: #ffffff;
  line-height: 46px;
-  display: flex;
+  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
--- a/src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue
@ -13,7 +13,7 @@
        事件未解决 <br>
        上报人数
      </div>
-      <div class="num"><span class="orange">{{ unSolvedNum ? unSolvedNum : 0 }}</span>人</div>
+      <div class="num"><span style="margin-right: 4px;" class="orange">{{ unSolvedNum ? unSolvedNum : 0 }}</span>人</div>
    </div>
    <div class="potential-people-item" @click="$router.push('/dataBoard/satisfactionEval/potentialPeople?countType=demand')">
      <div class="icon">
@ -23,7 +23,7 @@
        需求未满足 <br>
        人数
      </div>
-      <div class="num"><span class="green">{{ unFinishNum ? unFinishNum : 0 }}</span>人</div>
+      <div class="num"><span style="margin-right: 4px" class="green">{{ unFinishNum ? unFinishNum : 0 }}</span>人</div>
    </div>
    <div class="potential-people-item" @click="$router.push('/dataBoard/satisfactionEval/potentialPeople?countType=service')">
      <div class="icon">
@ -33,7 +33,7 @@
        应享未享 <br>
        服务人数
      </div>
-      <div class="num"><span class="light">{{ noServiceNum ? noServiceNum : 0 }}</span>人</div>
+      <div class="num"><span style="margin-right: 4px" class="light">{{ noServiceNum ? noServiceNum : 0 }}</span>人</div>
    </div>
  </div>
 </template>
--- a/src/views/dataBoard/satisfactionEval/modules/SelfTrend/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/SelfTrend/index.vue
@ -122,7 +122,7 @@ export default {
        },
        tooltip: {
          trigger: 'axis',
-          backgroundColor: 'rgba(13,33,71,0.5)',
+          backgroundColor: 'rgba(13,33,71,0.8)',
          borderColor: 'rgba(143,174,252,0.6)',
          padding: 8,
          textStyle: {
--- a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
@ -1,31 +1,9 @@
 <template>
-  <div
-    class="types-dissatisfaction"
-    v-loading="loading"
-    element-loading-text="加载中..."
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0,0,0,0.5)"
-  >
+  <div class="types-dissatisfaction" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)">
    <div class="screen">
-      <Tabs
-        v-model="resultType"
-        :list="resultTypeList"
-        @changeVal="resultTypeChange"
-      />
-      <el-select
-        v-model="typeCondition"
-        popper-class="selectPopClass"
-        placeholder="请选择"
-        class="select"
-        @change="timeChange"
-      >
-        <el-option
-          v-for="item in typeConditionList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
+      <Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange" />
+      <el-select v-model="typeCondition" popper-class="selectPopClass" placeholder="请选择" class="select" @change="timeChange">
+        <el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
    <div id="typeConditionChart" style="height: 542px"></div>
@ -104,35 +82,20 @@ export default {
        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 2) {
-        startTime = this.$moment()
-          .subtract(1, "months")
-          .startOf("month")
-          .format("YYYY-MM-DD");
+        startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 3) {
-        startTime = this.$moment()
-          .subtract(2, "months")
-          .startOf("month")
-          .format("YYYY-MM-DD");
+        startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 4) {
-        startTime = this.$moment()
-          .subtract(5, "months")
-          .startOf("month")
-          .format("YYYY-MM-DD");
+        startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
      }
      if (this.typeCondition === 5) {
-        startTime = this.$moment()
-          .subtract(11, "months")
-          .startOf("month")
-          .format("YYYY-MM-DD");
+        startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
      }

      if (this.typeCondition === 2) {
-        endTime = this.$moment()
-          .subtract(1, "months")
-          .endOf("month")
-          .format("YYYY-MM-DD");
+        endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
      } else {
        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
      }
@ -164,9 +127,7 @@ export default {
      this.myChart = echarts.init(div);
      var dataname = data.map((item) => item.name);
      var datavaule = data.map((item) => (item.blueNum ? item.blueNum : 0));
-      var datavaule2 = data.map((item) =>
-        item.yellowNum ? item.yellowNum : 0
-      );
+      var datavaule2 = data.map((item) => (item.yellowNum ? item.yellowNum : 0));
      var indicator = [];
      let max = Math.max(...datavaule, ...datavaule2);
      console.log(max);
@ -177,16 +138,10 @@ export default {
          max: datamax[i],
        });
      }
-      let legendName = [
-        "省满意度调查\n各项不满意人数",
-        "社区满意度自查\n各项不满意人数",
-      ];
+      let legendName = ["省满意度调查\n各项不满意人数", "社区满意度自查\n各项不满意人数"];
      let series = [
        {
-          name:
-            this.resultType === 2
-              ? "12345热线\n事件上报人数"
-              : "省满意度调查\n各项不满意人数",
+          name: this.resultType === 2 ? "12345热线\n事件上报人数" : "省满意度调查\n各项不满意人数",
          type: "radar",
          symbol: "circle",
          symbolSize: 7,
@ -239,11 +194,11 @@ export default {
      var option = {
        tooltip: {
          trigger: "item",
-          backgroundColor: 'rgba(13,33,71,0.5)',
-          borderColor: 'rgba(143,174,252,0.6)',
+          backgroundColor: "rgba(13,33,71,0.5)",
+          borderColor: "rgba(143,174,252,0.6)",
          padding: 8,
          textStyle: {
-            color: '#fff',
+            color: "#fff",
          },
        },
        legend: {
@ -268,7 +223,7 @@ export default {
          data: legendName,
        },
        radar: {
-          center: ["50%", "60%"],
+          center: ["50%", "50%"],
          radius: "50%",
          startAngle: 90,
          splitNumber: 5,