自选手机版

hailu

2024-01-04 efec2251f1212f5bbaa1148e476ab6900a1e56fb

自选手机版

 src/router/index.js

@@ -39,7 +39,7 @@
    } // 无权限，重定向到401页面
}

let nameList = ['login', 'forgot', 'register', 'newList', 'newsDetail', 'UserAgreement', 'privacyPolicy', 'newPushDetail'] //无权限控制的页面
let nameList = ['login', 'forgot', 'register', 'newList', 'newsDetail', 'UserAgreement', 'privacyPolicy', 'newPushDetail','customPhone'] //无权限控制的页面

router.beforeEach((to, from, next) => {
    // console.log(to.name);

 src/router/routers.js

@@ -88,6 +88,16 @@
    component: () =>
        import('@/view/login/newPushDetail.vue')
},
{
    path: '/customPhone',
    name: 'customPhone',
    meta: {
        title: '自选推送',
        hideInMenu: true
    },
    component: () =>
        import('@/view/custom-page/customPhone.vue')
},


{

 src/view/custom-page/components/memberEdit.vue

New file
@@ -0,0 +1,605 @@

<template>
  <div class="member" @click="blur">
    <div class="main">
      <section>
        <div class="search">
          <Input v-model="searchKey" prefix="ios-search" placeholder="请输入公司名称" size="large"
            style="width: 240px; padding-right: 12px" @on-change="searchMem" @on-blur="blur1" />
          <Button size="large" type="primary" style="font-size:16px;color:#fff;float:right;"
            custom-icon="custom custom-chuangjian" @click="addMember">添加成员</Button>
        </div>
        <ul v-if="showUl" class="chooseCom">
          <li v-if="optionsList && optionsList.length == 0">无匹配结果</li>
          <li v-for="(item, index) in optionsList" :key="index" @click="rentSearchChange(item)" class="clearfix"
            style="cursor: pointer; padding: 4px 2px;position:relative">
            <span style="position:absolute;left:0">{{ item.Name }}</span>
            <span style="
                         position: absolute;
                         right:0;
                          display: inline-block;
                          border-radius: 4px;
                          background-color: #e5f7fa;
                          padding: 1px 4px;
                          color: #05b6d0;
                          line-height: 20px;
                        " @click="addFocus(item.Name)">
              添加关注
            </span>
          </li>
        </ul>
        <!-- <div style="width:100%;margin-top:5px;position:relative;">
          <div
            style="position:absolute;right:100px;bottom:5px;background-color: #fff;color:#00a0e9;border:none;padding: 0;cursor: pointer;"
            type="primary" @click="importData()">
            <Icon custom="custom custom-daorushuju" size="12" style="position:relative;top:-2px"></Icon> 导入Excel
          </div>
          <div
            style="position:absolute;right:0;bottom:5px;background-color: #fff;color:#00a0e9;border:none;padding: 0;cursor: pointer;"
            type="primary" @click="exportData()">
            <Icon custom="custom custom-daochushuju" size="12" style="position:relative;top:-2px"></Icon> 导出Excel
          </div>
        </div> -->

        <Table border :columns="columnsTable" :data="dataList" ref="table" :loading="loading">
          <template #name="{ row }">
            <strong>{{ row.name }}</strong>
          </template>
          <template #action="{ row, index }">
            <!-- <Button type="error" size="small" @click="deleteModal(row, index)">删除</Button> -->
            <Icon custom="custom custom-delete_b" style="color:#2D8CF0;cursor:pointer;" size="18"
              @click="deleteModal(row, index)" />
          </template>
        </Table>
        <div style="margin-top: 12px;background-color: white; float: right">
          <Page :current="pageCurrent" :total="dataCount" :page-size="pageSize" @on-change="changepage" />
        </div>
      </section>
    </div>
    <div class="vip" v-if="showVip">
      <div class="close" @click="closeVip">
        <Icon type="md-close" />
      </div>
      <div style="width: 100%;">
        <img src="../../../assets/images/home/suo.jpg" alt=""
          style="width: 150px;height:150px;margin-left: calc(50% - 75px);margin-top: 40px;">

      </div>
      <div>功能只对VIP开放<span @click="handleClick">查看详情</span></div>
    </div>
    <Modal v-model="importFormModal" draggable footer-hide sticky reset-drag-position :mask="true" :mask-closable="false"
      width="525" class-name="vertical-center-modal">
      <p slot="header">
        <Icon custom="custom custom-daorushuju" style="margin-right: 10px;"></Icon>
        <span>导入数据</span>
      </p>
      <div>
        <Alert show-icon>
          <p>请先点击<u style="color: #0C25F1;cursor: pointer;" @click="exportTable(true)">此处</u>下载Excel模板文件，填充完整后上传文件更新！</p>

        </Alert>
        <Upload ref="importForm" type="drag" :before-upload="handleUploadImportForm" action="">
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击选择文件或将文件拖拽到此处</p>
          </div>
        </Upload>
        <Tag v-if="!importFormFile" color="default">暂未选择</Tag>
        <Tag v-if="importFormFile" type="border" closable color="primary" @on-close="deleteImportFormFile()">
          {{ importFormFile.name.length > 27 ? `${importFormFile.name.substring(0, 25)}...` :
            importFormFile.name
          }}
        </Tag>
      </div>
      <div class="clearfix" style="width: 200px;margin:20px auto 0px;">
        <Button size="large" custom-icon="custom custom-queding" style="float: left;font-size: 14px" type="primary"
          :loading="importFormLoading" @click="importFormSubmit" :disabled="checkbtn">确认
        </Button>
        <Button size="large" custom-icon="custom custom-quxiao" style="float: right;font-size: 14px" type="error"
          @click="importFormModal = false">取消
        </Button>
      </div>
    </Modal>
    <Modal v-model="deleteAccessModal" draggable footer-hide sticky reset-drag-position :mask="true"
      :mask-closable="false" class-name="vertical-center-modal" width="380">
      <p slot="header">
        <Icon custom="custom custom-delete_b" style="margin-right: 10px;"></Icon>
        <span>删除公司</span>
      </p>
      <div>
        <div>是否删除当前公司？此操作不可恢复！</div>
        <div class="clearfix" style="width: 200px;margin:20px auto 0px;">
          <Button size="large" custom-icon="custom custom-queding" style="float: left;" type="primary"
            @click="deleteAccessSubmit()" :disabled="checkbtn" :loading='delLoadingzt'>确认
          </Button>
          <Button size="large" custom-icon="custom custom-quxiao" style="float: right;" type="error"
            @click="deleteAccessModal = false">取消
          </Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import axios from '@/libs/api.request'

export default {
  //import引入的组件需要注入到components对象中才能使用
  name: '',
  components: {},
  props: {
    // MonitorGroupId: {
    //   type: Number,
    //   default: 0,
    // }
  },
  data() {
    //这里存放数据
    return {
      // importFormModal:true,
      importFormModal: false,
      isVIP: localStorage.getItem('usergrade') == 'VIP版' ? true : false,
      loading: false,
      showUl: false,
      UserId: localStorage.getItem("userId"),
      optionsList: [], //搜索框数据
      searchKey: "", //搜索
      MonitorGroupId: localStorage.getItem('zixuanID'), //自选组合ID
      pageSize: 6, //每页显示多少条
      pageIndex: 1,
      dataCount: 0, //总条数
      pageCurrent: 1, //当前页

      dataList: [],
      allList: [],
      showVip: false,
      importFormFile: null,
      importFormLoading: false,
      checkbtn: false,
      deleteAccessModal: false,
      delData: {},
      delLoadingzt: false,
    };
  },
  //计算属性 类似于data概念
  computed: {
    columnsTable() {
      let columns = []
      columns.push({
        title: '序号',
        width: 50,
        key: 'list',
        align: 'center',
        render: (h, params) => {
          return h(
            'span',
            params.index + this.pageCurrent * 6 - 5
          )
        }
      })
      columns.push({
        title: '名称',
        key: 'CompanyName',
        align: 'center',

      })
      columns.push({
        title: '添加监控日期',
        key: 'CreateTime',
        align: 'center',
      })
      columns.push({
        title: '操作',
        slot: 'action',
        align: 'center',
        width: 50,
      })
      return columns
    }

  },
  //监控data中的数据变化
  watch: {
    // MonitorGroupId: {
    //   handler() {
    //     this.GetComMonitorList();
    //   },
    //   immediate: true,
    // },
  },
  //方法集合
  methods: {
    // * 确认导入表格数据
    importFormSubmit() {
      if (this.importFormFile) {
        let data = new FormData()
        this.importFormLoading = true

        data.append('UserId', this.UserId)
        data.append('MonitorGroupId', this.MonitorGroupId)
        data.append('file', this.importFormFile)
        axios.request({
          url: '/ComMonitor/AddComMonitorPatch',
          data,
          method: 'post'
        }).then(res => {
          if (res.data.Check) {
            // let s = {
            //   id: this.editId
            // }
            // this.getSecTableList(s)
            this.GetComMonitorList();
            this.$emit('getNum')
            this.importFormModal = false
            this.importFormFile = null
          } else {
            if (res.data.Msg === 'false') {
              this.$Message.error('上传失败')
            } else {

            }
          }
          this.importFormLoading = false
        }, res => {
          this.importFormLoading = false
        })
      } else {
        this.$Message.error('请选择需要上传的文件!')
      }



    },
    deleteImportFormFile() {
      this.importFormFile = null
    },
    handleUploadImportForm(file) { // 选择文件函数
      if (parseFloat(file.size) > 104857600) {
        this.$Message.error(`${file.name}文件超过100M!`)
        return false
      } else {
        this.importFormFile = file // 获取文件
        return false// 阻止自动上传
      }
    },
    closeVip() {
      this.showVip = false
    },
    importData() {
      this.importFormFile = null
      if (localStorage.getItem('usergrade') == 'VIP版') {
        this.importFormModal = true
      } else {
        this.showVip = true
      }

    },
    exportData() {
      if (localStorage.getItem('usergrade') == 'VIP版') {
        if (this.dataList.length > 0) {
          this.$refs.table.exportCsv({
            filename: '成员列表',
            columns: this.columnsTable.filter((col, index) => index < 3),
            data: this.dataList.filter((data, index) =>
              index < this.dataList.length
            )
          });
        } else {
          this.$Message.warning('当前成员数量为0')
        }

      } else {
        this.showVip = true
      }

    },
    exportTable() {
      var a = document.createElement("a");
      // console.log(that.type,that.name);
      a.download = `编辑成员导入模板.xls`;
      // a.href = 'http://101.133.134.71:9001/UploadFiles/ImportLtdTemplate.xls';
      a.href = `${window.location.href.split('Pages')[0]}UploadFiles/ImportLtdTemplate.xls`
      a.click();
      a = null
    },
    handleClick() {
      this.showVip = false
      this.$emit('closeMenberModal')
      this.$router.push('authority')
    },
    blur() {
      this.showUl = false
    },
    blur1() {
      // this.showUl = false
    },
    deleteModal(row, index) {
      this.delData = {
        row: row,
        index: index
      }
      this.deleteAccessModal = true
    },
    addMember() {
      if(!this.searchKey){
        this.$Message.warning('请输入公司名称')
        return false  
      }
      axios.request({
        url: "/ComMonitor/AddComMonitor",
        params: {
          CompanyName: this.searchKey,
          UserId: this.UserId,
          MonitorGroupId: this.MonitorGroupId,
        },
        method: "post",
      })
        .then(
          (res) => {
            if (res.data.Check) {
              this.GetComMonitorList();
              this.$emit('getNum')
            } else {
              // this.$Message.info(res.data.Msg);
            }
          },
          (res) => {
            console.log(res);
          }
        );
    },
    //添加关注
    addFocus(params) {
      if (this.isVIP) {
        if (this.dataList.length > 500) {
          this.$Message.warning('当前套餐最高支持添加500条')
          return false
        }
      } else {
        if (this.dataList.length > 30) {
          this.$Message.warning('当前套餐最高支持添加30条')
          return false
        }
      }
      axios.request({
        url: "/ComMonitor/AddComMonitor",
        params: {
          CompanyName: params,
          UserId: this.UserId,
          MonitorGroupId: this.MonitorGroupId,
        },
        method: "post",
      })
        .then(
          (res) => {
            if (res.data.Check) {
              this.GetComMonitorList();
            } else {
            }
          },
          (res) => {
            console.log(res);
          }
        );
    },
    rentSearchChange(item) {
      // console.log(item);
      this.searchKey = item.Name;
    },
    //搜索
    searchMem(val) {
      if (this.searchKey.length < 3) {
        return false
      }
      axios.request({
        url: "/QiChaCha/GetTycSearch2",
        params: { name: this.searchKey },
        method: "post",
      })
        .then(
          (res) => {
            if (res.data.Check) {
              this.showUl = true
              this.optionsList = res.data.Data.Items;
            } else {
            }
          },
          (res) => {
            console.log(res);
          }
        );
    },
    //删除
    deleteAccessSubmit() {
      this.delLoadingzt = true
      axios.request({
        url: "/ComMonitor/DelComMonitorById",
        params: { id: this.delData.row.Id },
        method: "post",
      })
        .then(
          (res) => {
            if (res.data.Check) {
              // this.dataList.splice(index, 1);
              if (this.dataList.length === 1) {
                this.pageIndex = 1
                this.GetComMonitorList()
                this.deleteAccessModal = false
                this.delLoadingzt = false
                this.$emit('getNum')

              } else {
                this.deleteAccessModal = false
                this.GetComMonitorList()
                this.delLoadingzt = false
                this.$emit('getNum')
              }
            } else {
              this.deleteAccessModal = false
              this.delLoadingzt = false
            }
          },
          (res) => {
            console.log(res);
            this.deleteAccessModal = false
            this.delLoadingzt = false
          }
        );

    },
    changepage(index) {
      this.pageIndex = index;
      this.GetComMonitorList();
    },
    //返回自选
    backZX() {
      this.$router.push('/customPage')
    },
    //获取成员列表
    GetComMonitorList() {
      this.dataList = []
      this.loading = true
      this.MonitorGroupId = localStorage.getItem('zixuanID')
      axios.request({
        url: "/ComMonitor/GetComMonitorList",
        params: {
          MonitorGroupId: this.MonitorGroupId,
          PageIndex: this.pageIndex,
          PageSize: this.pageSize,
        },
        method: "post",
      })
        .then(
          (res) => {
            if (res.data.Check) {
              this.dataCount = res.data.Data.TotalItems;
              for (let i = 0; i < res.data.Data.comMonitor.length; i++) {
                this.dataList.push(res.data.Data.comMonitor[i])
                this.dataList[i].list = i + 1
              }
              this.pageCurrent = res.data.Data.CurrentPage;
              this.loading = false
            } else {
              this.loading = false
            }
          },
          (res) => {
            console.log(res);
          }
        );
    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log(this.MonitorGroupId);
    this.GetComMonitorList();
    // this.MonitorGroupId = this.$store.state.memberIndex;
    // console.log(this.MonitorGroupId);
    // this.GetComMonitorList();
  },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.pointer {
  cursor: pointer;
}

.member {
  width: 100%;
  padding-bottom: 40px;
  .main {
    margin: 0 auto;
    background-color: #ffffff;
    .nav {
      display: flex;
      // margin-left: 20px;
      padding: 10px 0 10px 10px;
    }

    .segmentation {
      width: 100%;
      height: 5px;
      background-color: #f3e9e9;
    }

    section {
      text-align: left;
      position: relative;
      .search {
        margin-bottom: 12px;
        display: flex;
        justify-content: space-around;
      }
      .chooseCom {
        position: absolute;
        top: 40px;
        left: 2px;
        z-index: 100;
        width: 100%;
        background-color: #ffffff;
        border: 1px solid #dcdee2;
        padding-left: 5px;
        box-shadow: 0px 0px 2px 1px #05b6d0;

        li {
          width: 100%;
          display: flex;
          height: 30px;
          line-height: 30px;
          justify-content: space-between;
          color: #515a6e;

        }
      }
    }
  }
}

.vip {
  width: 320px;
  height: 240px;
  border-radius: 10px;
  background: #fff;
  position: absolute;
  z-index: 999;
  top: ~'calc(50% - 100px)';
  right: ~'calc(50% - 160px)';
  box-shadow: 0 0 1px 1px #00a0e9;

  .close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 25px;
    font-weight: bolder;
    color: #00a0e9;
    cursor: pointer;
  }

  div:nth-child(3) {
    width: 100%;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #9F9F9F;
    letter-spacing: 0;
    text-align: center;

    span {
      color: #00a0e9;
      cursor: pointer;
    }
  }

}
</style>

 src/view/custom-page/customPhone.vue

New file
@@ -0,0 +1,1998 @@

<template>
    <div class="zixuanMain" id="customPhone">
        <header>
            <img src="../../assets/images/login/yjtlogo1.png" alt="" />
        </header>
        <div class="zixuan" v-if="zxPage">
            <div class="left">
                <div class="title">
                    <span>我的自选组合({{ zuheList.length }})</span> <span class="add pointer" @click="add">
                        <Icon style="margin-top:-2px;" custom="custom custom-tianjia" />
                        创建自选
                    </span>
                </div>
                <div style="width:100%;height:1px;background: #EEEEEE;"></div>
                <ul>
                    <li v-for="(item, index) in zuheList" :key="index" @click="chooseZixuan(item, index)"
                        :class="{ zxList: choosezx === index }">
                        <img :src="item.PicURL" alt="" />
                        <div class="rightTit">
                            <div style="display: flex; justify-content: space-between">
                                <div class="pointer groupName">{{ item.GroupName }}</div>
                                <div style="display: flex; justify-content: space-between;">
                                    <Icon custom="custom custom-bianji" class="pointer"
                                        style="color:#2D8CF2;margin-right:10px;line-height:60px" size="16"
                                        @click="edit()" />
                                    <Icon class="pointer" custom="custom custom-delete_b" size="18"
                                        style="color:#2D8CF2;margin-right:10px;line-height:60px" @click="deleteModal(index)" />
                                    <Icon class="pointer"  custom="custom custom-xinyongdanbaozu" size="18"
                                        style="color:#2D8CF2;line-height:60px"  @click="member" />
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- <div class="title" style="border-top:10px solid #fff;height:60px;line-height:50px;padding:0 20px 0 20px">
                    <span>成员({{ this.menberNum }})</span> <span class="pointer" @click="member">
                        <Icon style="margin-top:-2px;" custom="custom custom-xinyongdanbaozu" /> 编辑成员
                    </span>

                </div> -->
                <div class="title" style="border-top:10px solid #fff;height:60px;line-height:50px;padding:0 20px 0 20px">
                    <span>订阅设置</span>
                </div>
                <div style="display:flex;justify-content: space-between;margin: 5px 0;padding:0 20px">
                    <div>
                        <i-switch v-model="alarmInfo_email.AlarmEmailFlag" @on-change="emailSwitch" size="large" /> 邮箱订阅
                    </div>
                    <Tooltip placement="bottom-end" theme="light">
                        <div v-if="alarmInfo_email.AlarmEmail" @click="emailadd" class="pointer">{{
                            alarmInfo_email.AlarmEmail.length > 8 ? `${alarmInfo_email.AlarmEmail.substring(0, 8)}...` :
                            alarmInfo_email.AlarmEmail
                        }}<span style="color:#1E81F7"> ></span></div>
                        <div slot="content">
                            {{ alarmInfo_email.AlarmEmail }}
                        </div>
                    </Tooltip>

                    <div v-if="!alarmInfo_email.AlarmEmail" style="color:#1E81F7" @click="emailadd" class="pointer">请绑定 >
                    </div>
                </div>
                <div style="display:flex;justify-content: space-between;margin: 5px 0;padding:0 20px">
                    <div>
                        <i-switch v-model="alarmInfo_wx.AlarmWXFlag" @on-change="wechatSwitch" size="large" /> 微信订阅
                    </div>

                    <div v-if="alarmInfo_wx.AlarmWXId" @click="WXadd" class="pointer"> 已关联 <span style="color:#1E81F7">
                            ></span></div>
                    <div v-else style="color:#1E81F7" @click="WXadd" class="pointer">请绑定 ></div>
                </div>
            </div>
            <Modal v-model="addModal" ok-text="保存并添加" cancel-text="取消" @on-ok="sureAdd">
                <p slot="header">
                    <icon custom="custom custom-tianjia" size="18" style="color:#00a0e9"></icon>
                    创建自选
                </p>
                <Input v-model="addDate" size="large" style="width: 100%" @on-change="changeGroupName" />
            </Modal>
            <div class="right">
                <div v-if="zixuandetail">
                    <section class="jiance">
                        <div class="title" style="float:left">
                            <div><span></span><span style="margin-left:5px;cursor:pointer;" @click="gobackzx">返回{{
                                this.zixuanIndex.GroupName }}</span> ><span style="font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0;line-height:40px;display: inline-block;">详情</span> </div>
                        </div>

                    </section>
                    <ZXDetail></ZXDetail>
                </div>
                <div v-else>
                    <section class="jiance">
                        <div class="title" style="float:left">
                            <div><span></span> {{ this.zixuanIndex.GroupName }} </div>
                        </div>
                        <ul class="datachoose" style="float:right">
                            <!-- <li v-for="(item, index) in dataChooseList" @click="chooseDate1(item, index)" class="pointer datachooseLi" :key="index">
            {{ item }}
          </li> -->
                            <!-- <li @click="chooseDate1('12H', 0)" class="pointer datachooseLi ">12H</li> -->
                            <li @click="chooseDate1('24H', 0)" class="pointer datachooseLi activeDate">24H</li>
                            <li @click="chooseDate1('1W', 1)" class="pointer datachooseLi">1W</li>
                            <li @click="chooseDate1('1M', 2)" class="pointer datachooseLi">1M</li>
                            <li @click="chooseDate1('6M', 3)" class="pointer datachooseLi">6M</li>
                        </ul>


                    </section>
                    <section class="jiance_content">
                        <div class="item">
                            <div class="jianceTit pointer" @click="goMonitoring(0, 0)">
                                <!-- 风险监测 <span>{{ RiskNum }}</span> -->
                                <div>{{ RiskNum }}</div>
                                <div style="padding-left: 10px;">风险监测
                                    <Icon type="ios-arrow-forward" size="14" />
                                </div>
                            </div>
                            <ul>
                                <li @click="goMonitoring(0, 1)">
                                    <div>{{ this.Risk.WarnLevel3 }}</div>
                                    <div>风险</div>
                                </li>
                                <li @click="goMonitoring(0, 2)">
                                    <div>{{ this.Risk.WarnLevel2 }}</div>
                                    <div>警示</div>
                                </li>
                                <li @click="goMonitoring(0, 3)">
                                    <div>{{ this.Risk.WarnLevel1 }}</div>
                                    <div>提示</div>
                                </li>
                                <li @click="goMonitoring(0, 4)">
                                    <div>{{ this.Risk.WarnLevel0 }}</div>
                                    <div>利好</div>
                                </li>



                            </ul>
                        </div>
                        <div class="item">
                            <div class="jianceTit pointer" @click="goMonitoring(1, 0)">
                                <!-- 新闻监测 <span>{{ NewsNum }}</span> -->
                                <div>{{ NewsNum }}</div>
                                <div style="padding-left: 10px;">新闻监测
                                    <Icon type="ios-arrow-forward" size="14" />
                                </div>
                            </div>
                            <ul>
                                <li @click="goMonitoring(1, 1)">
                                    <div>{{ this.News.WarnLevel3 }}</div>
                                    <div>风险</div>
                                </li>
                                <li @click="goMonitoring(1, 2)">
                                    <div>{{ this.News.WarnLevel2 }}</div>
                                    <div>警示</div>
                                </li>
                                <li @click="goMonitoring(1, 3)">
                                    <div>{{ this.News.WarnLevel1 }}</div>
                                    <div>提示</div>
                                </li>
                                <li @click="goMonitoring(1, 4)">

                                    <div>{{ this.News.WarnLevel0 }}</div>
                                    <div>利好</div>
                                </li>
                            </ul>
                        </div>


                        <div class="item">
                            <div class="jianceTit pointer" @click="goMonitoring(2, 0)">
                                <div>{{ AnnouncementNum }}</div>
                                <div style="padding-left: 10px;">公告监测
                                    <Icon type="ios-arrow-forward" size="14" />
                                </div>
                            </div>
                            <ul>
                                <li @click="goMonitoring(2, 1)">
                                    <div>{{ this.Announcement.WarnLevel3 }}</div>
                                    <div>风险</div>
                                </li>
                                <li @click="goMonitoring(2, 2)">
                                    <div>{{ this.Announcement.WarnLevel2 }}</div>
                                    <div>警示</div>
                                </li>
                                <li @click="goMonitoring(2, 3)">
                                    <div>{{ this.Announcement.WarnLevel1 }}</div>
                                    <div>提示</div>
                                </li>
                                <li @click="goMonitoring(2, 4)">
                                    <div>{{ this.Announcement.WarnLevel0 }}</div>
                                    <div>利好</div>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>

                <!-- <ul class="main">
            <li class="mianTitle">
              <div class="getDate">时间</div>
              <div class="title">标题</div>
              <div class="aboutComTit">相关企业</div>
              <div class="label">标签</div>
              <div class="from">来源</div>
            </li>
            <li class="liList" v-for="(item, index) in dataList" :key="index">
              <div class="getDate">{{ item.date }}</div>
              <div class="title pointer">{{ item.title }}</div>
              <div class="aboutCom pointer">{{ item.aboutCom }}</div>
              <div class="label">{{ item.label }}</div>
              <div class="from">{{ item.from }}</div>
            </li>
          </ul>  -->
            </div>

            <Modal v-model="editModal" :width="editModalWidth">
                <p slot="header">
                    <icon custom="custom custom-bianji" size="18" style="color:#00a0e9"></icon>
                    编辑组合
                </p>
                <div class="edit" v-if="editContent">
                    <div class="left">
                        <img :src="defaultImg" alt="" />
                        <div class="changeImg pointer" @click="editCover">编辑封面</div>
                    </div>
                    <ul class="right">
                        <li>
                            <div>组合名称：</div>
                            <Input v-model="zixuanIndex.GroupName" style="width: 250px; margin-bottom: 20px" />
                        </li>
                        <li>
                            <div>组合备注：</div>
                            <Input v-model="zixuanIndex.GroupDesc" type="textarea" placeholder="添加备注信息" :rows="3"
                                style="width: 250px; height: 80px" />
                        </li>
                    </ul>
                </div>
                <div class="uploadImg" v-if="editImg">
                    <div class="left">
                        <label for="file">
                            <div class="chooseImg pointer">请选择要上传的图片</div>
                        </label>
                        <input type="file" id="file" accept="image/*" @change="getPicture($event)" style="display: none" />
                        <div class="imgShow">
                            <img :src="defaultImg" alt="" />
                        </div>
                    </div>
                    <div class="right">
                        <img :src="defaultImg" alt="" />
                        <div>效果展示</div>
                    </div>
                </div>
                <template #footer style="padding-right: 45px">
                    <Button @click="editCancel">取消</Button>
                    <Button type="primary" @click="editSure">确定</Button>
                </template>
            </Modal>
            <Modal v-model="subscription" title="组合监测订阅设置" :width="editModalWidth" footer-hide>
                <div style="display:flex;justify-content: space-between;font-size: 12px;">
                    <div>{{ zixuanIndex.GroupName }}</div>
                    <div style="display:flex;justify-content: space-between;">已开启( <div style="color:#FF8117">
                            <span>2</span> /
                            {{ subscribenum }}
                            <!-- <span>1</span> -->
                        </div> )</div>
                </div>
                <div style="display:flex;justify-content: space-between;margin: 5px 0;">
                    <div>
                        <i-switch v-model="alarmInfo_email.AlarmEmailFlag" @on-change="emailSwitch" size="small" /> 邮箱订阅
                    </div>
                    <div v-if="alarmInfo_email.AlarmEmail" @click="emailadd" class="pointer">{{ alarmInfo_email.AlarmEmail
                    }}<span style="color:#1E81F7"> ></span></div>
                    <div v-else style="color:#1E81F7" @click="emailadd" class="pointer">请绑定 ></div>
                </div>
                <div style="display:flex;justify-content: space-between;margin: 5px 0;">
                    <div>
                        <i-switch v-model="alarmInfo_wx.AlarmWXFlag" @on-change="wechatSwitch" size="small" /> 微信订阅
                    </div>

                    <div v-if="alarmInfo_wx.AlarmWXId" @click="WXadd" class="pointer"> 已关联您的微信号 <span style="color:#1E81F7">
                            ></span></div>
                    <div v-else style="color:#1E81F7" @click="WXadd" class="pointer">请绑定 ></div>
                </div>

            </Modal>
            <Modal v-model="emailModal" title="邮箱设置" width="400" :loading="loading">
                <Input placeholder="请输入邮箱地址" v-model="alarmInfo_email.AlarmEmail" style="width: 350px" />
                <div style="margin-top:5px;">
                    <CheckboxGroup v-model="emailyj" @on-change="CheckboxEmail">预警等级：
                        <Checkbox label="Red">红色</Checkbox>
                        <Checkbox label="Yellow">黄色</Checkbox>
                        <Checkbox label="Green">绿色</Checkbox>
                        <Checkbox label="Blue">蓝色</Checkbox>
                    </CheckboxGroup>
                </div>
                <template #footer>
                    <Button @click="cancelEmailRemind">取消</Button>
                    <Button type="primary" @click="saveEmailRemind">确定</Button>
                </template>
            </Modal>

            <Modal v-model="WXModel" title="微信设置" width="400">
                <div style="display:flex;justify-content: space-around;">
                    <img src="../../assets/images/qrcodeRR.jpg" alt=""
                        style="width:150px;height:150px;margin-right: -10px;">
                    <div style="margin-top:35px;margin-left: -10px;">
                        <div><img src="../../assets/images/constom-page/wxcode.png" style="width:128px;height:23px" alt="">
                        </div>
                        <div style="font-size:16px;font-weight:bolder">开启微信通知提醒</div>
                        <div style="font-size:14px;font-weight:bolder;display:flex;justify-content:space-between;">
                            <div>重要舆情</div>
                            <div>悉数掌握</div>
                        </div>
                    </div>
                </div>
                <CheckboxGroup style="margin:16px 0 0 20px" v-model="WXyj" @on-change="CheckboxWX">预警等级：
                    <Checkbox label="Red">红色</Checkbox>
                    <Checkbox label="Yellow">黄色</Checkbox>
                    <Checkbox label="Green">绿色</Checkbox>
                    <Checkbox label="Blue">蓝色</Checkbox>
                </CheckboxGroup>
                <template #footer>
                    <Button @click="cancelWXRemind">取消</Button>
                    <Button type="primary" @click="savewechatRemind">确定</Button>
                </template>
            </Modal>
            <Modal v-model="memberModal" width="605" footer-hide :mask-closable="false">
                <p slot="header">
                    <icon custom="custom custom-xinyongdanbaozu" size="18" style="color:#00a0e9"></icon>
                    编辑成员
                </p>
                <!--  -->
                <vmember v-if="memberModal" @getNum="getNumber()" @closeMenberModal="closemenModal()"></vmember>
            </Modal>
            <Modal v-model="deleteAccessModal" draggable footer-hide sticky reset-drag-position :mask="true"
                :mask-closable="false" class-name="vertical-center-modal" width="380">
                <p slot="header">
                    <Icon custom="custom custom-delete_b" style="margin-right: 10px;"></Icon>
                    <span>删除自选组合</span>
                </p>
                <div>
                    <div>是否删除当前自选组合？此操作不可恢复！</div>
                    <div class="clearfix" style="width: 200px;margin:20px auto 0px;">
                        <Button size="large" custom-icon="custom custom-queding" style="float: left;" type="primary"
                            @click="deleteAccessSubmit()" :disabled="checkbtn" :loading='delLoadingzt'>确认
                        </Button>
                        <Button size="large" custom-icon="custom custom-quxiao" style="float: right;" type="error"
                            @click="deleteAccessModal = false">取消
                        </Button>
                    </div>
                </div>
            </Modal>
        </div>
        <div class="zixunNull" v-if="createPage">
            <div class="createZuhe">
                <div class="title">快来建立您的第一个自选组合</div>
                <div style="width: 100%;margin-bottom: 20px;"><img src="../../assets/images/constom-page/defaultpic.png"
                        alt="" />
                </div>
                <div style="width: 100%;">
                    <Input v-model="addDate" size="large" class="createZuheInp" style="width: 500px;"
                        @on-change="changeGroupName" />
                </div>

                <div class="pointer create" @click="createFirst">新建</div>
            </div>
        </div>
    </div>
</template>
   
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//  import store from '../store/index'
import axios from '@/libs/api.request'
import $ from 'jquery'
import vmember from './components/memberEdit.vue'

import ZXDetail from "../monitoring/monitoring.vue";
export default {
    // name: 'customPage',
    //import引入的组件需要注入到components对象中才能使用

    components: {
        vmember,
        ZXDetail,
    },
    data() {
        //这里存放数据
        return {
            delLoadingzt: false,
            deleteAccessModal: false,
            checkbtn: false,
            zixuandetail: false,
            memberModal: false,
            isVIP: localStorage.getItem('usergrade') == 'VIP版' ? true : false,
            loading: true,
            picData: '',
            menberNum: 0,
            wxnum: 0,
            emailnum: 0,
            subscribenum: 0,
            pushMessages: {
                AlarmEmail: "",
                AlarmEmailFlag: false,
                AlarmEmailGrade: "",
                AlarmWXFlag: false,
                AlarmWXGrade: "",
                AlarmWXId: "",
            },
            alarmInfoBase: {},
            emailyj: [],
            WXyj: [],
            dateScope: '',
            startOption: {
            },
            emailModal: false,
            showdatezdy: true,
            showSubscription: true,
            WXModel: false,
            single: false,
            email: false,
            valueEmail: false,
            valueWX: false,
            subscription: false,
            dateTit: "时间筛选",
            animate: false,
            newsIndex: 0,
            newsList: ["1111111111"],
            carouselValue: 1, //走马灯
            chooseDateIndex: 0,
            dataChooseList: ["12H", "24H", "1W", "1M", "6M"],
            showDateChoose: false,
            createPage: false,
            zxPage: false,
            zuheList: [],
            zixuanShow: {},
            addModal: false,
            addDate: "",
            date: "",
            DyList: ["全部", "经营预警", "司法涉诉", "租赁融资", "新闻", "公告"],
            chooseDyIndex: 0,
            dataList: [
                {
                    date: "刚刚",
                    title: "11111",
                    aboutCom: "1111111111",
                    label: "11111",
                    from: "1111",
                },
            ],
            editModal: false,
            editModalWidth: 600,
            editRemark: "",
            changeImgModal: false,
            defaultImg: require("../../assets/images/constom-page/defaultpic.png"), //默认图片
            defaultImg1: require("../../assets/images/constom-page/defaultpic.png"), //默认图片
            editContent: false,
            editImg: false,
            showCreate: true,
            userId: localStorage.getItem("userId"),
            // userId: 34,
            zixuanIndex: { GroupName: "", GroupDesc: "" },
            addTitle: "",
            menberIndex: 0,
            date1: ['', ''],
            showdate: false,
            startTime: '',
            endTime: '',
            Announcement: {},
            News: {},
            Risk: {},
            AnnouncementNum: 0,
            NewsNum: 0,
            RiskNum: 0,
            originalImg: '',
            choosezx: 0,
            alarmInfo_email: {
                id: '',
                AlarmEmailFlag: false,//是否启动邮件预警
                AlarmEmail: '',//邮箱地址
                AlarmEmailGrade: [],//邮箱预警等级
            },
            alarmInfo_wx: {
                id: '',
                AlarmWXFlag: false,//
                AlarmWXId: '',//
                AlarmWXGrade: '',//
            },
            dataItem: '24H',
            firstzx: 0,
        };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        '$route'(to, from) {
            if (to.name === 'customPage') {
                this.getComMonitorMemberNo(this.menberIndex)
            }
            if (from.name === 'customPage') {
                sessionStorage.setItem('homeindex', '')
            }
        }
    },
    //方法集合
    methods: {
        gobackzx() {
            this.chooseDate1('24H', 1)
            this.zixuandetail = false

        },
        closemenModal() {
            this.memberModal = false
            // console.log(localStorage.getItem('MonitorGroupId'));
            // this.getComMonitorMemberNo(localStorage.getItem('MonitorGroupId'))
        },
        cancelWXRemind() {
            this.WXModel = false
        },
        getNumber() {
            let index = localStorage.getItem('MonitorGroupId')
            this.getComMonitorMemberNo(index)
        },
        //获取成员数量
        getComMonitorMemberNo(index) {
            localStorage.setItem('MonitorGroupId', index)
            let data = { MonitorGroupId: index }
            axios.request({
                url: '/ComMonitor/GetComMonitorMemberNo',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    this.menberNum = res.data.Data
                    localStorage.setItem('menberNum', this.menberNum)
                } else {

                }
            }, res => {

            })
        },
        cancelEmailRemind() {
            this.emailModal = false
        },
        CheckboxEmail(e) {
            this.alarmInfo_email.AlarmEmailGrade = e
        },
        CheckboxWX(e) {
            this.alarmInfo_wx.AlarmWXGrade = e
        },
        //推送部分
        /**
         * 获取推送基本信息
         */
        getAlarmInfo() {
            let id = localStorage.getItem('userId')
            if (!id) {
                return false
            }
            let data = {
                id: id
            }
            axios.request({
                url: '/User/GetAlarmInfo',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    // debugger
                    this.alarmInfoBase = res.data.Data
                    this.alarmInfoBase.id = id
                    this.alarmInfoBase.AlarmEmailGrade = res.data.Data.AlarmEmailGrade ? res.data.Data.AlarmEmailGrade.split(',') : []
                    this.emailyj = this.alarmInfoBase.AlarmEmailGrade
                    this.alarmInfoBase.AlarmWXGrade = res.data.Data.AlarmWXGrade ? res.data.Data.AlarmWXGrade.split(',') : []
                    this.WXyj = this.alarmInfoBase.AlarmWXGrade
                    this.alarmInfo_email = {
                        id: this.alarmInfoBase.id,
                        AlarmEmailFlag: this.alarmInfoBase.AlarmEmailFlag,//是否启动邮件预警
                        AlarmEmail: this.alarmInfoBase.AlarmEmail,//邮箱地址
                        AlarmEmailGrade: JSON.parse(JSON.stringify(this.alarmInfoBase.AlarmEmailGrade)),//邮箱预警等级
                    }
                    if (this.alarmInfoBase.AlarmEmailFlag === true) {

                        this.emailnum = 1
                    } else {
                        this.emailnum = 0
                    }
                    // this.alarmInfo_emailA = this.alarmInfo_email
                    this.alarmInfo_wx = {
                        id: this.alarmInfoBase.id,
                        AlarmWXFlag: this.alarmInfoBase.AlarmWXFlag,//是否启动邮件预警
                        AlarmWXId: this.alarmInfoBase.AlarmWXId,//邮箱地址
                        AlarmWXGrade: JSON.parse(JSON.stringify(this.alarmInfoBase.AlarmWXGrade)),//邮箱预警等级
                    }
                    if (this.alarmInfoBase.AlarmWXFlag === true) {
                        this.wxnum = 1
                    } else {
                        this.wxnum = 0
                    }
                    this.subscribenum = this.wxnum + this.emailnum
                } else {
                    this.alarmInfoBase = {}
                }
            }, res => {
                this.alarmInfoBase = {}
            })
        },
        /**
         * 切换邮件预警状态
         */
        emailSwitch() {
            if (this.alarmInfo_email.AlarmEmailFlag) {
                this.alarmInfo_email.AlarmEmail = this.alarmInfoBase.AlarmEmail
                this.alarmInfo_email.AlarmEmailGrade = JSON.parse(JSON.stringify(this.alarmInfoBase.AlarmEmailGrade))
                this.emailModal = true
                this.emailnum = 1
            } else {
                this.alarmInfo_email.AlarmEmail = ''
                this.alarmInfo_email.AlarmEmailGrade = []
                this.emailyj = []
                this.emailnum = 0
                this.saveEmailRemind()
            }
            this.subscribenum = this.wxnum + this.emailnum

        },
        /**
         * 切换微信预警状态
         */
        wechatSwitch() {
            if (this.alarmInfo_wx.AlarmWXFlag) {
                this.alarmInfo_wx.AlarmWXId = this.alarmInfoBase.AlarmWXId
                this.alarmInfo_wx.AlarmWXGrade = JSON.parse(JSON.stringify(this.alarmInfoBase.AlarmWXGrade))
                this.WXModel = true
                this.wxnum = 1
            } else {
                this.alarmInfo_wx.AlarmWXId = ''
                this.alarmInfo_wx.AlarmWXGrade = []
                this.WXyj = []
                this.wxnum = 0
                this.savewechatRemind()
            }
            this.subscribenum = this.wxnum + this.emailnum

        },
        /**
         * 保存邮件预警
         */
        saveEmailRemind() {

            this.loading = false
            if (this.alarmInfo_email.AlarmEmailFlag) {
                this.alarmInfo_email.AlarmEmailGrade = this.emailyj
                if (!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(this.alarmInfo_email.AlarmEmail)) {
                    this.$Message.error('邮箱订阅:请输入正确的邮箱!')
                    return false
                } else if (this.alarmInfo_email.AlarmEmailGrade.length == 0) {
                    this.$Message.error('邮箱订阅:请至少选择一个预警级别!')
                    return false
                }
            }
            let data = JSON.parse(JSON.stringify(this.alarmInfo_email))

            data.AlarmEmailGrade = data.AlarmEmailGrade.join()
            axios.request({
                url: '/User/UpdateAlarmEmail',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    this.emailModal = false
                } else {
                    this.emailModal = false
                    this.alarmInfoBase = {}
                }
            }, res => {
                this.emailModal = false
                this.alarmInfoBase = {}
            })
        },
        /**
         * 保存微信预警
         */
        savewechatRemind() {
            if (this.alarmInfo_wx.AlarmWXFlag) {
                this.alarmInfo_wx.AlarmWXGrade = this.WXyj
                console.log(this.alarmInfo_wx.AlarmWXGrade);
                if (this.alarmInfo_wx.AlarmWXGrade.length == 0) {
                    this.$Message.error('微信订阅:请至少选择一个预警级别!')
                    return false
                }
            }
            let data = JSON.parse(JSON.stringify(this.alarmInfo_wx))
            data.AlarmWXGrade = data.AlarmWXGrade.join()
            axios.request({
                url: '/User/UpdateAlarmWX',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.Check) {
                    this.WXModel = false
                    // this.getAlarmInfo()
                } else {
                    this.WXModel = false
                    this.alarmInfoBase = {}
                }
            }, res => {
                this.WXModel = false
                this.alarmInfoBase = {}
            })
        },

        closeSubscription() {
            this.showSubscription = false
        },

        changeEmail(status) {
        },
        emailadd() {
            if (this.alarmInfo_email.AlarmEmailFlag) {
                this.emailModal = true
            } else {
                this.$Message.info("请开启订阅模式");
            }

        },
        changeWX(status) {
            if (status === true) {
                this.WXModel = true
            }
        },
        WXadd() {
            if (this.alarmInfo_wx.AlarmWXFlag) {
                this.WXModel = true
            } else {
                this.$Message.info("请开启订阅模式");
            }
        },
        //订阅弹窗
        subscriptionModel() {
            this.emailnum = 0
            this.wxnum = 0
            this.getAlarmInfo()
            this.subscription = true
        },
        datechoose1(item) {
            console.log(item);
            this.dateTit = item.target.innerHTML

        },
        scroll() {
            this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
            setTimeout(() => {
                this.newsList.push(this.newsList[0]); // 将数组的第一个元素添加到数组的
                this.newsList.shift(); //删除数组的第一个元素
                this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
            }, 500);
        },
        deleteModal(index) {
            this.delIndex = index
            this.deleteAccessModal = true
            // this.$Modal.confirm({
            //   title: "删除本条自选组合",
            //   content: "确认删除",
            //   loading: true,
            //   onOk: () => {
            //     setTimeout(() => {
            //       this.$Modal.remove();
            //       this.deleteZX(index);
            //       this.firstzx = 0
            //     }, 1000);
            //   },
            // });
        },
        //删除
        deleteAccessSubmit() {
            this.delLoadingzt = true
            axios.request({
                url: "/RRMonitorGroup/DeleteRRMonitorGroup",
                params: { id: this.zuheList[this.delIndex].id },
                method: "post",
            })
                .then(
                    (res) => {
                        if (res.data.Check) {
                            this.getZXList();
                            this.deleteAccessModal = false
                            this.delLoadingzt = false
                        } else {
                            this.deleteAccessModal = false
                            this.delLoadingzt = false
                        }

                    },
                    (res) => {
                        console.log(res);
                        this.deleteAccessModal = false
                        this.delLoadingzt = false
                    }
                );
        },
        changeGroupName() {
            this.addTitle = this.addDate;
        },
        //获取列表
        getZXList() {
            this.zuheList = []
            axios
                .request({
                    url: "/RRMonitorGroup/GetRRMonitorGroupList",
                    params: { UserId: this.userId },
                    // params: { UserId: 6 },
                    method: "post",
                })
                .then(
                    (res) => {
                        if (res.data.Check) {
                            for (let i = 0; i < res.data.Data.length; i++) {
                                let a = res.data.Data[i]
                                if (!a.PicURL) {
                                    a.PicURL = this.defaultImg1
                                } else {

                                    a.PicURL = window.location.href.split('Pages')[0] + a.PicURL
                                }
                                this.zuheList.push(a)
                            }
                            let homeindex = Number(sessionStorage.getItem('homeindex'))
                            if (homeindex) {
                                this.zxPage = true;
                                this.createPage = false;
                                for (let i = 0; i < this.zuheList.length; i++) {
                                    if (this.zuheList[i].id == homeindex) {
                                        this.zixuanIndex = this.zuheList[i]
                                        console.log(this.zixuanIndex);
                                        this.chooseZixuan('', i)

                                    }
                                }
                                this.menberIndex = this.zixuanIndex.id
                                localStorage.setItem('zixuanID', this.menberIndex)
                                this.getComMonitorMemberNo(this.menberIndex)
                                this.startTime = this.getStartTime(Date.now() - 12 * 60 * 60 * 1000)
                            } else {
                                if (this.zuheList.length > 0) {
                                    // debugger
                                    this.zxPage = true;
                                    this.createPage = false;
                                    if (this.firstzx === 0) {
                                        this.chooseZixuan('', 0)
                                        console.log('chushi');
                                        this.firstzx++
                                    }
                                    else {
                                        for (let i = 0; i < this.zuheList.length; i++) {
                                            if (this.zuheList[i].id == this.menberIndex) {
                                                this.zixuanIndex = this.zuheList[i]

                                            }
                                        }
                                    }
                                    console.log(this.zixuanIndex, this.menberIndex);
                                    this.menberIndex = this.zixuanIndex.id
                                    localStorage.setItem('zixuanID', this.menberIndex)
                                    this.getComMonitorMemberNo(this.menberIndex)
                                    this.startTime = this.getStartTime(Date.now() - 12 * 60 * 60 * 1000)
                                } else {
                                    this.zxPage = false;
                                    this.createPage = true;
                                }

                            }
                            // console.log(homeindex);

                            // console.log(this.zuheList);

                        } else {
                        }
                    },
                    (res) => {
                        console.log(res);
                    }
                );
        },
        getendTime(time) {
            let date = new Date(time); // 初始化日期
            let year = date.getFullYear(); //获取年份
            let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`; // 获取月份
            let day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`; // 获取具体日
            let hour = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`; // 获取时
            let minutes = date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`; // 获取分
            let seconds = date.getSeconds() > 9 ? date.getSeconds() : `0${date.getSeconds()}`; // 获取秒

            this.endTime = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
        },
        getStartTime(startTime) {
            let date = new Date(startTime); // 初始化日期
            let year = date.getFullYear(); //获取年份
            let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`; // 获取月份
            let day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`; // 获取具体日
            let hour = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`; // 获取时
            let minutes = date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`; // 获取分
            let seconds = date.getSeconds() > 9 ? date.getSeconds() : `0${date.getSeconds()}`; // 获取秒
            // this.startTime = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
            // debugger
            if (this.dataItem == '12H' || this.dataItem == '24H') {
                this.startTime = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
            } else if (this.dataItem == '1W' || this.dataItem == '1M') {
                this.startTime = year + '-' + month + '-' + day + ' ' + '00' + ':' + '00' + ':' + '00'
            }
        },
        // 获取时间范围
        getTimeScope() {

            let date = new Date(); // 初始化日期
            let year = date.getFullYear() - 1; //获取年份
            let month = date.getMonth() + 1; // 获取月份

            let day = date.getDate(); // 获取具体日

            // let hour = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`; // 获取时
            // let minutes = date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`; // 获取分
            // let seconds = date.getSeconds() > 9 ? date.getSeconds() : `0${date.getSeconds()}`; // 获取秒
            // this.dateScope = year + ',' + month + ',' + day
            // console.log(this.dateScope);
            this.startOption = {
                disabledDate(date) {
                    return (date < new Date(year, month - 1, day) || new Date(date).getTime() > new Date().getTime()
                    );
                },
            }
            // console.log(new Date().getTime());
            // console.log(new Date(date).getTime());
            // console.log(new Date(year,month-1,day).getTime());
        },

        //获取组合信息
        getZXData() {
            this.endTime = Date.now()
            //获取endTime
            this.getendTime(this.endTime)
            this.getStartTime(this.startTime)
            localStorage.setItem('startTime', this.startTime)
            localStorage.setItem('endTime', this.endTime)
            let data = {
                groupId: this.menberIndex,
                startTime: this.startTime ? this.startTime : '1990-01-01 00:00:00',
                endTime: this.endTime ? this.endTime : this.getendTime(Date.now())
            }

            axios
                .request({
                    url: "/EventKg/GetRiskMonitorWarnCountResult",
                    params: data,
                    method: "post",
                }).then((res) => {
                    if (res.data.Check) {
                        this.Announcement = {}
                        this.News = {}
                        this.Risk = {}
                        this.AnnouncementNum = 0,
                            this.NewsNum = 0,
                            this.RiskNum = 0,
                            this.Announcement = res.data.Data.Announcement
                        this.News = res.data.Data.News
                        this.Risk = res.data.Data.Risk
                        for (let i in this.Announcement) {
                            this.AnnouncementNum += this.Announcement[i]
                        }
                        localStorage.setItem('Risk', JSON.stringify(this.Risk))
                        // console.log(JSON.parse(localStorage.getItem('Risk')));
                        localStorage.setItem('RiskNum', this.RiskNum)
                        for (let i in this.News) {
                            this.NewsNum += this.News[i]
                        }
                        for (let i in this.Risk) {
                            this.RiskNum += this.Risk[i]
                        }
                    } else {
                    }
                },
                    (res) => {
                        console.log(res);
                    }
                );
            this.getComMonitorMemberNo(this.menberIndex)
        },
        //新建第一个组合
        createFirst() {
            this.sureAdd();
        },
        //打开添加自选组合弹窗
        add() {
            this.addModal = true;
            let myDate = new Date();
            this.addDate = "自选组合" + myDate.toLocaleDateString();
        },
        //确认添加
        sureAdd() {
            // let timestamp = Date.parse(new Date());
            let myDate = new Date();
            // this.addDate = '自选组合' + myDate.toLocaleDateString()
            this.changeGroupName();
            console.log(this.addTitle);
            axios
                .request({
                    url: "/RRMonitorGroup/AddRRMonitorGroup",
                    params: {
                        Id: 0,
                        GroupName: this.addTitle,
                        GroupDesc: "",
                        CreateUserId: this.userId,
                    },
                    method: "post",
                })
                .then(
                    (res) => {
                        if (res.data.Check) {
                            this.firstzx = 0
                            this.getZXList();
                        } else {
                        }

                    },
                    (res) => {
                        // console.log(res);
                    }
                );
            this.addDate = "自选组合" + myDate.toLocaleDateString();
        },
        //算时间
        interval(item) {
            console.log(item);
            let timestamp = Date.parse(new Date());
            let publicCuo = timestamp - item.timeCuo;
            //秒
            let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + "-";
            let M =
                (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "-";
            let D =
                (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
            let h =
                (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
            let m =
                (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
                ":";
            let s =
                date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            return Y + M + D + h + m + s;
        },
        chooseDy(item, index) {
            this.chooseDyIndex = index;
        },
        //时间选择
        chooseDate1(item, index) {
            this.showdate = false
            $('.cZDy').css({ "background-color": "#fff", "color": "#515A6E" })
            $('.datachooseLi').eq(index).css({ "background-color": "#00A0E9", "color": "#FFFFFF" }).siblings().css({ "background-color": "#fff", "color": "#515A6E" });
            if (this.$refs.startdate) {
                this.$refs.startdate.handleClear()
            }
            if (this.$refs.enddate) {
                this.$refs.enddate.handleClear()
            }
            this.startTimeZDY = ''
            this.endTimeZDY = ''



            this.dataItem = item
            this.showdatezdy = true
            this.chooseDateIndex = index;

            if (item === '12H') {
                this.startTime = Date.now() - 12 * 60 * 60 * 1000
            }
            if (item === '24H') {
                this.startTime = Date.now() - 24 * 60 * 60 * 1000
            }
            if (item === '1W') {
                this.startTime = Date.now() - 7 * 24 * 60 * 60 * 1000
            }
            if (item === '1M') {

                var dt = new Date();
                dt.setMonth(dt.getMonth() - 1);
                let arr = dt.toLocaleString().split(' ')[0].split('/')
                let year = Number(arr[0])
                let month = Number(arr[1]) > 9 ? arr[1] : `0${arr[1]}`
                let day = Number(arr[2]) > 9 ? arr[2] : `0${arr[2]}`
                this.startTime = year + '-' + month + '-' + day + ' ' + '00' + ':' + '00' + ':' + '00'
            }
            if (item === '6M') {
                var dt = new Date();
                dt.setMonth(dt.getMonth() - 6);
                let arr = dt.toLocaleString().split(' ')[0].split('/')
                let year = Number(arr[0])
                let month = Number(arr[1]) > 9 ? arr[1] : `0${arr[1]}`
                let day = Number(arr[2]) > 9 ? arr[2] : `0${arr[2]}`
                this.startTime = year + '-' + month + '-' + day + ' ' + '00' + ':' + '00' + ':' + '00'
                // let date = new Date(Date.now()); // 初始化日期
                // let year = date.getFullYear(); //获取年份
                // let month = date.getMonth() > 9 ? date.getMonth() : `0${date.getMonth()}`; // 获取月份
                // if (date.getMonth() === 0) {
                //   month = '01'
                //   year -= 1
                // }
                // let day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`; // 获取具体日
                // this.startTime = year + '-' + month + '-' + day + ' ' + '00' + ':' + '00' + ':' + '00'

            }
            localStorage.setItem('dateIndex', JSON.stringify({ name: item, num: index }))
            this.getZXData()
        },
        dateChangeStar(event) {
            this.startTime = ''
            this.endTime = ''
            console.log(event);
            this.chooseDateIndex = 10
            this.startTimeZDY = event + ' ' + '00:00:00'
            if (this.startTimeZDY && this.endTimeZDY) {
                this.dateChange()
            }
        },
        dateChangeEnd(event) {
            this.startTime = ''
            this.endTime = ''
            console.log(event);
            this.chooseDateIndex = 10
            this.endTimeZDY = event + ' ' + '23:59:59'
            if (this.startTimeZDY && this.endTimeZDY) {
                this.dateChange()
            }
        },
        dateChange() {
            localStorage.setItem('startTime', this.startTimeZDY)
            localStorage.setItem('endTime', this.endTimeZDY)
            localStorage.setItem('dateIndex', JSON.stringify({ name: '自定义', num: 10 }))
            this.Announcement = {}
            this.News = {}
            this.Risk = {}
            this.AnnouncementNum = 0;
            this.NewsNum = 0;
            this.RiskNum = 0;

            let data = {
                // 2023-05-12 23:59:59
                groupId: this.menberIndex,
                // groupId: 1,
                startTime: this.startTimeZDY ? this.startTimeZDY : '1990-01-01 00:00:00',
                endTime: this.endTimeZDY ? this.endTimeZDY : this.getendTime(Date.now())
            }
            axios
                .request({
                    url: "/EventKg/GetRiskMonitorWarnCountResult",
                    params: data,
                    method: "post",
                })
                .then(
                    (res) => {
                        if (res.data.Check) {
                            this.Announcement = res.data.Data.Announcement
                            this.News = res.data.Data.News
                            this.Risk = res.data.Data.Risk
                            for (let i in this.Announcement) {
                                this.AnnouncementNum += this.Announcement[i]
                            }
                            localStorage.setItem('Announcement', JSON.stringify(this.Announcement))
                            // console.log(JSON.parse(localStorage.getItem('Announcement')));
                            localStorage.setItem('AnnouncementNum', this.AnnouncementNum)

                            for (let i in this.News) {
                                this.NewsNum += this.News[i]
                            }
                            for (let i in this.Risk) {
                                this.RiskNum += this.Risk[i]
                            }
                        } else {
                        }
                    },
                    (res) => {
                        console.log(res);
                    }
                );
        },

        //选择自选组合
        chooseZixuan(item, index) {
            this.zixuandetail = false
            console.log(index);
            this.choosezx = index
            // this.zixuanShow = this.zuheList[index]
            this.zixuanIndex = this.zuheList[index];
            this.defaultImg = this.zuheList[index].PicURL
            this.menberIndex = this.zuheList[index].id;
            localStorage.setItem('zixuanID', this.menberIndex)
            this.showdatezdy = true
            this.showdate = false
            this.chooseDate1('24H', 0)
        },
        //打开编辑弹窗
        edit() {
            this.editModalWidth = 600;
            this.editModal = true;
            this.editContent = true;
            this.editImg = false
            this.originalImg = ''
        },
        //编辑封面
        editCover() {
            this.editContent = false;
            this.editImg = true;
            this.editModalWidth = 500;
        },
        editSure() {
            if (this.editContent === true) {
                console.log(this.zixuanIndex);
                axios
                    .request({
                        url: "/RRMonitorGroup/AddRRMonitorGroup",
                        params: {
                            Id: this.zixuanIndex.id,
                            GroupName: this.zixuanIndex.GroupName,
                            GroupDesc: this.zixuanIndex.GroupDesc,
                            CreateUserId: this.userId,
                        },
                        method: "post",
                    })
                    .then(
                        (res) => {
                            if (res.data.Check) {
                            } else {
                            }
                        },
                        (res) => {
                            console.log(res);
                        }
                    );

                this.editModal = false;
            }
            if (this.editImg === true) {
                // console.log(11111111);
                this.editImg = false;
                this.editContent = true;
                this.editModal = true;
                this.picData.append("id", this.zixuanIndex.id);
                this.picData.append("PicURL", 'img');
                let data = this.picData
                axios
                    .request({
                        url: "/RRMonitorGroup/UpdateRRMonitorGroupImg",
                        data,
                        method: "post",
                    })
                    .then(
                        (res) => {
                            if (res.data.Check) {
                            } else {
                            }
                        },
                        (res) => {
                            console.log(res);
                        }
                    );

            }
            this.editModalWidth = 600;
            // this.defaultImg=require("../../assets/images/constom-page/defaultpic.png")
            this.getZXList();
        },
        editCancel() {
            // console.log('aaa',this.zixuanIndex);
            if (this.editContent === true) {
                this.editModal = false;
            }
            if (this.editImg === true) {
                // console.log(this.zixuanIndex);
                this.defaultImg = this.zixuanIndex.PicURL
                // this.defaultImg = this.originalImg
                this.editImg = false;
                this.editContent = true;
                this.editModal = true;
            }
            this.editModalWidth = 600;
        },
        //上传图片
        getPicture(e) {
            let fileData = document.querySelector('#file').files[0];
            this.picData = new FormData();
            this.picData.append("file", fileData); // 文件
            var reader = new FileReader();
            reader.onload = (e) => {
                let data = e.target.result;
                this.defaultImg = data;
            };
            reader.readAsDataURL(e.target.files[0]);
        },

        //打开成员编辑
        member() {
            // console.log(this.menberIndex);
            this.$store.commit("getMemberIndex", this.menberIndex);
            // this.$router.push('/memberEdit')
            this.memberModal = true
        },
        //组合监测
        goMonitoring(type, index) {
            localStorage.setItem('jianceTypeIndex', type)
            localStorage.setItem('jianceTypeChiIndex', index)
            // this.$router.push('/monitoring')
            this.zixuandetail = true
        },
        // goMonitoring1(item) {
        //   localStorage.setItem('jianceTypeIndex', 1)
        //   if (item.target.innerText.indexOf('新闻监测') > -1) {

        //     localStorage.setItem('jianceTypeChiIndex', 0)
        //   }
        //   if (item.target.innerText.indexOf('风险') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 0)
        //   } if (item.target.innerText.indexOf('警示') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 1)
        //   } if (item.target.innerText.indexOf('提示') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 2)
        //   } if (item.target.innerText.indexOf('利好') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 3)
        //   }
        //   // console.log('存储', localStorage.getItem('jianceTypeIndex'), localStorage.getItem('jianceTypeChiIndex'));
        //   this.zixuandetail = true

        //   // this.$router.push('/monitoring')
        // },
        // goMonitoring2(item) {
        //   localStorage.setItem('jianceTypeIndex', 2)
        //   if (item.target.innerText.indexOf('公告监测') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 0)
        //   }
        //   if (item.target.innerText.indexOf('风险') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 0)
        //   } if (item.target.innerText.indexOf('警示') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 1)
        //   } if (item.target.innerText.indexOf('提示') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 2)
        //   } if (item.target.innerText.indexOf('利好') > -1) {
        //     localStorage.setItem('jianceTypeChiIndex', 3)
        //   }
        //   this.zixuandetail = true
        //   // console.log('存储', localStorage.getItem('jianceTypeIndex'), localStorage.getItem('jianceTypeChiIndex'));
        //   // this.$router.push('/monitoring')
        // }

    },
    beforeCreate() { }, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {


    },
    beforeMount() { }, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        // $('.datachooseLi').eq(0).css({"background-color":"#00A0E9","color":"#FFFFFF"}).siblings().css({"background-color":"#fff","color":"#515A6E"});
        this.getTimeScope()
        let myDate = new Date();
        this.date = myDate.toLocaleDateString();
        this.addDate = "自选组合" + myDate.toLocaleDateString();
        this.getZXList();
        localStorage.setItem('dateIndex', JSON.stringify({ name: '24H', num: 1 }))
        this.getAlarmInfo()
        console.log(this.startTime);
    },
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
body {
    overflow: auto;
}

header {
    width: 100%;
    height: 60px;
    background: #00A0E9;

    img {
        height: 45px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 20px;
    }
}

.pointer,
a {
    cursor: pointer;

}

.activeDate {
    color: #FFFFFF;
    background: #00A0E9;
    // background: rgba(0, 160, 230, 1);

}

.zxList {
    background: rgba(111, 154, 205, 0.2);

    .groupName {
        font-weight: 600;

    }
}

.createZuhe {
    width: 100%;

    .title {
        font-size: 25px;
        font-weight: 500;
        margin: 50px 0;
        text-align: center;
    }

    img {
        width: 150px;
        height: 150px;
        margin-left: ~"calc(50% - 75px)";
        border-radius: 10px;

    }

    .zixunNull {
        .ivu-modal-wrap {
            display: none;
        }
    }

    .createZuheInp {
        margin-left: ~"calc(50% - 250px)";
    }

    .create {
        width: 500px;
        margin: 20px auto;
        height: 40px;
        line-height: 40px;
        background-color: #00A0E9;
        border-radius: 2px;
        color: #ffffff;
        text-align: center;
    }
}

.zixuan {
    .activeAll {
        background-color: #0171f6;
        color: #ecf4ff;
    }

    width: 100%;
    height: 100vh;
    padding-bottom: 60px;
    overflow-y:auto; ;

    .left {
        width: 100%;


        .title {
            text-align: left;
            padding: 20px 20px 10px 20px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solod #eee;

            span:nth-child(1) {
                display: inline-block;
                font-size: 16px;
                color: #333333;
                letter-spacing: 0;
            }

            span:nth-child(2) {
                display: inline-block;

                font-size: 14px;
                color: #00A0E9;
                letter-spacing: 0;
            }
        }

        ul {
            margin-top: -10px;

            li {
                width: 100%;
                height: 60px;
                // background-color: #ecf4ff;
                display: flex;
                margin: 5px 0;
                padding-left: 10px;


                // justify-content: space-around;
                img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin: auto 10px;
                }

                .rightTit {
                    width: calc(~"100% - 40px");
                    padding-right: 20px;
                    font-size: 14px;
                    line-height: 30px;
                    text-align: left;
                    line-height: 60px;

                    color: #333333;
                    letter-spacing: 0;

                }
            }

            li:hover {
                font-weight: 600;
                background: rgba(111, 154, 205, 0.2);
            }
        }
    }

    .right {
        // width: ~'calc(100% - 250px)';
        // min-width: 1000px;
        // min-height: ~'calc( 100vh - 102px)';
        background: #fff;
        padding: 10px 20px 0 20px;

        // height: 100vh;
        // border-left: 1px solid black;
        .header {
            // width: 1000px;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            margin-left: 10px;

            .title {
                width: 600px;
                display: flex;

                // font-size: 18px;
                // justify-content:space-around;
                img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin: 5px 5px 0 0;
                }
            }
        }

        .jiance {
            height: 40px;
            line-height: 40px;
            // display: flex;
            // justify-content: space-between;
            // margin: 20px 0;

            .title {
                margin-left: 10px;
                display: flex;
                font-size: 16px;

                span:nth-child(1) {
                    display: inline-block;
                    width: 5px;
                    height: 15px;
                    background-color: #0171f6;
                    position: relative;
                    top: 2px;
                    // margin-right: 5px;

                }
            }

            .datachoose {
                display: flex;

                li {
                    padding: 0 10px;
                    font-size: 14px;
                    letter-spacing: 0;
                    border-radius: 4px;
                    border-radius: 4px;
                    cursor: pointer;
                }

                // .datachooseLi:hover {
                //   color: #00A0E9;
                //   background: #FFFFFF;

                // }
            }
        }

        .subscription {
            margin: 10px 0 10px 10px;
            width: 990px;
            line-height: 30px;
            height: 30px;
            background: #EDF5FE;
            display: flex;
            justify-content: space-between;
            border-top-left-radius: 15px;
            border-bottom-right-radius: 15px;

        }

        .jiance_content {

            padding-top: 20px;
            border-radius: 5px;
            display: flex;
           flex-wrap: wrap;

            // .separation {
            //     width: 1px;
            //     height: 60px;
            //     background-color: #c25c1c;
            //     margin: 0 20px;
            // }

            .item {
                width: 100%;
                height: 240px;
                background-color: #F5F5FF;
                display: flex;
                border-radius: 10px;
                margin-bottom: 10px;

                .jianceTit {
                    width: 30%;
                    text-align: center;

                    div:nth-child(1) {
                        height: 56px;
                        font-size: 40px;
                        color: #00A0E9;
                        position: relative;
                        top: 80px;

                    }

                    div:nth-child(2) {
                        font-size: 16px;
                        color: #00A0E9;
                        position: relative;
                        top: 80px;
                        height: 22px;

                    }

                }

                ul {
                    width: 70%;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    li {
                        width: 50%;
                        margin: 5px 0;


                        div {
                            margin-left: 0;
                            width: 50%;
                            text-align: center;
                            position: relative;
                            top: 26px;
                        }

                        div:nth-child(1) {
                            height: 56px;
                            font-size: 40px;
                        }

                        div:nth-child(2) {
                            height: 22px;
                            font-size: 16px;
                            color: #333333;
                        }


                        cursor: pointer;
                    }

                    li:nth-child(1) {
                        div:nth-child(1) {
                            color: #C7000B;
                        }
                    }

                    li:nth-child(2) {
                        div:nth-child(1) {
                            color: #F67B3B;

                        }
                    }

                    li:nth-child(3) {
                        div:nth-child(1) {
                            color: #888686;
                        }
                    }

                    li:nth-child(4) {
                        div:nth-child(1) {
                            color: #4DE265;
                        }
                    }

                    li:hover {
                        color: #2D8CF2;
                    }
                }
            }

            .item:hover {
                box-shadow: 0 0 10px 0 #F6F5F5;
            }
        }

        .dynamic {
            width: 1000px;
            margin: 10px 0 0 10px;

            .title {
                width: 20%;
                font-size: 18px;
                text-align: left;

                span {
                    display: inline-block;
                    width: 5px;
                    height: 15px;
                    background-color: #0171f6;
                }
            }

            .data {
                width: 100%;
                height: 30px;
                line-height: 30px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid rgb(230, 212, 212);

                ul {
                    display: flex;

                    li {
                        padding: 0 10px;
                    }
                }

                .dateChoose {
                    flex-direction: column;
                    padding: 10px;
                    background-color: #ffffff;
                    box-shadow: 0px 0px 1px 1px;
                    border-color: #ffffff;
                    position: relative;
                    z-index: 100;
                }
            }
        }

        .main {
            width: 1000px;
            margin: 20px 0 0 10px;
            border: 1px solid #ebf1fc;

            // dataList: [ {
            //     date: 刚刚, title: '11111', aboutCom: '1111111111', label: '11111', from: '1111'
            // }]

            li {
                display: flex;
                justify-content: space-between;
                height: 40px;
                line-height: 40px;
            }

            div {
                text-align: left;
                margin: 0 5px;
            }

            .getDate {
                width: 100px;
            }

            .title {
                width: 300px;
            }

            .title:hover {
                color: blueviolet;
            }

            .aboutCom {
                width: 100px;
                color: #0171f6;
            }

            .aboutComTit {
                width: 100px;
            }

            .aboutCom:hover {
                text-decoration: underline;
            }

            .lable {
                width: 100px;
            }

            .from {
                width: 150px;
            }

            .liList:hover {
                // background-color: rgba($color: #959799, $alpha: 0.1);
                background-color: #959799;
            }
        }
    }
}

.edit {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left {
        width: 110px;
        padding-right: 10px;

        img {
            width: 100px;
            height: 100px;
        }

        .changeImg {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin: 10px auto;
            text-align: center;
            border: 1px solid #959799;
            color: #959799;
            border-radius: 15px;
        }
    }

    .right {
        li {
            display: flex;

            div {
                width: 70px;
                // height: 30px;
                // line-height: 30px;
                // text-align: right;
            }
        }
    }
}

.uploadImg {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left {
        width: 150px;

        .chooseImg {
            width: 150px;
            height: 30px;
            border: 1px solid #57A3F3;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
        }

        .imgShow {
            width: 150px;
            height: 150px;
            margin: 10px 0;
            // background-color: rgba($color: #161515, $alpha: 0.1);
            background-color: #161515;

            img {
                width: 150px;
                height: 150px;
            }
        }
    }

    .right {
        width: 100px;
        margin-top: 45px;

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        div {
            width: 100px;
            text-align: center;
        }
    }
}

.editFooter {
    width: 90%;
    height: 40px;
    line-height: 40px;
    float: right;
    display: flex;
}

.tz {
    //这个关键
    height: 40px;
    font-family: SourceHanSansSC-Regular;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 40px;
    letter-spacing: 0vw;
    // color: #00ffff;
    //这个关键
    overflow: hidden;
    border: none;
}

.anim {
    transition: all 0.5s;
    margin-top: -30px;
    border: none;
}

#con1 li {
    list-style: none;
    // line-height: 2vw;
    //这个也是关键
    height: 40px;
    line-height: 40px;
    border: none;
}

.Subscribed {
    margin-right: 10px;
    padding: 0 5px;
    border: 1px solid #EFEFEF;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;

}
</style>
  

 src/view/login/login.vue

@@ -287,9 +287,18 @@
                      })
                    } else {
                      // this.$store.commit('setMainTag', 'login')
                      this.$router.push({
                        name: this.$config.homeName
                      })
                      const userAgent = navigator.userAgent;
                      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

                        this.$router.push({
                          name: 'customPhone'
                        })
                      } else {
                        this.$router.push({
                          name: this.$config.homeName
                        })
                      }

                    }
                    resolve(data)
                  } else {
@@ -489,18 +498,34 @@
            // this.$router.push({
            //   name: 'accountManagement_s'
            // })
            this.$router.push({
              name: this.$config.homeName
            })
            const userAgent = navigator.userAgent;
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

              this.$router.push({
                name: 'customPhone'
              })
            } else {
              this.$router.push({
                name: this.$config.homeName
              })
            }
            // this.$router.push('/customPage')
            // this.$router.push({
            //   name: 'accountManagement_s'
            // })
          } else if (res.Data.access.indexOf('company_admin') > -1) {
            // this.$store.commit('setMainTag', 'AccountManagement')
            this.$router.push({
              name: this.$config.homeName
            })
            const userAgent = navigator.userAgent;
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

              this.$router.push({
                name: 'customPhone'
              })
            } else {
              this.$router.push({
                name: this.$config.homeName
              })
            }
            // this.$router.push({
            //   name: 'accountManagement'
            // })
@@ -512,9 +537,17 @@
            //   })
            // this.$router.push('/customPage')

            this.$router.push({
              name: this.$config.homeName
            })
            const userAgent = navigator.userAgent;
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

              this.$router.push({
                name: 'customPhone'
              })
            } else {
              this.$router.push({
                name: this.$config.homeName
              })
            }
          }
        })
      }, res => {
@@ -608,18 +641,34 @@
            // this.$router.push({
            //   name: 'accountManagement_s'
            // })
            this.$router.push({
              name: this.$config.homeName
            })
            const userAgent = navigator.userAgent;
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

              this.$router.push({
                name: 'customPhone'
              })
            } else {
              this.$router.push({
                name: this.$config.homeName
              })
            }
            // this.$router.push('/customPage')
            // this.$router.push({
            //   name: 'accountManagement_s'
            // })
          } else if (res.Data.access.indexOf('company_admin') > -1) {
            // this.$store.commit('setMainTag', 'AccountManagement')
            this.$router.push({
              name: this.$config.homeName
            })
            const userAgent = navigator.userAgent;
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

              this.$router.push({
                name: 'customPhone'
              })
            } else {
              this.$router.push({
                name: this.$config.homeName
              })
            }
            // this.$router.push({
            //   name: 'accountManagement'
            // })
@@ -631,9 +680,17 @@
            //   })
            // this.$router.push('/customPage')

            this.$router.push({
              name: this.$config.homeName
            })
            const userAgent = navigator.userAgent;
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {

              this.$router.push({
                name: 'customPhone'
              })
            } else {
              this.$router.push({
                name: this.$config.homeName
              })
            }
          }
        })
        //   } else {