tj

package.json

@@ -19,7 +19,7 @@
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.18.1",
     "core-js": "3.6.5",
-    "echarts": "^4.9.0",
+    "echarts": "^5.4.2",
     "echarts-gl": "^1.1.2",
     "echarts-liquidfill": "^3.0.0",
     "element-ui": "^2.15.6",

src/router/index.js

@@ -42,10 +42,6 @@ export const constantRoutes = [
       {
         path: '/test',
         component: () => import('@/views/test')
-      },
-      {
-        path: '/test/detail',
-        component: () => import('@/views/test/detail')
       }
     ]
   },

src/styles/common.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 *{
-  font-family: "Microsoft YaHei" !important;
+  font-family: "Microsoft YaHei" ;
 }
 
 // 滚动条

src/utils/index.js

@@ -584,6 +584,7 @@ export function NumConvertLM1(num) {
 
 // 只能转换 4000 以下的正整数阿拉伯数字
 export function NumConvertLM(num) {
+  if (!num) return ''
   var Roman = [['', 'I', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ', 'Ⅷ', 'Ⅸ'],
     ['', 'X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'],
     ['', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'],

src/views/test/components/Alert/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="item alert-component">
+    <div class="title">告警信息</div>
+    <div class="cont">
+      <div class="part part_1">
+        <div class="alert_item">
+          <img class="alert_icon" src="../../images/alert_icon_1.png" alt="">
+          <div class="alert_cont">
+            <div class="alert_info">
+              <span class="alert_number">{{ parseInt(100*Math.random() ) }}</span>
+            </div>
+            <div class="alert_name">入侵警报</div>
+          </div>
+        </div>
+        <div class="alert_item">
+          <img class="alert_icon" src="../../images/alert_icon_2.png" alt="">
+          <div class="alert_cont">
+            <div class="alert_info">
+              <span class="alert_number">{{ parseInt(100*Math.random() ) }}</span>
+            </div>
+            <div class="alert_name">烟感报警</div>
+          </div>
+        </div>
+        <div class="alert_item">
+          <img class="alert_icon" src="../../images/alert_icon_3.png" alt="">
+          <div class="alert_cont">
+            <div class="alert_info">
+              <span class="alert_number">{{ parseInt(100*Math.random() ) }}</span>
+            </div>
+            <div class="alert_name">设备异常</div>
+          </div>
+        </div>
+        <div class="alert_item">
+          <img class="alert_icon" src="../../images/alert_icon_4.png" alt="">
+          <div class="alert_cont">
+            <div class="alert_info">
+              <span class="alert_number">{{ parseInt(100*Math.random() ) }}</span>
+            </div>
+            <div class="alert_name">电梯异常</div>
+          </div>
+        </div>
+      </div>
+      <div class="part part_2">
+        <!-- <div class="chart-title">图标标题</div> -->
+        <div ref="mychart" class="mychart" />
+      </div>
+      <div class="part part_3">
+        <div class="part_item">
+          <div class="part_item_cont">
+            <vuescroll :ops="ops">
+              <div class="info">
+                <div v-for="(item,index) in 2" :key="index" class="info-item">
+                  <div class="info_head">
+                    <span class="info_head_name">某某类型</span>
+                    <span class="info_head_time">2023.07.11 11:55:45</span>
+                  </div>
+                  <div class="info-cont">
+                    <div class="info-title">
+                      <img class="icon" src="../../images/piont.png" alt="">
+                      <div class="info-title-cont">位置：西安市高新区高新5号附近</div>
+                    </div>
+                    <div class="bottom">{Ⅲ号-770-32002}:采空区封堵是完好封堵是否好有一些问题。 </div>
+                  </div>
+                </div>
+              </div>
+            </vuescroll>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import Vuescroll from 'vuescroll'
+export default {
+  name: 'Alert',
+  components: {
+    Vuescroll
+  },
+  data() {
+    return {
+      ops: {
+        bar: {
+          keepShow: false,
+          background: 'rgba(144, 147, 153, 0.4)',
+          onlyShowBarOnScroll: false
+        }
+      },
+      chartOptions: {
+        grid: {
+          top: '20%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            color: '#fff'
+          },
+          data: ['某某某', '某某某', '某某某', '某某某']
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#fff'
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80],
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              borderRadius: 1,
+              borderColor: 'rgba(197, 99, 99, 1)',
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(197, 99, 99, 1)'
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(197, 99, 99, 0.5)'
+                }
+              ]),
+              borderWidth: 1
+            }
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      var chartDom = this.$refs.mychart
+      var myChart = echarts.init(chartDom)
+      myChart.setOption(this.chartOptions)
+    })
+  },
+  methods: {
+    initCharts() {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.alert-component{
+    .cont{
+        height: calc(100vh - 450px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .part{
+            &.part_1{
+                display: flex;
+                flex-wrap: wrap;
+                .alert_item{
+                    &{
+                        width: 50%;
+                        display: flex;
+                        align-items: center;
+                        margin-top: 20px;
+                    }
+                  .alert_icon{
+                        display: block;
+                        width: 42px;
+                        height: 43px;
+                  }
+                  .alert_cont{
+                        line-height: 1;
+                        padding-left: 8px;
+                        .alert_info{
+                            .alert_number{
+                                color: #fff;
+                                font-family: "Bebas";
+                                font-size: 24px;
+                            }
+                        }
+                        .alert_name{
+                            color: #DAE6F8;
+                            font-family: "Microsoft YaHei UI";
+                            font-size: 14px;
+                            padding-top: 8px;
+                        }
+                  }
+                }
+            }
+            &.part_2{
+                margin-top: 20px;
+                .chart-title{
+                    font-size: 14px;
+                    color: #38CA9C;
+                }
+                .mychart{
+                    width: 100%;
+                    height: 220px;
+                }
+            }
+            &.part_3{
+                flex: 1;
+                margin-top: 20px;
+                .info{
+                    min-height: 120px;
+                    .info-item{
+                        margin-bottom: 20px;
+                        background-color: rgba(33, 63, 140, 0.2);
+                        .info_head{
+                            height: 32px;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            background:linear-gradient(to right, rgba(31, 89, 175, 0.33),rgba(31, 89, 175, 0.49),rgba(35, 97, 190, 0.12));
+                            padding: 0 10px;
+
+                            .info_head_name{
+                                font-size: 14px;
+                                font-family:"Microsoft YaHei UI" ;
+                                color: #DFC053;
+                            }
+                            .info_head_time{
+                                font-size: 12px;
+                                font-family:"Microsoft YaHei UI" ;
+                                color: rgba(255, 255, 255, 0.7);
+                            }
+                        }
+                        .info-cont{
+                            padding: 12px;
+                            .info-title{
+                              color: #DAE6F8;
+                              font-size: 16px;
+                              display: flex;
+                              align-items: center;
+                              .icon{
+                                display: block;
+                                width: 12px;
+                              }
+                              .info-title-cont{
+                                  flex:1;
+                                  padding-left: 5px;
+                                  overflow: hidden;
+                                  text-overflow: ellipsis;
+                              }
+                          }
+                          .bottom{
+                              font-family: "Microsoft YaHei UI";
+                              font-size:14px ;
+                              color: #8EBAED;
+                              line-height: 22px;
+                              padding-top: 10px;
+                              text-overflow: ellipsis;
+                              display: -webkit-box;
+                              -webkit-box-orient: vertical;
+                              -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+                              overflow: hidden;
+                          }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/test/components/Danger/index.vue

@@ -0,0 +1,338 @@
+<template>
+  <div class="item danger-component">
+    <div class="title">隐患</div>
+    <div class="cont">
+      <div class="part part_1">
+        <div class="part_item">
+          <div class="part_item_title">
+            <img src="../../images/danger_serious.png" alt="">
+            <span>重大隐患</span>
+          </div>
+          <div class="part_item_cont">
+            <div class="status">
+              <div class="state-name">已完成</div>
+              <div class="number">32</div>
+            </div>
+            <div class="status">
+              <div class="state-name unfinished">未完成</div>
+              <div class="number">32</div>
+            </div>
+          </div>
+        </div>
+        <div class="part_item ordinary">
+          <div class="part_item_title">
+            <img src="../../images/danger_ordinary.png" alt="">
+            <span>一般隐患</span>
+          </div>
+          <div class="part_item_cont">
+            <div class="status">
+              <div class="state-name">已完成</div>
+              <div class="number">32</div>
+            </div>
+            <div class="status unfinished">
+              <div class="state-name unfinished">未完成</div>
+              <div class="number">12</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="part part_2">
+        <div class="chart-title">最近7天的隐患</div>
+        <div ref="mychart" class="mychart" />
+      </div>
+      <div class="part part_3">
+        <div class="part_item">
+          <div class="part_item_cont">
+            <vuescroll :ops="ops">
+              <div class="info">
+                <div class="info-item">
+                  <div class="info_head">
+                    <span class="info_head_name">重大隐患</span>
+                    <span class="info_head_time">2023.07.11 11:55:45</span>
+                  </div>
+                  <div class="info-title">
+                    <div class="imgbox">
+                      <img src="../../images/danger_info_def.png" alt="">
+                    </div>
+                    <div class="info-title-cont">{Ⅲ号-770-32002}:采空区封堵是否完好是否完。</div>
+                  </div>
+                  <div class="tag " />
+                  <div class="bottom">
+                    <div class="tag error">已超限</div>
+                    <div class="name">张三</div>
+                  </div>
+                </div>
+                <div class="info-item">
+                  <div class="info_head">
+                    <span class="info_head_name">一般隐患</span>
+                    <span class="info_head_time">2023.07.11 11:55:45</span>
+                  </div>
+                  <div class="info-title">
+                    <div class="imgbox">
+                      <img src="../../images/danger_info_def.png" alt="">
+                    </div>
+                    <div class="info-title-cont">{Ⅲ号-770-32002}:采空区封堵是否完好是否完。</div>
+                  </div>
+                  <div class="bottom">
+                    <div class="tag success">15天06:06:00</div>
+                    <div class="name">李四</div>
+                  </div>
+                </div>
+              </div>
+            </vuescroll>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import Vuescroll from 'vuescroll'
+export default {
+  name: 'Danger',
+  components: {
+    Vuescroll
+  },
+  data() {
+    return {
+      ops: {
+        bar: {
+          keepShow: false,
+          background: 'rgba(144, 147, 153, 0.4)',
+          onlyShowBarOnScroll: false
+        }
+      },
+      chartOptions: {
+        grid: {
+          top: '20%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            color: '#fff'
+          },
+          data: ['5-1', '5-2', '5-3', '5-4', '5-5', '5-6', '5-7']
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#fff'
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            barWidth: 20,
+            itemStyle: {
+              borderRadius: 1,
+              borderColor: 'rgba(197, 99, 99, 1)',
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 1,
+                  color: 'rgba(197, 99, 99, 1)'
+                },
+                {
+                  offset: 0,
+                  color: 'rgba(197, 99, 99, 0.5)'
+                }
+              ]),
+              borderWidth: 1
+            }
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      var chartDom = this.$refs.mychart
+      var myChart = echarts.init(chartDom)
+      myChart.setOption(this.chartOptions)
+    })
+  },
+  methods: {
+    initCharts() {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.danger-component{
+    .cont{
+        height: calc(100vh - 450px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding-top: 15px;
+        box-sizing: border-box;
+        .part{
+            &.part_1{
+                .part_item{
+                    height: 52px;
+                    background: linear-gradient(rgba(238, 85, 59, 0),rgba(238, 85, 59, 0.2));
+                    border-radius: 50px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    &.ordinary{
+                        background: linear-gradient(rgba(45, 125, 255, 0),rgba(45, 125, 255, 0.2));
+                        margin-top: 8px;
+                    }
+                    .part_item_title{
+                        height: 100%;
+                        display: flex;
+                        align-items: center;
+                        img{
+                            display: block;
+                            width: 52px;
+                            margin-right: 5px;
+                        }
+                    }
+                    .part_item_cont{
+                        height: 100%;
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                        .status{
+                            height: 100%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            flex-direction: column;
+                            &:nth-child(2){
+                                margin-left: 10px;
+                            }
+                            .state-name{
+                                position: relative;
+                                padding-left: 12px;
+                                font-size: 14px;
+                                color: #A1B3C8;
+                                &::after{
+                                    display: block;
+                                    content: "";
+                                    width: 6px;
+                                    height: 6px;
+                                    border-radius: 50%;
+                                    background-color: #38CA9C;
+                                    position: absolute;
+                                    left: 2px;
+                                    top: 6px;
+                                }
+                                &.unfinished::after{
+                                    background-color: #EC5034;
+                                }
+                            }
+                            .number{
+                                font-family: 'Bebas';
+                                font-size: 18px;
+                                margin-top: 5px;
+                            }
+                        }
+                    }
+                }
+            }
+            &.part_2{
+                margin-top: 20px;
+                .chart-title{
+                    font-size: 14px;
+                    color: #38CA9C;
+                }
+                .mychart{
+                    width: 100%;
+                    height: 160px;
+                }
+            }
+            &.part_3{
+                flex: 1;
+                margin-top: 20px;
+                .info{
+                    min-height: 120px;
+                    .info-item{
+                        margin-bottom: 20px;
+                        .info_head{
+                            height: 32px;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            background:linear-gradient(to right, rgba(31, 89, 175, 0.33),rgba(31, 89, 175, 0.49),rgba(35, 97, 190, 0.12));
+                            padding: 0 10px;
+
+                            .info_head_name{
+                                font-size: 14px;
+                                font-family:"Microsoft YaHei UI" ;
+                                color: #DFC053;
+                            }
+                            .info_head_time{
+                                font-size: 12px;
+                                font-family:"Microsoft YaHei UI" ;
+                                color: rgba(255, 255, 255, 0.7);
+                            }
+                        }
+                        .info-title{
+                            color: #DAE6F8;
+                            font-size: 16px;
+                            display: flex;
+                            align-items: center;
+                            .imgbox{
+                                width: 46px;
+                                height: 61px;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                img{
+                                    display: block;
+                                    width: 44px;
+                                }
+                            }
+                            .info-title-cont{
+                                flex:1;
+                                padding-left: 5px;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+                        }
+                        .bottom{
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            padding-top: 5px;
+                            .tag{
+                                width: 64px;
+                                height: 28px;
+                                border-radius: 43px;
+                                text-align: center;
+                                line-height: 28px;
+                                &.error{
+                                    border:1px solid #EB4A2E;
+                                    color: #EB4A2E;
+                                }
+                                &.success{
+                                    width: 113px;
+                                    border:1px solid #38CA9C;
+                                    color: #38CA9C;
+                                }
+                            }
+                            .name{
+                                color: rgba(255, 255, 255, 0.7);
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/test/components/EquipmentMonitor/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="item equipmentMonitor">
+    <div class="title">设备监测</div>
+    <div class="cont">
+      <div v-for="(item,index) in 6" :key="index" class="em-item">
+        <img class="em_icon" src="../../images/em_icon.png" alt="">
+        <div class="em_cont">
+          <div class="em_name">设备名称</div>
+          <div class="em_info">
+            <span class="em_number">{{ parseInt(500*Math.random() ) }}</span>
+            <span class="em_unit">单位</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'EquipmentMonitor',
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.equipmentMonitor{
+    .cont{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        padding: 15px 0 10px 0;
+        .em-item{
+            &{
+                width: 33.33%;
+                display: flex;
+                align-items: center;
+                margin-bottom: 20px;
+            }
+           .em_icon{
+                display: block;
+                width: 18px;
+                height: 16px;
+           }
+           .em_cont{
+                line-height: 1;
+                padding-left: 5px;
+                .em_name{
+                    color: #DAE6F8;
+                    font-family: "Microsoft YaHei UI";
+                    font-size: 14px;
+                }
+                .em_info{
+                    padding-top: 8px;
+                    .em_number{
+                        color: #38CA9C;
+                        font-family: "Bebas";
+                        font-size: 24px;
+                    }
+                    .em_unit{
+                        font-family: "Microsoft YaHei UI";
+                        font-size: 14px;
+                        color: rgba(255, 255, 255, 0.7);
+                        margin-left: 3px;
+                    }
+                }
+           }
+        }
+    }
+}
+</style>

src/views/test/components/TodatTask/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="item todatTask-component">
+    <div class="title">今日任务</div>
+    <div class="cont">
+      <div class="top">
+        <div ref="mychart" class="mychart" />
+        <div class="rt">
+          <div class="today-item">
+            <div class="tag ">待完成</div>
+            <div class="number">680</div>
+          </div>
+          <div class="today-item">
+            <div class="tag complete">已完成</div>
+            <div class="number">320</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <vuescroll :ops="ops">
+      <div class="info">
+        <div class="info-item">
+          <div class="info-title">{Ⅲ号-770-32002}:采空区封堵是否完好是否完。</div>
+          <div class="tag " />
+          <div class="bottom">
+            <div class="tag unfinished">未完成</div>
+            <div class="name">张三</div>
+          </div>
+        </div>
+        <div class="info-item">
+          <div class="info-title">{Ⅲ号-770-32002}:采空区封堵是否完好是否完。</div>
+          <div class="bottom">
+            <div class="tag finished">已完成</div>
+            <div class="name">李四</div>
+          </div>
+        </div>
+      </div>
+    </vuescroll>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import Vuescroll from 'vuescroll'
+export default {
+  name: 'TodatTask',
+  components: {
+    Vuescroll
+  },
+  data() {
+    return {
+      ops: {
+        bar: {
+          keepShow: false,
+          background: 'rgba(144, 147, 153, 0.4)',
+          onlyShowBarOnScroll: false
+        }
+      },
+      chartOptions: {
+        // title: {
+        //   text: 'Referer of a Website',
+        //   subtext: 'Fake Data',
+        //   left: 'center',
+        //   top: 'center',
+        //   textStyle: {
+        //     fontFamily: 'Arial, Verdana, sans...',
+        //     fontSize: 24,
+        //     fontStyle: 'normal',
+        //     fontWeight: 'normal',
+        //     color: '#fff'
+        //   }
+        // },
+        series: [
+          {
+            name: '今日任务',
+            type: 'pie',
+            radius: ['50%', '68%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 5,
+              borderColor: '#fff',
+              borderWidth: 1
+            },
+            label: {
+              normal: {
+                show: true,
+                position: 'center',
+                color: '#fff',
+                fontSize: 24,
+                formatter(data) {
+                  if (data.name === '待完成') {
+                    return data.percent + '%'
+                  }
+                }
+              }
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 12,
+                fontWeight: 'bold',
+                formatter(data) {
+                  return data.name
+                }
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            color: ['#2D7DFF', '#38D09F'],
+            startAngle: -80,
+            data: [
+              { value: 680, name: '待完成' },
+              { value: 320, name: '已完成' }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      var chartDom = this.$refs.mychart
+      var myChart = echarts.init(chartDom)
+      myChart.setOption(this.chartOptions)
+    })
+  },
+  methods: {
+    initCharts() {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.todatTask-component{
+    padding-bottom: 10px;
+    .cont{
+        .top{
+            &{
+                display: flex;
+                align-items: center;
+            }
+            .mychart{
+                width: 150px;
+                height: 150px;
+                margin-top: 5px;
+            }
+            .rt{
+                margin-left: 5px;
+                .today-item{
+                    &:nth-child(2){
+                        padding-top: 15px;
+                    }
+                    .tag{
+                        width: 170px;
+                        height: 19px;
+                        line-height: 19px;
+                        display: block;
+                        background: linear-gradient(rgba(45, 125, 255, 0.24),rgba(45, 125, 255, 0));
+                        color: #89B2F6;
+                        font-size: 14px;
+                        margin: 0;
+                        padding: 0;
+                        position: relative;
+                        padding-left: 20px;
+                        box-sizing: border-box;
+                        border-radius:  30px 0 0 30px;
+                        &::after{
+                            display: block;
+                            content: "";
+                            width: 2px;
+                            height: 2px;
+                            background-color: #fff;
+                            position: absolute;
+                            left: 8px;
+                            top: 50%;
+                            margin-top: -1px;
+                            border-radius: 50%;
+                        }
+                        &.complete{
+                            background: linear-gradient(rgba(56, 208, 159, 0.24),rgba(56, 208, 159, 0));
+                            color: #56BD9C;
+                        }
+                    }
+                    .number{
+                        font-family: 'Bebas';
+                        font-size: 20px;
+                        color: #fff;
+                        padding-left: 20px;
+                        margin-top: 6px;
+                    }
+                }
+            }
+        }
+    }
+    .info{
+        height: 120px;
+        .info-item{
+            margin-bottom: 10px;
+            .info-title{
+                color: #DAE6F8;
+                font-size: 16px;
+            }
+            .bottom{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding-top: 5px;
+                .tag{
+                    width: 64px;
+                    height: 28px;
+                    border-radius: 43px;
+                    text-align: center;
+                    line-height: 28px;
+                    &.unfinished{
+                        border:1px solid #EB4A2E;
+                        color: #EB4A2E;
+                    }
+                    &.finished{
+                        border:1px solid #38CA9C;
+                        color: #38CA9C;
+                    }
+                }
+                .name{
+                    color: #DAE6F8;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/test/detail.vue

@@ -1,33 +0,0 @@
-<template>
-  <el-card header="详情页面">
-    <el-card>
-      <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls />
-    </el-card>
-    <el-card>
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="标题一" name="1">内容一</el-tab-pane>
-        <el-tab-pane label="标题二" name="2">内容二</el-tab-pane>
-        <el-tab-pane label="标题三" name="3">内容三</el-tab-pane>
-      </el-tabs>
-      <h3>{{ id }}</h3>
-    </el-card>
-  </el-card>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      activeName: '1',
-      id: ''
-    }
-  },
-  created() {
-    this.id = this.$route.query
-  },
-  methods: {
-    handleClick() {
-
-    }
-  }
-}
-</script>

src/views/test/index.vue

@@ -1,93 +1,201 @@
 <template>
-  <el-card class="train-container" header="安全培训">
-    <el-collapse accordion>
-      <el-collapse-item class="tag-list">
-        <template slot="title">
-          <div class="tag-header">
-            <span class="lable">类别一：</span>
-            <el-tag @click="changeTag(-1)">全部</el-tag>
-            <el-tag v-for="tag in 10" :key="tag" type="info" @click="changeTag(tag)">标签标题-{{ tag }}</el-tag>
-          </div>
-        </template>
-        <div class="tag-cont">
-          <el-tag v-for="tagcont in 10" :key="tagcont" type="info">标签内容-{{ tagcont }}</el-tag>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-    <el-row class="train-list" :gutter="15" justify>
-      <el-col v-for="(item, index) in 10" :key="index" :span="4">
-        <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 10px;" @click="showDetail(item)">
-          <div @click="showDetail(item)">
-            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
-            <div style="padding: 14px;">
-              <span>好吃的汉堡</span>
-              <div class="bottom clearfix">
-                <time class="time">{{ new Date() }}</time>
-                <el-button type="text" class="button">操作按钮</el-button>
-              </div>
-            </div>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-  </el-card>
+  <div class="container">
+    <!-- <nav>
+      <span class="name">智慧安全</span>
+    </nav> -->
+    <div class="lf-sidebar">
+      <TodatTask />
+      <Danger />
+    </div>
+    <div class="rt-sidebar">
+      <EquipmentMonitor />
+      <Alert />
+    </div>
+    <div id="panorama-vmap" class="map-container" />
+  </div>
 
 </template>
 <script>
+import * as L from 'leaflet'
+import '@geoman-io/leaflet-geoman-free'
+import { getMapByList } from '@/api/system/mapApi'
+import { getMapLayerByList } from '@/api/system/mapLayerApi'
+import TodatTask from './components/TodatTask'
+import Danger from './components/Danger'
+import Alert from './components/Alert'
+import EquipmentMonitor from './components/EquipmentMonitor'
+
 export default {
-  name: 'TrainComponent',
-  components: {},
+  components: {
+    TodatTask,
+    Danger,
+    Alert,
+    EquipmentMonitor
+  },
   data() {
-    return {}
+    return {
+      map: null,
+      mapId: null, // 当前地图ID
+      mapRasterLayer: '',
+      mapList: [], // 地图列表
+      mapLayerList: [] // 地图图层列表
+
+    }
+  },
+  mounted() {
+    // 初始化
+    this.getData()
   },
   methods: {
-    changeTag(tag) {
+    // 初始化
+    getData() {
+      this.getMapData()// 初始化标记点跟地图图片
+    },
 
+    // 初始化地图
+    getMapData() {
+      getMapByList().then((resp) => {
+        const { data } = resp
+        this.mapList = data
+        if (data.length <= 0) return
+        const map1 = data[0]
+        this.mapId = map1.mapId
+        this.mapRasterLayer = map1.mapRasterLayer
+        this.initMap()
+      }).catch((error) => {
+        console.log(error)
+      })
     },
-    showDetail(item) {
-      this.$router.push({
-        path: '/test/detail',
-        query: {
-          id: item
+
+    // 初始化地图
+    initMap() {
+      const yx = L.latLng
+      const xy = function xy(x, y) {
+        if (L.Util.isArray(x)) {
+          return yx(x[1], x[0])
         }
+        return yx(y, x)
+      }
+
+      const bounds = [xy(-780, -780), xy(400, 400)]
+      if (this.map === null) {
+        this.map = L.map('panorama-vmap', {
+          minZoom: 1,
+          maxZoom: 2,
+          center: [0, 0],
+          zoom: 1,
+          zoomControl: false
+        })
+        L.imageOverlay(this.mapRasterLayer, bounds).addTo(this.map)
+        this.map.fitBounds(bounds)
+      }
+      this.getMapLayers()
+    },
+
+    // 获取地图图层数据
+    getMapLayers() {
+      const obj = {}
+      obj.mapId = this.mapId
+      getMapLayerByList(obj).then((resp) => {
+        const { data } = resp
+        this.mapLayerList = data
+        this.initMapLayers()
+      }).catch((error) => {
+        console.log(error)
       })
+    },
+
+    // 初始化地图图层
+    initMapLayers() {
+      const layerList = this.mapLayerList
+      if (layerList != null && layerList.length > 0) {
+        layerList.forEach((item) => {
+          const vectorGeoJson = JSON.parse(item.layerVector)
+          L.geoJSON(vectorGeoJson).addTo(this.map)
+        })
+      }
     }
   }
 }
 </script>
   <style lang="scss" scoped>
-  .train-container{
-    .tag-list{
-        .lable{
-            display: inline-block;
-            width: 80px;
-            line-height: 1;
-            font-size: 12px;
-            padding-left:10px ;
-            box-sizing: border-box;
-        }
-        .tag-header{
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        .tag-cont{
-            padding-left: 80px;
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        .el-tag{
-            margin-right: 10px;
-        }
-    }
-    .train-list{
-        padding-top: 10px;
-        .image {
-            width: 100%;
+  @font-face {
+    font-family: "YouSheBiaoTiHei";
+    src: url('./font/yhbth.ttf');
+  }
+  @font-face {
+    font-family: "Bebas";
+    src: url('./font/BEBAS_.TTF');
+  }
+    .container {
+      position: relative;
+      color: #FFF;
+      width: 100%;
+      height: calc(100vh - 75px);
+      background-color: inherit;
+      .lf-sidebar{
+        width: 360px;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 9999;
+        padding: 12px;
+        background: linear-gradient(90.8deg, #113144 0.7%, rgba(17, 49, 68, 0.58) 76.07%, rgba(17, 49, 68, 0) 99.34%);
+      }
+      .rt-sidebar{
+        width: 360px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 9999;
+        padding: 12px;
+        background: linear-gradient(90.8deg, #113144 0.7%, rgba(17, 49, 68, 0.58) 76.07%, rgba(17, 49, 68, 0) 99.34%);
+      }
+      ::v-deep .item{
+        .title{
+          font-family: "YouSheBiaoTiHei" !important;
+          font-size: 20px;
+          color: #FFF;
+          font-weight: 400;
+          padding: 5px 0 10px 5px;
+          border-bottom: 1px solid rgba(23, 198, 217, 0.122);
+          position: relative;
+          line-height: 1;
+          &::after{
             display: block;
+            content: "";
+            width: 20px;
+            height: 1px;
+            position: absolute;
+            left: 5px;
+            bottom: 0;
+            background-color: rgba(23, 198, 217, 0.4);
+          }
+          &::before{
+            display: block;
+            content: "";
+            width: 20px;
+            height: 3px;
+            position: absolute;
+            right: 2px;
+            top: 20px;
+            background-image: url('./images/more.png');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+          }
         }
+      }
+      .map-container {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 99;
+        background-color: inherit;
+      }
     }
-  }
     </style>
 

src/views/test/remark.md

@@ -0,0 +1 @@
+设计图地址[https://www.figma.com/file/SbKMCyiaBZyDd7tRFc4VTI/%E6%99%BA%E6%85%A7%E5%88%9B%E6%96%B0%E9%A1%B9%E7%9B%AE?type=design&node-id=0%3A1&mode=design&t=21XOmdBTo7erXOuQ-1]

yarn.lock

@@ -4550,12 +4550,13 @@ echarts-liquidfill@^3.0.0:
   resolved "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz"
   integrity sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==
 
-echarts@^4.9.0:
-  version "4.9.0"
-  resolved "https://registry.npmmirror.com/echarts/download/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
-  integrity sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=
+echarts@^5.4.2:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.2.tgz#9f38781c9c6ae323e896956178f6956952c77a48"
+  integrity sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==
   dependencies:
-    zrender "4.3.2"
+    tslib "2.3.0"
+    zrender "5.4.3"
 
 editorconfig@^0.15.3:
   version "0.15.3"
@@ -12000,6 +12001,11 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.nlark.com/tslib/download/tslib-1.14.1.tgz"
@@ -13007,7 +13013,14 @@ yup@^0.26.10:
     synchronous-promise "^2.0.5"
     toposort "^2.0.2"
 
-zrender@4.3.2, zrender@^4.0.4:
+zrender@5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.3.tgz#41ffaf835f3a3210224abd9d6964b48ff01e79f5"
+  integrity sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==
+  dependencies:
+    tslib "2.3.0"
+
+zrender@^4.0.4:
   version "4.3.2"
   resolved "https://registry.nlark.com/zrender/download/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6"
   integrity sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY=