学校-设备管理查看策略

src/api/stPad.js

  * 6.1.10 平板策略-个人策略
  */
 export const stPad_list_user = (data) => setRequest("stPad/list_user", data);
+/**
+ * 平板策略-个人策略（网页端）
+ */
+export const stPad_detail_web = (data) => setRequest("stPad/detail_web", data);
 /**
  * 6.1.11 平板策略-平板用户
  */

src/utils/index.js

   5: "重启设备",
   6: "恢复出厂"
 };
+export const padDeviceIcon = [
+  {
+    pdtype: "摄像头",
+    icon: "ivu-icon iconfont icon-ball-camera"
+  },
+  {
+    pdtype: "蓝牙",
+    icon: "ivu-icon iconfont icon-lanya"
+  },
+  {
+    pdtype: "USB连接",
+    icon: "ivu-icon iconfont icon-USB"
+  },
+  {
+    pdtype: "Wi-Fi开关",
+    icon: "ivu-icon iconfont icon-bx-wifi-2"
+  },
+  {
+    pdtype: "电话短信",
+    icon: "ivu-icon iconfont icon-dianhuaduanxin_line"
+  },
+  {
+    pdtype: "数据流量",
+    icon: "ivu-icon iconfont icon-liuliang"
+  },
+  {
+    pdtype: "GPS",
+    icon: "ivu-icon iconfont icon-GPSxinxi"
+  },
+  {
+    pdtype: "Wi-Fi高级选项",
+    icon: "ivu-icon iconfont icon-wifiguanbi"
+  },
+  {
+    pdtype: "SD卡",
+    icon: "ivu-icon iconfont icon-sdka-09"
+  },
+  {
+    pdtype: "OTG",
+    icon: "ivu-icon iconfont icon-icon-OTG"
+  }
+];
+export const padViolatesInfo = [
+  {
+    title: "已ROOT",
+    violateType: 1
+  },
+  {
+    title: "安装非商店应用",
+    violateType: 2
+  },
+  {
+    title: "更换SIM卡",
+    violateType: 3
+  },
+  {
+    title: "USB连接电脑",
+    violateType: 4
+  }
+];

src/views/schoolSection/deviceManage/deviceManage.vue

         <Button @click="devicePswInfo.show = false">关闭</Button>
       </div>
     </Modal>
+    <Modal
+      class="modal5"
+      :mask-closable="false"
+      v-model="strategyInfo.show"
+      :title="`策略【${strategyInfo.username}】`"
+    >
+      <div class="content" v-if="strategyInfo.show">
+        <div class="strategy_list">
+          <div class="strategy_title">
+            <div>
+              <span
+                style="font-size: 26px"
+                class="ivu-icon iconfont icon-shijian"
+              ></span
+              >时间限制策略
+            </div>
+          </div>
+          <div style="margin-bottom: 10px" v-if="strategyInfo.hastime">
+            <div class="showtime">
+              <div
+                style="line-height: 30px; font-size: 16px; margin-bottom: 10px"
+              >
+                设备生效时间
+              </div>
+              <div class="week">
+                <div class="day" v-for="item in weekDay" :key="item.value">
+                  <div class="day_title">{{ item.alias }}</div>
+                  <div class="day_content">
+                    <div
+                      class="time"
+                      v-for="(sItem, sIndex) in strategyPadTimes(item.value)"
+                      :key="sIndex"
+                    >
+                      {{ sItem.starttime }} - {{ sItem.stoptime }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="nodata" v-else>未设置时间限制策略</div>
+        </div>
+        <div class="strategy_list">
+          <div class="strategy_title">
+            <div>
+              <span class="ivu-icon iconfont icon-yingyongcelve"></span>应用策略
+            </div>
+          </div>
+          <div class="strategy_content" v-if="strategyInfo.hasapp">
+            <div class="strategy_top">
+              <span>授权应用</span>
+            </div>
+            <div
+              class="strategy_bottom"
+              style="min-height: 160px"
+              v-if="strategyInfo.padApps.length > 0"
+            >
+              <div
+                class="app_list"
+                v-for="item in strategyInfo.padApps"
+                :key="item.appid"
+              >
+                <img :src="$api.baseImageUrl + item.appIcon" />
+                <div>{{ item.appName }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="nodata" v-else>未设置应用策略</div>
+        </div>
+        <div class="strategy_list">
+          <div class="strategy_title">
+            <div>
+              <span class="ivu-icon iconfont icon-shezhi"></span>设备策略
+            </div>
+          </div>
+          <div class="strategy_content" v-if="strategyInfo.hasdevice">
+            <div class="strategy_top">
+              <span>设备功能管理</span>
+            </div>
+            <div class="strategy_bottom" style="min-height: 160px">
+              <div
+                class="device_list"
+                v-for="item in padDeviceIcon"
+                :key="item.pdtype"
+              >
+                <div class="icon">
+                  <span :class="[item.icon]"></span>
+                </div>
+                <div class="title">{{ item.pdtype }}</div>
+                <i-switch
+                  size="large"
+                  :value="strategyInfo.pdtypeInfo[item.pdtype]"
+                  :disabled="true"
+                  :true-value="1"
+                  :false-value="2"
+                >
+                  <span slot="open">开启</span>
+                  <span slot="close">关闭</span>
+                </i-switch>
+              </div>
+            </div>
+          </div>
+          <div class="nodata" v-else>未设置设备策略</div>
+        </div>
+        <div class="strategy_list">
+          <div class="strategy_title">
+            <div>
+              <span
+                style="font-size: 18px"
+                class="ivu-icon iconfont icon-wifi"
+              ></span
+              >Wifi白名单策略
+            </div>
+          </div>
+          <div class="strategy_content" v-if="strategyInfo.haswifi">
+            <div class="strategy_top">
+              <span>SSID</span>
+            </div>
+            <div class="strategy_bottom" style="min-height: 76px">
+              <div
+                class="padWifis"
+                v-for="(item, index) in strategyInfo.padWifis"
+                :key="index"
+              >
+                <div class="title">{{ item }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="nodata" v-else>未设置Wifi白名单</div>
+        </div>
+        <div class="strategy_list">
+          <div class="strategy_title">
+            <div>
+              <span class="ivu-icon iconfont icon-weiguiguanli"></span>违规处理
+            </div>
+          </div>
+          <div style="border: 1px solid #ced9f2; border-bottom: none">
+            <Table
+              v-if="strategyInfo.hasviolate"
+              class="table"
+              :columns="violationColumns"
+              :data="padViolatesInfo"
+            >
+              <template slot-scope="{ row }" slot="violationEvents">
+                <Checkbox
+                  :disabled="true"
+                  class="checked"
+                  :value="
+                    strategyInfo.violatesInfo[row.violateType] &&
+                    strategyInfo.violatesInfo[row.violateType].length > 0
+                  "
+                ></Checkbox>
+                <span
+                  style="display: inline-block; width: 120px; text-align: left"
+                  >{{ row.title }}</span
+                >
+              </template>
+              <template slot-scope="{ row }" slot="violationHandling">
+                <CheckboxGroup
+                  :value="
+                    strategyInfo.violatesInfo[row.violateType] &&
+                    strategyInfo.violatesInfo[row.violateType]
+                  "
+                >
+                  <Checkbox :disabled="true" label="通知管理员"></Checkbox>
+                  <Checkbox
+                    :disabled="true"
+                    style="margin: 0 40px"
+                    label="限制使用"
+                  ></Checkbox>
+                  <Checkbox :disabled="true" label="恢复出厂设置"></Checkbox>
+                </CheckboxGroup>
+              </template>
+            </Table>
+          </div>
+          <div class="nodata" v-if="!strategyInfo.hasviolate">
+            未设置违规处理
+          </div>
+        </div>
+      </div>
+      <div slot="footer" style="text-align: center">
+        <Button @click="strategyInfo.show = false">关闭</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
   device_manager_export_id
 } from "@/api/device_manager";
 import { password_detail_userpwd } from "@/api/setting";
+import { stPad_detail_web } from "@/api/stPad";
 import { logPush_add } from "@/api/log";
+import { weekDay, padDeviceIcon, padViolatesInfo } from "@/utils";
 export default {
   data() {
     return {
+      weekDay,
+      padDeviceIcon,
+      padViolatesInfo,
       userInfo: {},
       // ws连接后回发信息
       wsEnterInfo: {
           width: 200,
           align: "center"
         }
+      ],
+      strategyInfo: {
+        username: null,
+        userid: null,
+        rversion: null,
+        padid: null,
+        show: false,
+        hastime: false, // 是否开启时间策略：0否 1是
+        padTimes: [], // 平板策略时间
+        hasapp: false, //是否开启应用策略：0否 1是
+        padApps: [], //appid集合
+        hasdevice: false, //是否开启设备策略：0否 1是
+        padDevices: [], //授权应用
+        pdtypeInfo: {},
+        haswifi: false, //是否开启wifi白名单策略：0否 1是
+        padWifis: [], //wifi白名单
+        hasviolate: false, //是否开启违规通知：0否 1是
+        padViolates: [] //设备违规
+      },
+      violationColumns: [
+        {
+          title: "违规事件",
+          slot: "violationEvents",
+          align: "center",
+          width: 260
+        },
+        {
+          title: "违规处理",
+          slot: "violationHandling",
+          align: "center"
+        }
       ]
     };
   },
     // 查看
     toView() {},
     // 策略
-    toStrategy() {},
+    toStrategy(row) {
+      stPad_detail_web({ objectid: row.userid }).then((res) => {
+        if (res.code === 0) {
+          this.strategyInfo.username = row.username;
+          this.strategyInfo.userid = row.userid;
+          this.strategyInfo.padid = res.obj.padid;
+          this.strategyInfo.rversion = res.obj.rversion;
+          this.strategyInfo.hastime = res.obj.hastime ? true : false;
+          this.strategyInfo.hasapp = res.obj.hasapp ? true : false;
+          this.strategyInfo.hasdevice = res.obj.hasdevice ? true : false;
+          this.strategyInfo.haswifi = res.obj.haswifi ? true : false;
+          this.strategyInfo.hasviolate = res.obj.hasviolate ? true : false;
+          this.strategyInfo.padApps = res.obj.padApps || [];
+          this.strategyInfo.padWifis = res.obj.padWifis || [];
+          this.strategyInfo.padTimes = res.obj.padTimes || [];
+          let pdtypeInfo = {};
+          this.strategyInfo.padDevices = res.obj.padDevices;
+          this.strategyInfo.padDevices.forEach((item) => {
+            pdtypeInfo[item.pdtype] = item.enabled;
+          });
+          this.strategyInfo.pdtypeInfo = pdtypeInfo;
+          let violatesInfo = {};
+          this.strategyInfo.padViolates = res.obj.padViolates;
+          this.strategyInfo.padViolates.forEach((item) => {
+            violatesInfo[item.violateType] =
+              item.handle_method && item.handle_method.split("；");
+          });
+          this.strategyInfo.violatesInfo = violatesInfo;
+          this.strategyInfo.show = true;
+        } else {
+          this.$Message.error(res.msg);
+        }
+      });
+    },
     // 设备密码
     toPsw(row) {
       password_detail_userpwd({
           this.$Message.error(data.msg);
         }
       });
+    },
+    strategyPadTimes(id) {
+      return this.strategyInfo.padTimes.filter((v) => v.week === id);
     }
   }
 };
     background: #f3f4fc;
   }
 }
+.content {
+  .strategy_list {
+    font-family: "SourceHanSansCN";
+    .strategy_title {
+      height: 40px;
+      font-size: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      div:first-of-type {
+        font-weight: bold;
+        span {
+          font-size: 22px;
+          color: #339dff;
+          margin-right: 4px;
+        }
+      }
+    }
+    .strategy_content {
+      border-radius: 6px 6px 0 0;
+      border: 1px solid #ced9f2;
+      .strategy_top {
+        display: flex;
+        height: 46px;
+        align-items: center;
+        background: #edf3ff;
+        padding-left: 20px;
+        border-bottom: 1px solid #ced9f2;
+        span {
+          font-size: 16px;
+          color: #253a70;
+          font-weight: 400;
+          font-family: "SourceHanSansCN";
+        }
+      }
+      .strategy_bottom {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 20px;
+        .app_list {
+          margin: 0 16px 16px 0;
+          width: 100px;
+          height: 110px;
+          border-radius: 10px;
+          border: 1px solid #798cb51a;
+          background: #ffffff;
+          text-align: center;
+          position: relative;
+          img {
+            margin: 16px 0;
+            width: 40px;
+            height: 40px;
+            object-fit: cover;
+          }
+          .checked {
+            position: absolute;
+            right: 2px;
+            top: 8px;
+            /deep/ .ivu-checkbox-inner {
+              border-radius: 50%;
+            }
+          }
+          &:hover {
+            cursor: pointer;
+            box-shadow: 10px 10px 20px 0 #339dff26;
+          }
+        }
+        .device_list {
+          display: flex;
+          height: 80px;
+          align-items: center;
+          margin-right: 40px;
+          .icon {
+            width: 56px;
+            height: 56px;
+            border-radius: 6px;
+            border: 1px solid #e5e5e5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            span {
+              font-size: 28px;
+              color: #339dff;
+            }
+          }
+          .title {
+            width: 92px;
+            margin: 0 10px;
+          }
+        }
+        .padWifis {
+          border-radius: 5px;
+          border: 1px solid #339dff;
+          background: #eaf5ff;
+          padding: 4px 20px 4px 16px;
+          height: 26px;
+          margin: 0 20px 10px 0;
+          position: relative;
+          .title {
+            line-height: 14px;
+          }
+          img {
+            width: 16px;
+            height: 16px;
+            object-fit: cover;
+            position: absolute;
+            right: -4px;
+            top: -8px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+    .nodata {
+      color: #798cb5;
+      font-size: 16px;
+      line-height: 30px;
+    }
+  }
+  .showtime {
+    .week {
+      display: flex;
+      width: 100%;
+      .day {
+        width: 14.2%;
+        border: 1px solid #ced9f2;
+        border-right: none;
+        &:last-of-type {
+          border-right: 1px solid #ced9f2;
+        }
+        .day_title {
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          background: #edf3ff;
+          border-bottom: 1px solid #ced9f2;
+          text-align: center;
+        }
+        .day_content {
+          min-height: 50px;
+          padding: 10px;
+          .time {
+            height: 30px;
+            line-height: 30px;
+            border-radius: 6px;
+            background: #dbeeff;
+            text-align: center;
+            color: #339dff;
+            font-size: 14px;
+            font-weight: 500;
+            margin-top: 10px;
+            font-family: "SourceHanSansCN";
+          }
+        }
+      }
+    }
+  }
+}
 </style>