提交信息

WXL

2023-11-22 40e3b74c9b2b2fdb6d9db734e4f2456503d80b7c

提交信息

 src/App.vue

@@ -2,6 +2,7 @@
  <div id="app">
    <router-view />
    <theme-picker />
    <Assistant />
  </div>
</template>

@@ -10,15 +11,22 @@

export default {
  name: "App",
  components: { ThemePicker },
  components: {
    ThemePicker,
    Assistant: () => import("./components/Assistant"), //异步组件加载方式
  },
    metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
    }
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title
          ? `${title} - ${process.env.VUE_APP_TITLE}`
          : process.env.VUE_APP_TITLE;
      },
    };
  },
};
</script>
<style scoped>

 src/assets/dashboard/bg11.png

 src/assets/dashboard/bg22.png

 src/assets/dashboard/bg33.png

 src/assets/images/bg.png

 src/assets/images/bg1.png

 src/assets/images/bg2.png

 src/assets/images/cancel.png

 src/assets/images/cancel1.png

 src/assets/images/defaultImg.jpg

 src/assets/images/logo.3673fab5.png

 src/assets/images/logo.jpg

 src/assets/images/navBar.png

 src/assets/images/nodata.png

 src/assets/images/operation.4120cc58.png

 src/assets/images/task.66b715b7.png

 src/assets/images/ÏÂÔØ.png

 src/assets/order/1.png

 src/assets/order/2.png

 src/assets/order/3.png

 src/assets/order/4.png

 src/components/Assistant/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,486 @@
<template>
  <div
    ref="floatDrag"
    class="float-position"
    id="float-box"
    :style="{
      left: left + 'px',
      top: top + 'px',
      right: right + 'px !important',
      zIndex: zIndex,
    }"
    @touchmove.prevent
    @mousemove.prevent
    @mousedown="mouseDown"
    @mouseup="mouseUp"
  >
    <div class="drag">
      <svg
        t="1682058484158"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2023"
        width="32"
        height="32"
      >
        <path
          d="M556.297 172.715a42.407 42.407 0 0 1 42.426 42.398l0.837 267.69c-0.118 1.703 0.63 2.737 1.408 2.737 0.63 0 1.29-0.699 1.506-2.284l37.74-208.953c3.732-20.672 21.844-36.166 42.162-36.166a40.074 40.074 0 0 1 7.136 0.64c23.064 4.164 38.391 27.562 34.217 50.587l-33.656 244.529c0 2.559 0.483 4.478 1.32 4.478 0.58 0 1.328-0.935 2.175-3.218l50.144-134.063c6.27-17.65 23.034-29.403 40.793-29.403A39.798 39.798 0 0 1 797.892 374c22.08 7.875 33.626 33.41 25.78 55.47l-87.904 287.191c-0.453 1.585-0.984 3.16-1.437 4.725l-0.187 0.591v0.128a187.031 187.031 0 0 1-177.847 129.1c-53.156 0-108.42-18.752-150.472-51-45.419-27.336-190.968-183.783-190.968-183.783-22.09-22.07-18.792-55.882 3.297-77.962 11.537-11.537 25.919-17.6 40.173-17.6 13.033 0 25.967 5.05 36.51 15.592l63.138 63.157c8.603 8.594 18.132 12.699 26.922 12.699a26.952 26.952 0 0 0 20.88-9.893c7.658-9.037 4.635-36.914 2.49-54.594l-31.668-260.259c-2.825-23.26 13.781-45.724 37.003-48.549a40.497 40.497 0 0 1 4.853-0.295c21.282 0 39.749 16.98 42.387 38.597l34.926 204.425c0.905 2.54 2.342 4.036 3.602 4.036s2.353-1.496 2.58-4.922l11.88-265.741a42.417 42.417 0 0 1 42.467-42.398m0-70.875a113.36 113.36 0 0 0-104.344 69.153c-0.246 0.57-0.482 1.152-0.718 1.732a111.234 111.234 0 0 0-90.022 10.976 113.597 113.597 0 0 0-32.415 29.207 115.23 115.23 0 0 0-19.067 38.489 113.843 113.843 0 0 0-3.465 44.68l21.36 175.77a120.842 120.842 0 0 0-69.3-21.863c-33.468 0-65.549 13.614-90.286 38.332-23.212 23.202-36.993 53.363-38.863 84.952a120.92 120.92 0 0 0 34.502 92.216c5.532 5.906 39.64 42.407 79.203 82.412 74.586 75.422 105.328 99.648 122.702 110.771 53.973 40.36 123.254 63.414 190.674 63.414A257.906 257.906 0 0 0 801.14 745.1c0.247-0.709 0.483-1.417 0.7-2.136l0.117-0.374a178.56 178.56 0 0 0 1.723-5.64l87.413-285.578a113.203 113.203 0 0 0 5.729-42.86 115.585 115.585 0 0 0-35.772-77.135 111.431 111.431 0 0 0-67.45-30.19l0.148-0.985a113.676 113.676 0 0 0-1.201-43.155 115.408 115.408 0 0 0-16.872-39.523 113.774 113.774 0 0 0-30.703-30.968 111.077 111.077 0 0 0-84.981-17.06 113.203 113.203 0 0 0-103.694-67.656z"
          fill="#ffffff"
          p-id="2024"
        ></path>
      </svg>
    </div>
    <div class="content" id="content" @click="handelFlex">
      <!-- <img src="../../../../assets/image/alarm.png" alt="" /> -->
      <div class="label">
        <div v-if="flag">展开</div>
        <div v-else>收起</div>
      </div>
      <div class="item-container">
        <div
          v-for="(item, index) in powerList"
          :key="index"
          @click.stop="activeHandle(index)"
        >
          <div
            :class="activeIndex == index ? 'active power-item' : 'power-item'"
          >
            <img :src="item.path" alt="" style="width: 26px" />
          </div>
          <div :class="activeIndex == index ? 'active-des des' : 'des'">
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DragBall",
  props: {
    distanceRight: {
      type: Number,
      default: 36,
    },
    distanceBottom: {
      type: Number,
      default: 700,
    },
    isScrollHidden: {
      type: Boolean,
      default: false,
    },
    isCanDraggable: {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: Number,
      default: 50,
    },
    value: {
      type: String,
      default: "悬浮球！",
    },
  },
  data() {
    return {
      clientWidth: null,
      clientHeight: null,
      left: null,
      top: null,
      right: null,
      timer: null,
      currentTop: 0,
      mousedownX: 0,
      mousedownY: 0,

      flag: true, // æŽ§åˆ¶æ‚¬æµ®æ¡†æ˜¯å¦å±•å¼€
      box: "", // æ‚¬æµ®çƒçš„dom
      activeIndex: 0, //高亮显示
      powerList: [
        {
          path: require("@/assets/images/下载.png"),
          label: "连接CTI",
        },
        {
          path: require("@/assets/images/下载.png"),
          label: "签入",
        },
        {
          path: require("@/assets/images/下载.png"),
          label: "签出",
        },
        {
          path: require("@/assets/images/下载.png"),
          label: "置闲",
        },
        {
          path: require("@/assets/images/下载.png"),
          label: "置忙",
        },
        {
          path: require("@/assets/images/下载.png"),
          label: "拨号",
        },
        {
          path: require("@/assets/images/下载.png"),
          label: "咨询",
        },
        {
          path: require("@/assets/images/下载.png"),
          label: "保持",
        },
        {
          path: require("@/assets/images/下载.png"),
          label: "恢复",
        },
      ],
    };
  },
  created() {
    this.clientWidth = document.documentElement.clientWidth;
    this.clientHeight = document.documentElement.clientHeight;
  },
  mounted() {
    this.isCanDraggable &&
      this.$nextTick(() => {
        this.floatDrag = this.$refs.floatDrag;
        // èŽ·å–元素位置属性
        this.floatDragDom = this.floatDrag.getBoundingClientRect();
        // è®¾ç½®åˆå§‹ä½ç½®
        // this.left = this.clientWidth - this.floatDragDom.width - this.distanceRight;
        this.right = 0;
        this.top =
          this.clientHeight - this.floatDragDom.height - this.distanceBottom;
        this.initDraggable();
      });
    // this.isScrollHidden && window.addEventListener('scroll', this.handleScroll);
    window.addEventListener("resize", this.handleResize);

    this.box = document.getElementById("float-box");
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    // ä¼¸ç¼©æ‚¬æµ®çƒ
    handelFlex() {
      if (this.flag) {
        this.buffer(this.box, "height", 700);
      } else {
        this.buffer(this.box, "height", 70);
      }
      this.flag = !this.flag;
      console.log("是否展开", this.flag);
    },
    // ç‚¹å‡»å“ªä¸ªpower
    activeHandle(index) {
      //把我们自定义的下标赋值
      this.activeIndex = index;
      console.log("HHHH", index);
    },
    // èŽ·å–要改变得样式属性
    getStyleAttr(obj, attr) {
      if (obj.currentStyle) {
        // IE å’Œ opera
        return obj.currentStyle[attr];
      } else {
        return window.getComputedStyle(obj, null)[attr];
      }
    },
    // åŠ¨ç”»å‡½æ•°
    buffer(eleObj, attr, target) {
      // setInterval方式开启动画
      //先清后设
      // clearInterval(eleObj.timer);
      // let speed = 0
      // let begin = 0
      // //设置定时器
      // eleObj.timer = setInterval(() => {
      //     //获取动画属性的初始值
      //     begin = parseInt(this.getStyleAttr(eleObj, attr));
      //     speed = (target - begin) * 0.2;
      //     speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
      //     eleObj.style[attr] = begin + speed + "px";
      //     if (begin === target) {
      //         clearInterval(eleObj.timer);
      //     }
      // }, 20);
      // cancelAnimationFrame开启动画
      // å…ˆæ¸…后设
      cancelAnimationFrame(eleObj.timer);
      let speed = 0;
      let begin = 0;
      let _this = this;
      eleObj.timer = requestAnimationFrame(function fn() {
        begin = parseInt(_this.getStyleAttr(eleObj, attr));
        // åŠ¨ç”»é€Ÿåº¦
        speed = (target - begin) * 0.9;
        speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
        eleObj.style[attr] = begin + speed + "px";
        eleObj.timer = requestAnimationFrame(fn);
        if (begin === target) {
          cancelAnimationFrame(eleObj.timer);
        }
      });
    },
    /**
     * çª—口resize监听
     */
    handleResize() {
      // this.clientWidth = document.documentElement.clientWidth;
      // this.clientHeight = document.documentElement.clientHeight;
      // console.log(window.innerWidth);
      // console.log(document.documentElement.clientWidth);

      this.checkDraggablePosition();
    },
    /**
     * åˆå§‹åŒ–draggable
     */
    initDraggable() {
      this.floatDrag.addEventListener("touchstart", this.toucheStart);
      this.floatDrag.addEventListener("touchmove", (e) => this.touchMove(e));
      this.floatDrag.addEventListener("touchend", this.touchEnd);
    },
    mouseDown(e) {
      const event = e || window.event;
      this.mousedownX = event.screenX;
      this.mousedownY = event.screenY;
      const that = this;
      let floatDragWidth = this.floatDragDom.width / 2;
      let floatDragHeight = this.floatDragDom.height / 2;
      if (event.preventDefault) {
        event.preventDefault();
      }
      this.canClick = false;
      this.floatDrag.style.transition = "none";
      document.onmousemove = function (e) {
        var event = e || window.event;
        that.left = event.clientX - floatDragWidth;
        that.top = event.clientY - floatDragHeight;
        if (that.left < 0) that.left = 0;
        if (that.top < 0) that.top = 0;
        // é¼ æ ‡ç§»å‡ºå¯è§†åŒºåŸŸåŽç»™æŒ‰é’®è¿˜åŽŸ
        if (
          event.clientY < 0 ||
          event.clientY > Number(this.clientHeight) ||
          event.clientX > Number(this.clientWidth) ||
          event.clientX < 0
        ) {
          this.right = 0;
          this.top =
            this.clientHeight - this.floatDragDom.height - this.distanceBottom;
          document.onmousemove = null;
          this.floatDrag.style.transition = "all 0.3s";
          return;
        }
        if (
          that.left >=
          document.documentElement.clientWidth - floatDragWidth * 2
        ) {
          that.left = document.documentElement.clientWidth - floatDragWidth * 2;
        }
        if (that.top >= that.clientHeight - floatDragHeight * 2) {
          that.top = that.clientHeight - floatDragHeight * 2;
        }
      };
    },
    mouseUp(e) {
      const event = e || window.event;
      //判断只是单纯的点击，没有拖拽
      if (
        this.mousedownY == event.screenY &&
        this.mousedownX == event.screenX
      ) {
        this.$emit("handlepaly");
      }
      document.onmousemove = null;
      this.checkDraggablePosition();
      this.floatDrag.style.transition = "all 0.3s";
    },
    toucheStart() {
      this.canClick = false;
      this.floatDrag.style.transition = "none";
    },
    touchMove(e) {
      this.canClick = true;
      if (e.targetTouches.length === 1) {
        // å•æŒ‡æ‹–动
        let touch = event.targetTouches[0];
        this.left = touch.clientX - this.floatDragDom.width / 2;
        this.top = touch.clientY - this.floatDragDom.height / 2;
      }
    },
    touchEnd() {
      if (!this.canClick) return; // è§£å†³ç‚¹å‡»äº‹ä»¶å’Œtouch事件冲突的问题
      this.floatDrag.style.transition = "all 0.3s";
      this.checkDraggablePosition();
    },
    /**
     * åˆ¤æ–­å…ƒç´ æ˜¾ç¤ºä½ç½®
     * åœ¨çª—口改变和move end时调用
     */
    checkDraggablePosition() {
      this.clientWidth = document.documentElement.clientWidth;
      this.clientHeight = document.documentElement.clientHeight;
      if (this.left + this.floatDragDom.width / 2 >= this.clientWidth / 2) {
        // åˆ¤æ–­ä½ç½®æ˜¯å¾€å·¦å¾€å³æ»‘动
        this.left = this.clientWidth - this.floatDragDom.width;
      } else {
        this.left = 0;
      }
      if (this.top < 0) {
        // åˆ¤æ–­æ˜¯å¦è¶…出屏幕上沿
        this.top = 0;
      }
      if (this.top + this.floatDragDom.height >= this.clientHeight) {
        // åˆ¤æ–­æ˜¯å¦è¶…出屏幕下沿
        this.top = this.clientHeight - this.floatDragDom.height;
      }
    },
  },
};
</script>
<style>
html,
body {
  overflow: hidden;
}
</style>
<style scoped lang="scss">
.float-position {
  position: fixed;
  z-index: 10003 !important;
  left: 0;
  top: 20%;
  width: 70px;
  height: 70px;
  border-radius: 32px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;

  display: block;
  background: black;
  background: -webkit-radial-gradient(100px 100px, circle, #5788fe, #292929);
  //   background: -moz-radial-gradient(100px 100px, circle, #35a1a1, #000);Firefox æµè§ˆå™¨çš„实现
  //   background: radial-gradient(100px 100px, circle, #35a1a1, #000);标准 HTML5 å±žæ€§
  margin: 0;
  .drag {
    width: 70px;
    height: 35px;
    // background: #f2e96a;
    text-align: center;
    line-height: 35px;
    border-bottom: 1px solid #fff;
  }
  .content {
    width: 70px;
    height: 35px;
    // background: #716af2;
    .label {
      width: 70px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      color: white;
    }
    .label:hover {
      color: rgb(19, 217, 243);
      transition: all 0.5;
    }

    .item-container {
      margin-top: 10px;
      width: 70px;
      height: 600px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;

      .power-item {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #69707a;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .des {
        width: 40px;
        text-align: center;
        margin-bottom: 5px;
        font-size: 10px;
        color: #fff;
      }
    }
  }

  .close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    right: -10px;
    top: -12px;
    cursor: pointer;
  }
}

.cart {
  border-radius: 50%;
  width: 5em;
  height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-notice {
  display: inline-block;
  transition: all 0.3s;

  span {
    vertical-align: initial;
  }

  .notice-badge {
    color: inherit;

    .header-notice-icon {
      font-size: 16px;
      padding: 4px;
    }
  }
}

.drag-ball .drag-content {
  overflow-wrap: break-word;
  font-size: 14px;
  color: #fff;
  letter-spacing: 2px;
}

.active {
  background-color: #1a1818 !important;
}
.active-des {
  color: #1a1818 !important;
  font-weight: bold !important;
}
</style>

 src/views/index.vue

@@ -1,87 +1,724 @@
<template>
  <div class="app-container home">
  <div id="home">
    <div class="home" style="margin-top: 40px; margin-left: 20px">
      <!-- å¤´éƒ¨ä¸¤ä¸ª -->
      <el-row :gutter="20">
        <el-col :span="10">
          <!-- å°±è¯Šç»Ÿè®¡ç›’子 -->
          <div class="grid-content bg-purple headerBox bgc1">
            <div class="title">
              å°±è¯Šç»Ÿè®¡
              <span>{{ endatd }} ~ {{ statd }}</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="home-user-task-stats">
                  <p>{{ 12322 }}</p>
                </div>
                <div class="text-color2">
                  <p>就诊总数（个）</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="home-user-task-stats">
                  <p>{{ 1231 }}</p>
                  <div class="text-color2">
                    <p>在院总数（人）</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="home-user-task-stats">
                  <p>{{ ticketStatistics.progressTotal || "0" }}</p>
                  <div class="text-color2">
                    <p>离院总数（人）</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="home-user-task-stats">
                  <p>{{ 12 }}</p>
                  <div class="text-color2">
                    <p>投诉总数</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple headerBox bgc2">
            <div class="title">
              åŒ»åŠ¡äººå‘˜æ•°é‡
              <span>{{ endatd }} ~ {{ statd }}</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="home-user-task-stats">
                  <p style="color: red">{{ 3453 }}</p>
                </div>
                <div class="text-color2">
                  <p>医师</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="home-user-task-stats">
                  <p style="color: red">{{ 4213 }}</p>
                  <div class="text-color2">
                    <p>护士</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <!-- ä¸­é—´å’Œå³è¾¹ -->
      <el-row :gutter="20">
        <el-col :span="17">
          <!-- echars数据可视化 -->
          <div class="grid-content bg-purple" style="min-height: 365px">
            <div class="title">
              å°±è¯Šç»Ÿè®¡
              <span>{{ endatd }} ~ {{ statd }}</span>
              <el-radio-group
                v-model="radio1"
                size="mini"
                style="margin-left: 390px"
                @change="changes"
              >
                <el-radio-button label="周" @click="dyat = 7"></el-radio-button>
                <el-radio-button
                  label="月"
                  @click="dyat = 30"
                ></el-radio-button>
                <el-radio-button
                  label="å¹´"
                  @click="dyat = 360"
                ></el-radio-button>
              </el-radio-group>
            </div>
            <!-- ä¸­é—´echars -->
            <div class="boxEchars">
              <div class="echars1" id="echars"></div>
              <div class="echars2" id="echars2"></div>
            </div>
          </div>
        </el-col>
        <!-- ä¸­é—´å’Œå³è¾¹ -->
        <el-col :span="6" class="aside">
          <div
            class="grid-content bg-purple"
            style="height: 560px; margin-top: -180px"
          >
            <div class="title">
              æŽ¥è¯ŠæŽ’è¡Œ
              <span>{{ endatd }} ~ {{ statd }}</span>
            </div>
            <el-table style="width: 100%" :data="SkuTop">
              <template v-for="(item, index) in SkuTop"></template>
              <el-table-column
                prop="order"
                width="30"
                style="background: url(~@/assets/order/4.png)"
                type="index"
 
              ></el-table-column>
              <el-table-column
                prop="skuName"
                width="124"
                class-name="name"
                
              ></el-table-column>
              <el-table-column
                prop="count"
                class-name="count"
                
              ></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <!-- åº•éƒ¨ä¸€ä¸ª -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="13">
          <div class="grid-content bg-purple" style="min-height: 300px">
            <div class="title">
              åˆä½œå•†ç‚¹ä½æ•°Top5
              <span class="el-icon-s-unfold moreIcon"></span>
            </div>
            <div class="cooperate">
              <!-- åˆä½œåŒºåŸŸ -->
              <div class="pieChart" id="pieCharts"></div>
              <div class="Points">
                <p>{{ 122 }}</p>
                <span>点位数</span>
                <p>{{ 18 }}</p>
                <span>合作商</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple" style="min-height: 300px">
            <div class="title">
              å¼‚常设备监控
              <span class="el-icon-s-unfold moreIcon2"></span>
            </div>
            <div class="empenty"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import {
//   getUserWork,
//   getregionCollect,
//   getregionOrderCount,
//   getregionAmountCollect,
//   getNodeCount,
//   getPrtnerCount,
//   getnodeCollect,
//   getSkuTop,
//   getOrderAmount,
// } from "@/api/home";
import dayjs from "dayjs";

export default {
  name: "Index",
  name: "home",
  data() {
    return {
      // ç‰ˆæœ¬å·
      version: "3.8.5"
      NodeCount: "",
      PrtnerCount: "",
      NodeCount: "",
      radio1: "周",
      ticketStatistics: {},
      order: "",
      Count: "",
      datatni: [],
      series: [],
      tableData: [],
      nodeCollect: [],
      SkuTop: [],
      cylinderSeries: [],
      cylinderXAxis: [],
      dyat: 30,
    };
  },

  computed: {
    // æ—¶é—´åŒºåŸŸ
    td() {
      return dayjs().format("YYYY-MM-DD HH:mm:ss");
    },
    atd() {
      return dayjs().subtract(this.dyat, "day").format("YYYY-MM-DD HH:mm:ss");
    },
    statd() {
      return dayjs().format("YYYY-MM-DD");
    },
    endatd() {
      return dayjs().subtract(this.dyat, "day").format("YYYY-MM-DD");
    },
  },
  created() {
    this.$nextTick(function () {
      this.getregionAmountCollect();
      this.getUserWorks();
      this.getregionCollect();
      this.getregionOrderCount();
      this.getNodeCount();
      this.getPrtnerCount();
      this.getnodeCollect();
      this.getSkuTop();
      this.getOrderAmount();
    })
  },
  mounted() {},
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    // æ”¹å˜æ—¶é—´äº‹ä»¶
    changes() {
      if (this.radio1 == "周") {
        this.dyat = 7;
      } else if (this.radio1 == "月") {
        this.dyat = 30;
      } else {
        this.dyat = 360;
    }
  }
      this.getregionAmountCollect();
      this.getUserWorks();
      this.getregionCollect();
      this.getregionOrderCount();
      this.getNodeCount();
      this.getPrtnerCount();
      this.getnodeCollect();
      this.getSkuTop();
      this.getOrderAmount();
    },
    // æŸ±çŠ¶å›¾
    async getOrderAmount() {
      // const res = await getOrderAmount(this.endatd, this.statd);
      // this.cylinderXAxis = res.data.xAxis;
      // this.cylinderSeries = res.data.series;
      this.cylinderXAxis = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
      ];
      this.cylinderSeries = [123, 123, 223, 212, 432, 123, 442, 234];
      this.myEcharts();
    },
    // èŽ·å–点位总数
    async getNodeCount() {
      // const res = await getNodeCount();
      // this.NodeCount = res.data;
    },
    // èŽ·å–合作商总数
    async getPrtnerCount() {
      // const res = await getPrtnerCount();
      // this.PrtnerCount = res.data;
    },
    // åˆä½œå•†ç‚¹ä½æ±‡æ€»ç»Ÿè®¡é¥¼çŠ¶å›¾
    async getnodeCollect() {
      // const res = await getnodeCollect();
      // this.nodeCollect = res.data;
      this.nodeCollect = [
        { name: "浙大一院", value: 12 },
        { name: "浙大二院", value: 8 },
        { name: "金兰医院", value: 8 },
        { name: "邵逸夫医院", value: 6 },
        { name: "省人民医院", value: 5 },
        { name: "朝晖院区", value: 4 },
      ];
      this.myPieChart();
    },
    // top排行
    async getSkuTop() {
      // const res = await getSkuTop(10, this.endatd, this.statd);
      // this.SkuTop = res.data;
      this.SkuTop = [
        { amount: 0, count: 123, skuId: "0", skuName: "王大夫" },
        { amount: 0, count: 122, skuId: "0", skuName: "吴大夫" },
        { amount: 0, count: 112, skuId: "0", skuName: "李主任" },
        { amount: 0, count: 111, skuId: "0", skuName: "张护士" },
        { amount: 0, count: 102, skuId: "0", skuName: "李护士" },
        { amount: 0, count: 98, skuId: "0", skuName: "刘护士" },
        { amount: 0, count: 89, skuId: "0", skuName: "马大夫" },
        { amount: 0, count: 88, skuId: "0", skuName: "马大夫" },
        { amount: 0, count: 87, skuId: "0", skuName: "马大夫" },
        { amount: 0, count: 67, skuId: "0", skuName: "马大夫" },
      ];
    },
    // èŽ·å–工单数量
    async getUserWorks() {
      // const res = await getUserWork(this.atd, this.td);
      // this.ticketStatistics = res.data[0];
    },
    // èŽ·å–就诊数量
    async getregionOrderCount() {
      // const res = await getregionOrderCount({
      //   start: this.atd,
      //   end: this.td,
      // });

      // this.order = res.data;
    },
    // èŽ·å–总量数量
    async getregionCollect() {
      // const res = await getregionCollect({
      //   start: this.atd,
      //   end: this.td,
      // });
      // this.Count = (res.data / 1000000).toFixed(2);
    },

    // æŸ±çŠ¶å›¾
    myEcharts() {
      // åŸºäºŽå‡†å¤‡å¥½çš„dom，初始化echarts实例
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("echars2"));

      // æŒ‡å®šå›¾è¡¨çš„配置项和数据
      var option = {
        title: {
          text: "就诊分布",
          left: "center",
        },
        grid: { top: "18%", left: "19%", right: "0%", bottom: "24%" },
        xAxis: {
          type: "category",
          data: this.cylinderXAxis,
        },
        yAxis: {
          type: "value",
          name: "单位/元",
        },
        series: [
          {
            data: this.cylinderSeries,
            barWidth: "5%",
            type: "bar",
          },
        ],
      };

      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表。
      myChart.setOption(option);
    },
    // èŽ·å–线状图时间
    async getregionAmountCollect() {
      // const res = await getregionAmountCollect(1, this.endatd, this.statd);
      // this.xAxis = res.data.xAxis;
      // this.series = res.data.series;
      this.xAxis = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
      ];
      this.series = [123, 123, 223, 212, 432, 123, 442, 234];
      this.myEcharts2();
    },
    // çº¿æ€§å›¾
    myEcharts2() {
      var echarts = require("echarts");
      var myChart2 = echarts.init(document.getElementById("echars"));
      var option2 = {
        color: ["red"],
        title: {
          text: "就诊趋势图",
          left: "center",
        },
        grid: { top: "18%", left: "17%", right: "0%", bottom: "24%" },
        xAxis: {
          type: "category",
          data: this.xAxis,
          boundaryGap: true,
        },
        yAxis: {
          name: "单位/元",
          type: "value",
        },
        series: [
          {
            data: this.series,
            type: "line",
          },
        ],
      };
      myChart2.setOption(option2);
    },
    // é¥¼çŠ¶å›¾
    myPieChart() {
      // åŸºäºŽå‡†å¤‡å¥½çš„dom，初始化echarts实例
      var echarts = require("echarts");
      var mypPieCharts = echarts.init(document.getElementById("pieCharts"));

      // æŒ‡å®šå›¾è¡¨çš„配置项和数据
      var optionPie = {
        title: {
          left: "left",
        },

        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>总占比 : {d}% ",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
          },
        },
        series: [
          {
            name: "合作商点位数Top5",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            data: this.nodeCollect,
          },
        ],
      };

      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表。
      mypPieCharts.setOption(optionPie);
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
.boxEchars {
  width: 100%;
  height: 280px;
  margin-top: 45px;
  display: flex;
  .echars1 {
    flex: 1;
  }

  h4 {
    margin-top: 0px;
  .echars2 {
    flex: 1;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

::v-deep .el-table {
  td:first-child {
    .cell {
      display: inline-block;
      text-align: center;
      width: 22px;
      height: 20px;
      margin-left: 2px;
      padding-left: 6px;
      text-align: center;
      white-space: nowrap;
      font-size: 12px;
      font-family: zihun143-zhengkuchaojihei, zihun143;
      font-weight: 400;
      line-height: 14px;
      background: url(~@/assets/order/4.png) no-repeat;
      color: #e9b499;
    }
  }
  td:nth-child(2) {
    .cell {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
      line-height: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  td:last-child {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #737589;
    line-height: 20px;
    text-align: right;
  }
}
::v-deep .el-table {
  tr:nth-child(1) {
    td:nth-child(1) {
      .cell {
        background: url(~@/assets/order/1.png);
        color: #8e5900;
      }
    }
  }
  tr:nth-child(2) {
    td:nth-child(1) {
      .cell {
        background: url(~@/assets/order/2.png);
        color: #494949;
      }
    }
  }
  tr:nth-child(3) {
    td:nth-child(1) {
      .cell {
        background: url(~@/assets/order/3.png);
        color: #cf6d3d;
      }
    }
  }
}
.moreIcon {
  font-size: 22px !important;
  margin-left: 400px !important;
  color: #5f84ff !important;
  cursor: pointer;
}
.moreIcon2 {
  font-size: 22px !important;
  margin-left: 250px !important;
  color: #5f84ff !important;
  cursor: pointer;
}
.empenty {
  width: 100%;
  height: 280px;
}
.cooperate {
  width: 100%;
  height: 280px;
  margin-top: 25px;
  display: flex;
  .pieChart {
    flex: 3;
  }
  .Points {
    width: 154px;
    height: 230px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
      linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
      linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
      linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
  p {
      height: 33px;
      margin-bottom: 10px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #072074;
      line-height: 33px;
    }
    span {
      height: 17px;
      margin-top: 6px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000412;
      line-height: 17px;
    }
  }
}
.title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333;
  padding-top: 17px;
  padding-bottom: -4px;

  span {
    margin-left: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
  }
}
.bgc2 {
  background: #fbefe8 url(~@/assets/dashboard/bg33.png) no-repeat
    calc(100% - 12px) 100% !important;

  .home-user-task-stats {
    margin-top: 10px;

    b {
      font-weight: 700;
    height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
  }
  .text-color2 {
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff5757;
    line-height: 17px;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
.bgc1 {
  background: #e9f3ff !important;
  background-image: url(~@/assets/dashboard/bg11.png),
    url(~@/assets/dashboard/bg22.png) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, calc(100% - 12px) 100% !important;
  .title {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    span {
      margin-left: 10px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
    }
  }
  .home-user-task-stats {
    margin-top: 10px;
    height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
  }
  .text-color2 {
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #91a7dc;
    line-height: 17px;
  }
}
.headerBox {
  height: 150px;
  padding: 25px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  min-height: 36px;
  border-radius: 20px;
  padding: 0 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>


 src/views/patient/servefn/index.vue

@@ -1,27 +1,825 @@
<template>
  <div class="Questionnairemanagement">
    <!-- å·¦ä¾§æ  -->
    <div class="sidecolumn">
      <div class="sidecolumn-top">
        <div class="top-wj">患者来源</div>
      </div>

      <div class="bottom-fl">
        <el-tabs
          tab-position="right"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="住院" name="bhospitalized"></el-tab-pane>
          <el-tab-pane label="在院" name="Inhospital"></el-tab-pane>
          <el-tab-pane label="门诊" name="outpatient"></el-tab-pane>
          <el-tab-pane label="体检" name="physical"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- å³ä¾§æ•°æ® -->
    <div class="leftvlue">
  <div>
患者服务
        <el-row :gutter="8">
          <el-col :span="2.5">
            <el-card shadow="hover">
              <div style="padding: 10px">
                <span>患者总数</span>
                <div class="bottom clearfix">1232</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="2.5">
            <el-card shadow="hover"> é¼ æ ‡æ‚¬æµ®æ—¶æ˜¾ç¤º </el-card>
          </el-col>
          <el-col :span="2.5">
            <el-card shadow="hover"> ä»Žä¸æ˜¾ç¤º </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="leftvlue-bg">
        <el-row :gutter="20">
          <!--标签数据-->
          <el-col :span="24" :xs="24">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              v-show="showSearch"
              label-width="98px"
            >
              <el-form-item label="医院" prop="userName">
                <el-select v-model="queryParams.value1" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出院病区" prop="userName">
                <el-select v-model="queryParams.value2" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="管理方案" prop="userName">
                <el-select v-model="queryParams.value3" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出院日期" prop="userName">
                <el-date-picker
                  v-model="queryParams.valuetime1"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptionsa"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="计划随访日期" prop="userName">
                <el-date-picker
                  v-model="queryParams.valuetime2"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="medium"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="medium"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="medium"
                  @click="addladeltag"
                  v-hasPermi="['system:user:add']"
                  >新增</el-button
                >
              </el-col>

              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="medium"
                  :disabled="multiple"
                  @click="handleDelete"
                  v-hasPermi="['system:user:remove']"
                  >删除</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <div class="documentf">
                  <div class="document">
                    <el-button
                      type="warning"
                      plain
                      icon="el-icon-download"
                      size="medium"
                      @click="handleExport"
                      v-hasPermi="['system:user:export']"
                      >导出</el-button
                    >
                  </div>
                </div>
              </el-col>

              <!-- <el-col :span="1.5"> </el-col> -->
            </el-row>
            <!-- <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
          :columns="columns"
        ></right-toolbar> -->
            <el-table
              v-loading="loading"
              :data="userList"
              :border="true"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column
                fixed
                label="序号"
                align="center"
                key="tagid"
                prop="tagid"
                width="50"
              />
              <el-table-column
                fixed
                label="出院病区"
                align="center"
                key="tagname"
                prop="tagname"
                width="100"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="应随访数"
                align="center"
                key="updateTime"
                prop="updateTime"
              >
                <template slot-scope="scope">
                  <span
                    >{{ scope.row.updateBy }}
                    <p>{{ scope.row.updateTime }}</p></span
                  >
                </template>
              </el-table-column>

              <el-table-column
                label="随访完成数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="随访完成率"
                align="center"
                key="isupload"
                prop="isupload"
              >
              </el-table-column>
              <el-table-column
                label="AI外呼次数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="AI随访完成数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="AI随访完成率"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="微信发送次数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="微信随访完成数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="微信随访完成率"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="短信发送次数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="短信随访完成数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="短信随访完成率"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="人工随访次数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="人工随访完成数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="人工随访完成率"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="失访数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="失访率"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="失访率"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="异常总数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="总异常率"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="回复异常数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="回复异常及时处理数"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>
              <el-table-column
                label="回复异常及时处理率"
                align="center"
                key="tagdescription"
                prop="tagdescription"
              >
              </el-table-column>

              <!-- <el-table-column
                label="操作"
                align="center"
                width="300"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="medium"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['system:user:edit']"
                    ><span class="button-textxg"
                      ><i class="el-icon-edit"></i>修改</span
                    ></el-button
                  >
                  <el-button
                    size="medium"
                    type="text"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['system:user:remove']"
                    ><span class="button-textsc"
                      ><i class="el-icon-delete"></i>删除</span
                    ></el-button
                  >
                </template>
              </el-table-column> -->
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {
  toamendtag,
  addapitag,
  detailstag,
  deletetag,
  changetagcategory,
  toamendtagcategory,
  addtagcategory,
  deletetagcategory,
  listtag,
  tagclassifylist,
} from "@/api/system/label";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
const shortcuts = [
  {
    text: "今天",
    onClick(picker) {
      picker.$emit("pick", new Date());
    },
  },
  {
    text: "昨天",
    onClick(picker) {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      picker.$emit("pick", date);
    },
  },
  {
    text: "一周前",
    onClick(picker) {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      picker.$emit("pick", date);
    },
  },
];
export default {
  name: "questionnaire",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: { Treeselect },
  data () {
    return {

    }
      topactiveName: "Local", //顶部选择
      activeName: "first", //侧边选择
      // é®ç½©å±‚
      loading: false,
      // é€‰ä¸­æ•°ç»„
      ids: [],
      // éžå•ä¸ªç¦ç”¨
      single: true,
      // éžå¤šä¸ªç¦ç”¨
      multiple: true,
      // æ˜¾ç¤ºæœç´¢æ¡ä»¶
      showSearch: true,
      idds: "", //分类id
      // æ€»æ¡æ•°
      total: 0,
      amendtag: false, //是否修改类别
      lstamendtag: false, //是否修改标签
      scavisible: false, //删除弹框
      deleteVisible: false, //分类删除弹框
      deletefenl: "高血压", //删除项
      //修改添加标签弹框数据
      tagform: {
        isupload: "",
        tagname: "",
        tagcategoryid: "",
        tagdescription: "",
  },

      classifyform: {
        categoryname: "",
      },
      // æ ‡ç­¾è¡¨æ ¼æ•°æ®
      userList: [],
      // å¼¹å‡ºå±‚标题
      title: "",
      // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
      open: false,
      // æ—¥æœŸèŒƒå›´
      dateRange: [],
      // å²—位选项
      postOptions: [],
      // è§’色选项
      roleOptions: [],
      // è¡¨å•å‚æ•°
      form: {},
      forms: {
        name: "",
      },
      numberlb: 22,
      dialogFormVisible: false, //添加、修改类别弹框
      lstamendtagVisible: false, //添加、修改标签弹框
      goQRCodeVisible: false, //二维码弹框
      sidecolumnval: "", //类别搜索
      propss: { multiple: true },
      topqueryParams: {}, //导出筛选条件
      options: [
        {
          value: 1,
          label: "东南",
        },
        {
          value: 2,
          label: "西北",
        },
        {
          value: 3,
          label: "仨仨仨",
        },
        {
          value: 4,
          label: "六飒飒飒",
        },
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 3600 * 1000 * 24;
        },
        shortcuts: shortcuts,
      },
      pickerOptionsa: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: shortcuts,
      },
      // æŸ¥è¯¢æ ‡ç­¾åˆ—表参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tagname: undefined,
        tagdescription: undefined,
      },
      // åˆ—信息
      columns: [
        { key: 0, label: `标签编号`, visible: true },
        { key: 1, label: `标签名称`, visible: true },
        { key: 2, label: `标签昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
      ],
    };
  },
  watch: {},
  created () {

    this.getList();
    this.gitclasify();
  },

  methods: {
    /** æŸ¥è¯¢æ ‡ç­¾åˆ—表 */
    getList() {
      listtag(this.addDateRange(this.queryParams)).then((response) => {
        console.log(response);
        this.total = response.total;
        this.userList = response.rows;
      });
    },
    /** ä¿®æ”¹æ ‡ç­¾ */
    handleUpdate(row) {
      console.log(row, "修改标签");
      this.lstamendtagVisible = true;
      this.lstamendtag = true;
      this.tagform = {
        isupload: row.isupload,
        tagname: row.tagname,
        tagcategoryid: row.tagcategoryid,
        tagdescription: row.tagdescription,
        tagid: row.tagid,
      };
    },
    addladeltag() {
      this.lstamendtagVisible = true;
      this.lstamendtag = false;
      this.tagform = {
        isupload: "",
        tagname: "",
        tagcategoryid: "",
        tagdescription: "",
        tagid: "",
      };
    },
    // æ·»åŠ /修改标签
    Maintenancetag() {
      if (this.lstamendtag) {
        toamendtag(this.addDateRange(this.tagform)).then((response) => {
          console.log(response);
          this.getList();
        });
      } else {
        addapitag(this.addDateRange(this.tagform)).then((response) => {
          console.log(response);
          this.getList();
        });
      }
      this.tagform = {
        isupload: "",
        tagname: "",
        tagcategoryid: "",
        tagdescription: "",
        tagid: "",
      };
    },

  }
}
    // è¡¨å•é‡ç½®
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
    // æ ‡ç­¾çŠ¶æ€ä¿®æ”¹
    handleStatusChange(row) {
      console.log(row.isupload);
      let text = row.isupload === "0" ? "启用" : "停用";
      this.$modal
        .confirm('确认要"' + text + '""' + row.tagname + '"标签吗？')
        .then(function () {
          return changetagcategory(row.tagid, row.isupload);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.isupload = row.isupload === "0" ? "1" : "0";
        });
    },
    /** æœç´¢æŒ‰é’®æ“ä½œ */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** é‡ç½®æŒ‰é’®æ“ä½œ */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.tagname = "";
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    // å¤šé€‰æ¡†é€‰ä¸­æ•°æ®
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.tagid);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    /** åˆ é™¤æŒ‰é’®æ“ä½œ */
    handleDelete(row) {
      console.log(row, "删除弹窗");
      const tagids = row.tagid || this.ids;
      console.log(tagids);
      const tagname = row.tagname;
      this.$modal
        .confirm(
          tagname
            ? '是否确认删除标签名称为"' + tagname + '"的数据项？'
            : "是否确认删除选中的数据项？"
        )
        .then(function () {
          return deletetag(tagids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** å¯¼å‡ºæŒ‰é’®æ“ä½œ */
    handleExport() {
      this.download(
        "base/tag/export",
        {
          ...this.topqueryParams,
        },
        `user_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang='scss' scoped>
<style lang="scss" scoped>
.Questionnairemanagement {
  display: flex;
}
.sidecolumn {
  width: 180px;
  min-height: 100vh;
  text-align: center;
  //   display: flex;
  margin-top: 20px;
  margin: 20px;
  padding: 30px;
  background: #edf1f7;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .sidecolumn-top {
    display: flex;
    justify-content: space-between;
    .top-wj {
      font-size: 20px;
    }
    .top-tj {
      font-size: 18px;

      color: rgb(0, 89, 255);
      cursor: pointer;
    }
  }
  .center-ss {
    margin-top: 30px;
    .input-with-select {
      height: 40px !important;
    }
  }
  .bottom-fl {
    margin-top: 30px;
    display: center !important;
  }
}
.qrcode-dialo {
  text-align: center;
  //   display: flex;
  margin: 20px;
  padding: 30px;
  background: #edf1f7;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .qrcode-text {
    font-size: 20px;
    span {
      margin-left: 20px;
    }
  }
  .qrcode-img {
    width: 300px;
    height: 400px;
  }
}
::v-deep.el-tabs--left,
.el-tabs--right {
  overflow: hidden;
  align-items: center;
  display: flex;
}
::v-deep.el-input--medium .el-input__inner {
  height: 40px !important;
}
::v-deep.el-tabs--right .el-tabs__active-bar.is-right {
  height: 40px;
  width: 5px;
  left: 0;
}
::v-deep.el-tabs--right .el-tabs__item.is-right {
  display: block;
  text-align: left;
  font-size: 20px;
}

.leftvlue-bg {
  //   display: flex;
  //   flex: 1;
  width: 80%;
  margin-top: 20px;
  //   margin: 20px;
  padding: 30px;
  background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  .mulsz {
    font-size: 20px;
  }
}

.document {
  width: 100px;
  height: 50px;
}
.documentf {
  display: flex;
  justify-content: flex-end;
}
.button-text {
  color: rgb(70, 204, 238);
}
.button-textck {
  color: rgb(39, 167, 67);
}
.button-textxg {
  color: rgb(35, 81, 233);
}
.button-textsc {
  color: rgb(235, 23, 23);
}
</style>

 src/views/sfstatistics/percentage/index.vue

@@ -415,6 +415,30 @@

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
const shortcuts = [
  {
    text: "今天",
    onClick(picker) {
      picker.$emit("pick", new Date());
    },
  },
  {
    text: "昨天",
    onClick(picker) {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      picker.$emit("pick", date);
    },
  },
  {
    text: "一周前",
    onClick(picker) {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      picker.$emit("pick", date);
    },
  },
];
export default {
  name: "questionnaire",
  dicts: ["sys_normal_disable", "sys_user_sex"],
@@ -497,59 +521,13 @@
        disabledDate(time) {
          return time.getTime() < Date.now() - 3600 * 1000 * 24;
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
        shortcuts: shortcuts,
      },
      pickerOptionsa: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
        shortcuts: shortcuts,
      },
      // æŸ¥è¯¢æ ‡ç­¾åˆ—表参数
      queryParams: {
@@ -568,52 +546,6 @@
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
      ],
      // è¡¨å•æ ¡éªŒ
      // rules: {
      //   userName: [
      //     { required: true, message: "标签名称不能为空", trigger: "blur" },
      //     {
      //       min: 2,
      //       max: 20,
      //       message: "标签名称长度必须介于 2 å’Œ 20 ä¹‹é—´",
      //       trigger: "blur",
      //     },
      //   ],
      //   nickName: [
      //     { required: true, message: "标签昵称不能为空", trigger: "blur" },
      //   ],
      //   password: [
      //     { required: true, message: "标签密码不能为空", trigger: "blur" },
      //     {
      //       min: 5,
      //       max: 20,
      //       message: "标签密码长度必须介于 5 å’Œ 20 ä¹‹é—´",
      //       trigger: "blur",
      //     },
      //   ],
      //   email: [
      //     {
      //       type: "email",
      //       message: "请输入正确的邮箱地址",
      //       trigger: ["blur", "change"],
      //     },
      //   ],
      //   phonenumber: [
      //     {
      //       pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      //       message: "请输入正确的手机号码",
      //       trigger: "blur",
      //     },
      //   ],
      //   IDnumber: [
      //     {
      //       pattern:
      //         /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
      //       message: "请输入正确的身份证号码",
      //       trigger: "blur",
      //     },
      //   ],
      // },
    };
  },
  watch: {},