U 参试相关页面样式的同步

whychw

2021-02-20 1e5abfe9b517c15e68cc469d7e5e97ecdbaee5d7

U 参试相关页面样式的同步

 src/assets/css/custom.css

@@ -216,6 +216,27 @@
.pr_o8em {padding-right: .8em;}
.pr_1em {padding-right: 1em;}

/**
 * 
 */
div::-webkit-scrollbar {
    /* 滚动条整体样式 */
    width: 8px;
    height: 8px;
}
div::-webkit-scrollbar-thumb {
    /* 滚动条里面小方块 */
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 0.05rem rgba(0,0,0,0.2);
    background: #0194f3;
}
div::-webkit-scrollbar-track {
    /* 滚动条里面轨道 */
    -webkit-box-shadow: inset 0 0 0.05rem rgba(0,0,0,0.2);
    border-radius: 4px;
    background: #031b3f;
}

/*基础字号 样式*/
div.page-content .page_title {
    font-size: 24px;
@@ -624,3 +645,15 @@
    border-color: #00f7f9;
    color: #041b3f;
}
.el-transfer-panel__item.el-checkbox .el-checkbox__label {
    white-space: normal;
}
.el-transfer-panel__item {
    height: auto;
    line-height: normal;
}
.el-transfer-panel__item.el-checkbox .el-checkbox__label {
    line-height: normal;
    padding-top: 0.06rem;
    padding-bottom: 0.06rem;
}

 src/components/tree/TreeItem.vue

@@ -1,15 +1,14 @@
<template>
    <div class="tree-item" :class="{active: treeData.active, 'leaf': !treeData.children.length}">
    <div class="tree-item" :class="{'leaf': !treeData.children.length, 'is-child':level > 0}">
        <div class="tree-title" :style="getPadding" @click="treeClick($event)">
            <span class="box">
                <span class="iconfont" v-if="getChildren" :class="getOpen"></span>
                <span v-if="getChildren" :class="getOpen"></span>
            </span>
            <span class="iconfont icon-lingxing home-state" :class="getHomeState"></span>
            <span class="home-state icon-status" :class="getHomeState"></span>
            <span class="tree-title-txt">{{treeData.txt}}</span>
        </div>
        <div class="tree-child" v-if="getChildren" :class="isShow">
            <tree-item
            :class="{active: data.active}"
            v-for="(data, key) in treeData.children" :key="key"
            :tree-data='data'
            :level='getLevel'
@@ -44,6 +43,8 @@
            // console.trace('treeclick call-stack');
            // console.log('item treeclick', this.treeData);
            this.treeData.open = !this.treeData.open;
            // this.$set(this.treeData, 'active', true);
            // console.log(this.treeData, 'this.treeData');
            this.$emit('tree-click', this.treeData);
            if(!this.getChildren) {
                // console.log($e, '===----$e')
@@ -63,13 +64,16 @@
                        document.querySelectorAll('.tree-item').forEach(function(c, i, a) {
                            c.classList.remove('active');
                        });
                        // console.log(parents, 'parents', this.treeData);
                        parents.classList.add('active');
                        if (parents.classList.contains('is-child')) {
                            this.$common.getParentsByClassName(parents, 'tree-item').classList.add('active');
                        }
                    }
                }
            }
        },
        childTreeClick: function(data) {
            this.treeData.active = true;
            if(data.children.length) {
                this.$emit('tree-click', data);
            } else {
@@ -79,7 +83,7 @@
    },
    computed: {
        getOpen: function() {
            return this.treeData.open ? 'icon-jianhao': 'icon-jiahao';
            return this.treeData.open ? ['icon-triangle', 'rotate']: ['icon-triangle'];
        },
        getLevel: function() {
            const level = this.level+1;
@@ -95,16 +99,16 @@
            let rs = '';
            switch (state) {
                case 'warning':
                    rs = 'home-state-warning';
                    rs = 'warning';
                    break;
                case 'danger':
                    rs = 'home-state-danger';
                    rs = 'danger';
                    break;
                case 'off':
                    rs = 'home-state-off';
                    rs = 'off';
                    break;
                default:
                    rs = 'home-state-normal';
                    rs = 'normal';
            }
            // 返回状态值
            return rs;
@@ -132,25 +136,35 @@
    -ms-user-select: none;
}
.tree-item.active > .tree-title {
    background: #00636a;
    /*background: #00636a;*/
    background: #f69f41;
}
.tree-item.leaf.active > .tree-title {
    background: #0eafbc;
    /*background: #0eafbc;*/
    background: transparent;
    color: #f69f41;
}
span.box {
    display: inline-block;
    /*display: inline-block;*/
    display: -webkit-flex;
    display: flex;
    width: .28rem;
    text-align: center;

    align-items: center;
    /*margin-right: .2em;*/
}
.tree-title {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    
    line-height: 0.3rem;
}
.tree-title:hover {
    background: rgba(0, 0, 0, .3);
}
.home-state {
    margin-right: 0.06rem;
    margin-right: 0.06rem;
}
.tree-item.active .home-state {
@@ -162,6 +176,34 @@
.child-hide {
    display: none;
}
.icon-triangle {
    width: .2rem;
    height: .2rem;
    background: #00f7f9;
    -webkit-clip-path: polygon(20% 0, 20% 100%, 78% 50%);
    clip-path: polygon(20% 0, 20% 100%, 78% 50%);
    -webkit-transition: all .2s;
    transition: all .2s;
}
.icon-triangle.rotate {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.active .icon-triangle {
    background: #041b3f;
}
.icon-status {
    width: .16rem;
    height: .16rem;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.icon-status.off {
    background: #fff;
}
.icon-status.normal {
    background: #00f7f9;
}
</style>



 src/views/subject/history.vue

@@ -30,13 +30,13 @@
    <div class="page-content">
      <div class="page-banner tac">
        <div class="f_right d_flex">
          <div class="btn-grp" v-show="!showTable">
          <div class="btns-grp" v-show="!showTable">

            <div class="btn_3d" :class="{'disabled': prevDisabled}" @click="prevGrp">上一组</div>
            <div class="btn_3d" :class="{'disabled': nextDisabled}" @click="nextGrp">下一组</div>
            <div class="btn_3d" @click="showGOptions">图表选项</div>
            <div class="btn" :class="{'disabled': prevDisabled}" @click="prevGrp">上一组</div>
            <div class="btn" :class="{'disabled': nextDisabled}" @click="nextGrp">下一组</div>
            <div class="btn" @click="showGOptions">图表选项</div>
          </div>
          <!-- <div class="btn_3d" @click="toggle">显示{{showTable ? '图表' : '表格'}}</div> -->
          <!-- <div class="btn" @click="toggle">显示{{showTable ? '图表' : '表格'}}</div> -->
        </div>
        <div class="f_left">
          <el-form :inline="true" class="el-normal el-form-search el-form-quiet" :show-message="false" size="small">
@@ -46,15 +46,15 @@
            </el-form-item>
          </el-form>
        </div>
        <div class="btn-grp f_left">
          <div class="btn_3d" :class="{'disabled': !cur_devid || !this.date_range[0]}" @click="searchHis">查询</div>
          <div class="btn_3d" :class="{'disabled': !cur_devid || !this.date_range[0]}" @click="exportCSV">导出</div>
        <div class="btns-grp f_left">
          <div class="btn" :class="{'disabled': !cur_devid || !this.date_range[0]}" @click="searchHis">查询</div>
          <div class="btn" :class="{'disabled': !cur_devid || !this.date_range[0]}" @click="exportCSV">导出</div>
        </div>
        <div class="content-title">{{cur_devname}}</div>
      </div>
      <div class="wraper">
        <div class="container" :class="{'showTable': showTable}">
          <div class="wrap-graph">
          <div class="wrap-graph border-angle">
          <line-chart-mul id="G_linechart" ref="G_linechart" 
            title="我是标题"
            height="100%"
@@ -772,6 +772,20 @@
  display: flex;
  height: 100%;
}
.btn {
  display: inline-block;
  background: #00f7f9;
  color: #041b3f;
  width: 8em;
  height: 30px;
  line-height: 30px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}
.btn.disabled {
  background: #ccc;
}
.list {
  display: -webkit-flex;
  display: flex;
@@ -830,7 +844,7 @@
.page-banner {
  padding: 6px;
}
.page-banner .btn_3d {
.page-banner .btn {
  width: 5em;
  margin-left: 1em;
}
@@ -844,6 +858,7 @@
  display: flex;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  background: #041a3f;
}
.showTable {
  -webkit-transform: translateX(-50%);
@@ -852,16 +867,18 @@
.wrap-graph,
.wrap-table {
  flex: 1;
  margin: 0 4px 4px;
  background: radial-gradient(farthest-corner, rgba(0, 247, 249, .06) 8%, rgba(0, 247, 249, .2) 160%);
}
.wrap-graph {
  background: rgba(0,0,0,.2);
  /*background: rgba(0,0,0,.2);*/
}
.empty-list {
  text-align: center;
  -webkit-transform: translate(-.3em, 1em);
  transform: translate(-.3em, 1em);
}
.btn-grp {
.btns-grp {
  display: -webkit-flex;
  display: flex;
}

 src/views/subject/realtime.vue

@@ -20,19 +20,19 @@
    <div class="page-content">
      <div class="page-banner tac">
        <div class="f_right d_flex">
          <div class="btn-grp" v-show="!showTable">
          <div class="btns-grp" v-show="!showTable">

            <div class="btn_3d" :class="{'disabled': prevDisabled}" @click="prevGrp">上一组</div>
            <div class="btn_3d" :class="{'disabled': nextDisabled}" @click="nextGrp">下一组</div>
            <div class="btn_3d" @click="showGOptions">图表选项</div>
            <div class="btn" :class="{'disabled': prevDisabled}" @click="prevGrp">上一组</div>
            <div class="btn" :class="{'disabled': nextDisabled}" @click="nextGrp">下一组</div>
            <div class="btn" @click="showGOptions">图表选项</div>
          </div>
          <!-- <div class="btn_3d" @click="toggle">显示{{showTable ? '图表' : '表格'}}</div> -->
          <!-- <div class="btn" @click="toggle">显示{{showTable ? '图表' : '表格'}}</div> -->
        </div>
        <div class="content-title">设备名称</div>
        <div class="content-title page_title">{{cur_dev_name}}</div>
      </div>
      <div class="wraper">
        <div class="container" :class="{'showTable': showTable}">
          <div class="wrap-graph">
          <div class="wrap-graph border-angle">
          <line-chart-mul id="G_linechart" ref="G_linechart" 
            title="我是标题"
            height="100%"
@@ -109,6 +109,7 @@
      ,timer: new Timeout()
      ,cur_id: 0
      ,cur_type: 0
      ,cur_dev_name: '设备名称'
      ,showTable: false
      ,rtData: []
      ,G_data: []
@@ -190,6 +191,7 @@
      // console.log(obj, 'obj');
      this.cur_id = obj.dev_id;
      this.cur_type = obj.dev_type;
      this.cur_dev_name = obj.dev_name;
      let param = [];
      switch (obj.dev_type) {
        case 11:
@@ -400,6 +402,20 @@
  display: flex;
  height: 100%;
}
.btn {
  display: inline-block;
  background: #00f7f9;
  color: #041b3f;
  width: 8em;
  height: 30px;
  line-height: 30px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}
.btn.disabled {
  background: #ccc;
}
.list {
  display: -webkit-flex;
  display: flex;
@@ -408,13 +424,19 @@
  margin-right: .4em;
}
.list-title {
  background: #24a3bf;
  background: #00f7f9;
  padding: 10px 0;
  color: #021c3f;
  text-align: center;
}
.list-title div {
  font-weight: bold;
}
.list-content {
  flex: 1;
  background: #00324b;
  background: #0c4d77;
  border-left: 1px #00F7F9 solid;
  border-right: 1px #00F7F9 solid;
}
.inner {
  height: 100%;
@@ -458,7 +480,7 @@
.page-banner {
  padding: 6px;
}
.page-banner .btn_3d {
.page-banner .btn {
  width: 6em;
  margin-left: 1em;
}
@@ -469,6 +491,7 @@
  display: flex;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  background: #041a3f;
}
.showTable {
  -webkit-transform: translateX(-50%);
@@ -477,16 +500,18 @@
.wrap-graph,
.wrap-table {
  flex: 1;
  margin: 0 4px 4px;
  background: radial-gradient(farthest-corner, rgba(0, 247, 249, .06) 8%, rgba(0, 247, 249, .2) 160%);
}
.wrap-graph {
  background: rgba(0,0,0,.2);
  /*background: rgba(0,0,0,.2);*/
}
.empty-list {
  text-align: center;
  -webkit-transform: translate(-.3em, 1em);
  transform: translate(-.3em, 1em);
}
.btn-grp {
.btns-grp {
  display: -webkit-flex;
  display: flex;
}