home

ipadCtr/src/components/nav.vue

@@ -25,16 +25,16 @@ export default {
       navList: [
         { name: "首页", path: "/home" ,send:'/预警监控'},
         { name: "设备/联络人", path: "/equipment" ,send:'/系统监控'},
-        { name: "中心建设", path: "home" ,send:'/中心建设'},
-        { name: "预警系统", path: "home" ,send:'/预警系统'},
+        { name: "中心建设", path: "/center" ,send:'/中心建设'},
+        { name: "预警系统", path: "/system" ,send:'/预警系统'},
         { name: "部委信息", path: "/industry" ,send:'/行业聚焦'},
         { name: "服务效益", path: "/server" ,send:'/服务效益'},
-        { name: "参观场景", path: "home" ,send:'/参观场景'},
-        { name: "自然灾害", path: "home" ,send:'/自然灾害'},
-        { name: "事件监控", path: "home" ,send:'/事件监控'},
-        { name: "预警大数据", path: "home" ,send:'/大数据'},
-        {name:'一带一路',path:'home',send:'/一带一路'},
-        {name:'长江流域',path:'home',send:'/长江流域'},
+        { name: "参观场景", path: "/scence" ,send:'/参观场景'},
+        { name: "自然灾害", path: "/disasters" ,send:'/自然灾害'},
+        { name: "事件监控", path: "/event" ,send:'/事件监控'},
+        {name:'一带一路',path:'/belt_road',send:'/一带一路'},
+        {name:'长江流域',path:'/yangtzeRiver',send:'/长江流域'},
+        { name: "预警大数据", path: "/bigdata" ,send:'/大数据'},
       ]
     };
   },
@@ -204,11 +204,10 @@ export default {
   
 }
 .icon10 {
-  background: url(../assets/img/icon/9.png) no-repeat center;
+  background: url(../assets/img/icon/10.png) no-repeat center;
   
 }
 .icon11 {
-  background: url(../assets/img/icon/9.png) no-repeat center;
-  
+  background: url(../assets/img/icon/11.png) no-repeat center;
 }
 </style>

ipadCtr/src/pages/belt_road.vue

+<template>
+  <div class="page">
+    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
+      <div class="content">
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
+        <div id="scrollbox">
+          <vuescroll :ops="ops">
+            <div
+              class="btn"
+              :class="{activearea:activearea.code == item.code}"
+              v-for="(item,index) in btnlist"
+              :key="index"
+              @click="showC(item)"
+            >{{item.name}}</div>
+          </vuescroll>
+        </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
+      </div>
+    </content-box>
+  </div>
+</template>
+
+<script>
+import { send } from "@/service/ctrapi";
+import contentBox from "../components/contentBox";
+import pageTitle from "../components/pageTitle";
+import vuescroll from "vuescroll";
+export default {
+  components: { contentBox, pageTitle, vuescroll },
+  data() {
+    return {
+      btnlist: [],
+      titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
+      titleactive: 0,
+      activearea: {},
+      subtitle: {},
+      btnbackshow: false,
+      ops: {
+        bar: {
+          background: "#41c9ff",
+          keepShow: true
+        },
+        rail: {
+          background: "#3e4a59",
+          opacity: 0.5
+        }
+      }
+    };
+  },
+  mounted() {
+    this.showP();
+  },
+  methods: {
+    backfn() {
+      send(`${this.msgPathCfg.root}`, []);
+      this.showP();
+    },
+    showP() {
+      this.$axios
+        .get("http://123.56.149.208:8091/external/get/city/all")
+        .then(val => {
+          this.btnlist = val.data.data;
+          this.btnbackshow = false;
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
+        });
+    },
+    showC(item) {
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        this.$axios
+          .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
+          .then(val => {
+            this.btnlist = val.data.data;
+            this.btnbackshow = true;
+            this.subtitle = item;
+            this.activearea = item;
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
+      }
+    },
+    titleclickfn(i) {
+      this.titleactive = i;
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  width: 18.4rem;
+  height: 13.5rem;
+  background: url(../assets/img/content.png) no-repeat left top;
+  background-size: cover;
+  margin-top: 1.5rem;
+  margin-left: 2.2rem;
+}
+.content {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  text-align: left;
+}
+#scrollbox {
+  width: 15.5rem;
+  height: 9rem;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+.btn {
+  float: left;
+  white-space: nowrap;
+  font-size: 0.3rem;
+  color: #fff;
+  text-align: center;
+  line-height: 0.81rem;
+  padding: 0 0.1rem;
+  margin: 0 0.45rem 0.74rem 0;
+  min-width: 2.59rem;
+  height: 0.81rem;
+  background: url(../assets/img/btn-bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.subtitle {
+  margin: 0.5rem 0 0.5rem 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
+}
+.activearea {
+  font-size: 0.35rem;
+}
+.activearea::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -100%;
+  background: url(../assets/img/btn-light.png) no-repeat;
+  background-size: 100% 94%;
+}
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
+</style>

ipadCtr/src/pages/bigdata.vue

+<template>
+  <div class="page">
+    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
+      <div class="content">
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
+        <div id="scrollbox">
+          <vuescroll :ops="ops">
+            <div
+              class="btn"
+              :class="{activearea:activearea.code == item.code}"
+              v-for="(item,index) in btnlist"
+              :key="index"
+              @click="showC(item)"
+            >{{item.name}}</div>
+          </vuescroll>
+        </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
+      </div>
+    </content-box>
+  </div>
+</template>
+
+<script>
+import { send } from "@/service/ctrapi";
+import contentBox from "../components/contentBox";
+import pageTitle from "../components/pageTitle";
+import vuescroll from "vuescroll";
+export default {
+  components: { contentBox, pageTitle, vuescroll },
+  data() {
+    return {
+      btnlist: [],
+      titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
+      titleactive: 0,
+      activearea: {},
+      subtitle: {},
+      btnbackshow: false,
+      ops: {
+        bar: {
+          background: "#41c9ff",
+          keepShow: true
+        },
+        rail: {
+          background: "#3e4a59",
+          opacity: 0.5
+        }
+      }
+    };
+  },
+  mounted() {
+    this.showP();
+  },
+  methods: {
+    backfn() {
+      send(`${this.msgPathCfg.root}`, []);
+      this.showP();
+    },
+    showP() {
+      this.$axios
+        .get("http://123.56.149.208:8091/external/get/city/all")
+        .then(val => {
+          this.btnlist = val.data.data;
+          this.btnbackshow = false;
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
+        });
+    },
+    showC(item) {
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        this.$axios
+          .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
+          .then(val => {
+            this.btnlist = val.data.data;
+            this.btnbackshow = true;
+            this.subtitle = item;
+            this.activearea = item;
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
+      }
+    },
+    titleclickfn(i) {
+      this.titleactive = i;
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  width: 18.4rem;
+  height: 13.5rem;
+  background: url(../assets/img/content.png) no-repeat left top;
+  background-size: cover;
+  margin-top: 1.5rem;
+  margin-left: 2.2rem;
+}
+.content {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  text-align: left;
+}
+#scrollbox {
+  width: 15.5rem;
+  height: 9rem;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+.btn {
+  float: left;
+  white-space: nowrap;
+  font-size: 0.3rem;
+  color: #fff;
+  text-align: center;
+  line-height: 0.81rem;
+  padding: 0 0.1rem;
+  margin: 0 0.45rem 0.74rem 0;
+  min-width: 2.59rem;
+  height: 0.81rem;
+  background: url(../assets/img/btn-bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.subtitle {
+  margin: 0.5rem 0 0.5rem 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
+}
+.activearea {
+  font-size: 0.35rem;
+}
+.activearea::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -100%;
+  background: url(../assets/img/btn-light.png) no-repeat;
+  background-size: 100% 94%;
+}
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
+</style>

ipadCtr/src/pages/center.vue

+<template>
+  <div class="page">
+    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
+      <div class="content">
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
+        <div id="scrollbox">
+          <vuescroll :ops="ops">
+            <div
+              class="btn"
+              :class="{activearea:activearea.code == item.code}"
+              v-for="(item,index) in btnlist"
+              :key="index"
+              @click="showC(item)"
+            >{{item.name}}</div>
+          </vuescroll>
+        </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
+      </div>
+    </content-box>
+  </div>
+</template>
+
+<script>
+import { send } from "@/service/ctrapi";
+import contentBox from "../components/contentBox";
+import pageTitle from "../components/pageTitle";
+import vuescroll from "vuescroll";
+export default {
+  components: { contentBox, pageTitle, vuescroll },
+  data() {
+    return {
+      btnlist: [],
+      titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
+      titleactive: 0,
+      activearea: {},
+      subtitle: {},
+      btnbackshow: false,
+      ops: {
+        bar: {
+          background: "#41c9ff",
+          keepShow: true
+        },
+        rail: {
+          background: "#3e4a59",
+          opacity: 0.5
+        }
+      }
+    };
+  },
+  mounted() {
+    this.showP();
+  },
+  methods: {
+    backfn() {
+      send(`${this.msgPathCfg.root}`, []);
+      this.showP();
+    },
+    showP() {
+      this.$axios
+        .get("http://123.56.149.208:8091/external/get/city/all")
+        .then(val => {
+          this.btnlist = val.data.data;
+          this.btnbackshow = false;
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
+        });
+    },
+    showC(item) {
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        this.$axios
+          .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
+          .then(val => {
+            this.btnlist = val.data.data;
+            this.btnbackshow = true;
+            this.subtitle = item;
+            this.activearea = item;
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
+      }
+    },
+    titleclickfn(i) {
+      this.titleactive = i;
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  width: 18.4rem;
+  height: 13.5rem;
+  background: url(../assets/img/content.png) no-repeat left top;
+  background-size: cover;
+  margin-top: 1.5rem;
+  margin-left: 2.2rem;
+}
+.content {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  text-align: left;
+}
+#scrollbox {
+  width: 15.5rem;
+  height: 9rem;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+.btn {
+  float: left;
+  white-space: nowrap;
+  font-size: 0.3rem;
+  color: #fff;
+  text-align: center;
+  line-height: 0.81rem;
+  padding: 0 0.1rem;
+  margin: 0 0.45rem 0.74rem 0;
+  min-width: 2.59rem;
+  height: 0.81rem;
+  background: url(../assets/img/btn-bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.subtitle {
+  margin: 0.5rem 0 0.5rem 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
+}
+.activearea {
+  font-size: 0.35rem;
+}
+.activearea::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -100%;
+  background: url(../assets/img/btn-light.png) no-repeat;
+  background-size: 100% 94%;
+}
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
+</style>

ipadCtr/src/pages/disasters.vue

+<template>
+  <div class="page">
+    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
+      <div class="content">
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
+        <div id="scrollbox">
+          <vuescroll :ops="ops">
+            <div
+              class="btn"
+              :class="{activearea:activearea.code == item.code}"
+              v-for="(item,index) in btnlist"
+              :key="index"
+              @click="showC(item)"
+            >{{item.name}}</div>
+          </vuescroll>
+        </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
+      </div>
+    </content-box>
+  </div>
+</template>
+
+<script>
+import { send } from "@/service/ctrapi";
+import contentBox from "../components/contentBox";
+import pageTitle from "../components/pageTitle";
+import vuescroll from "vuescroll";
+export default {
+  components: { contentBox, pageTitle, vuescroll },
+  data() {
+    return {
+      btnlist: [],
+      titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
+      titleactive: 0,
+      activearea: {},
+      subtitle: {},
+      btnbackshow: false,
+      ops: {
+        bar: {
+          background: "#41c9ff",
+          keepShow: true
+        },
+        rail: {
+          background: "#3e4a59",
+          opacity: 0.5
+        }
+      }
+    };
+  },
+  mounted() {
+    this.showP();
+  },
+  methods: {
+    backfn() {
+      send(`${this.msgPathCfg.root}`, []);
+      this.showP();
+    },
+    showP() {
+      this.$axios
+        .get("http://123.56.149.208:8091/external/get/city/all")
+        .then(val => {
+          this.btnlist = val.data.data;
+          this.btnbackshow = false;
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
+        });
+    },
+    showC(item) {
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        this.$axios
+          .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
+          .then(val => {
+            this.btnlist = val.data.data;
+            this.btnbackshow = true;
+            this.subtitle = item;
+            this.activearea = item;
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
+      }
+    },
+    titleclickfn(i) {
+      this.titleactive = i;
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  width: 18.4rem;
+  height: 13.5rem;
+  background: url(../assets/img/content.png) no-repeat left top;
+  background-size: cover;
+  margin-top: 1.5rem;
+  margin-left: 2.2rem;
+}
+.content {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  text-align: left;
+}
+#scrollbox {
+  width: 15.5rem;
+  height: 9rem;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+.btn {
+  float: left;
+  white-space: nowrap;
+  font-size: 0.3rem;
+  color: #fff;
+  text-align: center;
+  line-height: 0.81rem;
+  padding: 0 0.1rem;
+  margin: 0 0.45rem 0.74rem 0;
+  min-width: 2.59rem;
+  height: 0.81rem;
+  background: url(../assets/img/btn-bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.subtitle {
+  margin: 0.5rem 0 0.5rem 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
+}
+.activearea {
+  font-size: 0.35rem;
+}
+.activearea::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -100%;
+  background: url(../assets/img/btn-light.png) no-repeat;
+  background-size: 100% 94%;
+}
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
+</style>

ipadCtr/src/pages/equipment.vue

 <template>
-  <div class="page">
-    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
-      <div class="content">
-        <page-title
-          class="titlePosition"
-          :titledata="titledata"
-          :titleactive="titleactive"
-          @titleclick="titleclickfn"
-        />
-        <div class="subtitle" v-if="btnbackshow">{{subtitle.name}} :</div>
-        <div id="scrollbox">
-          <vuescroll :ops="ops">
-            <div
-              class="btn"
-              :class="{activearea:activearea.code == item.code}"
-              v-for="(item,index) in btnlist"
-              :key="index"
-              @click="showC(item)"
-            >{{item.name}}</div>
-          </vuescroll>
-        </div>
-      </div>
-    </content-box>
-  </div>
+  <eq />
 </template>
 
 <script>
-import contentBox from "../components/contentBox";
-import pageTitle from "../components/pageTitle";
-import vuescroll from "vuescroll";
-export default {
-  components: { contentBox, pageTitle, vuescroll },
+import home from "./home";
+import Vue from "vue";
+var myMixin = {
   data() {
     return {
       btnlist: [],
-      titledata: ["网络连接", "大喇叭", "显示屏", "北斗", "联络人"],
+      titledata: ["网络连接", "联络人", "北斗", "显示屏", "大喇叭"],
+      msgPathCfg:{
+        root:'/系统监控',
+        list1:'/省级',
+        subtitle:'/设备',
+      },
       titleactive: 0,
-      activearea:{},
-      subtitle:{},
+      activearea: {},
+      subtitle: {},
       btnbackshow: false,
       ops: {
         bar: {
-             background: '#41c9ff',
-             keepShow:true
+          background: "#41c9ff",
+          keepShow: true
         },
         rail: {
-            background: '#3e4a59',
-            opacity: 0.5,
+          background: "#3e4a59",
+          opacity: 0.5
         }
       }
     };
-  },
-  mounted() {
-    this.showP();
-  },
-  methods: {
-    backfn() {
-      this.showP();
-    },
-    showP() {
-      this.$axios
-        .get("http://123.56.149.208:8091/external/get/city/all")
-        .then(val => {
-          this.btnlist = val.data.data;
-          this.btnbackshow = false;
-          this.activearea = {}
-           this.subtitle = {}
-        });
-    },
-    showC(item) {
-      if(this.btnbackshow){
-        this.activearea = item
-      }else{
-        this.$axios
-        .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
-        .then(val => {
-          this.btnlist = val.data.data;
-          this.btnbackshow = true;
-          this.subtitle= item;
-          this.activearea = item;
-        })
-      }
-    },
-    titleclickfn(i) {
-      this.titleactive = i;
-    }
   }
 };
-</script>
+var eq =  Vue.extend(home).extend({
+  mixins: [myMixin],
+})
 
-<style scoped>
-.page {
-  width: 18.4rem;
-  height: 13.5rem;
-  background: url(../assets/img/content.png) no-repeat left top;
-  background-size: cover;
-  margin-top: 1.5rem;
-  margin-left: 2.2rem;
-}
-.content {
-  padding-top: 1rem;
-  padding-left: 1rem;
-  text-align: left;
-}
-#scrollbox {
-  width: 15.5rem;
-  height: 9rem;
-  margin-left: 1rem;
-  margin-top: 0.5rem;
-}
-.btn {
-  float: left;
-  white-space: nowrap;
-  font-size: 0.3rem;
-  color: #fff;
-  text-align: center;
-  line-height: 0.81rem;
-  /* letter-spacing: 0.07rem; */
-  padding: 0 0.1rem;
-  margin: 0 0.45rem 0.74rem 0;
-  min-width: 2.59rem;
-  height: 0.81rem;
-  background: url(../assets/img/btn-bg.png) no-repeat;
-  background-size: 100% 100%;
-  position: relative;
-  /* transition: .3s; */
-}
-.subtitle {
-  margin: 0.5rem 0 0.5rem 1rem;
-  color: #fff;
-  font-size: 0.4rem;
-  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
-    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
-}
-.activearea{
-  font-size: 0.35rem;
-}
-.activearea::after{
-  content:'';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: -100%;
-  background: url(../assets/img/btn-light.png) no-repeat;
-  background-size: 100% 94%;
-}
-</style>
+export default {
+  components: { eq }
+};
+</script>

ipadCtr/src/pages/event.vue

+<template>
+  <div class="page">
+    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
+      <div class="content">
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
+        <div id="scrollbox">
+          <vuescroll :ops="ops">
+            <div
+              class="btn"
+              :class="{activearea:activearea.code == item.code}"
+              v-for="(item,index) in btnlist"
+              :key="index"
+              @click="showC(item)"
+            >{{item.name}}</div>
+          </vuescroll>
+        </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
+      </div>
+    </content-box>
+  </div>
+</template>
+
+<script>
+import { send } from "@/service/ctrapi";
+import contentBox from "../components/contentBox";
+import pageTitle from "../components/pageTitle";
+import vuescroll from "vuescroll";
+export default {
+  components: { contentBox, pageTitle, vuescroll },
+  data() {
+    return {
+      btnlist: [],
+      titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
+      titleactive: 0,
+      activearea: {},
+      subtitle: {},
+      btnbackshow: false,
+      ops: {
+        bar: {
+          background: "#41c9ff",
+          keepShow: true
+        },
+        rail: {
+          background: "#3e4a59",
+          opacity: 0.5
+        }
+      }
+    };
+  },
+  mounted() {
+    this.showP();
+  },
+  methods: {
+    backfn() {
+      send(`${this.msgPathCfg.root}`, []);
+      this.showP();
+    },
+    showP() {
+      this.$axios
+        .get("http://123.56.149.208:8091/external/get/city/all")
+        .then(val => {
+          this.btnlist = val.data.data;
+          this.btnbackshow = false;
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
+        });
+    },
+    showC(item) {
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        this.$axios
+          .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
+          .then(val => {
+            this.btnlist = val.data.data;
+            this.btnbackshow = true;
+            this.subtitle = item;
+            this.activearea = item;
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
+      }
+    },
+    titleclickfn(i) {
+      this.titleactive = i;
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  width: 18.4rem;
+  height: 13.5rem;
+  background: url(../assets/img/content.png) no-repeat left top;
+  background-size: cover;
+  margin-top: 1.5rem;
+  margin-left: 2.2rem;
+}
+.content {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  text-align: left;
+}
+#scrollbox {
+  width: 15.5rem;
+  height: 9rem;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+.btn {
+  float: left;
+  white-space: nowrap;
+  font-size: 0.3rem;
+  color: #fff;
+  text-align: center;
+  line-height: 0.81rem;
+  padding: 0 0.1rem;
+  margin: 0 0.45rem 0.74rem 0;
+  min-width: 2.59rem;
+  height: 0.81rem;
+  background: url(../assets/img/btn-bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.subtitle {
+  margin: 0.5rem 0 0.5rem 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
+}
+.activearea {
+  font-size: 0.35rem;
+}
+.activearea::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -100%;
+  background: url(../assets/img/btn-light.png) no-repeat;
+  background-size: 100% 94%;
+}
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
+</style>

ipadCtr/src/pages/home.vue

@@ -2,13 +2,8 @@
   <div class="page">
     <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
       <div class="content">
-        <page-title
-          class="titlePosition"
-          :titledata="titledata"
-          :titleactive="titleactive"
-          @titleclick="titleclickfn"
-        />
-        <div class="subtitle" v-if="btnbackshow">{{subtitle.name}} :</div>
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
         <div id="scrollbox">
           <vuescroll :ops="ops">
             <div
@@ -20,6 +15,12 @@
             >{{item.name}}</div>
           </vuescroll>
         </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
       </div>
     </content-box>
   </div>
@@ -36,18 +37,23 @@ export default {
     return {
       btnlist: [],
       titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
       titleactive: 0,
-      activearea:{},
-      subtitle:{},
+      activearea: {},
+      subtitle: {},
       btnbackshow: false,
       ops: {
         bar: {
-             background: '#41c9ff',
-             keepShow:true
+          background: "#41c9ff",
+          keepShow: true
         },
         rail: {
-            background: '#3e4a59',
-            opacity: 0.5,
+          background: "#3e4a59",
+          opacity: 0.5
         }
       }
     };
@@ -57,7 +63,7 @@ export default {
   },
   methods: {
     backfn() {
-      send( `/预警监控`, []);
+      send(`${this.msgPathCfg.root}`, []);
       this.showP();
     },
     showP() {
@@ -66,39 +72,49 @@ export default {
         .then(val => {
           this.btnlist = val.data.data;
           this.btnbackshow = false;
-          this.activearea = this.btnlist[0]
-          this.subtitle = {}
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
         });
     },
     showC(item) {
-      if(this.btnbackshow){
-        this.activearea = item
-        send( `/预警监控/省级/${this.subtitle.name}/H5/${this.activearea.name}`, []);
-      }else if(item.name === '全国'){
-        this.activearea = item
-        send( `/预警监控/时间范围/${this.titleactive}`, []);
-      }else{
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
         this.$axios
           .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
           .then(val => {
             this.btnlist = val.data.data;
             this.btnbackshow = true;
-          this.subtitle= item;
+            this.subtitle = item;
             this.activearea = item;
-          send( `/预警监控/${this.subtitle.name}/${this.titleactive}`, []);
-        })
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
       }
     },
     titleclickfn(i) {
       this.titleactive = i;
-      if(this.btnbackshow && this.activearea == this.subtitle){
-        send( `/预警监控/省级/${this.subtitle.name}/时间范围/${this.titleactive}`, []);
-      }else if(this.activearea.name === '全国'){
-        send( `/预警监控/时间范围/${this.titleactive}`, []);
-      }else{
-        // send( `/预警监控/省级/${this.subtitle.name}/时间范围/${this.titleactive}`, []);
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
     }
-    },
   }
 };
 </script>
@@ -130,7 +146,6 @@ export default {
   color: #fff;
   text-align: center;
   line-height: 0.81rem;
-  /* letter-spacing: 0.07rem; */
   padding: 0 0.1rem;
   margin: 0 0.45rem 0.74rem 0;
   min-width: 2.59rem;
@@ -138,7 +153,6 @@ export default {
   background: url(../assets/img/btn-bg.png) no-repeat;
   background-size: 100% 100%;
   position: relative;
-  /* transition: .3s; */
 }
 .subtitle {
   margin: 0.5rem 0 0.5rem 1rem;
@@ -149,11 +163,11 @@ export default {
     0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
     0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
 }
-.activearea{
+.activearea {
   font-size: 0.35rem;
 }
-.activearea::after{
-  content:'';
+.activearea::after {
+  content: "";
   position: absolute;
   left: 0;
   right: 0;
@@ -162,4 +176,8 @@ export default {
   background: url(../assets/img/btn-light.png) no-repeat;
   background-size: 100% 94%;
 }
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
 </style>

ipadCtr/src/pages/scence.vue

+<template>
+  <div class="page">
+    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
+      <div class="content">
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
+        <div id="scrollbox">
+          <vuescroll :ops="ops">
+            <div
+              class="btn"
+              :class="{activearea:activearea.code == item.code}"
+              v-for="(item,index) in btnlist"
+              :key="index"
+              @click="showC(item)"
+            >{{item.name}}</div>
+          </vuescroll>
+        </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
+      </div>
+    </content-box>
+  </div>
+</template>
+
+<script>
+import { send } from "@/service/ctrapi";
+import contentBox from "../components/contentBox";
+import pageTitle from "../components/pageTitle";
+import vuescroll from "vuescroll";
+export default {
+  components: { contentBox, pageTitle, vuescroll },
+  data() {
+    return {
+      btnlist: [],
+      titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
+      titleactive: 0,
+      activearea: {},
+      subtitle: {},
+      btnbackshow: false,
+      ops: {
+        bar: {
+          background: "#41c9ff",
+          keepShow: true
+        },
+        rail: {
+          background: "#3e4a59",
+          opacity: 0.5
+        }
+      }
+    };
+  },
+  mounted() {
+    this.showP();
+  },
+  methods: {
+    backfn() {
+      send(`${this.msgPathCfg.root}`, []);
+      this.showP();
+    },
+    showP() {
+      this.$axios
+        .get("http://123.56.149.208:8091/external/get/city/all")
+        .then(val => {
+          this.btnlist = val.data.data;
+          this.btnbackshow = false;
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
+        });
+    },
+    showC(item) {
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        this.$axios
+          .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
+          .then(val => {
+            this.btnlist = val.data.data;
+            this.btnbackshow = true;
+            this.subtitle = item;
+            this.activearea = item;
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
+      }
+    },
+    titleclickfn(i) {
+      this.titleactive = i;
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  width: 18.4rem;
+  height: 13.5rem;
+  background: url(../assets/img/content.png) no-repeat left top;
+  background-size: cover;
+  margin-top: 1.5rem;
+  margin-left: 2.2rem;
+}
+.content {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  text-align: left;
+}
+#scrollbox {
+  width: 15.5rem;
+  height: 9rem;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+.btn {
+  float: left;
+  white-space: nowrap;
+  font-size: 0.3rem;
+  color: #fff;
+  text-align: center;
+  line-height: 0.81rem;
+  padding: 0 0.1rem;
+  margin: 0 0.45rem 0.74rem 0;
+  min-width: 2.59rem;
+  height: 0.81rem;
+  background: url(../assets/img/btn-bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.subtitle {
+  margin: 0.5rem 0 0.5rem 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
+}
+.activearea {
+  font-size: 0.35rem;
+}
+.activearea::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -100%;
+  background: url(../assets/img/btn-light.png) no-repeat;
+  background-size: 100% 94%;
+}
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
+</style>

ipadCtr/src/pages/system.vue

+<template>
+  <div class="page">
+    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
+      <div class="content">
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
+        <div id="scrollbox">
+          <vuescroll :ops="ops">
+            <div
+              class="btn"
+              :class="{activearea:activearea.code == item.code}"
+              v-for="(item,index) in btnlist"
+              :key="index"
+              @click="showC(item)"
+            >{{item.name}}</div>
+          </vuescroll>
+        </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
+      </div>
+    </content-box>
+  </div>
+</template>
+
+<script>
+import { send } from "@/service/ctrapi";
+import contentBox from "../components/contentBox";
+import pageTitle from "../components/pageTitle";
+import vuescroll from "vuescroll";
+export default {
+  components: { contentBox, pageTitle, vuescroll },
+  data() {
+    return {
+      btnlist: [],
+      titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
+      titleactive: 0,
+      activearea: {},
+      subtitle: {},
+      btnbackshow: false,
+      ops: {
+        bar: {
+          background: "#41c9ff",
+          keepShow: true
+        },
+        rail: {
+          background: "#3e4a59",
+          opacity: 0.5
+        }
+      }
+    };
+  },
+  mounted() {
+    this.showP();
+  },
+  methods: {
+    backfn() {
+      send(`${this.msgPathCfg.root}`, []);
+      this.showP();
+    },
+    showP() {
+      this.$axios
+        .get("http://123.56.149.208:8091/external/get/city/all")
+        .then(val => {
+          this.btnlist = val.data.data;
+          this.btnbackshow = false;
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
+        });
+    },
+    showC(item) {
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        this.$axios
+          .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
+          .then(val => {
+            this.btnlist = val.data.data;
+            this.btnbackshow = true;
+            this.subtitle = item;
+            this.activearea = item;
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
+      }
+    },
+    titleclickfn(i) {
+      this.titleactive = i;
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  width: 18.4rem;
+  height: 13.5rem;
+  background: url(../assets/img/content.png) no-repeat left top;
+  background-size: cover;
+  margin-top: 1.5rem;
+  margin-left: 2.2rem;
+}
+.content {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  text-align: left;
+}
+#scrollbox {
+  width: 15.5rem;
+  height: 9rem;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+.btn {
+  float: left;
+  white-space: nowrap;
+  font-size: 0.3rem;
+  color: #fff;
+  text-align: center;
+  line-height: 0.81rem;
+  padding: 0 0.1rem;
+  margin: 0 0.45rem 0.74rem 0;
+  min-width: 2.59rem;
+  height: 0.81rem;
+  background: url(../assets/img/btn-bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.subtitle {
+  margin: 0.5rem 0 0.5rem 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
+}
+.activearea {
+  font-size: 0.35rem;
+}
+.activearea::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -100%;
+  background: url(../assets/img/btn-light.png) no-repeat;
+  background-size: 100% 94%;
+}
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
+</style>

ipadCtr/src/pages/yangtzeRiver.vue

+<template>
+  <div class="page">
+    <content-box :btnbackshow="btnbackshow" @btnbackclick="backfn">
+      <div class="content">
+        
+        <div class="subtitle">{{subtitle.name||'全国'}} :</div>
+        <div id="scrollbox">
+          <vuescroll :ops="ops">
+            <div
+              class="btn"
+              :class="{activearea:activearea.code == item.code}"
+              v-for="(item,index) in btnlist"
+              :key="index"
+              @click="showC(item)"
+            >{{item.name}}</div>
+          </vuescroll>
+        </div>
+        <page-title v-if="activearea.code === subtitle.code || activearea.name=='全国'"
+          class="titlePosition"
+          :titledata="titledata"
+          :titleactive="titleactive"
+          @titleclick="titleclickfn"
+        />
+      </div>
+    </content-box>
+  </div>
+</template>
+
+<script>
+import { send } from "@/service/ctrapi";
+import contentBox from "../components/contentBox";
+import pageTitle from "../components/pageTitle";
+import vuescroll from "vuescroll";
+export default {
+  components: { contentBox, pageTitle, vuescroll },
+  data() {
+    return {
+      btnlist: [],
+      titledata: ["24小时", "近一周", "近一月", "近一年"],
+      msgPathCfg:{
+        root:'/预警监控',
+        list1:'/省级',
+        subtitle:'/时间范围',
+      },
+      titleactive: 0,
+      activearea: {},
+      subtitle: {},
+      btnbackshow: false,
+      ops: {
+        bar: {
+          background: "#41c9ff",
+          keepShow: true
+        },
+        rail: {
+          background: "#3e4a59",
+          opacity: 0.5
+        }
+      }
+    };
+  },
+  mounted() {
+    this.showP();
+  },
+  methods: {
+    backfn() {
+      send(`${this.msgPathCfg.root}`, []);
+      this.showP();
+    },
+    showP() {
+      this.$axios
+        .get("http://123.56.149.208:8091/external/get/city/all")
+        .then(val => {
+          this.btnlist = val.data.data;
+          this.btnbackshow = false;
+          this.titleactive = 0
+          this.activearea = this.btnlist[0];
+          this.subtitle = {};
+        });
+    },
+    showC(item) {
+      if (this.btnbackshow) {
+        this.activearea = item;
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}/H5/${this.activearea.name}`,
+          []
+        );
+      } else if (item.name === "全国") {
+        this.activearea = item;
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        this.$axios
+          .get(`http://123.56.149.208:8091/external/get/city/id/${item.code}`)
+          .then(val => {
+            this.btnlist = val.data.data;
+            this.btnbackshow = true;
+            this.subtitle = item;
+            this.activearea = item;
+            send(
+              `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+              []
+            );
+          });
+      }
+    },
+    titleclickfn(i) {
+      this.titleactive = i;
+      if (this.btnbackshow && this.activearea == this.subtitle) {
+        send(
+          `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`,
+          []
+        );
+      } else if (this.activearea.name === "全国") {
+        send(`${this.msgPathCfg.root}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      } else {
+        // send( `${this.msgPathCfg.root}${this.msgPathCfg.list1}/${this.subtitle.name}${this.msgPathCfg.subtitle}/${this.titleactive}`, []);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page {
+  width: 18.4rem;
+  height: 13.5rem;
+  background: url(../assets/img/content.png) no-repeat left top;
+  background-size: cover;
+  margin-top: 1.5rem;
+  margin-left: 2.2rem;
+}
+.content {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  text-align: left;
+}
+#scrollbox {
+  width: 15.5rem;
+  height: 9rem;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+}
+.btn {
+  float: left;
+  white-space: nowrap;
+  font-size: 0.3rem;
+  color: #fff;
+  text-align: center;
+  line-height: 0.81rem;
+  padding: 0 0.1rem;
+  margin: 0 0.45rem 0.74rem 0;
+  min-width: 2.59rem;
+  height: 0.81rem;
+  background: url(../assets/img/btn-bg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.subtitle {
+  margin: 0.5rem 0 0.5rem 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  text-shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
+    0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
+}
+.activearea {
+  font-size: 0.35rem;
+}
+.activearea::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -100%;
+  background: url(../assets/img/btn-light.png) no-repeat;
+  background-size: 100% 94%;
+}
+>>> div.title{
+  background:none;
+  transform: translateY(-0.2rem);
+}
+</style>

ipadCtr/src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import home from '@/pages/home'
+
 import welcome from '@/pages/welcome'
+
+import home from '@/pages/home'
 import equipment from '@/pages/equipment'
 import industry from '@/pages/industry'
 import server from '@/pages/server'
+import belt_road from '@/pages/belt_road'
+import bigdata from '@/pages/bigdata'
+import center from '@/pages/center'
+import disasters from '@/pages/disasters'
+import event from '@/pages/event'
+import scence from '@/pages/scence'
+import system from '@/pages/system'
+import yangtzeRiver from '@/pages/yangtzeRiver'
 
 Vue.use(Router)
-{/* <li> <NavLink to="/home" activeClassName="active"> <span className="icon"></span>首页 </NavLink></li>
-<li> <NavLink to="/equipment" activeClassName="active"><span className="icon"></span>设备/联络人 </NavLink></li>
-<li> <NavLink to="/informationCenter" activeClassName="active"><span className="icon"></span>中心建设 </NavLink></li>
-<li> <NavLink to="/WarmingCenter" activeClassName="active"><span className="icon"></span>预警系统 </NavLink></li>
-<li> <NavLink to="/informationCenter" activeClassName="active"><span className="icon"></span>部委信息 </NavLink></li>
-<li> <NavLink to="/introductionWarning" activeClassName="active"><span className="icon"></span>服务效益 </NavLink></li>
-<li> <NavLink to="/VisitingScene" activeClassName="active"><span className="icon"></span>参观场景 </NavLink></li>
-<li> <NavLink to="/ue4" activeClassName="active"><span className="icon"></span>自然灾害 </NavLink></li>
-<li> <NavLink to="/eventMonitor" activeClassName="active"><span className="icon"></span>事件监控 </NavLink></li> */}
+// {}
 export default new Router({
   routes: [
     {
@@ -39,39 +41,51 @@ export default new Router({
       component: industry
     },
     {
+      path: '/belt_road',
+      name: 'belt_road',
+      component: belt_road
+    },
+    
+    {
+      path: '/bigdata',
+      name: 'bigdata',
+      component: bigdata
+    },
+    {
+      path: '/center',
+      name: 'center',
+      component: center
+    },
+    {
+      path: '/disasters',
+      name: 'disasters',
+      component: disasters
+    },
+    {
+      path: '/event',
+      name: 'event',
+      component: event
+    },
+    {
+      path: '/scence',
+      name: 'scence',
+      component: scence
+    },
+    {
+      path: '/system',
+      name: 'system',
+      component: system
+    },
+    {
+      path: '/yangtzeRiver',
+      name: 'yangtzeRiver',
+      component: yangtzeRiver
+    },
+    {
       path: '/server',
       name: 'server',
       component: server
     },
-    // {
-    //   path: '/equipment',
-    //   name: 'equipment',
-    //   component: home
-    // },
-    // {
-    //   path: '/equipment',
-    //   name: 'equipment',
-    //   component: home
-    // },
-    // {
-    //   path: '/equipment',
-    //   name: 'equipment',
-    //   component: home
-    // },
-    // {
-    //   path: '/equipment',
-    //   name: 'equipment',
-    //   component: home
-    // },
-    // {
-    //   path: '/equipment',
-    //   name: 'equipment',
-    //   component: home
-    // },
-    // {
-    //   path: '/equipment',
-    //   name: 'equipment',
-    //   component: home
-    // },
+ 
   ]
 })

pyhttp/center.pyw

+from flask import Flask, request, jsonify, make_response
+from flask_cors import CORS
+from utils_log import handler
+
+import random
+import socket
+import os
+import argparse
+import json
+import logging
+from pythonosc import osc_message_builder
+from pythonosc import udp_client
+# localIP = socket.gethostbyname(socket.gethostname())  # 得到本地ip
+localIP = '0.0.0.0'
+app = Flask(__name__)
+CORS(app, supports_credentials=True)
+app.logger.addHandler(handler)
+books = [
+    dict(id=1, isdn=random.randrange(1, 1000), title='a python book', author=dict(
+        name='l0set', city='hunan'
+    )),
+    dict(id=2, isdn=random.randrange(1, 1000), title='a golang book', author=dict(
+        name='zwhset', city='beijing'
+    ))
+]
+def getBigUnicode(str):
+    b = bytes(str,'utf-8').decode().encode('utf-16be')
+    arr = [[0]*(4+len(b))][0]
+    arr[0] = 66
+    arr[1] = 69
+    arr[2] = 85
+    arr[3] = 67
+    for index in range(len(b)):
+        arr[index+4] = b[index]
+    return bytes(arr)
+
+def sendMessage(path, message):
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--ip", default="127.0.0.1",
+                        help="The ip of the OSC server")
+    parser.add_argument("--port", type=int, default=7001,
+                        help="The port the OSC server is listening on")
+    args = parser.parse_args()
+
+    client = udp_client.SimpleUDPClient(args.ip, args.port)
+
+    print(path, message)
+    client.send_message(path, message)
+    # error action
+
+
+@app.errorhandler(405)
+def page_not_found(e):
+    return jsonify(dict(code=1, message='method error.')), 405
+
+# get all books
+
+
+@app.route('/api/slider')
+def handle_books():
+    return jsonify(books)
+
+# get a book
+
+
+@app.route('/api/slider/<int:id>')
+def handle_book(id):
+    for i, book in enumerate(books):
+        if book['id'] == id:
+            return jsonify(book)
+    return jsonify(dict(code=2, message="don't fund the book"))
+
+# create a new book
+# 综合页	[{"page":"0"}]
+# 丹寨热力	[{"page":"1"}]
+# 动线	        [{"page":"2"}]
+# 客群画像	[{"page":"3"}]
+# 客群来源	[{"page":"4"}]
+# 丹寨实景	[{"page":"5"}]
+# 客流销售	[{"page":"6"}]
+# 万达bi	[{"page":"bi"}]
+# 万达视频	[{"page":"vid"}]
+# 自动播放	[{"page":"bi"},{"page":"vid"},{"page":"1"}...]
+
+
+@app.route('/api/slider', methods=['POST'])
+def create_slider():
+    print(request.json)
+    result = request.json
+    if(result['index'] == 0):
+        sendMessage([{"page": "6"}])  # 客流销售
+    if(result['index'] == 1):
+        if (result['type'] == 'slider'):
+            sendMessage([{"page": "0"}])  # 丹寨综合
+        if (result['type'] == 'home'):
+            sendMessage([{"page": "0"}])  # 丹寨综合
+        if (result['type'] == 'homeSence'):
+            sendMessage([{"page": "5"}])  # 丹寨场景
+    if(result['index'] == 2):
+        sendMessage([{"page": "bi"}])  # BIM
+    return jsonify(code=0, message='success')
+@app.route('/api/route', methods=['POST'])
+def create_ctr():
+    app.logger.info(str(request))
+    print(request.json['arguments'], len(request.json['arguments']))
+    # result = request.json
+    message = [getBigUnicode(request.json['path'])]
+    if(len(request.json['arguments'])):
+        for index in range(len(request.json['arguments'])):
+          message.append(getBigUnicode(request.json['arguments'][index]))
+    print(message)
+    # sendMessage('/route',[getBigUnicode(request.json['path']), 0 ,1])
+    sendMessage('/remote',message)
+    return jsonify(code=0, message='success', data = request.json)
+@app.route('/api/getState', methods=['get'])
+def handle_route():
+    with open('D:/Warning/2020/Data/currentRoute.txt',mode = 'r' , encoding = "UTF-8" ) as f:
+       str =  f.read()
+       f.close()
+       return jsonify(code=0, message='success', data = str)
+
+if __name__ == '__main__':
+    app.run(host=localIP, port=8900)