Newer
Older
operation_web / src / components / index.vue
@raoxianxuan raoxianxuan on 23 Jan 2021 18 KB bug
<template>
  <div id="IndexTop" :class="{ indexbgc: !flag }">
    <el-container style="height: 100%">
      <el-header height="40px">
        <img
          src="../../static/img/indexTop1.png"
          id="IndexTop1"
          @click="MenuSHOW()"
          style="cursor: pointer"
        />
        <img src="../../static/img/logo.png" alt id="IndexLogo" />
        <span id="projectName">工程作业及监控系统</span>
        <img
          src="../../static/img/indexTop5.png"
          title="注销"
          id="IndexLetout"
          style="cursor: pointer"
          @click="ZhuXIao()"
        />
        <img
          src="../../static/img/indexTop4.png"
          title="全屏"
          id="IndexQuanpin"
          style="cursor: pointer"
        />
        <img
          src="../../static/img/indexTop3.png"
          title="消息"
          id="IndexMessage"
          style="cursor: pointer"
        />

        <!-- <el-dropdown id="UserName">
          <span>
            {{ LoginName }}
            <i class="el-icon-arrow-down el-icon--right" style="color:#fff"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
        <el-dropdown class="dropdown" trigger="click" @command="handleCommand">
          <div class="user-account">
            <span class="txt">{{ LoginName }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in dropdownList"
              :key="index"
              :command="item.command"
            >
              {{ item.key }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="ChangeBGC" @click="ChangeBGC()">换肤</div>
      </el-header>
      <el-container style="height: calc(100% - 40px)">
        <el-aside :style="'width:' + MenuWidth + 'px'">
          <el-menu
            :default-active="$route.path"
            unique-opened
            class="el-menu-vertical-demo"
            @select="MenuClick"
            :router="true"
            text-color="white"
            active-text-color="#e8d523"
          >
            <el-menu-item index="/overview" v-show="false">
              <i class="el-icon-menu"></i>
              <span slot="title">概&nbsp;&nbsp;&nbsp;&nbsp;览</span>
            </el-menu-item>
            <el-submenu index="2" v-has="'m1-1'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>站点状况预览图</span>
              </template>
              <el-menu-item index="/site/previewOfSiteStatus" v-has="'m1-1'"
                >站点状况预览图</el-menu-item
              >
            </el-submenu>
            <el-menu-item index="/newFiber/NewFiberSearch" v-has="'m2'">
              <i class="el-icon-menu"></i>
              <span slot="title">新烽查询</span>
            </el-menu-item>
            <el-submenu index="4" v-has="'m3'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>报警预警</span>
              </template>
              <el-menu-item index="/configure/AlarmConfiguration" v-has="'m3-1'"
                >报警配置</el-menu-item
              >
              <el-menu-item index="/configure/PushRules" v-has="'m3-2'"
                >推送规则</el-menu-item
              >
              <el-menu-item index="/configure/AlarmLog" v-has="'m3-3'"
                >报警日志</el-menu-item
              >
              <el-menu-item
                index="/configure/PatrolConfiguration"
                v-has="'m3-4'"
                >巡检配置</el-menu-item
              >
            </el-submenu>
            <el-submenu index="13" v-has="'m11'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>项目及站点配置</span>
              </template>
              <el-menu-item index="/ConfigManager/project" v-has="'m11-1'"
                >项目设置</el-menu-item
              >
              <el-menu-item
                index="/ConfigManager/SiteManagement"
                v-has="'m11-2'"
                >站点管理</el-menu-item
              >
              <el-menu-item index="/ConfigManager/device" v-has="'m11-3'"
                >设备管理</el-menu-item
              >
              <el-menu-item index="/ConfigManager/factor" v-has="'m11-4'"
                >因子管理</el-menu-item
              >
              <el-menu-item index="/ConfigManager/RtuConfig" v-has="'m11-5'"
                >RTU配置</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5" v-has="'m4'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>消息管理</span>
              </template>
              <el-menu-item
                index="/MessageManagement/MessageQuery"
                v-has="'m4-1'"
                >消息查询</el-menu-item
              >
              <el-menu-item
                index="/MessageManagement/MessageStatistics"
                v-has="'m4-2'"
                >消息统计</el-menu-item
              >
            </el-submenu>
            <el-submenu index="6" v-has="'m5'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>数据分析</span>
              </template>
              <el-menu-item index="/DataAnalysis/dataScreening" v-has="'m5-1'"
                >数据总览</el-menu-item
              >
              <el-menu-item
                index="/DataAnalysis/StatisticalReport"
                v-has="'m5-2'"
                >统计报表</el-menu-item
              >
            </el-submenu>
            <el-submenu index="12" v-has="'m12'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>服务监控</span>
              </template>
              <el-menu-item index="/ServiceWatch/serverManage" v-has="'m12-1'"
                >服务器管理</el-menu-item
              >
            </el-submenu>
            <el-submenu index="8" v-has="'m7'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>工程作业</span>
              </template>
              <el-menu-item index="/Engineering/Nowfault" v-has="'m7-1'"
                >站点实时故障数据</el-menu-item
              >
              <el-menu-item index="/Engineering/HistoricalFault" v-has="'m7-2'"
                >站点历史故障数据</el-menu-item
              >
              <el-menu-item index="/Engineering/MyHomework" v-has="'m7-3'"
                >我的作业</el-menu-item
              >
            </el-submenu>
            <el-submenu index="9" v-has="'m8'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>LED显示屏管理</span>
              </template>
              <el-menu-item index="/LED/LEDConfig" v-has="'m8'"
                >LED设备信息</el-menu-item
              >
            </el-submenu>
            <el-submenu index="10" v-has="'m9'">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/sys/user" v-has="'m9-1'"
                >用户管理</el-menu-item
              >
              <el-menu-item index="/sys/org" v-has="'m9-2'"
                >组织管理</el-menu-item
              >
              <el-menu-item index="/sys/role" v-has="'m9-3'"
                >角色管理</el-menu-item
              >
              <el-menu-item index="/sys/menu" v-has="'m9-4'"
                >菜单管理</el-menu-item
              >
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main style="height: 100%">
          <router-view
            id="ContentView"
            :userId="userId"
            :flag="flag"
            ref="PathView"
          ></router-view>
        </el-main>
      </el-container>
    </el-container>
    <page-dialog
      :title="dialogInfo.title[dialogInfo.type]"
      :visible.sync="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
      @handleClick="handleClick"
    >
      <page-form
        :ref-obj.sync="formInfo.ref"
        :data="formInfo.data"
        :rules="formInfo.rules"
        :field-list="formInfo.fieldList"
        :label-width="formInfo.labelWidth"
        @handleClick="handleClick"
      />
    </page-dialog>
  </div>
</template>
<script>
import { message } from "./../util/item";
import * as locasto from "./../util/item";
export default {
  name: "IndexTop",
  data: function () {
    return {
      MenuWidth: 200,
      LoginName: "系统管理员", //登录用户名称
      userId: "",
      flag: true,
      dropdownList: [{ key: "修改密码", command: "updatePw" }],
      //弹窗相关
      dialogInfo: {
        title: {
          updatePw: "修改密码",
        },
        visible: false,
        btLoading: false,
        width: "500px",
        type: "",
        btList: [
          { label: "关闭", type: "", icon: "", event: "close", show: true },
          {
            label: "保存",
            type: "primary",
            icon: "",
            event: "save",
            show: true,
            loading: true,
          },
        ],
      },
      //表单相关
      formInfo: {
        ref: null,
        data: {
          userNo: "", //账户
          password: "", //原始密码
          newpassword: "", //新密码
        },
        fieldList: [
          {
            label: "账户",
            value: "userNo",
            disabled: true,
            type: "input",
            required: true,
            className: "el-form-block",
          },
          {
            label: "原密码",
            value: "password",
            type: "password",
            required: true,
            className: "el-form-block",
          },
          {
            label: "新密码",
            value: "newpassword",
            type: "password",
            required: true,
            className: "el-form-block",
          },
        ],
        rules: {},
        labelWidth: "100px",
      },
    };
  },
  watch: {
    "dialogInfo.visible"(val) {
      let formInfo = this.formInfo;
      if (!val) {
        if (formInfo.ref) {
          formInfo.ref.resetFields();
        }
        this.resetForm();
        this.dialogInfo.btLoading = false;
      }
    },
  },
  methods: {
    MenuSHOW: function () {
      if (this.MenuWidth == 200) {
        this.MenuWidth = 0;
      } else {
        this.MenuWidth = 200;
      }
    },
    MenuClick(key, keyPath) {
      // console.log(key, keyPath);
    },
    ChangeBGC() {
      // 给予gis的方法调用demo  A
      this.$refs["PathView"].REFSFunctionToGis(this.flag);
      // 给予gis的方法调用demo  E

      console.log(9999);
      let root = document.querySelector(":root");
      if (this.flag) {
        root.style.setProperty("--color", "rgb(253, 44, 79)");
        root.style.setProperty("--tablehover", "rgb(255,255,255)");
        root.style.setProperty("--white", "rgb(0,0,0)");
        root.style.setProperty("--tablethead", "rgb(206, 223, 255)");
        root.style.setProperty("--tablebody", "rgb(193, 213, 248)");
        root.style.setProperty("--elhead", "rgb(6, 92, 255)");
        root.style.setProperty("--elaside", "rgb(187, 209, 246)");
        root.style.setProperty("--black", "rgb(255, 255, 255)");
        root.style.setProperty("--elmenuitem", "rgb(255, 255, 255)");
        root.style.setProperty(
          "--lineargradient",
          "-webkit-linear-gradient(0deg, #065cfd, #bbd1f6 80%)"
        );
        root.style.setProperty(
          "--elmentitemtwo",
          "-webkit-linear-gradient(0deg, #5779b8, #a7c0ea 80%)"
        );
        root.style.setProperty("--elicon", "rgb(255,255,255)");
        root.style.setProperty("--preSiteTitle", "rgb(207, 223, 255)");
        root.style.setProperty("--preSiteCentent", "rgb(193, 213, 248)");
        root.style.setProperty("--pretextbg", "rgb(6, 92, 255)");
        root.style.setProperty("--preTopDatatxt", "rgb(39, 71, 217)");
        root.style.setProperty("--eldatebefore", "rgb(0, 119, 255)");
        root.style.setProperty("--bluetowhite", "rgb(255, 255, 255)");
        root.style.setProperty("--yellow", "rgb(0, 120, 254)");
        root.style.setProperty("--lighgreen", "rgb(0, 0, 0");
        root.style.setProperty("--digtext", "rgb(0, 0, 0)");
        root.style.setProperty("--diatitle", "rgb(0, 119, 254)");
        root.style.setProperty("--selected", "#333333");
        root.style.setProperty("--selecthover", "#dbecff");
        root.style.setProperty("--selectlist", "#f4f8ff");
        root.style.setProperty("--shouselect", "#f4f8ff");
        root.style.setProperty("--elmentbgc", "rgb(193, 213, 248)");
        root.style.setProperty("--diagiobgc", "rgb(206, 223, 255)");
        root.style.setProperty("--innerbgc", "rgb(255, 255, 255)");
        root.style.setProperty("--xfcxcolor", "#263f66");
        root.style.setProperty("--xfcxborder", "#bacdee");
        root.style.setProperty("--xfcxmegbgc", "#cee0ff");
        root.style.setProperty("--xfcxbgc", "#c0d5f8");
        root.style.setProperty("--elinputdisabled", "transparent");
        root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)");

        this.flag = false;
        // ---------------------分界线----------------------------------//
      } else {
        root.style.setProperty("--color", "rgb(255, 255, 255)");
        root.style.setProperty("--tablehover", "rgb(4, 51, 52)");
        root.style.setProperty("--white", "rgb(255,255,255)");
        root.style.setProperty("--tablethead", "transparent");
        root.style.setProperty("--tablebody", "transparent");
        root.style.setProperty("--elhead", "rgb(5, 4, 9)");
        root.style.setProperty("--elaside", "rgb(5, 4, 9)");
        root.style.setProperty("--black", "rgb(0, 0, 0)");
        root.style.setProperty("--elmenuitem", "rgb(58, 58, 60)");
        root.style.setProperty(
          "--lineargradient",
          "-webkit-linear-gradient(transparent)"
        );
        root.style.setProperty(
          "--elmentitemtwo",
          "-webkit-linear-gradient(transparent)"
        );
        root.style.setProperty("--elicon", "");
        root.style.setProperty("--preSiteTitle", "rgba(25, 26, 28)");
        root.style.setProperty("--preSiteCentent", "transparent");
        root.style.setProperty("--pretextbg", "transparent");
        root.style.setProperty("--preTopDatatxt", "rgb(255, 217, 0)");
        root.style.setProperty("--eldatebefore", "rgb(255, 255, 255)");
        root.style.setProperty("--bluetowhite", "rgb(0, 119, 254)");
        root.style.setProperty("--yellow", "rgb(255, 255, 0)");
        root.style.setProperty("--lighgreen", "rgb(127, 255, 0)");
        root.style.setProperty("--digtext", "rgb(96, 98, 102)");
        root.style.setProperty("--diatitle", "rgb(0, 255, 255)");
        root.style.setProperty("--selected", "rgb(239, 226, 1)");
        root.style.setProperty("--selecthover", "rgb(4, 51, 52)");
        root.style.setProperty("--selectlist", "transparent");
        root.style.setProperty("--shouselect", "rgb(60, 57, 57)");
        root.style.setProperty("--elmentbgc", "rgb(58, 58, 60)");
        root.style.setProperty("--diagiobgc", "rgb(0, 0, 0)");
        root.style.setProperty("--innerbgc", "transparent");
        root.style.setProperty("--xfcxcolor", "#fff");
        root.style.setProperty("--xfcxborder", "#213b55");
        root.style.setProperty("--xfcxmegbgc", "#152535");
        root.style.setProperty("--xfcxbgc", "#050c16");
        root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)");
        root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)");

        this.flag = true;
      }
    },
    ZhuXIao() {
      this.$router.push({ path: "/Login" });
      sessionStorage.clear();
    },
    // 初始化验证
    initRules() {
      let formInfo = this.formInfo;
      formInfo.rules = this.$initRules(formInfo.fieldList);
    },
    handleCommand(command) {
      const dialogInfo = this.dialogInfo;
      const formInfo = this.formInfo;
      switch (command) {
        //修改密码
        case "updatePw":
          dialogInfo.type = command;
          dialogInfo.visible = true;
          this.formInfo.data.userNo = localStorage.getItem("USERNO");
          break;
      }
    },
    //点击事件
    handleClick(event, data) {
      const formInfo = this.formInfo;
      const dialogInfo = this.dialogInfo;
      switch (event) {
        //保存
        case "save":
          formInfo.ref.validate((valid) => {
            if (valid) {
              let api;
              let params = formInfo.data;
              dialogInfo.btLoading = true;
              this.$http
                .post(this.nozzle.updateUserPwd, { data: params })
                .then((res) => {
                  dialogInfo.btLoading = false;
                  if (res.data.code === 1) {
                    dialogInfo.visible = false;
                  }
                  this.$message({
                    message: res.data.msg,
                    type: res.data.code === 1 ? "success" : "error",
                    showClose: true,
                  });
                })
                .catch((e) => {
                  dialogInfo.btLoading = false;
                  console.log(e);
                });
            }
          });
          break;
        //关闭
        case "close":
          dialogInfo.visible = false;
          break;
      }
    },
    //重置表单
    resetForm() {
      this.formInfo.data = {
        userNo: "", //账户
        password: "", //原始密码
        newpassword: "", //新密码
      };
    },
  },
  mounted: function () {
    //添加菜单
    // this.LoadMenu();
    // this.loadLoginName();
    this.initRules();
    this.LoginName = locasto.getItem("USERName");
  },
};
</script>
<style lang="scss" scoped>
#IndexTop {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../../static/img/BGIMG.jpg") 100% 100%;
}
.indexbgc {
  background: url("../../static/img/bg_img.png") 100% 100% !important;
}

.el-icon-arrow-down {
  font-size: 12px;
}
/deep/.el-icon-arrow-down el-icon--right {
  color: #fff !important;
}
.dropdown {
  float: right;
  @include sc(16px, #fff);
  cursor: pointer;
}
</style>