diagnosis.admin/src/views/knowledge/Xuewei.vue

<template>
  <div class="xuewei flex flex-row-left">
    <div class="left">
      <!-- 顶部筛选 -->
      <div class="screening flex-vertical-center-l">
        <div class="screening-form flex-vertical-center-l flex-wrap">
          <div class="screening-item flex-vertical-center-l">
            <span>搜索经络：</span>
            <div class="input">
              <el-input size="mini" v-model="form.name" placeholder="请输入"></el-input>
            </div>
          </div>

          <el-button size="mini" type="primary" @click="search">搜索</el-button>
          <el-button size="mini" type="warning" @click="clearFilter">清空</el-button>
        </div>
        <div class="radio">
          <el-radio-group v-model="radio" @change="radioC">
            <el-radio label="1">十二经脉</el-radio>
            <el-radio label="2">奇经八脉</el-radio>
            <el-radio label="3">经外奇穴</el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- tab -->
      <div class="xue-tab flex-vertical-center-l flex-wrap">
        <div
          :class="index==current?'flex-center active':'flex-center'"
          v-for="(item,index) in tabs"
          :key="index"
          @click="changeCurrent(index)"
        >{{item.mername}}</div>
      </div>

      <div class="content" v-if="tabs.length>0">
        <div class="main-xuewei" v-if="radio!='3'">
          <div class="title">经脉巡行</div>
          <div v-html="tabs[current].merroute"></div>
        </div>
        <div class="main-xuewei" v-if="radio!='3'">
          <div class="title">主要病侯</div>
          <div v-html="tabs[current].mermaindisease"></div>
        </div>
        <div class="main-xuewei" v-if="radio!='3'">
          <div class="title">主治概要</div>
          <div v-html="tabs[current].mermaintreat"></div>
          <div class="flex-vertical-center-l flex-wrap xuewe-name">
            <div
              @click="$router.push({path: '/index/diseased?disid='+item.disid})"
              v-for="(item,index) in info.dislist"
              :key="index"
            >{{item.disname}}</div>
          </div>
        </div>
        <div class="main-xuewei" v-if="radio!='3'">
          <div class="title">经穴歌</div>
          <div v-html="info.mersong"></div>
        </div>

        <div class="main-xuewei">
          <div class="title">主要穴位</div>
          <div class="flex-vertical-center-l flex-wrap xuewe-name">
            <div
              @click="$router.push({path: '/index/xueweid?acuid='+item.acuid})"
              v-for="(item,index) in xueweiList"
              :key="index"
            >{{item.acuname}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="title flex-vertical-center-l">
        <span></span>
        <div>经络图</div>
      </div>
      <div class="img" v-if="tabs.length>0">
        <img :src="tabs[current].merimg" alt />
        <!-- <img src="../../assets/jingluo1.jpg" alt=""> -->
      </div>
      <!-- <div class="img">
                   
                    <img src="../../assets/jingluo2.jpg" alt="">
      </div>-->
    </div>
  </div>
</template>
<script>
import { getAcupoint, collateralChannels, getMerD } from "@/api/knowledge.js";
export default {
  data() {
    return {
      form: {
        name: ""
      },
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#C1C1C1", //滚动条颜色
          opacity: 0.5, //滚动条透明度
          "overflow-x": "hidden"
        }
      },
      radio: "1",
      tabs: [],
      current: 0,
      xueweiList: [],
      info: {}
    };
  },
  beforeCreate() {
    this.$nextTick(vm => {
      this.collateralChannels();
    });
  },
  created() {
    // this.collateralChannels()
  },
  methods: {
    clearFilter() {
      this.form.name = "";
      this.collateralChannels();
    },
    search() {
      this.page = 1;
      this.collateralChannels();
    },
    radioC() {
      this.current = 0;
      this.collateralChannels();
    },
    // 修改经络
    changeCurrent(index) {
      this.current = index;
      // this.collateralChannels()
      this.getAcupoint();
      this.getMerD();
    },

    // 获取穴位信息
    async getAcupoint() {
      let params = {
        merid: this.tabs[this.current].merid,
        pageid: 1,
        pagesize: 999
      };
      let res = await getAcupoint(params);
      if (res.code == 0) {
        this.xueweiList = res.data.acupoints;
      }
    },
    // 获取经络
    async collateralChannels() {
      let params = {
        mertype: this.radio,
        pageid: 1,
        pagesize: 999,
        keyword: this.form.name
      };
      let res = await collateralChannels(params);
      if (res.code == 0) {
        this.tabs = [];
        res.data.meridians.forEach(item => {
          item.merimg = process.env.VUE_APP_XUEWEI + item.merimg;
        });
        this.tabs = res.data.meridians;
        if (this.tabs.length > 0) {
          this.getAcupoint();
          this.getMerD();
        }
      }
    },
    // 获取经络详情
    async getMerD() {
      let res = await getMerD({
        merid: this.tabs[this.current].merid
      });
      if (res.code == 0) {
        this.info = res.data;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/base.scss";
@import "../../style/common.scss";

.xuewei {
  height: 100%;

  .left {
    flex: 1;
    overflow: hidden;
    height: 100%;
    margin-right: 10px;

    .xue-tab {
      margin-top: 10px;

      div {
        width: 90px;
        height: 32px;
        background: #ffffff;
        border-radius: 5px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
      }

      .active {
        background: #9F643A;
        color: #fff;
      }
    }

    .content {
      background: #ffffff;
      border-radius: 5px;
      padding: 10px 10px;
      height: 60vh;
      overflow: auto;
    }

    .main-xuewei {
      margin-bottom: 30px;

      .title {
        font-size: 16px;
        color: #333;
        font-weight: 600;
        margin: 10px 0;
      }

      .xuewe-name {
        font-size: 14px;
        color: #333;
        font-weight: 600;

        // margin: 10px ;
        div {
          margin-top: 20px;
          margin-right: 50px;
          cursor: pointer;
        }

        div:hover {
          color: #9f643a;
        }
      }
    }
  }

  .right {
    // width: 230px;
    height: 100%;
    width: 200px;

    box-sizing: border-box;
    padding: 19px 12px;
    background: #ffffff;

    border-radius: 5px;

    .title {
      margin-bottom: 26px;

      span {
        width: 3px;
        height: 14px;
        background: #9F643A;
        border-radius: 1px;
        margin-right: 6px;
      }

      div {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #9F643A;
      }
    }

    .img {
      width: 194px;
      // height: 265px;

      img {
        width: 100%;
        background: red;
      }
    }
  }
}

// 滚动条位置
.xuewei ::v-deep .__bar-is-vertical {
  right: -1px !important;
}

// 隐藏横向滚动条
.xuewei ::v-deep .__bar-is-horizontal {
  display: none !important;
}

.radio {
  margin-left: 20px;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .xuewei {
    .left {
      .content {
        height: 78vh;
      }
    }
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .xuewei {
    .left {
      .content {
        height: 77vh;
      }
    }
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .xuewei {
    .left {
      .content {
        height: 62vh;
      }
    }
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .xuewei {
    .left {
      .content {
        height: 62vh;
      }
    }
  }
}
</style>