diff --git a/src/assets/css/homeScreen.scss b/src/assets/css/homeScreen.scss
new file mode 100644
index 0000000..e8620e2
--- /dev/null
+++ b/src/assets/css/homeScreen.scss
@@ -0,0 +1,491 @@
+.bigScrenn {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: #001022;
+  position: relative;
+  color: #fff;
+
+  .headBox {
+    position: absolute;
+    height: 90px;
+    width: 100%;
+    background: #001022;
+    top: 0;
+    z-index: 9;
+
+    .top {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+      padding: 0 4px;
+
+      .top-left {
+        display: flex;
+        margin-top: 30px;
+
+        .time {
+          margin-left: 38px;
+          font-style: italic;
+          font-weight: bolder;
+
+          .timer {
+            font-size: 24px;
+            letter-spacing: 3px;
+            color: #fff;
+          }
+
+          .week {
+            color: #00ADFF;
+            font-size: 14px;
+          }
+
+        }
+      }
+
+      .top-center {
+        width: 340px;
+        height: 90px;
+      }
+
+      .top-right {
+        display: flex;
+        margin-top: 30px;
+        align-items: center;
+
+        .info {
+          display: flex;
+          align-items: center;
+
+          .text {
+            color: #e6ffff;
+            font-size: 15px;
+            margin-left: 14px;
+            line-height: 23px;
+
+            .dept {
+              max-width: 200px;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+
+        .meun {
+          margin-left: 30px;
+          margin-right: 4px;
+        }
+
+        .el-dropdown-tools {
+          display: inline-block;
+          width: 40px;
+          height: 40px;
+          border: 1px solid rgb(20, 135, 180);
+          border-radius: 50%;
+          text-align: center;
+
+          .el-dropdown-tools-n {
+            display: inline-block;
+            width: 34px;
+            height: 34px;
+            border: 1px solid #fff;
+            border-radius: 50%;
+            background: #9ec6fc;
+            text-align: center;
+            line-height: 32px;
+            margin-top: 2px;
+            padding-top: 2px;
+            box-sizing: border-box;
+          }
+        }
+      }
+    }
+  }
+
+  .asideBox {
+    position: absolute;
+    top: 70px;
+    height: calc(100vh - 72px);
+    width: 442px;
+    background: #263445;
+    z-index: 2;
+
+    .boder-small {
+      height: 32.5%;
+      background-size: 100% 100%;
+      margin-bottom: 10px;
+    }
+
+    .boder-middle {
+      height: 66%;
+      background-size: 100% 100%;
+      margin-bottom: 10px;
+    }
+
+    .boder-big {
+      height: 100%;
+      background-size: 100% 100%;
+    }
+
+    .boder-top {
+      height: 280px;
+      background-size: 100% 100%;
+    }
+
+    .boder-center {
+      height: calc(100% - 510px);
+      background-size: 100% 100%;
+    }
+
+    .boder-bottom {
+      height: 230px;
+      background-size: 100% 100%;
+    }
+
+    .boxContent {
+      height: 100%;
+      padding: 6px 20px 10px;
+      box-sizing: border-box;
+
+      .box-title {
+        padding: 0 10px 0 30px;
+        box-sizing: border-box;
+        font-size: 22px;
+        font-family: "YSBTH";
+        background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+        -webkit-background-clip: text;
+      }
+
+      .boxInfo {
+        height: calc(100% - 70px);
+        margin-top: 8px;
+      }
+
+      .cntBoxInfo {
+        height: calc(100% - 46px);
+        overflow: hidden;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .addBox {
+    position: absolute;
+    bottom: 70px;
+    pointer-events: auto;
+    cursor: pointer;
+
+    .imgBox {
+      width: 111px;
+      height: 112px;
+      text-align: center;
+
+      span {
+        display: inline-block;
+        width: 30px;
+        margin-top: 36px;
+        font-size: 14px;
+      }
+    }
+  }
+
+  @mixin sircle {
+    position: absolute;
+    width: 73px;
+    height: calc(100vh - 72px);
+    top: 90px;
+  }
+
+  .leftSiecle {
+    @include sircle;
+    background-size: 100% 100%;
+    z-index: 1;
+  }
+
+  .rightSiecle {
+    @include sircle;
+    right: 370px;
+    background-size: 100% 100%;
+    z-index: 1;
+  }
+
+  // 尾部
+  .footBox {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 800px;
+    z-index: 10;
+
+    .btnsBox {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 85%;
+
+      .btnsItem {
+        position: relative;
+        cursor: pointer;
+
+        .resourceBox {
+          display: none;
+          position: absolute;
+          bottom: 37px;
+          left: 50%;
+          transform: translateX(-50%);
+          padding: 10px 10px 24px 10px;
+          box-sizing: border-box;
+
+          .contant {
+            position: relative;
+            padding: 20px 10px;
+            box-sizing: border-box;
+            background-size: 100% 100%;
+
+            .name {
+              color: #00BFFF;
+            }
+
+            .footerCheck {
+              display: flex;
+              justify-content: center;
+
+              .el-checkbox-group {
+                text-align: center;
+              }
+            }
+          }
+
+        
+        }
+
+        .resourceBoxOther {
+          display: block;
+        }
+      }
+
+      .btnsItem:hover .resourceBox {
+        display: block;
+      }
+    }
+  }
+
+  .popover {
+    position: absolute;
+    background: #08226a;
+    left: 264px;
+    top: 32px;
+    width: 220px;
+    padding: 6px;
+    box-sizing: border-box;
+    border-radius: 4px;
+
+    .el-tag {
+      margin: 4px 2px;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 46px;
+      left: -15px;
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border: 8px solid transparent;
+      border-right-color: #08226a;
+      z-index: 989;
+    }
+  }
+
+  .popoverKfd {
+    position: absolute;
+    background: #08226a;
+    left: -199px;
+    top: 100px;
+    width: 270px;
+    padding: 6px;
+    box-sizing: border-box;
+    border-radius: 4px;
+
+    .el-tag {
+      margin: 4px 2px;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 13px;
+      left: 270px;
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border: 8px solid transparent;
+      border-left-color: #08226a;
+      z-index: 989;
+    }
+  }
+}
+
+.dialogBox {
+  padding: 0 0 10px 0;
+  box-sizing: border-box;
+  background-size: 100% 100%;
+  z-index: 999;
+  border-radius: 4px;
+
+  >.title {
+    height: 38px;
+    line-height: 38px;
+    margin: 0 4px;
+    display: flex;
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    justify-content: space-between;
+    align-items: center;
+    background-image: linear-gradient(to right, rgba(1, 127, 216, 1), rgba(4, 56, 131, .5), rgba(1, 130, 218, .0));
+
+    .close {
+      font-size: 20px;
+      font-weight: 200;
+      cursor: pointer;
+      margin-right: 10px;
+    }
+
+    .mc {
+      margin-left: 10px;
+    }
+  }
+
+  .infoBox {
+    border: none;
+    position: relative;
+    // border: 1px solid #275288;
+    padding: 10px 0 4px;
+    box-sizing: border-box;
+  }
+
+  .addressBox {
+    border-top: 1px solid #162f55;
+    margin: 0 10px;
+    // height: 30px;
+    line-height: 24px;
+    display: flex;
+    justify-content: space-between;
+
+    img,
+    span {
+      vertical-align: middle;
+    }
+
+    img {
+      margin-right: 4px;
+    }
+  }
+
+  >.btnBox {
+    text-align: center;
+    padding-top: 8px;
+    padding-bottom: 12px;
+    margin-bottom: 10px;
+
+    button {
+      margin: 0 2px;
+    }
+  }
+}
+
+button.dp-default {
+  border: 1px solid #3180ea;
+  box-shadow: inset 0 0 18px #2b8ce6;
+  background: #001022;
+  color: #fff;
+  height: 30px;
+  padding: 0 15px;
+  border-radius: 3px;
+  cursor: pointer;
+
+  &.small {
+    height: 22px;
+    line-height: 20px;
+    vertical-align: middle;
+    padding: 0 6px;
+    box-shadow: inset 0 0 10px #2b8ce6;
+    font-size: 12px;
+
+    span,
+    svg {
+      vertical-align: middle;
+    }
+  }
+}
+
+.tag {
+  display: inline-block;
+  background-color: #999;
+  font-size: 11px;
+  border-radius: 2px;
+  margin-left: 3px;
+  color: #fff;
+  width: 40px;
+  text-align: center;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: middle;
+
+  &.blue {
+    background-color: #0b9ff4;
+  }
+
+  &.orange {
+    background-color: #e15923;
+  }
+
+  &.red {
+    background-color: #e21c1c;
+  }
+
+  &.yellow {
+    background-color: #d6d301;
+  }
+
+  &.green {
+    background-color: #56db2d;
+  }
+
+  &.mj {
+    background-color: #4995fd;
+  }
+
+  &.fj {
+    background-color: #3ad2d4;
+  }
+}
+
+.xlStatus {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 56px;
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
+  border-bottom-left-radius: 10px;
+  cursor: pointer;
+  color: #000;
+}
+
+.line {
+  background: #00bc65;
+}
+
+.lineing {
+  background: #AB0F0B;
+}
+
+.unline {
+  background: #808080;
+}
\ No newline at end of file
diff --git a/src/views/home/layout/streetInfo.vue b/src/views/home/layout/streetInfo.vue
new file mode 100644
index 0000000..1efddc0
--- /dev/null
+++ b/src/views/home/layout/streetInfo.vue
@@ -0,0 +1,262 @@
+<template>
+  <div
+    class="dialogBox"
+    :style="`left:${elLeft}px;top:${elTop}px`"
+    draggable="true"
+    ref="dialogBoxYpfx"
+    @dragstart="dragstart($event)"
+    @dragend="dragend($event)"
+  >
+    <div class="title">
+      <span class="mc">{{ props.data.jzMc ? props.data.jzMc : props.data.fzrXm + "巡组" }}</span>
+      <span @click="close" class="close">
+        <el-icon><Close /></el-icon>
+      </span>
+    </div>
+    <div class="info-Big-Box noScollLine">
+      <div class="infoBox">
+        <div class="xlStatus" :class="props.data.xfzt == 1 ? 'lineing' : props.data.xfzt == 2 ? 'unline': 'line'">
+          {{props.data.xfzt == 1? "处警中": props.data.xfzt == 2? "离线": "巡逻中"}}
+        </div>
+        <div class="text">
+          负责人：<span class="tag mj">民警</span>
+          <el-tooltip :content=" '身份证号： ' + props.data.fzrSfzh  " placement="bottom">
+            <span class="name">{{ props.data.fzrXm }} ({{ props.data.fzrLxdh }})</span>
+          </el-tooltip>
+        </div>
+        <div class="text">
+          开始时间：<span class="name">{{ props.data.bbkssj }}</span>
+        </div>
+        <div class="time">
+          (计划 ( {{ props.data.kssj }} ~ {{ props.data.jssj }} )
+        </div>
+        <div class="text">
+          组员：
+          <span v-for="(item, index) in props.data.pbmj" :key="index" class="jc_box">
+            <span class="tag mj">民警</span>
+            <span class="name">{{ item.jlxm }}</span>
+          </span>
+          <span v-for="(item, index) in props.data.pbfj" :key="index" class="jc_box">
+            <span class="tag fj">辅警</span>
+            <span class="name">{{ item.jlxm }}</span>
+          </span>
+        </div>
+        <div class="text">
+          单位：<span class="name">{{ props.data.ssbm }}</span>
+        </div>
+        <div class="text zblist" v-if="props.data.txzb.length <= 0">
+          通讯装备：<span>暂无数据</span>
+        </div>
+
+        <div class="text zblist" v-else>
+          <el-collapse v-model="props.data.openTxzb">
+            <el-collapse-item title="通讯装备：" name="1">
+              <span class="zb-item" v-for="(item, index) in props.data.txzb" :key="index">
+                <span class="sbinfo">{{ item.sbmc }}</span>
+                <el-tooltip :content="'呼叫(' + item.hh + ')'" placement="bottom">
+                  <img style="width: 22px"  @click="getZFJLY(item)"/>
+                </el-tooltip>
+              </span>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+
+        <div class="text zblist" v-if="props.data.jyqx.length <= 0">
+          常用装备：<span>暂无数据</span>
+        </div>
+
+        <div class="text zblist" v-else>
+          <el-collapse v-model="props.data.openJyqx">
+            <el-collapse-item title="常用装备：" name="1">
+              <span class="zb-item" v-for="(item, index) in props.data.jyqx" :key="index">
+                <span class="qxinfo">{{ item.qxmc }}（{{ item.qxsl }}）个</span>
+              </span>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+        <div class="text zblist">
+          警用车辆：
+          <span class="zb-item" v-for="(item, index) in props.data.pbcl" :key="index">
+            <span class="qxinfo">{{ item.jdchphm }}</span>
+          </span>
+          <span v-if="props.data.pbcl.length <= 0">暂无</span>
+        </div>
+        <div class="text" v-if="props.data.bz != ''">
+          备注： <span class="name">{{ props.data.bz }}</span>
+        </div>
+      </div>
+    </div>
+    <el-popover placement="bottom" :visible="visible" :width="476" :append-to-body="false">
+        <template #reference>
+          <div class="btnBox">
+            <button class="dp-default small" @click="onClickZbyj">周边预警</button>
+            <button class="dp-default small" @click="onClickSpsd">视频随动</button>
+          </div>
+        </template>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import Axios from "axios";
+import { qcckPost,qcckGet} from "@/api/qcckApi.js";
+import { ref, onMounted, onUnmounted, defineProps, getCurrentInstance, watch } from "vue";
+import { timeValidate } from "@/utils/time.js";
+import emitter from "@/utils/eventBus.js";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+import { all } from "ol/events/condition";
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  }
+});
+const visible = ref(false);
+const dialogBoxYpfx = ref();
+const initWidth = ref(0); //父元素宽度
+const initHeight = ref(0); //父元素高度
+const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
+const startClientY = ref(0); //元素拖拽前距离浏览器Y轴位置
+const elLeft = ref(400); //元素左偏移量
+const elTop = ref(120); //元素右偏移量
+watch(
+  () => props.data,
+  (val) => {
+    visible.value = false;
+  },{
+    immediate:true,
+    deep:true
+  }
+);
+onMounted(() => {
+  initBodySize();
+});
+
+
+//初始化
+const initBodySize = () => {
+  initWidth.value = dialogBoxYpfx.value.clientWidth;
+  initHeight.value = dialogBoxYpfx.value.clientHeight;
+};
+//拖拽开始
+const dragstart = (e) => {
+  startClientX.value = e.clientX;
+  startClientY.value = e.clientY;
+};
+//拖拽结束
+const dragend = (e) => {
+  let x = e.clientX - startClientX.value;
+  let y = e.clientY - startClientY.value;
+  elLeft.value += x;
+  elTop.value += y;
+};
+
+//关闭弹窗
+function close() {
+  visible.value = false;
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.dialogBox {
+  position: absolute;
+  padding: 0;
+  width: 484px !important;
+  .title {
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    .mc {
+      margin-left: 10px;
+    }
+  }
+  .info-Big-Box {
+    max-height: 70vh;
+    overflow: hidden;
+    overflow: auto;
+    padding: 4px 10px;
+    box-sizing: border-box;
+  }
+  .infoBox {
+    position: relative;
+    padding: 10px !important;
+    .text {
+      color: #00bfff;
+      line-height: 26px;
+    }
+    .tag {
+      margin: 0 4px;
+    }
+    .name {
+      color: #fff;
+    }
+    .time {
+      color: #3ad2d4;
+    }
+    .jc_box {
+      margin: 0 4px;
+    }
+    .zblist {
+      display: flex;
+      flex-wrap: wrap;
+      .zb-item {
+        margin-right: 10px;
+        .sbinfo {
+          color: yellow;
+        }
+        img {
+          margin-left: 4px;
+          cursor: pointer;
+        }
+        .qxinfo {
+          color: rgb(127, 177, 217);
+          padding: 2px 4px;
+          border: 1px solid rgb(61, 116, 219);
+          border-radius: 4px;
+          display: inline;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+.all-dialog .dialogBox > .btnBox {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.timeBox{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .time1{
+    margin: 0 10px;
+    text-align: center;
+    color: #fff;
+  }
+}
+
+::v-deep .el-collapse{
+  width: 100%;
+  --el-collapse-header-height:auto;
+  --el-collapse-header-bg-color:transparent;
+  --el-collapse-border-color:transparent;
+}
+::v-deep .el-collapse-item__header{
+  color: #00bfff;
+}
+::v-deep .el-collapse-item__wrap{
+  background-color:transparent;
+}
+::v-deep .el-collapse-item__content {
+  color: #fff;
+  padding-bottom: 0;
+}
+.null{
+  text-align: center;
+}
+
+</style>
diff --git a/src/views/login/oatuh_login.vue b/src/views/login/oatuh_login.vue
new file mode 100644
index 0000000..ad1a162
--- /dev/null
+++ b/src/views/login/oatuh_login.vue
@@ -0,0 +1,43 @@
+<template></template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
+import {
+  setItem
+} from "@/utils/storage";
+const loginDialog = ref(false);
+const deptList = ref([]);
+const store = useStore();
+function redirectAuth() {
+
+  let token = location.hash.slice(20) || null;
+  if (token != null) {
+    debugger
+    token = token.replace(/\ +/g, "");
+    setItem("SSOTOKEN", token)
+    handleLogin({ token: token});
+  } else {
+    window.location.href = `http://155.240.22.188:9020`;
+  }
+}
+
+const handleLogin = (e) => {
+  store.dispatch("user/oatuhLogin", e).then((res) => {
+    // 登录后操作
+    if (res.deptList.length === 1) {
+      window.location.hash = "/";
+    } else {
+      deptList.value = [...res.deptList];
+      loginDialog.value = true;
+      authorization.value = res.jwtToken;
+    }
+  });
+};
+onMounted(() => {
+  redirectAuth();
+});
+</script>
+
+<style></style>
\ No newline at end of file