修改

src/components/tab.vue

@@ -5,7 +5,7 @@
       <div class="tab-container">
         <div @click="select(item,index)" v-for="(item,index) in list" :key="index" class="tab"
           :class="{'actived':activedIndex==index,'tab-left':index == 0,'tab-right':index==(list.length - 1)}">
-          <div class="animate__animated animate__faster" :class="activedIndex==index?'animate__heartBeat':''">
+          <div >
             {{item.label}}
           </div>
         </div>
@@ -75,6 +75,18 @@
 </script>
 
 <style lang="scss" scoped>
+  .button {
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    background-color: transparent;
+    color: inherit;
+  }
+
+  .button::after {
+    border: none;
+  }
+
   .tab-container {
     cursor: pointer;
     color: var(--color);

src/page/index/top/top-menu.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="tab-left">
       <div style="cursor: pointer;" @click="menuClick(item,index)" v-for="(item,index) in items" :key="index">
-        <div :class="menuIndex == index?'selected animate__heartBeat':''" class="tabName animate__animated"
+        <div :class="menuIndex == index?'selected':''" class="tabName animate__animated"
           style="margin-right: 1.875rem;">
           <span>{{generateTitle(item)}}</span>
           <img v-if="menuIndex == index" src="/img/icon/top-selected.png" class="tab-bottom" />

src/views/dashboard/firemng/comps/alarm.vue

@@ -0,0 +1,62 @@
+<template>
+  <div style="background-color: #FFFFFF;padding: 1rem;min-height: 1110px;"
+    class="animate__animated animate__faster animate__fadeInRight">
+    <more title="实时监测"></more>
+    <!-- 工单列表 -->
+    <div style="padding-top: 0.8rem;">
+      <div class="card" v-for="(item,index) in 12" :key="index">
+        <div class="left">
+          <div class="title">室内消防栓</div>
+          <el-tag style="border-radius: 10px;margin-top: 8px;" size="mini">未处理</el-tag>
+        </div>
+        <div class="right">
+          <el-tag style="border-radius: 10px;margin-bottom: 0.4rem;" size="mini" type="danger">设备告警</el-tag>
+          <div style="font-size: 0.75rem;">2021-03-15 22:40</div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+
+      };
+    },
+    methods: {
+
+    }
+  };
+</script>
+
+
+<style lang="scss" scoped>
+  .card {
+    background-color: #F5F5F5;
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 5px;
+    padding: 15px;
+
+    .left {
+      text-align: left;
+
+      .title {
+        font-size: 0.8rem;
+        font-weight: 800;
+        color: #000000;
+      }
+    }
+
+    .right {
+      text-align: right;
+    }
+  }
+</style>

src/views/dashboard/firemng/comps/dot.vue

@@ -0,0 +1,58 @@
+<template>
+  <div style="display: flex;margin-right: 1rem;">
+    <div class="dot">
+      <div :style="backgroundColor"></div>
+    </div>
+    <div class="title">{{name}}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props:{
+      color:{
+        type:String,
+        default:'#000'
+      },
+      name:String
+    },
+    computed:{
+      backgroundColor(){
+        return `background-color: ${this.color}`
+      }
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .dot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 20px;
+
+    div {
+      width: 8px;
+      height: 8px;
+      background-color: #333;
+      border-radius: 50%;
+    }
+  }
+
+  .title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #666666;
+    opacity: 1;
+  }
+</style>

src/views/dashboard/firemng/comps/maintenance.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="page_access animate__animated animate__faster animate__fadeInUp">
+    <more title="防火检查"></more>
+
+    <div class="area">
+      <div class="area1">日期</div>
+      <div class="area2">区域</div>
+      <div class="area3">维保人员</div>
+      <div class="area4">事件</div>
+    </div>
+
+    <div v-for="(item,index) in 7" :key="index" class="area" style="background-color: #f5f5f5;margin-top: 0.8rem;">
+      <div class="area1">2021-12-12</div>
+      <div class="area2">南区A11栋</div>
+      <div class="area3">吴**</div>
+      <div class="area4">日常消防设施检测</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import tab from "@/components/tab.vue"
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      tab,
+      more
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page_access {
+    background-color: #FFFFFF;
+    padding: 1.25rem;
+    height: 28rem;
+  }
+
+
+  .area {
+    padding: 0.5rem 0;
+    display: flex;
+    font-size: 0.875rem;
+    color: #666666;
+    margin-top: 1rem;
+    text-align: center;
+
+    .area1 {
+      width: 23%;
+    }
+
+    .area2 {
+      width: 23%;
+    }
+
+    .area3 {
+      width: 23%;
+    }
+
+    .area4 {
+      width: 31%;
+    }
+
+  }
+</style>

src/views/dashboard/firemng/comps/monitor.vue

@@ -0,0 +1,387 @@
+<template>
+  <div class="page animate__animated animate__faster animate__fadeInLeft">
+    <more title="设备监测" nomore></more>
+
+    <div class="btnList">
+      <div @click="activedIndex=index" v-for="(item,index) in dataList" :key="index" style="padding-right: 1.25rem;">
+        <el-button :type="activedIndex==index?'primary':''" size="medium">{{item.label}}</el-button>
+      </div>
+    </div>
+
+    <div class="monitor" style="height: 300px;">
+      <div class="layout">
+        <div class="top_layout">
+          <div class="title">火灾报警主机</div>
+          <div style="display: flex;">
+            <dot :color="normalColor" name="正常"></dot>
+            <dot :color="faultColor" name="故障"></dot>
+            <dot :color="alarmColor" name="报警"></dot>
+            <div class="btn">
+              一键报警
+            </div>
+          </div>
+        </div>
+
+        <div class="container-layout">
+          <div class="host-item" :style="backgroundColor(index)" v-for="(item,index) in 42" :key="index">
+            主机00{{index + 1}}
+          </div>
+        </div>
+      </div>
+
+      <div class="layout">
+        <div class="top_layout">
+          <div class="title">回路监测</div>
+          <div style="display: flex;">
+            <dot :color="normalColor" name="正常"></dot>
+            <dot :color="faultColor" name="故障"></dot>
+          </div>
+        </div>
+
+        <div class="container-layout">
+          <div class="loop-item" :style="backgroundColor(index)" v-for="(item,index) in 42" :key="index">
+            <img src="/img/icon/loop.png">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="monitor" style="margin-top: 0;">
+      <div class="layout" style="padding: 0;">
+        <div class="bottom_layout">
+
+          <!-- 室内消防栓/自动淋喷 -->
+          <div class="content_layout" v-for="(item,index) in layoutList" :key="index">
+            <div class="title">{{item.title}}</div>
+            <div class="total">
+              <img :src="item.icon">
+              <div class="total_container">
+                <div class="label">总数</div>
+                <div class="value"><count-to :startVal='0' :endVal='item.value' :duration='2000'></count-to></div>
+              </div>
+            </div>
+            <div class="data_layout">
+              <div v-for="(item1,index1) in item.dataList" :key="index1">
+                <div class="value">
+                  <count-to :startVal='0' :endVal='item1.value' :duration='2000'></count-to>
+                </div>
+                <div class="label">
+                  {{item1.label}}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="layout" style="padding: 0;">
+        <div class="bottom_layout">
+
+          <!-- 消防水池/高位水箱 -->
+          <div class="content_layout" style="justify-content: flex-start;">
+            <div class="title">消防水池</div>
+            <div style="margin: 1.25rem 0;position: relative;" class="center">
+              <dv-water-level-pond :config="config" style="width:90px;height:130px" />
+              <div style="position: absolute;right:0;top: 0.625rem;line-height: 22px;color: #686868;">
+                <div style="font-size: 0.75rem;">高阈值：100</div>
+                <div style="font-size: 0.75rem">低阈值：66</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="content_layout" style="justify-content: flex-start;">
+            <div class="title">高位水箱</div>
+            <div style="margin: 1.25rem 0;position: relative;" class="center">
+              <dv-water-level-pond :config="config1" style="width:90px;height:130px" />
+              <div style="position: absolute;right:0;top: 0.625rem;line-height: 22px;color: #686868;">
+                <div style="font-size: 0.75rem">高阈值：100</div>
+                <div style="font-size: 0.75rem;">低阈值：42</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import dot from "./dot.vue"
+  import countTo from 'vue-count-to'
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      dot,
+      more,
+      countTo
+    },
+    computed: {
+      backgroundColor() {
+        return index => {
+          console.log(index);
+          let color = this.normalColor
+          if (this.faultList.includes(index)) {
+            color = this.faultColor
+          } else if (this.alarmList.includes(index)) {
+            color = this.alarmColor
+          }
+          return `background-color: ${color}`
+        }
+      }
+    },
+    data() {
+      return {
+        normalColor: '#57C736',
+        faultColor: '#F78E13',
+        alarmColor: '#F03636',
+
+        config: {
+          waveHeight: 10,
+          colors: ['#84B9F8', '#3A8DF2'],
+          data: [66],
+          shape: 'roundRect'
+        },
+        config1: {
+          waveHeight: 10,
+          colors: ['#84B9F8', '#3A8DF2'],
+          data: [42],
+          shape: 'roundRect'
+        },
+
+        activedIndex: 0,
+        dataList: [{
+            label: '南区A11栋',
+            value: 1
+          },
+          {
+            label: '南区A12栋',
+            value: 2
+          },
+          {
+            label: '南区A13栋',
+            value: 3
+          }
+        ],
+        faultList: [1, 8, 12, 28],
+        alarmList: [10, 26],
+
+
+        layoutList: [{
+            title: '室内消防栓',
+            icon: '/img/icon/dn.png',
+            total: 641,
+            dataList: [{
+                label: '正常',
+                value: 455,
+              },
+              {
+                label: '离线',
+                value: 64,
+              },
+              {
+                label: '故障',
+                value: 2,
+              }
+            ]
+          },
+          {
+            title: '自动淋喷',
+            icon: '/img/icon/dn.png',
+            total: 562,
+            dataList: [{
+                label: '正常',
+                value: 425,
+              },
+              {
+                label: '离线',
+                value: 32,
+              },
+              {
+                label: '故障',
+                value: 0,
+              }
+            ]
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    background-color: #FFFFFF;
+    padding: 1.25rem;
+    box-sizing: border-box;
+  }
+
+  .bottom_layout {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    background-color: #FFFFFF;
+
+    .content_layout {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      box-sizing: border-box;
+      padding: 1.25rem;
+      width: calc(50% - 10px);
+      height: 219px;
+      background-color: #f5f5f5;
+
+      .total {
+        margin-top: 1.875rem;
+        display: flex;
+
+        img {
+          width: 52px;
+          height: 52px;
+          border-radius: 50%;
+        }
+
+        .total_container {
+          margin-left: 0.625rem;
+
+          .label {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #666666;
+            opacity: 1;
+          }
+
+          .value {
+            font-size: 26px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #3B8FF4;
+            opacity: 1;
+          }
+        }
+      }
+
+      .data_layout {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1.875rem;
+        padding: 0 1.25rem;
+        text-align: center;
+
+        .value {
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #333333;
+          opacity: 1;
+        }
+
+        .label {
+          margin-top: 0.375rem;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #666666;
+          opacity: 1;
+        }
+
+      }
+
+    }
+  }
+
+  .title {
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #333333;
+    opacity: 1;
+  }
+
+
+
+  .btn {
+    overflow: hidden;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 22px;
+    background: #F03636;
+    color: #FFFFFF;
+    font-size: 0.75rem;
+    border-radius: 60px;
+
+    &:active {
+      transform: scale(1.05);
+    }
+  }
+
+  .btnList {
+    padding-top: 0.625rem;
+    display: flex;
+  }
+
+  .monitor {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 100%;
+    margin-top: 1.25rem;
+    padding: 0.625rem;
+
+    .layout {
+      background-color: #F5F5F5;
+      width: calc(50% - 10px);
+      height: 100%;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+
+    .container-layout {
+      margin-top: 1.25rem;
+      display: flex;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+    }
+
+    .host-item {
+      width: 60px;
+      height: 24px;
+      color: #FFFFFF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 12px 12px 0;
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #FFFFFF;
+      opacity: 1;
+    }
+
+    .loop-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 36px;
+      height: 36px;
+      background-color: #57C736;
+      border-radius: 50%;
+      margin: 0 12px 12px 0;
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .top_layout {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+</style>

src/views/dashboard/firemng/comps/warning-num-analysis.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="page">
+    <more title="告警数量分析"></more>
+
+    <div class="container">
+      <div style="width: 100%;height: 100%;" id="warningNumAnalysisChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import more from '@/components/more.vue'
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+      }, 300)
+    },
+    methods: {
+      initMyCharts() {
+        //基于准备好的dom，初始化echarts实例
+        var myChart = echarts.init(document.getElementById('warningNumAnalysisChart'));
+        // 指定图表的配置项和数据
+        var option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          legend: {
+            itemWidth: 15,
+            itemHeight: 15,
+            data: ['火灾报警主机', '室内消防栓', '消防水池', '回路检测', '自动喷淋'],
+          },
+          xAxis: {
+            data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "11月", "12月"],
+            splitLine: {
+              show: false,
+            },
+          },
+          yAxis: {
+            splitLine: {
+              show: false,
+            },
+          },
+          series: [{
+            name: '火灾报警主机',
+            type: 'bar',
+            barWidth: 20,
+            stack: '报警数量',
+            data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 5],
+            itemStyle: {
+              normal: {
+                color: "#3B8FF4"
+              },
+            }
+          }, {
+            name: '室内消防栓',
+            type: 'bar',
+            stack: '报警数量',
+            data: [20, 36, 10, 10, 5, 20, 5, 20, 36, 10, 10, 5],
+            itemStyle: {
+              normal: {
+                color: "#B07EF5"
+              },
+            }
+          }, {
+            name: '消防水池',
+            type: 'bar',
+            stack: '报警数量',
+            data: [20, 36, 10, 10, 5, 20, 5, 20, 36, 10, 10, 5],
+            itemStyle: {
+              normal: {
+                color: "#3BA272"
+              },
+            }
+          }, {
+            name: '回路检测',
+            type: 'bar',
+            stack: '报警数量',
+            data: [20, 36, 10, 10, 5, 20, 5, 20, 36, 10, 10, 5],
+            itemStyle: {
+              normal: {
+                color: "#EB653C"
+              },
+            }
+          }, {
+            name: '自动喷淋',
+            type: 'bar',
+            stack: '报警数量',
+            data: [20, 36, 10, 10, 5, 20, 5, 20, 36, 10, 10, 5],
+            itemStyle: {
+              normal: {
+                barBorderRadius: [10, 10, 0, 0],
+                color: "#FCBA5F"
+              },
+            }
+          }]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+      }
+    }
+  };
+</script>
+
+<style>
+  .dv-scroll-ranking-board .ranking-column .inside-column {
+    position: relative;
+    height: 16px;
+    background-color: #3B8FF4 !important;
+    border-radius: 0 6px 6px 0;
+    margin-bottom: 0px !important;
+    border-radius: 20px;
+    overflow: hidden;
+  }
+
+  .dv-scroll-ranking-board .ranking-column {
+    width: 100%;
+    background-color: #e0f4fc;
+    border-bottom: 0px solid #e0f4fc !important;
+    margin-top: 6px !important;
+  }
+</style>
+
+<style lang="scss" scoped>
+  .page {
+    padding: 1.25rem;
+    background-color: white;
+    box-sizing: border-box;
+  }
+
+  .container {
+    height: 25rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 1.875rem;
+    box-sizing: border-box;
+    align-items: center;
+  }
+
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/views/dashboard/firemng/comps/warning-type-analysis.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="page">
+    <more title="告警类型分析"></more>
+
+    <div class="container">
+      <div style="width: 100%;height: 100%;" id="warningChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  import more from '@/components/more.vue'
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        config: {
+          data: [{
+              name: '室内消防栓',
+              value: 1256
+            },
+            {
+              name: '火灾报警主机',
+              value: 2023
+            },
+            {
+              name: '高位水箱',
+              value: 2354
+            },
+            {
+              name: '自动喷淋',
+              value: 3562
+            },
+            {
+              name: '消防水池',
+              value: 2345
+            }
+          ]
+        }
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+      }, 300)
+    },
+    methods: {
+      // echarts图表 begin
+      initMyCharts() {
+        var myCharts = echarts.init(document.getElementById('warningChart'));
+        window.addEventListener('resize', function() { //执行
+          myCharts.resize();
+        })
+        var option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a}<br/>{b} : {c} ({d}%)'
+          },
+          textStyle: {
+            color: "white",
+            fontWeight: 100,
+            fontSize: 12,
+          },
+          legend: {
+            textStyle: {
+              color: "#777777",
+              fontWeight: 500,
+              fontSize: 12
+            },
+            top: '6%',
+            left: 'center',
+          },
+          color: ['#469af2', '#51F9FF', '#ED8A35', '#ee6666', '#91cc75'],
+          series: [{
+            name: '类型',
+            type: 'pie',
+            radius: ['30%', '56%'],
+            center: ['50%', '56%'],
+            avoidLabelOverlap: false,
+            data: [{
+                name: '温度过高',
+                value: '23'
+              },
+              {
+                name: '电流超标',
+                value: '15'
+              },
+              {
+                name: '设备离线',
+                value: '32'
+              },
+              {
+                name: '设备损坏',
+                value: '18'
+              },
+              {
+                name: '电压负载',
+                value: '6'
+              }
+            ],
+          }]
+        }
+        option && myCharts.setOption(option);
+      },
+      // echarts图表 end
+    }
+  };
+</script>
+
+
+<style lang="scss" scoped>
+  .page {
+    padding: 1.25rem;
+    background-color: white;
+    box-sizing: border-box;
+  }
+
+  .container {
+    height: 25rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    align-items: center;
+  }
+
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/views/dashboard/firemng/firemng.vue

@@ -1,20 +1,85 @@
 <template>
-  <div>
-    消防管理
+  <div class="body">
+    <el-row>
+      <!-- 左容器 -->
+      <el-col :span="18">
+        <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0rem;">
+          <!-- 设备监控 -->
+          <monitor></monitor>
+
+          <!-- 告警分析 -->
+          <div class="my-layout animate__animated animate__faster animate__fadeInUp">
+            <div class="layout">
+              <warning-num-analysis></warning-num-analysis>
+            </div>
+            <div class="layout">
+              <warning-type-analysis></warning-type-analysis>
+            </div>
+          </div>
+
+          <!-- 维修记录 -->
+          <div class="my-layout animate__animated animate__faster animate__fadeInUp">
+            <div class="layout">
+              <maintenance></maintenance>
+            </div>
+            <div class="layout">
+              <maintenance></maintenance>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <!-- 右容器 -->
+      <el-col :span="6">
+        <alarm></alarm>
+      </el-col>
+    </el-row>
+    <div style="height: 1.25rem;"></div>
   </div>
 </template>
 
 <script>
-export default {
-  name: '',
-  data() {
-    return {
-      
-    };
-  }
-};
+  import alarm from "./comps/alarm.vue"
+  import monitor from "./comps/monitor.vue"
+  import maintenance from "./comps/maintenance.vue"
+  import warningTypeAnalysis from "./comps/warning-type-analysis.vue"
+  import warningNumAnalysis from "./comps/warning-num-analysis.vue"
+  export default {
+    components: {
+      alarm,
+      maintenance,
+      warningTypeAnalysis,
+      warningNumAnalysis,
+      monitor
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
 </script>
 
+<style>
+  .avue-main {
+    background-color: #F5F5F5 !important;
+  }
+</style>
+
 <style lang="scss" scoped>
-  
-</style>
+  .body {
+    background-color: #F5F5F5;
+    height: 100%;
+    margin-bottom: 1.9rem;
+  }
+
+  .my-layout {
+    margin-top: 0.625rem;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    .layout {
+      width: calc(50% - 5px);
+    }
+  }
+</style>

src/views/dashboard/onefaceaccess/comps/resident.vue

@@ -13,7 +13,7 @@
         </el-button>
       </div>
 
-      <div class="card-list animate__animated animate__faster animate__backInLeft"
+      <div class="card-list animate__animated animate__faster animate__fadeInLeft"
         style="display: flex;justify-content: center;">
         <div class="card" v-for="(item,index) in list" :key="index">
           <div class="img">

src/views/dashboard/onefaceaccess/comps/strange.vue

@@ -13,7 +13,7 @@
         </el-button>
       </div>
 
-      <div class="card-list strange animate__animated animate__faster animate__backInLeft"
+      <div class="card-list strange animate__animated animate__faster animate__fadeInLeft"
         style="display: flex;justify-content: center;">
         <div class="card" v-for="(item,index) in list" :key="index">
           <div class="img">

src/views/dashboard/parkingmng/comps/parking-usage.vue

@@ -113,7 +113,7 @@
       style="height: 660px;display: flex;justify-content: space-between;flex-direction: column;">
       <div v-for="(item,index) in 2" :key="index" class="grid-content"
         style="display: flex;justify-content: center;align-items: center;width: 100%;height: calc(100%/2 - 15px);">
-        <div style="margin: 0.58rem;" v-for="(item,index) in 57" :key="index">
+        <div style="margin: 0.58rem;" v-for="(item,index) in 55" :key="index">
           <el-popover placement="bottom" title="" width="200" trigger="hover">
             <div class="tips">
               <div>
@@ -148,7 +148,7 @@
 
       <div v-for="(item,index) in 3" :key="index" class="grid-content"
         style="display: flex;justify-content: center;align-items: center;height: 100%;width: calc(100%/3 - 30px);">
-        <div style="margin: 0.4rem;" v-for="(item,index) in 32" :key="index">
+        <div style="margin: 0.4rem;" v-for="(item,index) in 30" :key="index">
           <el-popover placement="bottom" title="" width="200" trigger="hover">
             <div class="tips">
               <div>

src/views/dashboard/redpark/comps/party-notice-list.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="page" style="box-sizing: border-box;">
+    <more :title="title"></more>
+
+    <div class="list">
+      <div class="item"  v-for="(item,index) in size" :key="index">
+        <div class="title">
+          <div class="dot">
+            <div></div>
+          </div>
+          <div class="text-cut-1">强化党建宣传,增强党建工作活力</div>
+        </div>
+        <div class="time">2021-08-10</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from '@/components/more.vue'
+  export default {
+    components: {
+      more
+    },
+    props: {
+      title: String,
+      size:{
+        type:Number,
+        default:8
+      }
+    },
+    data() {
+      return {
+
+      };
+    },
+    methods: {
+
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    padding: 1.25rem;
+    background-color: white;
+    box-sizing: border-box;
+  }
+
+  .text-cut-1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+  }
+
+
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .list {
+    box-sizing: border-box;
+    margin-top: 10px;
+
+
+    .item {
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      width: 100%;
+      padding: 6px 0;
+      box-sizing: border-box;
+
+
+
+
+      .title {
+        width: 70%;
+        display: flex;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #333333;
+        opacity: 1;
+
+
+        .dot {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          width: 20px;
+
+          div {
+            width: 4px;
+            height: 4px;
+            background-color: #333;
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .title:hover{
+        color: #0073EB;
+        text-decoration: underline;
+      }
+
+      .time {
+        display: flex;
+        justify-content: flex-end;
+        width: 30%;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #999999;
+        opacity: 1;
+      }
+    }
+
+
+
+    .item:last-child {
+      padding-bottom: 0;
+    }
+
+
+
+  }
+</style>

src/views/dashboard/redpark/comps/party-recommend-list.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="page">
+    <more title="相关推荐" nomore></more>
+
+    <div class="container" style="height: 20.2rem;">
+      <div class="item" style="height: 80px;"
+        :style="'background-image: linear-gradient('+item.backgroundImage+')'" v-for="(item,index) in list"
+        :key="index">
+        <div>{{item.name}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from '@/components/more.vue'
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        list: [{
+            name: '疫情防控',
+            backgroundImage: '#5BD9EA,#157EE8'
+          },
+          {
+            name: '教育科研',
+            backgroundImage: '#6421E2,#8B8FF7'
+          },
+          {
+            name: '职业教育',
+            backgroundImage: '#11C38C,#66EDED'
+          },
+          {
+            name: '医疗卫生',
+            backgroundImage: '#EA7A27,#F0CF45'
+          },
+          {
+            name: '社会保障',
+            backgroundImage: '#F82B54,#F8A691'
+          },
+          {
+            name: '投诉与建议',
+            backgroundImage: '#E875ED,#9535E6'
+          },
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    background-color: #FFFFFF;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 1.25rem;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .container {
+    width: 100%;
+    height: 22.1rem;
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .item {
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #FFFFFF;
+      height: 100px;
+      width: calc(50% - 10px);
+      height: 60px;
+      border-radius: 0.5rem;
+    }
+
+    .item:active{
+      transform: scale(1.05);
+    }
+  }
+
+
+  .button {
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    background-color: transparent;
+    color: inherit;
+  }
+
+  .button::after {
+    border: none;
+  }
+</style>

src/views/dashboard/redpark/comps/party-tools.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="page">
+    <more title="实用工具" nomore></more>
+    <div class="list">
+      <div class="item" style="margin: 15px;" v-for="(item,index) in list" :key="index">
+        <img :src="item.icon">
+        <div class="label">{{item.name}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from '@/components/more.vue'
+  export default {
+    components:{
+      more
+    },
+    data() {
+      return {
+          list:[
+            {
+              icon:'/img/party/jg.png',
+              name:'机构'
+            },
+            {
+              icon:'/img/party/hd.png',
+              name:'互动'
+            },
+            {
+              icon:'/img/party/fw.png',
+              name:'服务'
+            },
+            {
+              icon:'/img/party/bm.png',
+              name:'便民'
+            },
+            {
+              icon:'/img/party/tp.png',
+              name:'投票'
+            },
+            {
+              icon:'/img/party/pg.png',
+              name:'评估'
+            },
+            {
+              icon:'/img/party/gg.png',
+              name:'公告'
+            },
+            {
+              icon:'/img/party/dc.png',
+              name:'督查'
+            }
+          ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    background-color: #FFFFFF;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 1.25rem;
+  }
+
+  .center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .list {
+    margin-top: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .item {
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
+      img {
+        width: 60px;
+        height: 60px;
+      }
+
+      .label {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #666666;
+        opacity: 1;
+        text-align: center;
+        margin-top: 6px;
+      }
+    }
+
+    .item:active{
+      transform: scale(1.05);
+    }
+  }
+</style>

src/views/dashboard/redpark/redpark.vue

@@ -1,20 +1,99 @@
 <template>
-  <div>
-    红色园区
+  <div class="body">
+    <el-row>
+      <!-- 左容器 -->
+      <el-col :span="18">
+        <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0rem;">
+          <div class="my-layout animate__animated animate__faster animate__fadeInDown">
+            <div class="layout">
+              <party-notice-list title="党建宣教"></party-notice-list>
+            </div>
+            <div class="layout">
+              <party-notice-list title="政务联播"></party-notice-list>
+            </div>
+          </div>
+
+          <div class="center-layout animate__animated animate__faster animate__fadeInLeft">
+            <img style="width: 100%;height: 100%;" src="/img/party/news.png">
+          </div>
+
+          <div class="my-layout mtp animate__animated animate__faster animate__fadeInUp">
+            <div class="layout">
+              <party-notice-list title="智慧党建" :size="11"></party-notice-list>
+            </div>
+            <div class="layout">
+              <party-notice-list title="相关政策" :size="11"></party-notice-list>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <!-- 右容器 -->
+      <el-col :span="6">
+        <div class="animate__animated animate__faster animate__fadeInRight">
+          <party-notice-list title="公告公示"></party-notice-list>
+        </div>
+        <div class="center-layout animate__animated animate__faster animate__fadeInRight">
+          <party-tools></party-tools>
+        </div>
+
+        <div class="mtp animate__animated animate__faster animate__fadeInUp">
+          <party-recommend-list></party-recommend-list>
+        </div>
+
+      </el-col>
+    </el-row>
+
+    <div style="height: 1.25rem;"></div>
   </div>
 </template>
 
 <script>
-export default {
-  name: '',
-  data() {
-    return {
-      
-    };
-  }
-};
+  import partyTools from "./comps/party-tools.vue"
+  import partyNoticeList from "./comps/party-notice-list.vue"
+  import partyRecommendList from "./comps/party-recommend-list.vue"
+  export default {
+    components: {
+      partyTools,
+      partyNoticeList,
+      partyRecommendList
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
 </script>
 
+<style>
+  .avue-main {
+    background-color: #F5F5F5 !important;
+  }
+</style>
+
 <style lang="scss" scoped>
-  
-</style>
+  .body {
+    box-sizing: border-box;
+    background-color: #F5F5F5;
+    height: 100%;
+  }
+
+  .mtp{
+    margin-top: 0.625rem;
+  }
+
+  .my-layout {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    .layout {
+      width: calc(50% - 5px);
+    }
+  }
+
+  .center-layout {
+    margin-top: 0.625rem;
+    height: 18.75rem;
+  }
+</style>

src/views/dashboard/smartoperationcenter/comps/access_records.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page animate__animated animate__faster animate__fadeInUp">
+  <div class="page_access animate__animated animate__faster animate__fadeInUp">
     <more title="通行记录"></more>
     <div class="area">
       <div class="area1">日期</div>
@@ -34,7 +34,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .page {
+  .page_access {
     background-color: #FFFFFF;
     padding: 1.25rem;
     height: 28rem;

src/views/dashboard/smartoperationcenter/comps/agency_info.vue

@@ -24,7 +24,9 @@
         <div class="bottom">
           <div v-for="(item,index) in list" :key="index">
             <div class="label">{{item.label}}</div>
-            <div class="value">{{item.value}}</div>
+            <div class="value">
+              <count-to :startVal='0' :endVal='item.value' :duration='2000'></count-to>
+            </div>
           </div>
         </div>
       </div>
@@ -38,10 +40,12 @@
 
 <script>
   import * as echarts from 'echarts';
+  import countTo from 'vue-count-to'
   import more from "@/components/more.vue"
   export default {
     components: {
-      more
+      more,
+      countTo
     },
     data() {
       return {

src/views/dashboard/smartoperationcenter/comps/air_quality.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page animate__animated animate__faster animate__fadeInUp">
+  <div class="page_air animate__animated animate__faster animate__fadeInUp">
     <more title="空气质量检测"></more>
     <div class="area-box">
       <div class="area">
@@ -119,7 +119,7 @@
     height: 100%;
   }
 
-  .page {
+  .page_air {
     background-color: #FFFFFF;
     padding: 1.25rem;
     height: 30rem;

src/views/dashboard/smartoperationcenter/comps/device.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page animate__animated animate__faster animate__fadeInUp">
+  <div class="page_device animate__animated animate__faster animate__fadeInUp">
     <more title="设备管理"></more>
     <div class="card">
       <div class="item" style="margin-right: 0;width: 44%;" v-for="(item,index) in list" :key="index">
@@ -99,7 +99,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .page {
+  .page_device {
     background-color: #FFFFFF;
     padding: 1.25rem;
     height: 28rem;

src/views/dashboard/smartoperationcenter/comps/energy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page animate__animated animate__faster animate__fadeInUp">
+  <div class="page_ageney animate__animated animate__faster animate__fadeInUp">
     <more title="能耗统计"></more>
     <tab></tab>
     <div style="height: 25rem;margin-top: 1.25rem;width: 100%;">
@@ -76,7 +76,7 @@
     width: 100%;
   }
 
-  .page {
+  .page_ageney {
     background-color: #FFFFFF;
     padding: 1.25rem;
     height: 30rem;

src/views/dashboard/smartoperationcenter/comps/grid_list.vue

@@ -2,7 +2,7 @@
   <!-- 宫格功能 -->
   <div class="page">
     <div class="my-grid animate__animated animate__faster animate__fadeInDown">
-      <div @click="selected(item,index)" :id="'id'+index" class="item" v-for="(item,index) in list" :key="index">
+      <div @click="selected(item,index)"  class="item" v-for="(item,index) in list" :key="index">
         <img :src="item.icon">
         <label>{{item.name}}</label>
       </div>
@@ -94,12 +94,10 @@
         color: #333333;
         font-size: 0.75rem;
       }
+    }
 
-      &:active {
-        box-shadow: none;
-      }
-
-
+    .item:active {
+      transform: scale(1.05);
     }
 
 

src/views/dashboard/smartoperationcenter/comps/work_order.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="background-color: #FFFFFF;padding: 1rem;" class="animate__animated animate__faster animate__fadeInRight">
+  <div style="background-color: #FFFFFF;padding: 1rem;min-height: 1410px;" class="animate__animated animate__faster animate__fadeInRight">
     <more title="工单管理"></more>
     <!-- 胶囊标签 -->
     <div style="padding-top: 0.625rem;">
@@ -7,10 +7,10 @@
     </div>
     <!-- 工单列表 -->
     <div style="padding-top: 0.8rem;">
-      <div class="card" v-for="(item,index) in 14" :key="index">
+      <div class="card" v-for="(item,index) in 15" :key="index">
         <div class="left">
           <div class="title">电梯一级告警</div>
-          <el-tag style="border-radius: 10px;" size="mini">未处理</el-tag>
+          <el-tag style="border-radius: 10px;margin-top: 0.375rem;" size="mini">未处理</el-tag>
         </div>
         <div class="right">
           <el-tag style="border-radius: 10px;margin-bottom: 0.4rem;" size="mini" type="danger">设备告警</el-tag>
@@ -55,7 +55,7 @@
     background-color: #F5F5F5;
     display: flex;
     justify-content: space-between;
-    margin: 15px 5px;
+    margin: 10px 5px;
     padding: 15px;
 
     .left {

src/views/dashboard/smartsecurity/comps/control.vue

@@ -9,10 +9,10 @@
           <div class="search-body animate__animated  animate__zoomIn">
             <el-input v-model="input" prefix-icon="el-icon-search" suffix-icon="el-icon-camera-solid"
               placeholder="请输入姓名"></el-input>
-            <div class="btn" @click="searchClick(0)" id="searchId0" style="background-color: #3B8FF4;">
+            <div class="btn" style="background-color: #3B8FF4;">
               抓拍记录
             </div>
-            <div class="btn" @click="searchClick(1)" id="searchId1" style="background-color: #F47B3B;">
+            <div class="btn" style="background-color: #F47B3B;">
               人员轨迹
             </div>
           </div>
@@ -22,7 +22,7 @@
       <div class="container-right animate__animated animate__faster animate__fadeInRight">
         <more title="今日布控预警"></more>
 
-        <div class="card-box" v-for="(item,index) in 4" :key="index">
+        <div class="card-box" style="margin-top: 0.975rem" v-for="(item,index) in 5" :key="index">
           <div class="left center">
             <div class="left-data">
               <div>张**</div>
@@ -74,10 +74,7 @@
       };
     },
     methods: {
-      searchClick(index) {
-        let id = '#searchId' + index
-        this.$animateCss(id, 'animate__pulse  ')
-      }
+
     }
   };
 </script>
@@ -100,6 +97,10 @@
       width: 6.5rem;
       text-align: center;
     }
+
+    .btn:active {
+      transform: scale(1.05);
+    }
   }
 
   /deep/ .el-input__inner {

src/views/dashboard/smartsecurity/comps/func-list.vue

@@ -19,8 +19,8 @@
             </div>
           </div>
           <div class="right">
-            <el-button size="mini" @click="add(item,index)" :id="'id'+index"
-              style="background-color: #FFFFFF;color: #3b8ff4;" type="primary" plain round>
+            <el-button size="mini" class="btn" style="background-color: #FFFFFF;color: #3b8ff4;" type="primary" plain
+              round>
               <i class="el-icon-plus"></i>
               新增
             </el-button>
@@ -109,10 +109,7 @@
 
     },
     methods: {
-      add(item, index) {
-        let id = '#id' + index
-        this.$animateCss(id, 'animate__heartBeat')
-      }
+
     }
   };
 </script>
@@ -124,6 +121,10 @@
     width: 100%;
   }
 
+  .btn:active{
+    transform: scale(1.1);
+  }
+
 
   .symbol {
     font-size: 0.6em;
@@ -224,9 +225,8 @@
 
           div:last-child {
             padding-top: 0.1rem;
-            font-size: 1.2rem;
-            color: #333;
-            font-weight: 800;
+            font-size: 1.4rem;
+            color: #3B8FF4;
           }
         }
       }
@@ -234,4 +234,16 @@
 
 
   }
+
+  .button {
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    background-color: transparent;
+    color: inherit;
+  }
+
+  .button::after {
+    border: none;
+  }
 </style>

src/views/wel/index.vue

@@ -1,9 +1,24 @@
 <template>
-  <div  class="full animate__animated animate__faster"
-    :class="menuIndex == 0 ? 'animate__fadeInLeftBig' : 'animate__fadeOutLeftBig'">
-    <basic-container style="margin-top: 10px;">
-      <avue-data-card :option="option"></avue-data-card>
-    </basic-container>
+  <div class="full animate__animated animate__faster" v-show="menuIndex == 0" :class="menuIndex == 0 ? 'animate__fadeInUpBig' : 'animate__fadeOutUpBig'" style="overflow: hidden;" >
+    <!--  背景--3D场景   -->
+    <scene3-d ref="scene" style="z-index: 9;" :camera-option="cameraOptions" :controls-option="controlsOption"
+              @loadingFinish="initScene">
+    </scene3-d>
+    <!-- 数据面板  -->
+    <main-scene @openDialog="openDialog" @playVideo="playVideo" @showInfoBox="showInfoBox" ref="data-panel"
+                style="z-index: 9;"> </main-scene>
+
+    <!--  工具栏   -->
+    <tools-bar :option="toolsOption"></tools-bar>
+
+    <!-- 园区事件 -->
+    <mp-dialog ref="mpDialog" title="园区事件">
+      <div slot="detail" style="color: #FFFFFF;padding: 1.25rem;">
+        {{dialogDetail.detail}}
+      </div>
+    </mp-dialog>
+    <!-- 视频播放 -->
+    <devicePlayer ref="devicePlayer"></devicePlayer>
   </div>
 </template>
 
@@ -11,119 +26,503 @@
   import {
     mapGetters
   } from "vuex";
+  import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
+  import mpDialog from "../../components/mp-dialog.vue"
+  import TopBar from "../../components/3DScene/top-bar/top-bar";
+  import Scene3D from "../../components/3DScene/3DScene";
+  import MainScene from "../../components/scene/mainScene";
+  import ToolsBar from "../../components/3DScene/tools-bar/tools-bar";
+  import * as Three from "three";
+  import {
+    getBox1,
+    getCameraBox
+  } from "../../components/3DScene/infoBox";
+  import {
+    CSS2DObject
+  } from "three/examples/jsm/renderers/CSS2DRenderer";
+  import {
+    fullscreenToggel
+  } from "../../util/util";
   export default {
+    name: "index",
+    components: {
+      devicePlayer,
+      mpDialog,
+      MainScene,
+      Scene3D,
+      TopBar,
+      ToolsBar,
+    },
     computed: {
       ...mapGetters(["menuIndex"])
     },
     data() {
       return {
-        option: {
-          span: 8,
-          data: [{
-              name: '大屏设计器',
-              src: './test/3.png',
-              text: '自动生成大屏数据面板',
-              href: 'https://data.avuejs.com/build/1427195433161928705',
-              target: '_blank'
-            },
-            {
-              name: '3D场景设计器',
-              src: './test/1.png',
-              text: '构建自己的3D可视化场景',
-              href: 'http://8.129.99.119/editor/editor/',
-              target: '_blank'
-            },
-            {
-              name: '信阳榕基软件园',
-              src: './test/2.png',
-              text: '信阳软件园区',
-              href: 'http://192.168.1.69:1888/',
-              target: '_blank'
-            },
-            // {
-            //   name: '城市指挥中心',
-            //   src: './test/5.png',
-            //   text: '城市指挥中心',
-            //   href:'http://36.103.227.152:1777',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '城市网格管理',
-            //   src: './test/4.png',
-            //   text: '城市网格管理',
-            //   href:'http://36.103.227.152:1666',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '宁夏银川市望远工业园区德锐斯创业园',
-            //   src: './test/6.png',
-            //   text: '宁夏银川市望远工业园区德锐斯创业园',
-            //   href:'http://139.9.103.171:1999/#/wel/index21',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '宁夏数字园区',
-            //   src: './test/7.png',
-            //   text: '宁夏数字园区',
-            //   href:'http://139.9.103.171:1888/#/wel/smartCommunity',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '消防态势--设备态势',
-            //   src: './test/8.png',
-            //   text: '消防态势--设备态势',
-            //   href:'http://192.168.1.69:1889/#/wel/fireDevices',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '养老服务',
-            //   src: './test/9.png',
-            //   text: '养老服务',
-            //   href:'http://192.168.1.69:1889/#/wel/smartPension',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '公安服务',
-            //   src: './test/10.png',
-            //   text: '公安服务',
-            //   href:'http://192.168.1.69:1889/#/wel/smartPolice',
-            //   target:'_blank'
-            // },
-            // {
-            //   name: '运营服务',
-            //   src: './test/11.png',
-            //   text: '运营服务',
-            //   href:'http://192.168.1.69:1889/#/wel/operatePlatform',
-            //   target:'_blank'
-            // },
-          ]
+        dialogDetail: {},
+
+        mesh: {},
+        searchText: "",
+        searchCameraType: "",
+        searchType: "building",
+        searchIndex: 0,
+        isReady: false,
+        handlePanelShow: false,
+        toolsPanelType: "building",
+        toolsOption: [{
+          icon: '/img/tools/361.png',
+          name: '旋转',
+          event: this.round
         },
+          {
+            icon: '/img/tools/reset.png',
+            name: '复位',
+            event: this.reset
+          },
+          {
+            icon: '/img/tools/loudong.png',
+            name: '建筑信息',
+            event: () => {
+              this.showBox(this.buildingObj, "building")
+            }
+          },
+          {
+            icon: '/img/tools/video.png',
+            name: '摄像头',
+            event: () => {
+              this.showBox(this.cameraObj, "camera")
+            }
+          },
+          {
+            icon: '/img/tools/full.png',
+            name: '信息框',
+            event: () => {
+              this.$refs['data-panel'].infoBoxShow()
+            }
+          },
+        ],
+        finishNum: 0,
+        loadingSchedule: 0,
+        buildingsRes: [],
+        cameraRes: [],
+        objs: [],
+        gltf: [
+          '/gltf/7_8/20H.gltf',
+          // '/gltf/5H/5H.gltf',
+          // '/gltf/3H/3H.gltf',
+          // '/gltf/7H/7H.gltf',
+          // '/gltf/13H/13H.gltf',
+          // '/gltf/14H/14H.gltf',
+          // '/gltf/17H/17H.gltf',
+          // '/gltf/1H/1H.gltf',
+          '/gltf/DX2/DX2.gltf',
+          '/gltf/TiKuai/TiKuai.gltf',
+          '/gltf/SKY/Sky.gltf',
+          // '/gltf/Tree_Car/Tree_Car.gltf',
+        ],
+        controlsOption: {
+          minDistance: 100,
+          maxDistance: 500,
+          autoRotate: false,
+          autoRotateSpeed: 1,
+          keyPanSpeed: 3,
+          target: new Three.Vector3(0, 0, 0),
+          enableDamping: true,
+        },
+        cameraOptions: {
+          position: [5000, 5000, 1000],
+          near: 0.01,
+          far: 50000,
+          lookAt: [1300, 0, 1300],
+        },
+        obj: [{
+          mtlUrl: '/obj/CAR.mtl',
+          objUrl: '/obj/CAR.obj'
+        },
+          {
+            mtlUrl: '/obj/DX.mtl',
+            objUrl: '/obj/DX.obj'
+          },
+          {
+            mtlUrl: '/test/Tree.mtl',
+            objUrl: '/test/Tree.obj'
+          },
+          {
+            mtlUrl: '/obj/TiKuai.mtl',
+            objUrl: '/obj/TiKuai.obj'
+          },
+          {
+            mtlUrl: '/obj/XiaoPin.mtl',
+            objUrl: '/obj/XiaoPin.obj'
+          },
+          {
+            mtlUrl: '/test/Building_A.mtl',
+            objUrl: '/test/Building_A.obj'
+          },
+          {
+            mtlUrl: '/test/BuildingB.mtl',
+            objUrl: '/test/BuildingB.obj'
+          },
+          {
+            mtlUrl: '/test/BuildingC.mtl',
+            objUrl: '/test/BuildingC.obj'
+          },
+          {
+            mtlUrl: '/obj/building/3H.mtl',
+            objUrl: '/obj/building/3H.obj'
+          },
+          {
+            mtlUrl: '/obj/building/5H.mtl',
+            objUrl: '/obj/building/5H.obj'
+          },
+          {
+            mtlUrl: '/obj/building/13H.mtl',
+            objUrl: '/obj/building/13H.obj'
+          },
+          {
+            mtlUrl: '/obj/building/14H.mtl',
+            objUrl: '/obj/building/14.obj'
+          },
+          {
+            mtlUrl: '/obj/building/17.mtl',
+            objUrl: '/obj/building/17.obj'
+          },
+          {
+            mtlUrl: '/obj/building/20.mtl',
+            objUrl: '/obj/building/20.obj'
+          },
+        ],
+        buildings: [{
+          text: '软件园主楼',
+          position: [100, 115, 100]
+        },
+          {
+            text: '软件园副楼',
+            position: [170, 50, 50]
+          },
+          {
+            text: '软件园A栋',
+            position: [0, 105, 110]
+          },
+          {
+            text: '软件园B栋',
+            position: [-70, 105, 110]
+          },
+          {
+            text: '软件园C栋',
+            position: [-120, 105, 55]
+          },
+          {
+            text: '软件园D栋',
+            position: [-120, 105, -20]
+          },
+        ],
+        cameraList: [{
+          number: 'HK-nm51658186',
+          position: [50, 0, 70],
+          src: '/video/video2.mp4',
+          name: "设备2",
+          type: "枪机"
+        },
+          {
+            number: 'HK-nm51658186',
+            position: [-100, 0, 100],
+            src: '/video/video3.mp4',
+            name: "设备3",
+            type: "枪机"
+          },
+          {
+            number: 'HK-nm51658186',
+            position: [100, 0, 20],
+            src: '/video/video4.mp4',
+            name: "设备4",
+            type: "枪机"
+          },
+          {
+            number: 'HK-nm51658186',
+            position: [200, 0, 50],
+            src: '/video/video4.mp4',
+            name: "设备4",
+            type: "球机"
+          },
+          {
+            number: 'HK-nm51658186',
+            position: [75, 0, 10],
+            src: '/video/video4.mp4',
+            name: "设备4",
+            type: "球机"
+          },
+        ],
+        cameraObj: {},
+        buildingObj: {},
+      }
+    },
+    provide() {
+      return {
+        "index": this
+      }
+    },
+    mounted() {
+      this.buildingsRes = this.buildings;
+      this.cameraRes = this.cameraList;
+    },
+    watch: {
+      searchCameraType() {
+        this.cameraRes = this.searchCameraType == "全部" ? this.cameraList : this.cameraList.filter(item => item.type ==
+          this.searchCameraType)
       }
     },
     methods: {
+      showInfoBox() {
+        this.toolsOption.forEach(item => {
+          if (item.name == '信息框') {
+            if (item.icon == '/img/tools/full.png') {
+              item.icon = '/img/tools/full-out.png'
+            } else {
+              item.icon = '/img/tools/full.png'
+            }
+            console.log(item, "123");
+            this.$forceUpdate()
+          }
+        })
+      },
+      openDialog(item) {
+        this.dialogDetail = item
+        this.$refs.mpDialog.open(item.time)
+      },
+      playVideo(item) {
+
+        const {
+          deviceId
+        } = item
+        const {
+          channelId
+        } = item
+        const {
+          info
+        } = item
+        this.$refs.devicePlayer.openDialog("media", deviceId, channelId, info);
+      },
+      reset() {
+        this.$refs['scene'].camera.position.z = this.cameraOptions.position[0];
+        this.$refs['scene'].camera.position.x = this.cameraOptions.position[1];
+        this.$refs['scene'].camera.position.y = this.cameraOptions.position[2];
+        this.$refs['scene'].camera.lookAt(...this.cameraOptions.lookAt);
+        this.$refs['scene'].controls.target.set(0, 0, 0);
+        this.$refs['data-panel'].infoBoxShow(true);
+      },
+      handleNext(num, list) {
+        this.searchIndex = (this.searchIndex + num) % list.children.length;
+        if (this.searchIndex < 0) {
+          this.searchIndex = list.children.length + this.searchIndex;
+        }
+        list.children.forEach((item, index) => {
+          console.log(this.searchIndex, index);
+          if (index == this.searchIndex) {
+            this.$refs['scene'].flyto(item.position);
+            item.visible = true;
+          } else {
+            item.visible = false;
+          }
+        })
+      },
+      async initScene() {
+        this.$refs['scene'].scene.fog = new Three.Fog(this.$refs['scene'].scene.background, 1, 5000);
+        //添加天空盒
+        // this.$refs['scene'].addSkyBox(
+        //   [
+        //     '/sky/HDR_r.jpg',
+        //     '/sky/HDR_l.jpg',
+        //     '/sky/HDR_u.jpg',
+        //     '/sky/HDR_d.jpg',
+        //     '/sky/HDR_f.jpg',
+        //     '/sky/HDR_b.jpg',
+        //   ]
+        // );
+        //  添加模型
+        // await this.addObj();
+        await this.addGltf();
+        this.addDirectionalLight();
+        this.initBoxInfo();
+        this.isReady = true;
+        //自旋转
+        // this.$refs['scene'].controls.autoRotate = true;
+
+      },
+      toBuilding(objIndex, list) {
+        list.children.forEach((item, index) => {
+          if (objIndex == index) {
+            this.searchIndex = index;
+            this.$refs['scene'].flyto(item.position);
+            item.visible = true;
+          } else {
+            item.visible = false;
+          }
+        })
+      },
+      quitToolPanel() {
+        this.handlePanelShow = false;
+        this.buildingObj.children.forEach(item => {
+          item.visible = false;
+        })
+        this.cameraObj.children.forEach(item => {
+          item.visible = false;
+        })
+        this.reset();
+      },
+      async addGltf() {
+        this.gltf.forEach(item => {
+          this.$refs['scene'].addGltf(item,
+            (gltf) => {
+              this.$refs['scene'].scene.add(gltf.scene)
+              gltf.scene.traverse(function(child) {
+                child.castShadow = true;
+                child.receiveShadow = true;
+                if (child.isMesh) {
+                  console.log(child, 546546);
+                  child.material.color = new Three.Color("rgb(200,200,200)");
+                  child.material.side = Three.DoubleSide;
+                  child.material.emissive = child.material.color;
+                  child.material.emissiveMap = child.material.map;
+
+                  if (child.material.name == 'JZ_LanGan_GeZi' || child.material.name == 'JZ_14_LanGan' ||
+                    child.name.indexOf("Tree") > -1) {
+                    console.log(child.name, 456789)
+                    child.material.transparent = true;
+                  }
+                }
+              });
+              this.finishNum++;
+              this.loadingSchedule = ((this.finishNum * 100) / (this.gltf.length * 100)) * 100
+            },
+            (xhr) => {
+              if (xhr.total == xhr.loaded) {
+                // this.finishNum++;
+              }
+            });
+        })
+
+      },
+      initBoxInfo() {
+        this.buildingObj = new Three.Object3D();
+        this.buildings.forEach(item => {
+          let element = getBox1(item.text, this);
+          let label = new CSS2DObject(element);
+          label.position.x = item.position[0];
+          label.position.y = item.position[1];
+          label.position.z = item.position[2];
+          label.visible = false;
+          this.buildingObj.add(label);
+        })
+        this.$refs['scene'].scene.add(this.buildingObj);
+
+        this.cameraObj = new Three.Object3D();
+        this.cameraList.forEach(item => {
+          let element = getCameraBox(item, this);
+          let label = new CSS2DObject(element);
+          label.position.x = item.position[0];
+          label.position.y = item.position[1];
+          label.position.z = item.position[2];
+          label.visible = false;
+          this.cameraObj.add(label);
+        })
+        this.$refs['scene'].scene.add(this.cameraObj);
+
+      },
+      //添加平行光
+      addDirectionalLight() {
+        //添加光源
+        let dirLight = new Three.DirectionalLight("#bebebe", 1)
+        dirLight.position.set(1, 1, 1);
+        dirLight.shadow.mapSize.width = 512; // default
+        dirLight.shadow.mapSize.height = 512; // default
+        dirLight.shadow.camera.near = 1; // default
+        dirLight.shadow.camera.far = 100;
+        dirLight.castShadow = true;
+        this.$refs['scene'].scene.add(dirLight);
+      },
+      showBox(list, type) {
+        this.$refs['scene'].controls.autoRotate = false;
+        this.toolsPanelType = type;
+        this.handlePanelShow = true;
+        this.searchIndex = 0;
+        if (list.children.length > 0) {
+          list.children[0].visible = true;
+          this.$refs['data-panel'].infoBoxShow(false)
+          this.$refs['scene'].flyto(list.children[0].position)
+        }
 
+      },
+      showCamera() {
+        const list = this.cameraObj;
+        list.children.forEach((item, index) => {
+          item.visible = !item.visible;
+        })
+      },
+      handleFull() {
+        fullscreenToggel();
+      },
+      round() {
+        this.$refs['scene'].controls.autoRotate = !this.$refs['scene'].controls.autoRotate;
+      },
+      handleSearch() {
+        this.buildingsRes = this.buildings.filter(item => item.text.indexOf(this.searchText) > -1)
+      },
     }
   }
 </script>
 
+<style scoped>
+  .handle-panel-1 {
+    width: 20%;
+    height: 430px;
+    /* background: rgba(230, 160, 9, 0.5); */
+    position: absolute;
+    top: 200px;
+    left: 3%;
+  }
 
+  .handle-panel-2 {
+    width: 20%;
+    height: 510px;
+    /* background: rgba(230, 160, 9, 0.5); */
+    position: absolute;
+    top: 200px;
+    left: 3%;
+  }
 
-<style scoped lang="scss">
-  /deep/ .data-card .item {
-    position: relative;
-    margin: 0 auto 50px;
-    width: 500px;
+  .search-body {
+    overflow-y: scroll;
+    width: 100%;
     height: 300px;
-    overflow: hidden;
-    /* border-radius: 5px;
-    border-color: transparent; */
-    /* border-width: 1px;
-    border-style: solid; */
-    /* box-shadow: 2px 2px 2px #30313B; */
+  }
+
+  .search-footer {
+    width: 100%;
+    height: 60px;
+    background: rgba(0, 0, 0, 0.5);
+    color: whitesmoke;
+    font-size: 18px;
+  }
+
+  .search-item {
+    width: 95%;
+    margin: auto;
+    height: 45px;
+    border-bottom: 1px solid #525252;
+  }
+
+  .click:hover {
+    cursor: pointer;
+    transform: translate(1px, 1px);
+  }
 
+  .click:active {
+    cursor: pointer;
+    transform: translate(2px, 2px);
   }
 
-  /deep/ .el-card {
-    border: 1px solid transparent;
+  .building-click:hover {
+    cursor: pointer;
+    text-shadow: 2px 2px 2px #ccffb4;
   }
 </style>