shujuwang/src/views/help/Help.vue

<template>
  <div class="help">
    <!-- 首页导航 -->
    <Navs></Navs>
    <div class="help_cont">
      <!-- 全局搜索 -->
      <search></search>
      <div class="cont_content">
        <div class="header">
          <div class="left">帮助</div>
          <div class="right">
            <img :src="imgurl.pos" alt />
            <span>当前位置：</span>
            <span @click="$router.push('/')">首页</span>
            >
            <span @click="$router.go(0)">帮助</span>
          </div>
        </div>
        <section class="container">
          <div class="left" ref="leftHeight">
            <!-- 测导航 -->
            <el-row class="tac">
              <el-col :span="24">
                <el-menu
                  default-active="1-1-1"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  @select="selectActive"
                >
                  <el-submenu index="1">
                    <template slot="title">数据查询</template>
                    <el-submenu index="1-1-1">
                      <template slot="title">简单查询</template>
                      <el-menu-item index="1-1-1">数据查询</el-menu-item>
                      <el-menu-item index="1-1-2">指标查询</el-menu-item>
                      <!-- <el-menu-item index="1-1-3">快捷按钮</el-menu-item> -->
                      <el-submenu index="1-1-4">
                        <template slot="title">功能操作</template>
                        <el-menu-item index="1-1-4-1">我的收藏</el-menu-item>
                        <el-menu-item index="1-1-4-2">添加收藏</el-menu-item>
                        <el-menu-item index="1-1-4-3">新增指标</el-menu-item>
                        <el-menu-item index="1-1-4-4">筛选指标</el-menu-item>
                        <el-menu-item index="1-1-4-5">统计</el-menu-item>
                        <el-menu-item index="1-1-4-6">恢复</el-menu-item>
                        <el-menu-item index="1-1-4-7">去除空行空列</el-menu-item>
                        <el-menu-item index="1-1-4-8">编辑</el-menu-item>
                        <el-menu-item index="1-1-4-9">维度转换</el-menu-item>
                        <el-menu-item index="1-1-4-10">行列转置</el-menu-item>
                        <el-menu-item index="1-1-4-11">保存默认</el-menu-item>
                        <el-menu-item index="1-1-4-12">恢复默认</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu index="1-2">
                      <template slot="title">高级查询</template>
                      <el-menu-item index="1-2-1">指标选择</el-menu-item>
                      <el-menu-item index="1-2-2">地区选择</el-menu-item>
                    </el-submenu>
                    <el-submenu index="1-3">
                      <template slot="title">数据地图</template>
                    </el-submenu>
                    <el-submenu index="1-4">
                      <template slot="title">经济图表</template>
                    </el-submenu>
                    <el-submenu index="1-5">
                      <template slot="title">搜索</template>
                    </el-submenu>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
          <div class="right" :style="{'height':leftHeights+'rem'}" ref="rightHeight">
            <div v-html="htmlStr" class="htmlStrs"></div>
          </div>
        </section>
      </div>
    </div>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
  name: 'help',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search
  },
  data () {
    return {
      imgurl: {
        pos: require('../../../static/company/posweizhi.png')
      },
      // left的高度
      leftHeights: null,
      // 需要渲染的html字符串
      htmlStr: '',
      allHtml: [
        {
          name: '数据查询',
          code: '1-1-1',
          htmls: `
          国家统计数据库全新改版, 提供了以下服务：<br />
          - 详实的月度、季度、年度数据以及普查、地区、部门、国际数据<br />
          - 提供多种文件输出、制表、绘图、指标解释、表格转置、可视化图表、数据地理信息系统等多种功能<br />
          其中具有特色的服务为：<br />
          - 数据挖掘随心所欲<br />
          - 海量数据一键下载<br />
          - 精品资源一键分享<br /><br /><br /><br />
          所做的一切，只为让数据生活更简单。下面，就让我们一起来阅读国家统计局数据库入门指南，让这篇用户手册来指引你如何使用数据库。跟着导航一起操作，即可进入轻松的查数之旅。`
        }
      ]
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    selectActive (key, keyPath) {
      console.log(key, keyPath)
      this.showColoect(key)
    },
    // 渲染我的收藏
    showColoect (key) {
      let datasd = JSON.parse(JSON.stringify(this.allHtml))
      datasd.forEach((item, index) => {
        if (item.code === key) {
          this.htmlStr = item.htmls
        }
      })
    }
  },
  mounted () {
    this.showColoect('1-1-1')
    this.$detector().listenTo(this.$refs.leftHeight, (element) => {
      var width = element.offsetWidth
      var height = element.offsetHeight
      this.$nextTick(() => {
        console.log('Size: ' + width + 'x' + height)
        // 使echarts尺寸重置
        this.leftHeights = height / (160 / ((1920 - 17) / document.body.clientWidth) / 10)
      })
    })
  }
}
</script>
<style lang="scss" scoped>
.help_cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .cont_content {
    margin-bottom: 1.875rem;
    width: 84.25rem;
    // border: 1px solid red;
    & > .header {
      width: 84.25rem;
      height: 4.25rem;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      & > .left {
        // margin-left: 1.5rem;
        font-size: 1.5rem;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0.125rem;
        color: #000000;
      }
      & > .right {
        // margin-right: 1.5rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #8fa3ae;
        & > img {
          width: 1rem;
          height: 1.25rem;
          margin-right: 0.45rem;
        }
        & > span:nth-child(n + 3):hover {
          cursor: pointer;
          color: #52b6e3;
        }
      }
    }
    & > .container {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > .left {
        width: 25.5rem;
        min-height: 43.5rem;
        background-color: #ffffff;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
      }
      & > .right {
        // height: 100%;
        width: 57.625rem;
        min-height: 43.5rem;
        height: 100%;
        background-color: #ffffff;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        & > .htmlStrs {
          margin-top:1.75rem;
          width: 55rem;
        }
      }
    }
  }
}
</style>