Главная Обзор Помощь
Регистрация Вход
chenzhiguang
/
smartCity
1
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

init

tremble 6 лет назад
Сommit
586575f3c5
48 измененных файлов с 8667 добавлено и 0 удалено
Разделённый вид Показать статистику Diff
  1. 66 0
      cityLeft.html
  2. 66 0
      cityRight.html
  3. 599 0
      economics.html
  4. 709 0
      environment.html
  5. 549 0
      equipment.html
  6. BIN
      font/download.zip
  7. 539 0
      font/font_1098207_8hpjr87bc08/demo.css
  8. 308 0
      font/font_1098207_8hpjr87bc08/demo_index.html
  9. 41 0
      font/iconfont.css
  10. BIN
      font/iconfont.eot
  11. 1 0
      font/iconfont.js
  12. 44 0
      font/iconfont.svg
  13. BIN
      font/iconfont.ttf
  14. BIN
      font/iconfont.woff
  15. BIN
      font/iconfont.woff2
  16. BIN
      images/shexiangtou.png
  17. 1490 0
      js/ckplayer.js
  18. BIN
      js/ckplayer.swf
  19. 1 0
      js/echarts-gl.min.js
  20. 22 0
      js/echarts.min.js
  21. 676 0
      js/ezuikit.js
  22. 2 0
      js/hls.min.js
  23. 4 0
      js/jquery-3.2.1.min.js
  24. 3 0
      js/jsmpeg.min.js
  25. 81 0
      js/language.xml
  26. BIN
      js/m3u8.swf
  27. 95 0
      js/page.js
  28. BIN
      js/style.swf
  29. 703 0
      livelihood.html
  30. 549 0
      manhole.html
  31. 167 0
      monitor.html
  32. 71 0
      place.html
  33. 446 0
      security.html
  34. 49 0
      style/economics.css
  35. 97 0
      style/environment.css
  36. 184 0
      style/equipment.css
  37. 54 0
      style/livelihood.css
  38. 184 0
      style/manhole.css
  39. 135 0
      style/monitor.css
  40. 17 0
      style/place.css
  41. 42 0
      style/public.css
  42. 49 0
      style/reset.css
  43. 143 0
      style/security.css
  44. 76 0
      style/survey.css
  45. 405 0
      survey.html
  46. BIN
      video/1.Ogg
  47. BIN
      video/2.Ogg
  48. BIN
      video/4.Ogg

+ 66 - 0
cityLeft.html
Просмотреть файл 

@@ -0,0 +1,66 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    html {
 
+      background: no-repeat center center / cover;
 
+    }
 
+    html, body,.layout {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    .layout {
 
+      display: flex;
 
+      flex-direction: column;
 
+    }
 
+
 
+    .top {
 
+      flex: 0 0 70px;
 
+    }
 
+
 
+    .main {
 
+      flex: 1;
 
+      display: flex;
 
+      height: 100%;
 
+    }
 
+
 
+    .left,
 
+    .right {
 
+      height: 100%;
 
+    }
 
+
 
+    .left { 
+      width: 28%;
 
+    }
 
+
 
+    .right {
 
+      width: 28%;
 
+    }
 
+
 
+    .middle {
 
+      flex: 1;
 
+      height: 100%;
 
+      padding: 0 50px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div class="layout">
 
+    <!-- <iframe src="./header.html" frameborder="0" class="top"></iframe> -->
 
+    <div class="main">
 
+      <iframe src="./survey.html" frameborder="0" class="left"></iframe>
 
+      <iframe src="./economics.html" frameborder="0" class="middle"></iframe>
 
+      <iframe src="./security.html" frameborder="0" class="right"></iframe>
 
+    </div>
 
+  </div>
 
+</body>
 
+</html>

+ 66 - 0
cityRight.html
Просмотреть файл 

@@ -0,0 +1,66 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    html {
 
+      background: no-repeat center center / cover;
 
+    }
 
+    html, body,.layout {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    .layout {
 
+      display: flex;
 
+      flex-direction: column;
 
+    }
 
+
 
+    .top {
 
+      flex: 0 0 70px;
 
+    }
 
+
 
+    .main {
 
+      flex: 1;
 
+      display: flex;
 
+      height: 100%;
 
+    }
 
+
 
+    .left,
 
+    .right {
 
+      height: 100%;
 
+    }
 
+
 
+    .left { 
+      width: 28%;
 
+    }
 
+
 
+    .right {
 
+      width: 28%;
 
+    }
 
+
 
+    .middle {
 
+      flex: 1;
 
+      height: 100%;
 
+      padding: 0 50px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div class="layout">
 
+    <!-- <iframe src="./header.html" frameborder="0" class="top"></iframe> -->
 
+    <div class="main">
 
+      <iframe src="./livelihood.html" frameborder="0" class="left"></iframe>
 
+      <iframe src="./environment.html" frameborder="0" class="middle"></iframe>
 
+      <iframe src="./place.html" frameborder="0" class="right"></iframe>
 
+    </div>
 
+  </div>
 
+</body>
 
+</html>

+ 599 - 0
economics.html
Просмотреть файл 

@@ -0,0 +1,599 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/economics.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <header class="title">
 
+      <i class="iconfont icondiqiuyi"></i>
 
+      经济创新
 
+    </header>
 
+    <div class="line"></div>
 
+    <section class="s1">
 
+      <div class="card">
 
+        <div class="s-title"><h2>法人及产业活动单位数</h2></div>
 
+        <div class="f-item">
 
+          <p>法人单位数</p>
 
+          <p class="emphasize">70533</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>产业活动单位数</p>
 
+          <p class="emphasize">79544</p>
 
+        </div>
 
+      </div>
 
+      <div class="card">
 
+        <div class="s-title"><h2>规上企业</h2></div>
 
+        <div class="f-item">
 
+          <p>规模以上工业企业</p>
 
+          <p class="emphasize">2112个</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>规模以下工业企业</p>
 
+          <p class="emphasize">48608个</p>
 
+        </div>
 
+      </div>
 
+      <div class="line"></div>
 
+      <div class="card" style="height:180px;">
 
+        <div class="s-title"><h2>科技发展</h2></div>
 
+        <div class="f-item">
 
+          <p>市属科学研究开发机构</p>
 
+          <p class="emphasize">11家</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>高新技术企业数</p>
 
+          <p class="emphasize">741家</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>省级科技计划项目</p>
 
+          <p class="emphasize">9家</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>专利申请量</p>
 
+          <p class="emphasize">17996件</p>
 
+        </div>
 
+      </div>
 
+      <div class="card" style="height:180px;">
 
+        <div class="s-title"><h2>规上企业R&D情况</h2></div>
 
+        <div class="f-item">
 
+          <p>R&D活动企业</p>
 
+          <p class="emphasize">897家</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>R&D项目数</p>
 
+          <p class="emphasize">3580个</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>R&D专利申请数</p>
 
+          <p class="emphasize">4265个</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>R&D经费内部支出</p>
 
+          <p class="emphasize">48.45亿元</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p>R&D新产品产值</p>
 
+          <p class="emphasize">1035.67亿元</p>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s2">
 
+      <div class="card" id="gdp"></div>
 
+      <div class="card" id="outIn"></div>
 
+      <div class="line"></div>
 
+      <div class="card" id="addVal"></div>
 
+      <div class="card" id="xiaofei"></div>
 
+      <div class="line"></div>
 
+      <div class="card" id="guding"></div>
 
+      <div class="card" id="gongshang"></div>
 
+    </section>
 
+
 
+    <script src="js/echarts.min.js"></script>
 
+    <script>
 
+      (function() {
 
+        let gdpOption = {
 
+          title: {
 
+            text: "年度GDP走势",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            containLabel: true,
 
+            borderColor: "#fff"
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "category",
 
+              data: ["2013", "2014", "2015", "2016", "2017"],
 
+              axisTick: {
 
+                alignWithLabel: true
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              name: "(亿元)",
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "GDP",
 
+              type: "bar",
 
+              barWidth: "40%",
 
+              data: [2020.1263, 2104.7991, 2264.1883, 2444.0859, 2690.2505]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let outInOption = {
 
+          title: {
 
+            text: "进出口额走势",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354", "#ff9a32"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            },
 
+            formatter: function(params) {
 
+              // 改鼠标悬浮提示值格式
 
+              var relVal = params[0].name + "<br/>";
 
+              relVal +=
 
+                params[0].seriesName + " : " + params[0].value + "<br/>";
 
+              relVal +=
 
+                params[1].seriesName + " : " + -params[1].value + "<br/>";
 
+              return relVal;
 
+            }
 
+          },
 
+          legend: {
 
+            data: ["进口额", "出口额"],
 
+            x: "60%",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          grid: {
 
+            left: "2%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            containLabel: true
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "value",
 
+              axisLabel: {
 
+                formatter: function(value) {
 
+                  if (value < 0) {
 
+                    return -value;
 
+                  } else {
 
+                    return value;
 
+                  }
 
+                }
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              position: "left",
 
+              type: "category",
 
+              axisTick: { show: false },
 
+              axisLine: {
 
+                show: true,
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              },
 
+              data: ["2013", "2014", "2015", "2016", "2017"]
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "进口额",
 
+              type: "bar",
 
+              stack: "总量",
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "right"
 
+                }
 
+              },
 
+              data: [309.5884, 268.1925, 277.1032, 324.9113, 57.3362]
 
+            },
 
+            {
 
+              name: "出口额",
 
+              type: "bar",
 
+              stack: "总量",
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "left",
 
+                  formatter: function(value) {
 
+                    if (value.data < 0) {
 
+                      return -value.data;
 
+                    }
 
+                  }
 
+                }
 
+              },
 
+              data: [-1075.59, -993.5928, -954.6461, -926.8384, -140.0002]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let addValOption = {
 
+          title: {
 
+            text: "规上工业增加值走势",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ff9a32", "#ffe354"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            },
 
+            position: "right"
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "13%",
 
+            top: "20%",
 
+            containLabel: true,
 
+            borderColor: "#fff"
 
+          },
 
+          legend: {
 
+            itemWidth: 14,
 
+            itemHeight: 5,
 
+            itemGap: 1,
 
+            data: ["规模以上工业增加值（亿元）", "增速(%)"],
 
+            x: "0",
 
+            y:"90%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 10
 
+            }
 
+          },
 
+          xAxis: {
 
+            data: ["2013", "2014", "2015", "2016", "2017"],
 
+            axisLine: {
 
+              lineStyle: {
 
+                color: "#ffffff"
 
+              }
 
+            },
 
+            axisTick: {
 
+              show: false //隐藏X轴刻度
 
+            },
 
+            axisLabel: {
 
+              show: true,
 
+              textStyle: {
 
+                color: "#fff" //X轴文字颜色
 
+              }
 
+            }
 
+          },
 
+          yAxis: [
 
+            {
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisTick: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              },
 
+              axisLabel: {
 
+                show: true,
 
+                textStyle: {
 
+                  color: "#fff"
 
+                }
 
+              }
 
+            },
 
+            {
 
+              type: "value",
 
+
 
+              position: "right",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisTick: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              },
 
+              axisLabel: {
 
+                show: true,
 
+                formatter: "{value} %", //右侧Y轴文字显示
 
+                textStyle: {
 
+                  color: "#fff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "增速(%)",
 
+              type: "line",
 
+              yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
 
+              smooth: true, //平滑曲线显示
 
+              showAllSymbol: true, //显示所有图形。
 
+              symbol: "circle", //标记的图形为实心圆
 
+              symbolSize: 10, //标记的大小
 
+
 
+              data: ["", 11, 8, 7, 10]
 
+            },
 
+            {
 
+              name: "规模以上工业增加值（亿元）",
 
+              type: "line",
 
+              data: [696.9119, 847.2853, 965.7447, 1065.7959, 991.6795]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let xiaofeiOption = {
 
+          title: {
 
+            text: "社会消费品零销总额走势",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "2%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            top: "20%",
 
+            containLabel: true
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "value",
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              // name:'(万/人)',
 
+              position: "left",
 
+              type: "category",
 
+              axisTick: { show: false },
 
+              axisLine: {
 
+                show: true,
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              },
 
+              data: ["2013", "2014", "2015", "2016", "2017"]
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "(亿元)",
 
+              type: "bar",
 
+              stack: "总量",
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "right"
 
+                }
 
+              },
 
+              data: [903.6984, 923.3509, 1034.309, 1159.0639, 1279.6336]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let gudingOption = {
 
+          title: {
 
+            text: "固定资产投资走势",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ff9a32"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            containLabel: true,
 
+            borderColor: "#fff"
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "category",
 
+              data: ["2013", "2014", "2015", "2016", "2017"],
 
+              axisTick: {
 
+                alignWithLabel: true
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              name: "(亿元)",
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              data: [1000.8418, 1111.6497, 1307.8743, 1517.7723, 1774.8348],
 
+              type: "line",
 
+              label: {
 
+                show: false,
 
+                position: "top",
 
+                textStyle: {
 
+                  color: "#fff",
 
+                  fontSize: 10
 
+                }
 
+              }
 
+            }
 
+          ]
 
+        };
 
+
 
+        let gongshangOption = {
 
+          title: {
 
+            text: "地方公共财政预算收入",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            containLabel: true,
 
+            borderColor: "#fff"
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "category",
 
+              data: ["2013", "2014", "2015", "2016", "2017"],
 
+              axisTick: {
 
+                alignWithLabel: true
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              name: "(亿元)",
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              data: [158.03, 177.2, 199.01, 204.17, 222.37],
 
+              type: "line"
 
+            }
 
+          ]
 
+        };
 
+
 
+        let gdpChart = echarts.init(document.querySelector("#gdp"));
 
+        let outInChart = echarts.init(document.querySelector("#outIn"));
 
+        let addValChart = echarts.init(document.querySelector("#addVal"));
 
+        let xiaofeiChart = echarts.init(document.querySelector("#xiaofei"));
 
+        let gudingChart = echarts.init(document.querySelector("#guding"));
 
+        let gongshangChart = echarts.init(document.querySelector("#gongshang"));
 
+
 
+        gdpChart.setOption(gdpOption);
 
+        outInChart.setOption(outInOption);
 
+        addValChart.setOption(addValOption);
 
+        xiaofeiChart.setOption(xiaofeiOption);
 
+        gudingChart.setOption(gudingOption);
 
+        gongshangChart.setOption(gongshangOption);
 
+      })();
 
+      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
 
+        Array.from(document.querySelectorAll(".s2 .card"))
 
+      );
 
+      arr.forEach((dom, index) => {
 
+        dom.addEventListener("click", e => {
 
+          console.log("economicsClickHandle", index);
 
+          window.economicsClickHandle && window.economicsClickHandle(index);
 
+        });
 
+      });
 
+    </script>
 
+  </body>
 
+</html>

+ 709 - 0
environment.html
Просмотреть файл 

@@ -0,0 +1,709 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/environment.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <header class="title">
 
+      <i class="iconfont iconshuye"></i>
 
+      人居环境
 
+    </header>
 
+    <div class="line"></div>
 
+    <section class="s1">
 
+      <div class="card" id="gongshang"></div>
 
+      <div class="card" id="no-nongdu"></div>
 
+      <div class="line"></div>
 
+      <div class="card" id="pm-nongdu"></div>
 
+      <div class="card" id="so-nongdu"></div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s2">
 
+      <div class="card" id="gdp"></div>
 
+      <div class="card" id="outIn"></div>
 
+      <div class="line"></div>
 
+      <div class="card" id="addVal"></div>
 
+      <div class="card" id="xiaofei"></div>
 
+    </section>
 
+
 
+    <script src="js/echarts.min.js"></script>
 
+    <script>
 
+        (function() {
 
+          let gongshangOption = {
 
+            title: {
 
+              text: "空气质量指数",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            series: [
 
+              {
 
+                type: "gauge",
 
+                radius: "100%",
 
+                center: ["50%", "68%"],
 
+  
+                splitNumber: 0, //刻度数量
 
+                startAngle: 220,
 
+                endAngle: -40,
 
+                axisLine: {
 
+                  show: true,
 
+                  lineStyle: {
 
+                    width: 20,
 
+                    color: [[0.5, "#fe9b36"], [1, "#ccc"]]
 
+                  }
 
+                },
 
+                //分隔线样式。
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisLabel: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                pointer: {
 
+                  show: false
 
+                },
 
+                title: {
 
+                  show: true,
 
+                  offsetCenter: [0, "20%"], // x, y，单位px
 
+                  textStyle: {
 
+                    color: "#01d4ea",
 
+                    fontSize: 10
 
+                  }
 
+                },
 
+                //仪表盘详情，用于显示数据。
 
+                detail: {
 
+                  show: true,
 
+                  offsetCenter: [0, "-20%"],
 
+                  color: "#fff",
 
+                  formatter: function(params) {
 
+                    return params;
 
+                  },
 
+                  textStyle: {
 
+                    fontSize: 18,
 
+                    fontWeight: "bold"
 
+                  }
 
+                },
 
+                data: [
 
+                  {
 
+                    name: "温馨提示：可以正常在\n户外运动，易敏感人群\n减少外出",
 
+                    value: ['63 良'],
 
+                    textStyle: {
 
+                      fontSize: 18
 
+                    }
 
+                  }
 
+                ]
 
+              }
 
+            ]
 
+          };
 
+  
+          let noOption = {
 
+            title: {
 
+              text: "NO2季日平均浓度",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            series: [
 
+              {
 
+                type: "gauge",
 
+                radius: "100%",
 
+                center: ["50%", "68%"],
 
+  
+                splitNumber: 0, //刻度数量
 
+                startAngle: 220,
 
+                endAngle: -40,
 
+                axisLine: {
 
+                  show: true,
 
+                  lineStyle: {
 
+                    width: 20,
 
+                    color: [[0.68, "#ffe354"], [1, "#ccc"]]
 
+                  }
 
+                },
 
+                //分隔线样式。
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisLabel: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                pointer: {
 
+                    show: true,
 
+                    width: "8%",
 
+                    length: '70%',
 
+                },
 
+                itemStyle:{
 
+                  color:'#fff'
 
+                },
 
+                title: {
 
+                  show: false,
 
+                  offsetCenter: [0, "20%"], // x, y，单位px
 
+                  textStyle: {
 
+                    color: "#01d4ea",
 
+                    fontSize: 10
 
+                  }
 
+                },
 
+                //仪表盘详情，用于显示数据。
 
+                detail: {
 
+                  show: true,
 
+                  offsetCenter: [0, "40%"],
 
+                  color: "#fff",
 
+                  formatter: function(params) {
 
+                    return params;
 
+                  },
 
+                  textStyle: {
 
+                    fontSize: 18,
 
+                    fontWeight: "bold"
 
+                  }
 
+                },
 
+                data: [
 
+                  {
 
+                    show:false,
 
+                    name: "温馨提示：可以正常在\n户外运动，易敏感人群\n减少外出",
 
+                    value: 63,
 
+                    textStyle: {
 
+                      fontSize: 18
 
+                    }
 
+                  }
 
+                ]
 
+              }
 
+            ]
 
+          };
 
+  
+          let pmOption = {
 
+            title: {
 
+              text: "PM2.5季日平均浓度",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            series: [
 
+              {
 
+                type: "gauge",
 
+                radius: "100%",
 
+                center: ["50%", "68%"],
 
+  
+                splitNumber: 0, //刻度数量
 
+                startAngle: 220,
 
+                endAngle: -40,
 
+                axisLine: {
 
+                  show: true,
 
+                  lineStyle: {
 
+                    width: 20,
 
+                    color: [[0.68, "#06cafd"], [1, "#ccc"]]
 
+                  }
 
+                },
 
+                //分隔线样式。
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisLabel: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                pointer: {
 
+                    show: true,
 
+                    width: "8%",
 
+                    length: '70%',
 
+                },
 
+                itemStyle:{
 
+                  color:'#fff'
 
+                },
 
+                title: {
 
+                  show: false,
 
+                  offsetCenter: [0, "20%"], // x, y，单位px
 
+                  textStyle: {
 
+                    color: "#01d4ea",
 
+                    fontSize: 10
 
+                  }
 
+                },
 
+                //仪表盘详情，用于显示数据。
 
+                detail: {
 
+                  show:true,
 
+                  offsetCenter: [0, "40%"],
 
+                  color: "#fff",
 
+                  formatter: function(params) {
 
+                    return params;
 
+                  },
 
+                  textStyle: {
 
+                    fontSize: 18,
 
+                    fontWeight: "bold"
 
+                  }
 
+                },
 
+                data: [
 
+                  {
 
+                    show:false,
 
+                    name: "温馨提示：可以正常在\n户外运动，易敏感人群\n减少外出",
 
+                    value: 46,
 
+                    textStyle: {
 
+                      fontSize: 18
 
+                    }
 
+                  }
 
+                ]
 
+              }
 
+            ]
 
+            };
 
+  
+          let soOption = {
 
+            title: {
 
+              text: "SO2季日平均浓度",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            series: [
 
+              {
 
+                type: "gauge",
 
+                radius: "100%",
 
+                center: ["50%", "68%"],
 
+  
+                splitNumber: 0, //刻度数量
 
+                startAngle: 220,
 
+                endAngle: -40,
 
+                axisLine: {
 
+                  show: true,
 
+                  lineStyle: {
 
+                    width: 20,
 
+                    color: [[0.68, "#ffe354"], [1, "#ccc"]]
 
+                  }
 
+                },
 
+                //分隔线样式。
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisLabel: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                pointer: {
 
+                    show: true,
 
+                    width: "8%",
 
+                    length: '70%',
 
+                },
 
+                itemStyle:{
 
+                  color:'#fff'
 
+                },
 
+                title: {
 
+                  show: false,
 
+                  offsetCenter: [0, "20%"], // x, y，单位px
 
+                  textStyle: {
 
+                    color: "#01d4ea",
 
+                    fontSize: 10
 
+                  }
 
+                },
 
+                //仪表盘详情，用于显示数据。
 
+                detail: {
 
+                  show:true,
 
+                  offsetCenter: [0, "40%"],
 
+                  color: "#fff",
 
+                  formatter: function(params) {
 
+                    return params;
 
+                  },
 
+                  textStyle: {
 
+                    fontSize: 18,
 
+                    fontWeight: "bold"
 
+                  }
 
+                },
 
+                data: [
 
+                  {
 
+                    show:false,
 
+                    name: "温馨提示：可以正常在\n户外运动，易敏感人群\n减少外出",
 
+                    value: 28,
 
+                    textStyle: {
 
+                      fontSize: 18
 
+                    }
 
+                  }
 
+                ]
 
+              }
 
+            ]};
 
+          
+          let gdpOption = {
 
+            title: {
 
+              text: "森林面积及覆盖率",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            color: ["#ff9a32", "#ffe354"],
 
+            tooltip: {
 
+              trigger: "axis",
 
+              axisPointer: {
 
+                // 坐标轴指示器，坐标轴触发有效
 
+                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+              }
 
+            },
 
+            grid: {
 
+              left: "3%",
 
+              right: "4%",
 
+              bottom: "13%",
 
+              top: "27%",
 
+              containLabel: true,
 
+              borderColor: "#fff"
 
+            },
 
+            legend: {
 
+              itemWidth: 14,
 
+              itemHeight: 5,
 
+              itemGap: 1,
 
+              data: ["森林面积（千公顷）", "森林覆盖率"],
 
+              x: "0",
 
+              y: "90%",
 
+              textStyle: {
 
+                color: "#fff",
 
+                fontSize: 10
 
+              }
 
+            },
 
+            xAxis: {
 
+              data: ["2013", "2014", "2015", "2016", "2017"],
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              },
 
+              axisTick: {
 
+                show: false //隐藏X轴刻度
 
+              },
 
+              axisLabel: {
 
+                show: true,
 
+                textStyle: {
 
+                  color: "#fff" //X轴文字颜色
 
+                }
 
+              }
 
+            },
 
+            yAxis: [
 
+              {
 
+                type: "value",
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                },
 
+                axisLabel: {
 
+                  show: true,
 
+                  textStyle: {
 
+                    color: "#fff"
 
+                  }
 
+                }
 
+              },
 
+              {
 
+                type: "value",
 
+  
+                position: "right",
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                },
 
+                axisLabel: {
 
+                  show: true,
 
+                  formatter: "{value} %", //右侧Y轴文字显示
 
+                  textStyle: {
 
+                    color: "#fff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            series: [
 
+              {
 
+                name: "森林覆盖率",
 
+                type: "line",
 
+                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
 
+                smooth: true, //平滑曲线显示
 
+                showAllSymbol: true, //显示所有图形。
 
+                symbol: "circle", //标记的图形为实心圆
 
+                symbolSize: 10, //标记的大小
 
+                data: [43.6, 45.2, 45.7, 45.7, 46.3]
 
+              },
 
+              {
 
+                name: "森林面积（千公顷）",
 
+                type: "bar",
 
+                data: [407.3, 421.51, 430.18, 430.49, 437.9]
 
+              }
 
+            ]
 
+          };
 
+  
+          let outInOption = {
 
+            title: {
 
+              text: "公园面积及个数",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            color: ["#ffe354", "#ff9a32"],
 
+            legend: {
 
+              icon: "rect",
 
+              itemWidth: 14,
 
+              itemHeight: 5,
 
+              itemGap: 1,
 
+              data: ["公园面积（公顷）", "公园个数"],
 
+              x: "0",
 
+              y:'90%',
 
+              textStyle: {
 
+                fontSize: 12,
 
+                color: "#fff"
 
+              }
 
+            },
 
+            tooltip: {
 
+              trigger: "axis",
 
+              axisPointer: {
 
+                // 坐标轴指示器，坐标轴触发有效
 
+                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+              }
 
+            },
 
+            grid: {
 
+              left: "3%",
 
+              right: "4%",
 
+              bottom: "13%",
 
+              top: "22%",
 
+              containLabel: true,
 
+              borderColor: "#fff"
 
+            },
 
+            xAxis: [
 
+              {
 
+                type: "category",
 
+                data: ["2013","2014","2015", "2016", "2017"],
 
+                axisTick: {
 
+                  alignWithLabel: true
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            yAxis: [
 
+              {
 
+                type: "value",
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+              },
 
+              {
 
+                type: "value",
 
+                position: "right",
 
+                max:500,
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                },
 
+                axisLabel: {
 
+                  show: true,
 
+                  formatter: "{value}", //右侧Y轴文字显示
 
+                  textStyle: {
 
+                    color: "#fff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            series: [
 
+              {
 
+                name: "公园面积（公顷）",
 
+                type: "bar",
 
+                barWidth: "40%",
 
+                data: [2364, 3260.32, 2999.49, 3546.44,3666.35],
 
+              },{ 
+                name: "公园个数",
 
+                type: "bar",
 
+                barWidth: "40%",
 
+                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
 
+                data: [117,134,141,161,378],
 
+                barGap:"-100%"
 
+              }
 
+            ]
 
+          };
 
+  
+          let addValOption = {
 
+            title: {
 
+              text: "饮用水达标率",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            color: ["#ffe354"],
 
+            tooltip: {
 
+              trigger: "axis",
 
+              axisPointer: {
 
+                // 坐标轴指示器，坐标轴触发有效
 
+                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+              }
 
+            },
 
+            grid: {
 
+              left: "3%",
 
+              right: "4%",
 
+              bottom: "3%",
 
+              top: "33%",
 
+              containLabel: true,
 
+              borderColor: "#fff"
 
+            },
 
+            xAxis: [
 
+              {
 
+                type: "category",
 
+                data: ["2013","2014","2015", "2016", "2017"],
 
+                axisTick: {
 
+                  alignWithLabel: true
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            yAxis: [
 
+              {
 
+                name:"（%）",
 
+                type: "value",
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            series: [
 
+              {
 
+                name: "达标率（%）",
 
+                type: "bar",
 
+                barWidth: "40%",
 
+                data: [100, 100, 100, 100, 100]
 
+              }
 
+            ]
 
+          };
 
+  
+          let xiaofeiOption = {
 
+            title: {
 
+              text: "空气质量良好天数",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            color: ["#ffe354"],
 
+            tooltip: {
 
+              trigger: "axis",
 
+              axisPointer: {
 
+                // 坐标轴指示器，坐标轴触发有效
 
+                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+              }
 
+            },
 
+            grid: {
 
+              left: "3%",
 
+              right: "4%",
 
+              bottom: "3%",
 
+              top: "33%",
 
+              containLabel: true,
 
+              borderColor: "#fff"
 
+            },
 
+            xAxis: [
 
+              {
 
+                type: "category",
 
+                data: ["2013", "2014", "2015","2016","2017"],
 
+                axisTick: {
 
+                  alignWithLabel: true
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            yAxis: [
 
+              {
 
+                name:"(天)",
 
+                type: "value",
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            series: [
 
+              {
 
+                name: "天数(天)",
 
+                type: "bar",
 
+                barWidth: "40%",
 
+                data: [341, 293, 322, 309, 282]
 
+              }
 
+            ]
 
+          };
 
+  
+          let gdpChart = echarts.init(document.querySelector("#gdp"));
 
+          let outInChart = echarts.init(document.querySelector("#outIn"));
 
+          let addValChart = echarts.init(document.querySelector("#addVal"));
 
+          let xiaofeiChart = echarts.init(document.querySelector("#xiaofei"));
 
+          let gongshangChart = echarts.init(document.querySelector("#gongshang"));
 
+          let noChart = echarts.init(document.querySelector("#no-nongdu"));
 
+          let pmChart = echarts.init(document.querySelector("#pm-nongdu"));
 
+          let soChart = echarts.init(document.querySelector("#so-nongdu"));
 
+  
+          gdpChart.setOption(gdpOption);
 
+          outInChart.setOption(outInOption);
 
+          addValChart.setOption(addValOption);
 
+          xiaofeiChart.setOption(xiaofeiOption);
 
+          gongshangChart.setOption(gongshangOption);
 
+          noChart.setOption(noOption);
 
+          pmChart.setOption(pmOption);
 
+          soChart.setOption(soOption);
 
+  
+        })();
 
+        let arr = (Array.from(document.querySelectorAll('.s1 .card'))).concat(Array.from(document.querySelectorAll('.s2 .card')))
 
+        arr.forEach((dom, index) => {
 
+          dom.addEventListener('click', e => {
 
+            console.log('environmentClickHandle',index);
 
+            window.environmentClickHandle && window.environmentClickHandle(index)
 
+          })
 
+        })
 
+     </script>
 
+  </body>
 
+</html>

+ 549 - 0
equipment.html
Просмотреть файл 

@@ -0,0 +1,549 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/equipment.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <section class="s1">
 
+      <div class="s-title">
 
+        <h2>设备概况</h2>
 
+        <span class="tag">万达广场</span>
 
+      </div>
 
+      <div class="s1-title">总计设备数量 <span>200台</span></div>
 
+      <div class="e-con">
 
+        <div>
 
+          <div id="con1"></div>
 
+          <div class="con-txt">报警</div>
 
+        </div>
 
+        <div>
 
+          <div id="con2"></div>
 
+          <div class="con-txt">正常</div>
 
+        </div>
 
+        <div>
 
+          <div id="con3"></div>
 
+          <div class="con-txt">低压</div>
 
+        </div>
 
+        <div>
 
+          <div id="con4"></div>
 
+          <div class="con-txt">故障</div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s2">
 
+      <div class="s-title">
 
+        <h2>设备趋势</h2>
 
+        <span class="tag">万达广场</span>
 
+      </div>
 
+      <div class="s2-con">
 
+        <div class="s2-left">
 
+          <div class="sl-title">设备报警时间</div>
 
+          <div class="sl-sub" style="color:#fe2a2a">1分钟前</div>
 
+          <div class="sl-title">区域负责人值班电话</div>
 
+          <div class="sl-sub">1341779846</div>
 
+          <div class="sl-title">蓬江区消防大队值班电话</div>
 
+          <div class="sl-sub">0750-8699139</div>
 
+        </div>
 
+        <div class="s2-right" id="s2-e"</div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s3">
 
+      <div class="s-title">
 
+        <h2>设备列表</h2>
 
+        <span class="tag">丰乐社区</span>
 
+      </div>
 
+      <div class="s3-select">
 
+        <div>烟雾探测器</div>
 
+        <div>
 
+          <select value="0" name="全部" id="select">
 
+              <option value="0">全部</option>
 
+              <option value="1">正常</option>
 
+              <option value="2">报警</option>
 
+              <option value="3">低压</option>
 
+              <option value="4">故障</option>
 
+          </select>
 
+        </div>
 
+      </div>
 
+      <div class="jiaotong">
 
+        <div class="jiaotong-table">
 
+          <div class="t-header">
 
+            <span>更新时间</span>
 
+            <span>状态</span>
 
+            <span>温度</span>
 
+            <span>电量</span>
 
+            <span>详情</span>
 
+          </div>
 
+          <div class="t-main">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s4">
 
+      <div class="s-title">
 
+        <h2>设备详情</h2>
 
+        <span class="tag">AGE67ioj-49</span>
 
+      </div>
 
+      <div class="s4-con">
 
+        <div class="s4-left" id="map"></div>
 
+        <div class="s4-right">
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
+    <script src="js/jquery-3.2.1.min.js"></script>
 
+    <script src="js/echarts.min.js"></script>
 
+    <script src="https://webapi.amap.com/maps?v=1.4.10&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
 
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
 
+    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
 
+
 
+    <script>
 
+      let equipment = [{
 
+        time:"19.03.27 21.23.27",
 
+        status:'正常',
 
+        temperature:"15℃",
 
+        quantity:'99%',
 
+        id:0,
 
+        detail:{
 
+          name:"AGE67ioj-49",
 
+          lanlat:[113.0842709541, 22.5944937320],
 
+          xinghao:"AllRange1",
 
+          status:"正常",
 
+          update:"1分钟前",
 
+          xinhao:"强",
 
+          quantity:'99%',
 
+          position:"丰乐社区沂水街南段东城街路口"
 
+        }
 
+      },{
 
+        time:"19.03.27 21.23.27",
 
+        status:'低压',
 
+        temperature:"15℃",
 
+        quantity:'99%',
 
+        id:1,
 
+        detail:{
 
+          name:"AGE67ioj-49",
 
+          lanlat:[113.0842709541, 22.5944937320],
 
+          xinghao:"AllRange1",
 
+          status:"低压",
 
+          update:"1分钟前",
 
+          xinhao:"强",
 
+          quantity:'99%',
 
+          position:"丰乐社区沂水街南段东城街路口"
 
+        }
 
+      },{
 
+        time:"19.03.27 21.23.27",
 
+        status:'故障',
 
+        temperature:"15℃",
 
+        quantity:'99%',
 
+        id:2,
 
+        detail:{
 
+          name:"AGE67ioj-49",
 
+          lanlat:[113.0842709541, 22.5944937320],
 
+          xinghao:"AllRange1",
 
+          status:"故障",
 
+          update:"1分钟前",
 
+          xinhao:"强",
 
+          quantity:'99%',
 
+          position:"丰乐社区沂水街南段东城街路口"
 
+        }
 
+      },{
 
+        time:"19.03.27 21.23.27",
 
+        status:'报警',
 
+        temperature:"15℃",
 
+        quantity:'99%',
 
+        id:3,
 
+        detail:{
 
+          name:"AGE67ioj-49",
 
+          lanlat:[113.0842709541, 22.5944937320],
 
+          xinghao:"AllRange1",
 
+          status:"报警",
 
+          update:"1分钟前",
 
+          xinhao:"强",
 
+          quantity:'99%',
 
+          position:"丰乐社区沂水街南段东城街路口"
 
+        }
 
+      }];
 
+
 
+      (function() {
 
+        let c1 = "#fe2a2a";
 
+        let c2 = "#04cd0d";
 
+        let c3 = "#fdca3a";
 
+        let c4 = "#479eff";
 
+
 
+        let con1 = {
 
+          color: [c1, "#a3a3a3"],
 
+          title: {
 
+            text: "25%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 12,
 
+              fontWeight: "normal"
 
+            },
 
+            subtext: "50台",
 
+            subtextStyle: {
 
+              color: c1,
 
+              fontSize: 14
 
+            },
 
+            x: "center",
 
+            y: "30%"
 
+          },
 
+          series: [
 
+            {
 
+              name: "50台",
 
+              type: "pie",
 
+              textStyle: {
 
+                color: "#999"
 
+              },
 
+              radius: ["80%", "65%"],
 
+              center: ["50%", "50%"],
 
+              avoidLabelOverlap: false,
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "center"
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let con2 = {
 
+          color: [c2, "#a3a3a3"],
 
+          title: {
 
+            text: "25%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 12,
 
+              fontWeight: "normal"
 
+            },
 
+            subtext: "50台",
 
+            subtextStyle: {
 
+              color: c2,
 
+              fontSize: 14
 
+            },
 
+            x: "center",
 
+            y: "30%"
 
+          },
 
+          series: [
 
+            {
 
+              name: "50台",
 
+              type: "pie",
 
+              textStyle: {
 
+                color: "#999"
 
+              },
 
+              radius: ["80%", "65%"],
 
+              center: ["50%", "50%"],
 
+              avoidLabelOverlap: false,
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "center"
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let con3 = {
 
+          color: [c3, "#a3a3a3"],
 
+          title: {
 
+            text: "25%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 12,
 
+              fontWeight: "normal"
 
+            },
 
+            subtext: "50台",
 
+            subtextStyle: {
 
+              color: c3,
 
+              fontSize: 14
 
+            },
 
+            x: "center",
 
+            y: "30%"
 
+          },
 
+          series: [
 
+            {
 
+              name: "50台",
 
+              type: "pie",
 
+              textStyle: {
 
+                color: "#999"
 
+              },
 
+              radius: ["80%", "65%"],
 
+              center: ["50%", "50%"],
 
+              avoidLabelOverlap: false,
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "center"
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let con4 = {
 
+          color: [c4, "#a3a3a3"],
 
+          title: {
 
+            text: "25%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 12,
 
+              fontWeight: "normal"
 
+            },
 
+            subtext: "50台",
 
+            subtextStyle: {
 
+              color: c4,
 
+              fontSize: 14
 
+            },
 
+            x: "center",
 
+            y: "30%"
 
+          },
 
+          series: [
 
+            {
 
+              name: "50台",
 
+              type: "pie",
 
+              textStyle: {
 
+                color: "#999"
 
+              },
 
+              radius: ["80%", "65%"],
 
+              center: ["50%", "50%"],
 
+              avoidLabelOverlap: false,
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "center"
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
 
+            }
 
+          ]
 
+        };
 
+
 
+       let option = {
 
+            title: {
 
+              textStyle:{
 
+                color:'#fff'
 
+              }
 
+            },
 
+            grid: {
 
+                left: '3%',
 
+                right: '4%',
 
+                bottom: '3%',
 
+                containLabel: true
 
+            },
 
+            xAxis: {
 
+                type: 'category',
 
+                boundaryGap: false,
 
+                data: ['周一','周二','周三','周四','周五','周六','周日'],
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+            },
 
+            yAxis: {
 
+                type: 'value',
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                },
 
+                splitLine: {
 
+                show: false
 
+              },
 
+            },
 
+            series: [
 
+                {
 
+                    name:'邮件营销',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[120, 132, 101, 134, 90, 230, 210]
 
+                },
 
+                {
 
+                    name:'联盟广告',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[220, 182, 191, 234, 290, 330, 310]
 
+                },
 
+                {
 
+                    name:'视频广告',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[150, 232, 201, 154, 190, 330, 410]
 
+                },
 
+                {
 
+                    name:'直接访问',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[320, 332, 301, 334, 390, 330, 320]
 
+                },
 
+                {
 
+                    name:'搜索引擎',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[820, 932, 901, 934, 1290, 1330, 1320]
 
+                }
 
+            ]
 
+        };
 
+
 
+        let optionChart = echarts.init(document.querySelector("#s2-e"));
 
+
 
+        let con1Chart = echarts.init(document.querySelector("#con1"));
 
+        let con2Chart = echarts.init(document.querySelector("#con2"));
 
+        let con3Chart = echarts.init(document.querySelector("#con3"));
 
+        let con4Chart = echarts.init(document.querySelector("#con4"));
 
+
 
+        optionChart.setOption(option);
 
+
 
+        con1Chart.setOption(con1);
 
+        con2Chart.setOption(con2);
 
+        con3Chart.setOption(con3);
 
+        con4Chart.setOption(con4);
 
+        var map = new AMap.Map('map', {
 
+              resizeEnable: true,
 
+              zoom:14,
 
+              center: [113.0842709541, 22.5944937320]
 
+      });
 
+    })();
 
+
 
+      let htmlTemp = ""
 
+ 
+      equipment.forEach((item,idx)=>{
 
+        htmlTemp+=`<div class="t-body ${idx===0?'active':''}" data-detail="${item.id}">
 
+            <span>${item.time}</span>
 
+            <span>${item.status}</span>
 
+            <span>${item.temperature}</span>
 
+            <span>${item.quantity}</span>
 
+            <span>...</span>
 
+          </div>`
 
+      })
 
+
 
+      let firstItem = equipment[0].detail
 
+      
+      let htmlItem = getItemHtml(firstItem)
 
+        
+      $('.s4-right').html(htmlItem)
 
+
 
+      $('.t-main').html(htmlTemp)
 
+
 
+      $("#select").change(function(e){
 
+        htmlTemp = ""
 
+        let val = $("#select").find("option:selected").text();
 
+        console.log(val);
 
+        if (val!=="全部") {
 
+          equipment.forEach(item=>{
 
+            if (item.status === val) {
 
+              htmlTemp+=`<div class="t-body" data-detail="${item.id}">
 
+                <span>${item.time}</span>
 
+                <span>${item.status}</span>
 
+                <span>${item.temperature}</span>
 
+                <span>${item.quantity}</span>
 
+                <span>...</span>
 
+              </div>`
 
+            }
 
+          })
 
+        }
 
+        else{
 
+            equipment.forEach(item=>{
 
+            htmlTemp+=`<div class="t-body" data-detail="${item.id}">
 
+                  <span>${item.time}</span>
 
+                  <span>${item.status}</span>
 
+                  <span>${item.temperature}</span>
 
+                  <span>${item.quantity}</span>
 
+                  <span>...</span>
 
+                </div>`
 
+          })
 
+        }
 
+        $('.t-main').html(htmlTemp)
 
+      });
 
+
 
+      $('.t-main').on("click",".t-body",function (e) {
 
+        let that = $(this)
 
+        let id = that.data('detail')
 
+        $('.t-main .t-body').removeClass('active')
 
+        that.addClass('active')
 
+        equipment.forEach(item=>{
 
+          if (item.id === id) {
 
+            let html = getItemHtml(item.detail)
 
+            $('.s4-right').html(html)
 
+          }
 
+        })
 
+      })
 
+
 
+
 
+      function getItemHtml(item) {
 
+        return `<div class="s4-item">
 
+            <div class="s4i-l">设备型号</div>
 
+            <div class="s4i-r">${item.xinghao}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">设备状态</div>
 
+            <div class="s4i-r" style="color:#fe2a2a;">${item.status}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">更新时间</div>
 
+            <div class="s4i-r">${item.update}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">信号强度</div>
 
+            <div class="s4i-r">${item.xinhao}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">设备电量</div>
 
+            <div class="s4i-r">${item.quantity}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">设备位置</div>
 
+            <div class="s4i-r">${item.position}</div>
 
+          </div>`
 
+        
+      }
 
+
 
+
 
+      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
 
+        Array.from(document.querySelectorAll(".s2 .card"))
 
+      );
 
+      arr.forEach((dom, index) => {
 
+        dom.addEventListener("click", e => {
 
+          console.log("equipmentClickHandle", index);
 
+          window.equipmentClickHandle && window.equipmentClickHandle(index);
 
+        });
 
+      });
 
+    </script>
 
+  </body>
 
+</html>

BIN
font/download.zip
Просмотреть файл


+ 539 - 0
font/font_1098207_8hpjr87bc08/demo.css
Просмотреть файл 

@@ -0,0 +1,539 @@
 
+/* Logo 字体 */
 
+@font-face {
 
+  font-family: "iconfont logo";
 
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
 
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
 
+}
 
+
 
+.logo {
 
+  font-family: "iconfont logo";
 
+  font-size: 160px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+/* tabs */
 
+.nav-tabs {
 
+  position: relative;
 
+}
 
+
 
+.nav-tabs .nav-more {
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 0;
 
+  height: 42px;
 
+  line-height: 42px;
 
+  color: #666;
 
+}
 
+
 
+#tabs {
 
+  border-bottom: 1px solid #eee;
 
+}
 
+
 
+#tabs li {
 
+  cursor: pointer;
 
+  width: 100px;
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  font-size: 16px;
 
+  border-bottom: 2px solid transparent;
 
+  position: relative;
 
+  z-index: 1;
 
+  margin-bottom: -1px;
 
+  color: #666;
 
+}
 
+
 
+
 
+#tabs .active {
 
+  border-bottom-color: #f00;
 
+  color: #222;
 
+}
 
+
 
+.tab-container .content {
 
+  display: none;
 
+}
 
+
 
+/* 页面布局 */
 
+.main {
 
+  padding: 30px 100px;
 
+  width: 960px;
 
+  margin: 0 auto;
 
+}
 
+
 
+.main .logo {
 
+  color: #333;
 
+  text-align: left;
 
+  margin-bottom: 30px;
 
+  line-height: 1;
 
+  height: 110px;
 
+  margin-top: -50px;
 
+  overflow: hidden;
 
+  *zoom: 1;
 
+}
 
+
 
+.main .logo a {
 
+  font-size: 160px;
 
+  color: #333;
 
+}
 
+
 
+.helps {
 
+  margin-top: 40px;
 
+}
 
+
 
+.helps pre {
 
+  padding: 20px;
 
+  margin: 10px 0;
 
+  border: solid 1px #e7e1cd;
 
+  background-color: #fffdef;
 
+  overflow: auto;
 
+}
 
+
 
+.icon_lists {
 
+  width: 100% !important;
 
+  overflow: hidden;
 
+  *zoom: 1;
 
+}
 
+
 
+.icon_lists li {
 
+  width: 100px;
 
+  margin-bottom: 10px;
 
+  margin-right: 20px;
 
+  text-align: center;
 
+  list-style: none !important;
 
+  cursor: default;
 
+}
 
+
 
+.icon_lists li .code-name {
 
+  line-height: 1.2;
 
+}
 
+
 
+.icon_lists .icon {
 
+  display: block;
 
+  height: 100px;
 
+  line-height: 100px;
 
+  font-size: 42px;
 
+  margin: 10px auto;
 
+  color: #333;
 
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
 
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
 
+  transition: font-size 0.25s linear, width 0.25s linear;
 
+}
 
+
 
+.icon_lists .icon:hover {
 
+  font-size: 100px;
 
+}
 
+
 
+.icon_lists .svg-icon {
 
+  /* 通过设置 font-size 来改变图标大小 */
 
+  width: 1em;
 
+  /* 图标和文字相邻时，垂直对齐 */
 
+  vertical-align: -0.15em;
 
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
 
+  fill: currentColor;
 
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
 
+      normalize.css 中也包含这行 */
 
+  overflow: hidden;
 
+}
 
+
 
+.icon_lists li .name,
 
+.icon_lists li .code-name {
 
+  color: #666;
 
+}
 
+
 
+/* markdown 样式 */
 
+.markdown {
 
+  color: #666;
 
+  font-size: 14px;
 
+  line-height: 1.8;
 
+}
 
+
 
+.highlight {
 
+  line-height: 1.5;
 
+}
 
+
 
+.markdown img {
 
+  vertical-align: middle;
 
+  max-width: 100%;
 
+}
 
+
 
+.markdown h1 {
 
+  color: #404040;
 
+  font-weight: 500;
 
+  line-height: 40px;
 
+  margin-bottom: 24px;
 
+}
 
+
 
+.markdown h2,
 
+.markdown h3,
 
+.markdown h4,
 
+.markdown h5,
 
+.markdown h6 {
 
+  color: #404040;
 
+  margin: 1.6em 0 0.6em 0;
 
+  font-weight: 500;
 
+  clear: both;
 
+}
 
+
 
+.markdown h1 {
 
+  font-size: 28px;
 
+}
 
+
 
+.markdown h2 {
 
+  font-size: 22px;
 
+}
 
+
 
+.markdown h3 {
 
+  font-size: 16px;
 
+}
 
+
 
+.markdown h4 {
 
+  font-size: 14px;
 
+}
 
+
 
+.markdown h5 {
 
+  font-size: 12px;
 
+}
 
+
 
+.markdown h6 {
 
+  font-size: 12px;
 
+}
 
+
 
+.markdown hr {
 
+  height: 1px;
 
+  border: 0;
 
+  background: #e9e9e9;
 
+  margin: 16px 0;
 
+  clear: both;
 
+}
 
+
 
+.markdown p {
 
+  margin: 1em 0;
 
+}
 
+
 
+.markdown>p,
 
+.markdown>blockquote,
 
+.markdown>.highlight,
 
+.markdown>ol,
 
+.markdown>ul {
 
+  width: 80%;
 
+}
 
+
 
+.markdown ul>li {
 
+  list-style: circle;
 
+}
 
+
 
+.markdown>ul li,
 
+.markdown blockquote ul>li {
 
+  margin-left: 20px;
 
+  padding-left: 4px;
 
+}
 
+
 
+.markdown>ul li p,
 
+.markdown>ol li p {
 
+  margin: 0.6em 0;
 
+}
 
+
 
+.markdown ol>li {
 
+  list-style: decimal;
 
+}
 
+
 
+.markdown>ol li,
 
+.markdown blockquote ol>li {
 
+  margin-left: 20px;
 
+  padding-left: 4px;
 
+}
 
+
 
+.markdown code {
 
+  margin: 0 3px;
 
+  padding: 0 5px;
 
+  background: #eee;
 
+  border-radius: 3px;
 
+}
 
+
 
+.markdown strong,
 
+.markdown b {
 
+  font-weight: 600;
 
+}
 
+
 
+.markdown>table {
 
+  border-collapse: collapse;
 
+  border-spacing: 0px;
 
+  empty-cells: show;
 
+  border: 1px solid #e9e9e9;
 
+  width: 95%;
 
+  margin-bottom: 24px;
 
+}
 
+
 
+.markdown>table th {
 
+  white-space: nowrap;
 
+  color: #333;
 
+  font-weight: 600;
 
+}
 
+
 
+.markdown>table th,
 
+.markdown>table td {
 
+  border: 1px solid #e9e9e9;
 
+  padding: 8px 16px;
 
+  text-align: left;
 
+}
 
+
 
+.markdown>table th {
 
+  background: #F7F7F7;
 
+}
 
+
 
+.markdown blockquote {
 
+  font-size: 90%;
 
+  color: #999;
 
+  border-left: 4px solid #e9e9e9;
 
+  padding-left: 0.8em;
 
+  margin: 1em 0;
 
+}
 
+
 
+.markdown blockquote p {
 
+  margin: 0;
 
+}
 
+
 
+.markdown .anchor {
 
+  opacity: 0;
 
+  transition: opacity 0.3s ease;
 
+  margin-left: 8px;
 
+}
 
+
 
+.markdown .waiting {
 
+  color: #ccc;
 
+}
 
+
 
+.markdown h1:hover .anchor,
 
+.markdown h2:hover .anchor,
 
+.markdown h3:hover .anchor,
 
+.markdown h4:hover .anchor,
 
+.markdown h5:hover .anchor,
 
+.markdown h6:hover .anchor {
 
+  opacity: 1;
 
+  display: inline-block;
 
+}
 
+
 
+.markdown>br,
 
+.markdown>p>br {
 
+  clear: both;
 
+}
 
+
 
+
 
+.hljs {
 
+  display: block;
 
+  background: white;
 
+  padding: 0.5em;
 
+  color: #333333;
 
+  overflow-x: auto;
 
+}
 
+
 
+.hljs-comment,
 
+.hljs-meta {
 
+  color: #969896;
 
+}
 
+
 
+.hljs-string,
 
+.hljs-variable,
 
+.hljs-template-variable,
 
+.hljs-strong,
 
+.hljs-emphasis,
 
+.hljs-quote {
 
+  color: #df5000;
 
+}
 
+
 
+.hljs-keyword,
 
+.hljs-selector-tag,
 
+.hljs-type {
 
+  color: #a71d5d;
 
+}
 
+
 
+.hljs-literal,
 
+.hljs-symbol,
 
+.hljs-bullet,
 
+.hljs-attribute {
 
+  color: #0086b3;
 
+}
 
+
 
+.hljs-section,
 
+.hljs-name {
 
+  color: #63a35c;
 
+}
 
+
 
+.hljs-tag {
 
+  color: #333333;
 
+}
 
+
 
+.hljs-title,
 
+.hljs-attr,
 
+.hljs-selector-id,
 
+.hljs-selector-class,
 
+.hljs-selector-attr,
 
+.hljs-selector-pseudo {
 
+  color: #795da3;
 
+}
 
+
 
+.hljs-addition {
 
+  color: #55a532;
 
+  background-color: #eaffea;
 
+}
 
+
 
+.hljs-deletion {
 
+  color: #bd2c00;
 
+  background-color: #ffecec;
 
+}
 
+
 
+.hljs-link {
 
+  text-decoration: underline;
 
+}
 
+
 
+/* 代码高亮 */
 
+/* PrismJS 1.15.0
 
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
 
+/**
 
+ * prism.js default theme for JavaScript, CSS and HTML
 
+ * Based on dabblet (http://dabblet.com)
 
+ * @author Lea Verou
 
+ */
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+  color: black;
 
+  background: none;
 
+  text-shadow: 0 1px white;
 
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+  text-align: left;
 
+  white-space: pre;
 
+  word-spacing: normal;
 
+  word-break: normal;
 
+  word-wrap: normal;
 
+  line-height: 1.5;
 
+
 
+  -moz-tab-size: 4;
 
+  -o-tab-size: 4;
 
+  tab-size: 4;
 
+
 
+  -webkit-hyphens: none;
 
+  -moz-hyphens: none;
 
+  -ms-hyphens: none;
 
+  hyphens: none;
 
+}
 
+
 
+pre[class*="language-"]::-moz-selection,
 
+pre[class*="language-"] ::-moz-selection,
 
+code[class*="language-"]::-moz-selection,
 
+code[class*="language-"] ::-moz-selection {
 
+  text-shadow: none;
 
+  background: #b3d4fc;
 
+}
 
+
 
+pre[class*="language-"]::selection,
 
+pre[class*="language-"] ::selection,
 
+code[class*="language-"]::selection,
 
+code[class*="language-"] ::selection {
 
+  text-shadow: none;
 
+  background: #b3d4fc;
 
+}
 
+
 
+@media print {
 
+
 
+  code[class*="language-"],
 
+  pre[class*="language-"] {
 
+    text-shadow: none;
 
+  }
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+  padding: 1em;
 
+  margin: .5em 0;
 
+  overflow: auto;
 
+}
 
+
 
+:not(pre)>code[class*="language-"],
 
+pre[class*="language-"] {
 
+  background: #f5f2f0;
 
+}
 
+
 
+/* Inline code */
 
+:not(pre)>code[class*="language-"] {
 
+  padding: .1em;
 
+  border-radius: .3em;
 
+  white-space: normal;
 
+}
 
+
 
+.token.comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+  color: slategray;
 
+}
 
+
 
+.token.punctuation {
 
+  color: #999;
 
+}
 
+
 
+.namespace {
 
+  opacity: .7;
 
+}
 
+
 
+.token.property,
 
+.token.tag,
 
+.token.boolean,
 
+.token.number,
 
+.token.constant,
 
+.token.symbol,
 
+.token.deleted {
 
+  color: #905;
 
+}
 
+
 
+.token.selector,
 
+.token.attr-name,
 
+.token.string,
 
+.token.char,
 
+.token.builtin,
 
+.token.inserted {
 
+  color: #690;
 
+}
 
+
 
+.token.operator,
 
+.token.entity,
 
+.token.url,
 
+.language-css .token.string,
 
+.style .token.string {
 
+  color: #9a6e3a;
 
+  background: hsla(0, 0%, 100%, .5);
 
+}
 
+
 
+.token.atrule,
 
+.token.attr-value,
 
+.token.keyword {
 
+  color: #07a;
 
+}
 
+
 
+.token.function,
 
+.token.class-name {
 
+  color: #DD4A68;
 
+}
 
+
 
+.token.regex,
 
+.token.important,
 
+.token.variable {
 
+  color: #e90;
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+  font-weight: bold;
 
+}
 
+
 
+.token.italic {
 
+  font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+  cursor: help;
 
+}

+ 308 - 0
font/font_1098207_8hpjr87bc08/demo_index.html
Просмотреть файл 

@@ -0,0 +1,308 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+  <meta charset="utf-8"/>
 
+  <title>IconFont Demo</title>
 
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
 
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
 
+  <link rel="stylesheet" href="demo.css">
 
+  <link rel="stylesheet" href="iconfont.css">
 
+  <script src="iconfont.js"></script>
 
+  <!-- jQuery -->
 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
 
+  <!-- 代码高亮 -->
 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
 
+</head>
 
+<body>
 
+  <div class="main">
 
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
 
+    <div class="nav-tabs">
 
+      <ul id="tabs" class="dib-box">
 
+        <li class="dib active"><span>Unicode</span></li>
 
+        <li class="dib"><span>Font class</span></li>
 
+        <li class="dib"><span>Symbol</span></li>
 
+      </ul>
 
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1098207" target="_blank" class="nav-more">查看项目</a>
 
+      
+    </div>
 
+    <div class="tab-container">
 
+      <div class="content unicode" style="display: block;">
 
+          <ul class="icon_lists dib-box">
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe607;</span>
 
+                <div class="name">地球仪</div>
 
+                <div class="code-name">&amp;#xe607;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe67c;</span>
 
+                <div class="name">文章管理02</div>
 
+                <div class="code-name">&amp;#xe67c;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe6ac;</span>
 
+                <div class="name">树叶</div>
 
+                <div class="code-name">&amp;#xe6ac;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe6cb;</span>
 
+                <div class="name">安全保障</div>
 
+                <div class="code-name">&amp;#xe6cb;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe6a1;</span>
 
+                <div class="name">献爱心</div>
 
+                <div class="code-name">&amp;#xe6a1;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe609;</span>
 
+                <div class="name">办公楼</div>
 
+                <div class="code-name">&amp;#xe609;</div>
 
+              </li>
 
+          
+          </ul>
 
+          <div class="article markdown">
 
+          <h2 id="unicode-">Unicode 引用</h2>
 
+          <hr>
 
+
 
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
 
+          <ul>
 
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
 
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
 
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
 
+          </ul>
 
+          <blockquote>
 
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
 
+          </blockquote>
 
+          <p>Unicode 使用步骤如下：</p>
 
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
 
+<pre><code class="language-css"
 
+>@font-face {
 
+  font-family: 'iconfont';
 
+  src: url('iconfont.eot');
 
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 
+      url('iconfont.woff2') format('woff2'),
 
+      url('iconfont.woff') format('woff'),
 
+      url('iconfont.ttf') format('truetype'),
 
+      url('iconfont.svg#iconfont') format('svg');
 
+}
 
+</code></pre>
 
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
 
+<pre><code class="language-css"
 
+>.iconfont {
 
+  font-family: "iconfont" !important;
 
+  font-size: 16px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+</code></pre>
 
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
 
+<pre>
 
+<code class="language-html"
 
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
 
+</code></pre>
 
+          <blockquote>
 
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
 
+          </blockquote>
 
+          </div>
 
+      </div>
 
+      <div class="content font-class">
 
+        <ul class="icon_lists dib-box">
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icondiqiuyi"></span>
 
+            <div class="name">
 
+              地球仪
 
+            </div>
 
+            <div class="code-name">.icondiqiuyi
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont iconwenzhangguanli"></span>
 
+            <div class="name">
 
+              文章管理02
 
+            </div>
 
+            <div class="code-name">.iconwenzhangguanli
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont iconshuye"></span>
 
+            <div class="name">
 
+              树叶
 
+            </div>
 
+            <div class="code-name">.iconshuye
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont iconanquanbaozhang"></span>
 
+            <div class="name">
 
+              安全保障
 
+            </div>
 
+            <div class="code-name">.iconanquanbaozhang
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont iconairudiantubiaohuizhi-zhuanqu_xianaixin"></span>
 
+            <div class="name">
 
+              献爱心
 
+            </div>
 
+            <div class="code-name">.iconairudiantubiaohuizhi-zhuanqu_xianaixin
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont iconbangonglou"></span>
 
+            <div class="name">
 
+              办公楼
 
+            </div>
 
+            <div class="code-name">.iconbangonglou
 
+            </div>
 
+          </li>
 
+          
+        </ul>
 
+        <div class="article markdown">
 
+        <h2 id="font-class-">font-class 引用</h2>
 
+        <hr>
 
+
 
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
 
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
 
+        <ul>
 
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
 
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
 
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
 
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
 
+        </ul>
 
+        <p>使用步骤如下：</p>
 
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
 
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
 
+</code></pre>
 
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
 
+<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
 
+</code></pre>
 
+        <blockquote>
 
+          <p>"
 
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
 
+        </blockquote>
 
+      </div>
 
+      </div>
 
+      <div class="content symbol">
 
+          <ul class="icon_lists dib-box">
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icondiqiuyi"></use>
 
+                </svg>
 
+                <div class="name">地球仪</div>
 
+                <div class="code-name">#icondiqiuyi</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#iconwenzhangguanli"></use>
 
+                </svg>
 
+                <div class="name">文章管理02</div>
 
+                <div class="code-name">#iconwenzhangguanli</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#iconshuye"></use>
 
+                </svg>
 
+                <div class="name">树叶</div>
 
+                <div class="code-name">#iconshuye</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#iconanquanbaozhang"></use>
 
+                </svg>
 
+                <div class="name">安全保障</div>
 
+                <div class="code-name">#iconanquanbaozhang</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#iconairudiantubiaohuizhi-zhuanqu_xianaixin"></use>
 
+                </svg>
 
+                <div class="name">献爱心</div>
 
+                <div class="code-name">#iconairudiantubiaohuizhi-zhuanqu_xianaixin</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#iconbangonglou"></use>
 
+                </svg>
 
+                <div class="name">办公楼</div>
 
+                <div class="code-name">#iconbangonglou</div>
 
+            </li>
 
+          
+          </ul>
 
+          <div class="article markdown">
 
+          <h2 id="symbol-">Symbol 引用</h2>
 
+          <hr>
 
+
 
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
 
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
 
+          <ul>
 
+            <li>支持多色图标了，不再受单色限制。</li>
 
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
 
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
 
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
 
+          </ul>
 
+          <p>使用步骤如下：</p>
 
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
 
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
 
+</code></pre>
 
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
 
+<pre><code class="language-html">&lt;style&gt;
 
+.icon {
 
+  width: 1em;
 
+  height: 1em;
 
+  vertical-align: -0.15em;
 
+  fill: currentColor;
 
+  overflow: hidden;
 
+}
 
+&lt;/style&gt;
 
+</code></pre>
 
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
 
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
 
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
 
+&lt;/svg&gt;
 
+</code></pre>
 
+          </div>
 
+      </div>
 
+
 
+    </div>
 
+  </div>
 
+  <script>
 
+  $(document).ready(function () {
 
+      $('.tab-container .content:first').show()
 
+
 
+      $('#tabs li').click(function (e) {
 
+        var tabContent = $('.tab-container .content')
 
+        var index = $(this).index()
 
+
 
+        if ($(this).hasClass('active')) {
 
+          return
 
+        } else {
 
+          $('#tabs li').removeClass('active')
 
+          $(this).addClass('active')
 
+
 
+          tabContent.hide().eq(index).fadeIn()
 
+        }
 
+      })
 
+    })
 
+  </script>
 
+</body>
 
+</html>

Разница между файлами не показана из-за своего большого размера
+ 41 - 0
font/iconfont.css


BIN
font/iconfont.eot
Просмотреть файл


Разница между файлами не показана из-за своего большого размера
+ 1 - 0
font/iconfont.js


Разница между файлами не показана из-за своего большого размера
+ 44 - 0
font/iconfont.svg


BIN
font/iconfont.ttf
Просмотреть файл


BIN
font/iconfont.woff
Просмотреть файл


BIN
font/iconfont.woff2
Просмотреть файл


BIN
images/shexiangtou.png
Просмотреть файл


Разница между файлами не показана из-за своего большого размера
+ 1490 - 0
js/ckplayer.js


BIN
js/ckplayer.swf
Просмотреть файл


Разница между файлами не показана из-за своего большого размера
+ 1 - 0
js/echarts-gl.min.js


Разница между файлами не показана из-за своего большого размера
+ 22 - 0
js/echarts.min.js


Разница между файлами не показана из-за своего большого размера
+ 676 - 0
js/ezuikit.js


Разница между файлами не показана из-за своего большого размера
+ 2 - 0
js/hls.min.js


Разница между файлами не показана из-за своего большого размера
+ 4 - 0
js/jquery-3.2.1.min.js


Разница между файлами не показана из-за своего большого размера
+ 3 - 0
js/jsmpeg.min.js


+ 81 - 0
js/language.xml
Просмотреть файл 

@@ -0,0 +1,81 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+	<ckplayer>
 
+		<style>
 
+			<pr_zip>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}已加载[$prtage]%{/font}</pr_zip>
 
+			<!--
 
+			加载皮肤包进度提示的文字，[$prtage]会被替换成加载百分比
 
+			-->
 
+			<pr_load>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}已加载[$prtage]%{/font}</pr_load>
 
+			<!--
 
+			当调用多段视频时，并且没有配置好各段视频的时间和字节数的情况下，播放器需要先读取各段视频的元数据进行计算，此时需要显示一个加载进度告诉用户已计算的情况。 
+			-->
 
+			<pr_noload>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}加载失败{/font}</pr_noload>
 
+			<!--
 
+			加载视频失败时显示的内容 
+			-->
 
+			<pr_buffer>{font color='#FFFFFF' face='Arial' size='12'}[$buffer]%{/font}</pr_buffer>
 
+			<!--
 
+			视频缓冲时显示的提示，[$buffer]会被替换成缓冲的百分比数字部份
 
+			-->
 
+			<pr_play>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击播放{/font}</pr_play>
 
+			<!--
 
+			鼠标经过播放按钮时的提示，支持html 
+			-->
 
+			<pr_pause>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击暂停{/font}</pr_pause>
 
+			<!--
 
+			鼠标经过暂停按钮时的提示，支持html 
+			-->
 
+			<pr_mute>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击静音{/font}</pr_mute>
 
+			<!--
 
+			鼠标经过静音按钮时的提示，支持html 
+			-->
 
+			<pr_nomute>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}取消静音{/font}</pr_nomute>
 
+			<!--
 
+			鼠标经过取消静音按钮时的提示，支持html 
+			-->
 
+			<pr_full>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击全屏{/font}</pr_full>
 
+			<!--
 
+			鼠标经过全屏按钮时的提示，支持html 
+			-->
 
+			<pr_nofull>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}退出全屏{/font}</pr_nofull>
 
+			<!--
 
+			鼠标经过退出全屏按钮时的提示，支持html 
+			-->
 
+			<pr_fastf>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}快进{/font}</pr_fastf>
 
+			<!--
 
+			鼠标经过快进按钮时的提示，支持html 
+			-->
 
+			<pr_fastr>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}快退{/font}</pr_fastr>
 
+			<!--
 
+			鼠标经过快退按钮时的提示，支持html 
+			-->
 
+			<pr_time>{font color='#FFFFFF' face='Arial' size='16'}[$Time]{/font}</pr_time>
 
+			<!--
 
+			鼠标经过进度栏时提示当前点上时间的，[$Time]会被替换成时间，支持html 
+			-->
 
+			<pr_volume>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}音量：[$Volume]%{/font}</pr_volume>
 
+			<!--
 
+			鼠标经过音量调节框或调整音量时提示，[$Volume]会自动替换音量值(0-100) 
+			-->
 
+			<pr_clockwait>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}00:00 / 00:00{/font}</pr_clockwait>
 
+			<!--
 
+			在默认不加载视频，即m=1的时候，同时并没有设置视频的时间和字节，即o和w值的时候，pr_clock和pr_clock2里的所有内容被替换成这里设置的值 
+			-->
 
+			<pr_live>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}视频直播中{/font}</pr_live>
 
+			<!--
 
+			在直播的情况下显示的文字 
+			-->
 
+			<pr_adv>{font color='#FFFFFF' size='12' face='Microsoft YaHei,微软雅黑'}广告剩余：{font color='#FF0000' size='15' face='Arial'}{b}[$Second]{/b}{/font} 秒{/font}</pr_adv>
 
+			<!--
 
+			广告倒计时显示的内容，[$Second]将会显示倒计时的秒数
 
+			-->
 
+			<pr_prompt>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}[$prompt]{/font}</pr_prompt>
 
+			<!--
 
+			提示点文字 
+			-->
 
+			<pr_cksetup>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}设置{/font}</pr_cksetup>
 
+			<!--
 
+			鼠标经过设置提示的文字（该定义为插件所用）
 
+			-->
 
+		</style>
 
+	</ckplayer>

BIN
js/m3u8.swf
Просмотреть файл


+ 95 - 0
js/page.js
Просмотреть файл 

@@ -0,0 +1,95 @@
 
+(function($){
 
+	var ms = {
 
+		init:function(obj,args){
 
+			return (function(){
 
+				ms.fillHtml(obj,args);
 
+				ms.bindEvent(obj,args);
 
+			})();
 
+		},
 
+		//填充html
 
+		fillHtml:function(obj,args){
 
+			return (function(){
 
+				obj.empty();
 
+				//上一页
 
+				if(args.current > 1){
 
+					obj.append('<a href="javascript:;" class="prevPage">\<</a>');
 
+				}else{
 
+					obj.remove('.prevPage');
 
+					obj.append('<span class="disabled">\<</span>');
 
+				}
 
+				//中间页码
 
+				if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
 
+					obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
 
+				}
 
+				if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
 
+					obj.append('<span>...</span>');
 
+				}
 
+				var start = args.current -2,end = args.current+2;
 
+				if((start > 1 && args.current < 4)||args.current == 1){
 
+					end++;
 
+				}
 
+				if(args.current > args.pageCount-4 && args.current >= args.pageCount){
 
+					start--;
 
+				}
 
+				for (;start <= end; start++) {
 
+					if(start <= args.pageCount && start >= 1){
 
+						if(start != args.current){
 
+							obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
 
+						}else{
 
+							obj.append('<span class="current">'+ start +'</span>');
 
+						}
 
+					}
 
+				}
 
+				if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
 
+					obj.append('<span>...</span>');
 
+				}
 
+				if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
 
+					obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
 
+				}
 
+				//下一页
 
+				if(args.current < args.pageCount){
 
+					obj.append('<a href="javascript:;" class="nextPage">\></a>');
 
+				}else{
 
+					obj.remove('.nextPage');
 
+					obj.append('<span class="disabled">\></span>');
 
+				}
 
+			})();
 
+		},
 
+		//绑定事件
 
+		bindEvent:function(obj,args){
 
+			return (function(){
 
+				obj.on("click","a.tcdNumber",function(){
 
+					var current = parseInt($(this).text());
 
+					ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
 
+					if(typeof(args.backFn)=="function"){
 
+						args.backFn(current);
 
+					}
 
+				});
 
+				//上一页
 
+				obj.on("click","a.prevPage",function(){
 
+					var current = parseInt(obj.children("span.current").text());
 
+					ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
 
+					if(typeof(args.backFn)=="function"){
 
+						args.backFn(current-1);
 
+					}
 
+				});
 
+				//下一页
 
+				obj.on("click","a.nextPage",function(){
 
+					var current = parseInt(obj.children("span.current").text());
 
+					ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
 
+					if(typeof(args.backFn)=="function"){
 
+						args.backFn(current+1);
 
+					}
 
+				});
 
+			})();
 
+		}
 
+	}
 
+	$.fn.createPage = function(options){
 
+		var args = $.extend({
 
+			pageCount : 15,
 
+			current : 1,
 
+			backFn : function(){}
 
+		},options);
 
+		ms.init(this,args);
 
+	}
 
+})(jQuery);

BIN
js/style.swf
Просмотреть файл


+ 703 - 0
livelihood.html
Просмотреть файл 

@@ -0,0 +1,703 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/livelihood.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <header class="title">
 
+      <i class="iconfont iconminshengxingfu"></i>
 
+      民生幸福
 
+    </header>
 
+    <div class="line"></div>
 
+    <section class="s1">
 
+      <div class="card">
 
+        <div class="s-title"><h2>医疗卫生</h2></div>
 
+        <div class="f-item">
 
+          <span>卫生机构数</span>
 
+          <span class="emphasize">1608</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>医院</span>
 
+          <span class="emphasize">44</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>床位数</span>
 
+          <span class="emphasize">22774</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>人员数</span>
 
+          <span class="emphasize">34531</span>
 
+        </div>
 
+      </div>
 
+      <div class="card">
 
+        <div class="s-title"><h2>运输邮电</h2></div>
 
+        <div class="f-item">
 
+          <span>机动车辆总数</span>
 
+          <span class="emphasize">293.37万辆</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>货运量</span>
 
+          <span class="emphasize">14975万吨</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>货物周转量</span>
 
+          <span class="emphasize">186.62亿吨公里</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>货物吞吐量</span>
 
+          <span class="emphasize">8267.42万吨</span>
 
+        </div>
 
+      </div>
 
+      <div class="line"></div>
 
+      <div class="card">
 
+        <div class="s-title"><h2>教育资源</h2></div>
 
+        <div class="f-item">
 
+          <span>普通中学</span>
 
+          <span class="emphasize">189所</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>小学</span>
 
+          <span class="emphasize">319所</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>幼儿教育</span>
 
+          <span class="emphasize">275所</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>高等院校</span>
 
+          <span class="emphasize">3所</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>中等职业教育学校</span>
 
+          <span class="emphasize">22所</span>
 
+        </div>
 
+      </div>
 
+      <div class="card">
 
+        <div class="s-title"><h2>文体服务</h2></div>
 
+        <div class="f-item">
 
+          <span>博物馆</span>
 
+          <span class="emphasize">6所</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>公共图书馆</span>
 
+          <span class="emphasize">8所</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>广播电视台</span>
 
+          <span class="emphasize">8个</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>文化站</span>
 
+          <span class="emphasize">74个</span>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s2">
 
+      <div class="card" id="gdp"></div>
 
+      <div class="card" id="outIn"></div>
 
+      <div class="line"></div>
 
+      <div class="card" id="addVal"></div>
 
+      <div class="card" id="xiaofei"></div>
 
+      <div class="line"></div>
 
+      <div class="card" style="height:240px;" id="guding"></div>
 
+      <div class="card" style="height:240px;" id="gongshang"></div>
 
+    </section>
 
+
 
+    <script src="js/echarts.min.js"></script>
 
+    <script>
 
+      (function() {
 
+        let gdpOption = {
 
+          title: {
 
+            text: "社会保障",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354", "#ff9a32", "#dc9518"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              lineStyle: {
 
+                color: "#57617B"
 
+              }
 
+            }
 
+          },
 
+          legend: {
 
+            data: [
 
+              "城镇职工养老保险人数",
 
+              "城乡居民基养老保险人数",
 
+              "城乡基本医疗保险人数"
 
+            ],
 
+            icon: "rect",
 
+            itemWidth: 10,
 
+            itemHeight: 5,
 
+            itemGap: 2,
 
+            right: "0",
 
+            x: "40%",
 
+            textStyle: {
 
+              fontSize: 12,
 
+              color: "#F1F1F3"
 
+            }
 
+          },
 
+          grid: {
 
+            left: "1%",
 
+            right: "6%",
 
+            bottom: "3%",
 
+            containLabel: true
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "category",
 
+              boundaryGap: false,
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#fff"
 
+                }
 
+              },
 
+              data: ["2013", "2014", "2015", "2016", "2017"]
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              name:"(万人)",
 
+              type: "value",
 
+              axisTick: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#fff"
 
+                }
 
+              },
 
+              axisLabel: {
 
+                margin: 10,
 
+                textStyle: {
 
+                  fontSize: 14
 
+                }
 
+              },
 
+              splitLine: {
 
+                show: false,
 
+                lineStyle: {
 
+                  color: "#57617B"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "城镇职工养老保险人数",
 
+              type: "line",
 
+              smooth: true,
 
+              lineStyle: {
 
+                normal: {
 
+                  width: 1
 
+                }
 
+              },
 
+              areaStyle: {
 
+                normal: {
 
+                  color: new echarts.graphic.LinearGradient(
 
+                    0,
 
+                    0,
 
+                    0,
 
+                    1,
 
+                    [
 
+                      {
 
+                        offset: 0,
 
+                        color: "rgba(137, 189, 27, 0.3)"
 
+                      },
 
+                      {
 
+                        offset: 0.8,
 
+                        color: "rgba(137, 189, 27, 0)"
 
+                      }
 
+                    ],
 
+                    false
 
+                  ),
 
+                  shadowColor: "rgba(253, 225, 89, 1)",
 
+                  shadowBlur: 10
 
+                }
 
+              },
 
+              itemStyle: {
 
+                normal: {
 
+                  color: "#ffe354"
 
+                }
 
+              },
 
+              data: [181.2026, 186.1874, 191.9834, 193.571, 186.2082]
 
+            },
 
+            {
 
+              name: "城乡居民基养老保险人数",
 
+              type: "line",
 
+              smooth: true,
 
+              lineStyle: {
 
+                normal: {
 
+                  width: 1
 
+                }
 
+              },
 
+              areaStyle: {
 
+                normal: {
 
+                  color: new echarts.graphic.LinearGradient(
 
+                    0,
 
+                    0,
 
+                    0,
 
+                    1,
 
+                    [
 
+                      {
 
+                        offset: 0,
 
+                        color: "rgba(0, 136, 212, 0.3)"
 
+                      },
 
+                      {
 
+                        offset: 0.8,
 
+                        color: "rgba(0, 136, 212, 0)"
 
+                      }
 
+                    ],
 
+                    false
 
+                  ),
 
+                  shadowColor: "rgba(253, 225, 89, 1)",
 
+                  shadowBlur: 10
 
+                }
 
+              },
 
+              itemStyle: {
 
+                normal: {
 
+                  color: "#ff9a32"
 
+                }
 
+              },
 
+              data: [149.5543, 142.4777, 149.1736, 156.006, 155.4064]
 
+            },
 
+            {
 
+              name: "城乡基本医疗保险人数",
 
+              type: "line",
 
+              smooth: true,
 
+              lineStyle: {
 
+                normal: {
 
+                  width: 1
 
+                }
 
+              },
 
+              areaStyle: {
 
+                normal: {
 
+                  color: new echarts.graphic.LinearGradient(
 
+                    0,
 
+                    0,
 
+                    0,
 
+                    1,
 
+                    [
 
+                      {
 
+                        offset: 0,
 
+                        color: "rgba(219, 50, 51, 0.3)"
 
+                      },
 
+                      {
 
+                        offset: 0.8,
 
+                        color: "rgba(219, 50, 51, 0)"
 
+                      }
 
+                    ],
 
+                    false
 
+                  ),
 
+                  shadowColor: "rgba(253, 225, 89, 1)",
 
+                  shadowBlur: 10
 
+                }
 
+              },
 
+              itemStyle: {
 
+                normal: {
 
+                  color: "#dc9518"
 
+                }
 
+              },
 
+              data: [385.3142, 388.7146, 386.9919, 382.6387, 388.8139]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let outInOption = {
 
+          title: {
 
+            text: "邮电服务",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354", "#ff9a32"],
 
+          tooltip: {
 
+            trigger: "axis"
 
+          },
 
+          legend: {
 
+            icon: "rect",
 
+            itemWidth: 14,
 
+            itemHeight: 5,
 
+            itemGap: 1,
 
+            data: ["客运量", "货物吞吐量"],
 
+            x: "60%",
 
+            textStyle: {
 
+              fontSize: 12,
 
+              color: "#fff"
 
+            }
 
+          },
 
+          grid: {
 
+            left: "2%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            top: "30%",
 
+            containLabel: true
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "category",
 
+              data: ["2013", "2014", "2015", "2016", "2017"],
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "客运量",
 
+              type: "bar",
 
+              data: [20102, 9545, 9239, 9746, 9606],
 
+              barGap: 0
 
+            },
 
+            {
 
+              name: "货物吞吐量",
 
+              type: "bar",
 
+              data: [6737.08, 7352.17, 7524.62, 7923, 8267.42],
 
+              barGap: 0
 
+            }
 
+          ]
 
+        };
 
+
 
+        let addValOption = {
 
+          title: {
 
+            text: "升学率、入学率",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            top: "33%",
 
+            containLabel: true,
 
+            borderColor: "#fff"
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "category",
 
+              data: [
 
+                "学龄\n儿童",
 
+                "小学\n升学",
 
+                "初中\n适龄",
 
+                "初中\n升学",
 
+                "高中\n升学"
 
+              ],
 
+              axisTick: {
 
+                alignWithLabel: true
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              name: "(%)",
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "升学入学率",
 
+              type: "bar",
 
+              barWidth: "40%",
 
+              data: [100, 100, 100, 98.58, 87.79]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let xiaofeiOption = {
 
+          title: {
 
+            text: "卫生机构人员比例",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          tooltip: {
 
+            trigger: "item",
 
+            formatter: "{a} <br/>{b} : {c} ({d}%)",
 
+            textStyle: {
 
+              fontSize: 12
 
+            }
 
+          },
 
+          legend: {
 
+            data: [
 
+              "执业医师",
 
+              "执业助理医师",
 
+              "注册护士",
 
+              "药师（士）",
 
+              "技师（士）",
 
+              "其他卫生技术人员"
 
+            ],
 
+            itemWidth: 10,
 
+            itemHeight: 5,
 
+            itemGap: 2,
 
+            right: "0",
 
+            x: "48%",
 
+            y: "30%",
 
+            textStyle: {
 
+              fontSize: 12,
 
+              color: "#F1F1F3"
 
+            }
 
+          },
 
+          series: [
 
+            {
 
+              name: "卫生机构人员比例",
 
+              type: "pie",
 
+              center: ["25%", "60%"],
 
+              radius: ["50%", "65%"],
 
+              avoidLabelOverlap: false,
 
+              color: ["#ffe354", "#ff9a32","#dc9518","#9b9b9b","#dc9518","#bfbfbf","#d9d9d9"],
 
+              label: {
 
+                normal: {
 
+                  show: false
 
+                },
 
+                emphasis: {
 
+                  show: true,
 
+                  textStyle: {
 
+                    fontSize: "12",
 
+                    fontWeight: "bold"
 
+                  }
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [
 
+                { value: 2904.1, name: "其他卫生技术人员" },
 
+                { value: 8002.28, name: "执业医师" },
 
+                { value: 1857.6, name: "执业助理医师" },
 
+                { value: 12908.45, name: "注册护士" },
 
+                { value: 1894.6, name: "药师（士）" },
 
+                { value: 1320.5, name: "技师（士）" }
 
+              ]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let gudingOption = {
 
+          title: {
 
+            text: "民生公共支出情况",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            top: "23%",
 
+            containLabel: true,
 
+            borderColor: "#fff"
 
+          },
 
+          xAxis: [
 
+            {
 
+              axisLabel:{  
+                  interval:0,  
+                  rotate:45,
 
+                  // margin:2,  
+                  textStyle:{  
+                    fontSize:10
 
+                  }
 
+              },
 
+              type: "category",
 
+              data: [
 
+                "一般公共服务",
 
+                "公共安全",
 
+                "教育",
 
+                "文化体育与传媒",
 
+                "社会保障和就业",
 
+                "医疗卫生",
 
+                "节能环保",
 
+                "城乡社区事务",
 
+                "交通运输",
 
+                "其他支出"
 
+              ],
 
+              axisTick: {
 
+                alignWithLabel: true
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "（万元）",
 
+              type: "bar",
 
+              barWidth: "40%",
 
+              data: [
 
+                393354,
 
+                273139,
 
+                732484,
 
+                76247,
 
+                530281,
 
+                373195,
 
+                47605,
 
+                47605,
 
+                219034,
 
+                97014,
 
+                7055
 
+              ]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let gongshangOption = {
 
+          title: {
 
+            text: "城镇登记失业率",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            top: "33%",
 
+            containLabel: true,
 
+            borderColor: "#fff"
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "category",
 
+              data: ["2013", "2014", "2015", "2016", "2017"],
 
+              axisTick: {
 
+                alignWithLabel: true
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              name: "(%)",
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              max:100,
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "失业率(%)",
 
+              type: "bar",
 
+              barWidth: "40%",
 
+              data: [2.32, 2.36, 2.37, 2.37, 2.38]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let gdpChart = echarts.init(document.querySelector("#gdp"));
 
+        let outInChart = echarts.init(document.querySelector("#outIn"));
 
+        let addValChart = echarts.init(document.querySelector("#addVal"));
 
+        let xiaofeiChart = echarts.init(document.querySelector("#xiaofei"));
 
+        let gudingChart = echarts.init(document.querySelector("#guding"));
 
+        let gongshangChart = echarts.init(document.querySelector("#gongshang"));
 
+
 
+        gdpChart.setOption(gdpOption);
 
+        outInChart.setOption(outInOption);
 
+        addValChart.setOption(addValOption);
 
+        xiaofeiChart.setOption(xiaofeiOption);
 
+        gudingChart.setOption(gudingOption);
 
+        gongshangChart.setOption(gongshangOption);
 
+      })();
 
+      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
 
+        Array.from(document.querySelectorAll(".s2 .card"))
 
+      );
 
+      arr.forEach((dom, index) => {
 
+        dom.addEventListener("click", e => {
 
+          console.log("livelihoodClickHandle", index);
 
+          window.livelihoodClickHandle && window.livelihoodClickHandle(index);
 
+        });
 
+      });
 
+    </script>
 
+  </body>
 
+</html>

+ 549 - 0
manhole.html
Просмотреть файл 

@@ -0,0 +1,549 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/manhole.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <section class="s1">
 
+      <div class="s-title">
 
+        <h2>设备概况</h2>
 
+        <span class="tag">万达广场</span>
 
+      </div>
 
+      <div class="s1-title">总计设备数量 <span>200台</span></div>
 
+      <div class="e-con">
 
+        <div>
 
+          <div id="con1"></div>
 
+          <div class="con-txt">掀翻</div>
 
+        </div>
 
+        <div>
 
+          <div id="con2"></div>
 
+          <div class="con-txt">抬起</div>
 
+        </div>
 
+        <div>
 
+          <div id="con3"></div>
 
+          <div class="con-txt">水浸</div>
 
+        </div>
 
+        <div>
 
+          <div id="con4"></div>
 
+          <div class="con-txt">正常</div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s2">
 
+      <div class="s-title">
 
+        <h2>设备趋势</h2>
 
+        <span class="tag">万达广场</span>
 
+      </div>
 
+      <div class="s2-con">
 
+        <div class="s2-left">
 
+          <div class="sl-title">设备报警时间</div>
 
+          <div class="sl-sub" style="color:#fe2a2a">1分钟前</div>
 
+          <div class="sl-title">区域负责人值班电话</div>
 
+          <div class="sl-sub">1341779846</div>
 
+          <div class="sl-title">蓬江区消防大队值班电话</div>
 
+          <div class="sl-sub">0750-8699139</div>
 
+        </div>
 
+        <div class="s2-right" id="s2-e"</div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s3">
 
+      <div class="s-title">
 
+        <h2>设备列表</h2>
 
+        <span class="tag">丰乐社区</span>
 
+      </div>
 
+      <div class="s3-select">
 
+        <div>烟雾探测器</div>
 
+        <div>
 
+          <select value="0" name="全部" id="select">
 
+              <option value="0">全部</option>
 
+              <option value="1">掀翻</option>
 
+              <option value="2">抬起</option>
 
+              <option value="3">水浸</option>
 
+              <option value="4">正常</option>
 
+          </select>
 
+        </div>
 
+      </div>
 
+      <div class="jiaotong">
 
+        <div class="jiaotong-table">
 
+          <div class="t-header">
 
+            <span>更新时间</span>
 
+            <span>状态</span>
 
+            <span>温度</span>
 
+            <span>电量</span>
 
+            <span>详情</span>
 
+          </div>
 
+          <div class="t-main">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s4">
 
+      <div class="s-title">
 
+        <h2>设备详情</h2>
 
+        <span class="tag">AGE67ioj-49</span>
 
+      </div>
 
+      <div class="s4-con">
 
+        <div class="s4-left" id="map"></div>
 
+        <div class="s4-right">
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
+    <script src="js/jquery-3.2.1.min.js"></script>
 
+    <script src="js/echarts.min.js"></script>
 
+    <script src="https://webapi.amap.com/maps?v=1.4.10&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
 
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
 
+    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
 
+
 
+    <script>
 
+      let equipment = [{
 
+        time:"19.03.27 21.23.27",
 
+        status:'正常',
 
+        temperature:"15℃",
 
+        quantity:'99%',
 
+        id:0,
 
+        detail:{
 
+          name:"AGE67ioj-49",
 
+          lanlat:[113.0842709541, 22.5944937320],
 
+          xinghao:"AllRange1",
 
+          status:"正常",
 
+          update:"1分钟前",
 
+          xinhao:"强",
 
+          quantity:'99%',
 
+          position:"丰乐社区沂水街南段东城街路口"
 
+        }
 
+      },{
 
+        time:"19.03.27 21.23.27",
 
+        status:'掀翻',
 
+        temperature:"15℃",
 
+        quantity:'99%',
 
+        id:1,
 
+        detail:{
 
+          name:"AGE67ioj-49",
 
+          lanlat:[113.0842709541, 22.5944937320],
 
+          xinghao:"AllRange1",
 
+          status:"掀翻",
 
+          update:"1分钟前",
 
+          xinhao:"强",
 
+          quantity:'99%',
 
+          position:"丰乐社区沂水街南段东城街路口"
 
+        }
 
+      },{
 
+        time:"19.03.27 21.23.27",
 
+        status:'抬起',
 
+        temperature:"15℃",
 
+        quantity:'99%',
 
+        id:2,
 
+        detail:{
 
+          name:"AGE67ioj-49",
 
+          lanlat:[113.0842709541, 22.5944937320],
 
+          xinghao:"AllRange1",
 
+          status:"抬起",
 
+          update:"1分钟前",
 
+          xinhao:"强",
 
+          quantity:'99%',
 
+          position:"丰乐社区沂水街南段东城街路口"
 
+        }
 
+      },{
 
+        time:"19.03.27 21.23.27",
 
+        status:'水浸',
 
+        temperature:"15℃",
 
+        quantity:'99%',
 
+        id:3,
 
+        detail:{
 
+          name:"AGE67ioj-49",
 
+          lanlat:[113.0842709541, 22.5944937320],
 
+          xinghao:"AllRange1",
 
+          status:"水浸",
 
+          update:"1分钟前",
 
+          xinhao:"强",
 
+          quantity:'99%',
 
+          position:"丰乐社区沂水街南段东城街路口"
 
+        }
 
+      }];
 
+
 
+      (function() {
 
+        let c1 = "#fe2a2a";
 
+        let c2 = "#04cd0d";
 
+        let c3 = "#fdca3a";
 
+        let c4 = "#479eff";
 
+
 
+        let con1 = {
 
+          color: [c1, "#a3a3a3"],
 
+          title: {
 
+            text: "25%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 12,
 
+              fontWeight: "normal"
 
+            },
 
+            subtext: "50台",
 
+            subtextStyle: {
 
+              color: c1,
 
+              fontSize: 14
 
+            },
 
+            x: "center",
 
+            y: "30%"
 
+          },
 
+          series: [
 
+            {
 
+              name: "50台",
 
+              type: "pie",
 
+              textStyle: {
 
+                color: "#999"
 
+              },
 
+              radius: ["80%", "65%"],
 
+              center: ["50%", "50%"],
 
+              avoidLabelOverlap: false,
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "center"
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let con2 = {
 
+          color: [c2, "#a3a3a3"],
 
+          title: {
 
+            text: "25%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 12,
 
+              fontWeight: "normal"
 
+            },
 
+            subtext: "50台",
 
+            subtextStyle: {
 
+              color: c2,
 
+              fontSize: 14
 
+            },
 
+            x: "center",
 
+            y: "30%"
 
+          },
 
+          series: [
 
+            {
 
+              name: "50台",
 
+              type: "pie",
 
+              textStyle: {
 
+                color: "#999"
 
+              },
 
+              radius: ["80%", "65%"],
 
+              center: ["50%", "50%"],
 
+              avoidLabelOverlap: false,
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "center"
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let con3 = {
 
+          color: [c3, "#a3a3a3"],
 
+          title: {
 
+            text: "25%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 12,
 
+              fontWeight: "normal"
 
+            },
 
+            subtext: "50台",
 
+            subtextStyle: {
 
+              color: c3,
 
+              fontSize: 14
 
+            },
 
+            x: "center",
 
+            y: "30%"
 
+          },
 
+          series: [
 
+            {
 
+              name: "50台",
 
+              type: "pie",
 
+              textStyle: {
 
+                color: "#999"
 
+              },
 
+              radius: ["80%", "65%"],
 
+              center: ["50%", "50%"],
 
+              avoidLabelOverlap: false,
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "center"
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let con4 = {
 
+          color: [c4, "#a3a3a3"],
 
+          title: {
 
+            text: "25%",
 
+            textStyle: {
 
+              color: "#fff",
 
+              fontSize: 12,
 
+              fontWeight: "normal"
 
+            },
 
+            subtext: "50台",
 
+            subtextStyle: {
 
+              color: c4,
 
+              fontSize: 14
 
+            },
 
+            x: "center",
 
+            y: "30%"
 
+          },
 
+          series: [
 
+            {
 
+              name: "50台",
 
+              type: "pie",
 
+              textStyle: {
 
+                color: "#999"
 
+              },
 
+              radius: ["80%", "65%"],
 
+              center: ["50%", "50%"],
 
+              avoidLabelOverlap: false,
 
+              label: {
 
+                normal: {
 
+                  show: false,
 
+                  position: "center"
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              },
 
+              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
 
+            }
 
+          ]
 
+        };
 
+
 
+       let option = {
 
+            title: {
 
+              textStyle:{
 
+                color:'#fff'
 
+              }
 
+            },
 
+            grid: {
 
+                left: '3%',
 
+                right: '4%',
 
+                bottom: '3%',
 
+                containLabel: true
 
+            },
 
+            xAxis: {
 
+                type: 'category',
 
+                boundaryGap: false,
 
+                data: ['周一','周二','周三','周四','周五','周六','周日'],
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+            },
 
+            yAxis: {
 
+                type: 'value',
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                },
 
+                splitLine: {
 
+                show: false
 
+              },
 
+            },
 
+            series: [
 
+                {
 
+                    name:'邮件营销',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[120, 132, 101, 134, 90, 230, 210]
 
+                },
 
+                {
 
+                    name:'联盟广告',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[220, 182, 191, 234, 290, 330, 310]
 
+                },
 
+                {
 
+                    name:'视频广告',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[150, 232, 201, 154, 190, 330, 410]
 
+                },
 
+                {
 
+                    name:'直接访问',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[320, 332, 301, 334, 390, 330, 320]
 
+                },
 
+                {
 
+                    name:'搜索引擎',
 
+                    type:'line',
 
+                    stack: '总量',
 
+                    data:[820, 932, 901, 934, 1290, 1330, 1320]
 
+                }
 
+            ]
 
+        };
 
+
 
+        let optionChart = echarts.init(document.querySelector("#s2-e"));
 
+
 
+        let con1Chart = echarts.init(document.querySelector("#con1"));
 
+        let con2Chart = echarts.init(document.querySelector("#con2"));
 
+        let con3Chart = echarts.init(document.querySelector("#con3"));
 
+        let con4Chart = echarts.init(document.querySelector("#con4"));
 
+
 
+        optionChart.setOption(option);
 
+
 
+        con1Chart.setOption(con1);
 
+        con2Chart.setOption(con2);
 
+        con3Chart.setOption(con3);
 
+        con4Chart.setOption(con4);
 
+        var map = new AMap.Map('map', {
 
+              resizeEnable: true,
 
+              zoom:14,
 
+              center: [113.0842709541, 22.5944937320]
 
+      });
 
+    })();
 
+
 
+      let htmlTemp = ""
 
+ 
+      equipment.forEach((item,idx)=>{
 
+        htmlTemp+=`<div class="t-body ${idx===0?'active':''}" data-detail="${item.id}">
 
+            <span>${item.time}</span>
 
+            <span>${item.status}</span>
 
+            <span>${item.temperature}</span>
 
+            <span>${item.quantity}</span>
 
+            <span>...</span>
 
+          </div>`
 
+      })
 
+
 
+      let firstItem = equipment[0].detail
 
+      
+      let htmlItem = getItemHtml(firstItem)
 
+        
+      $('.s4-right').html(htmlItem)
 
+
 
+      $('.t-main').html(htmlTemp)
 
+
 
+      $("#select").change(function(e){
 
+        htmlTemp = ""
 
+        let val = $("#select").find("option:selected").text();
 
+        console.log(val);
 
+        if (val!=="全部") {
 
+          equipment.forEach(item=>{
 
+            if (item.status === val) {
 
+              htmlTemp+=`<div class="t-body" data-detail="${item.id}">
 
+                <span>${item.time}</span>
 
+                <span>${item.status}</span>
 
+                <span>${item.temperature}</span>
 
+                <span>${item.quantity}</span>
 
+                <span>...</span>
 
+              </div>`
 
+            }
 
+          })
 
+        }
 
+        else{
 
+            equipment.forEach(item=>{
 
+            htmlTemp+=`<div class="t-body" data-detail="${item.id}">
 
+                  <span>${item.time}</span>
 
+                  <span>${item.status}</span>
 
+                  <span>${item.temperature}</span>
 
+                  <span>${item.quantity}</span>
 
+                  <span>...</span>
 
+                </div>`
 
+          })
 
+        }
 
+        $('.t-main').html(htmlTemp)
 
+      });
 
+
 
+      $('.t-main').on("click",".t-body",function (e) {
 
+        let that = $(this)
 
+        let id = that.data('detail')
 
+        $('.t-main .t-body').removeClass('active')
 
+        that.addClass('active')
 
+        equipment.forEach(item=>{
 
+          if (item.id === id) {
 
+            let html = getItemHtml(item.detail)
 
+            $('.s4-right').html(html)
 
+          }
 
+        })
 
+      })
 
+
 
+
 
+      function getItemHtml(item) {
 
+        return `<div class="s4-item">
 
+            <div class="s4i-l">设备型号</div>
 
+            <div class="s4i-r">${item.xinghao}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">设备状态</div>
 
+            <div class="s4i-r" style="color:#fe2a2a;">${item.status}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">更新时间</div>
 
+            <div class="s4i-r">${item.update}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">信号强度</div>
 
+            <div class="s4i-r">${item.xinhao}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">设备电量</div>
 
+            <div class="s4i-r">${item.quantity}</div>
 
+          </div>
 
+          <div class="s4-item">
 
+            <div class="s4i-l">设备位置</div>
 
+            <div class="s4i-r">${item.position}</div>
 
+          </div>`
 
+        
+      }
 
+
 
+
 
+      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
 
+        Array.from(document.querySelectorAll(".s2 .card"))
 
+      );
 
+      arr.forEach((dom, index) => {
 
+        dom.addEventListener("click", e => {
 
+          console.log("equipmentClickHandle", index);
 
+          window.equipmentClickHandle && window.equipmentClickHandle(index);
 
+        });
 
+      });
 
+    </script>
 
+  </body>
 
+</html>

+ 167 - 0
monitor.html
Просмотреть файл 

@@ -0,0 +1,167 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/monitor.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <section class="s1">
 
+      <div class="s-title">
 
+        <h2>重点监控</h2>
 
+        <span class="tag">迎宾大道中院士路路口</span>
 
+      </div>
 
+      <div class="tcdPageCode"></div>
 
+      <main class="video-ctrl">
 
+        <video
 
+          id="testPlayer"
 
+          poster=""
 
+          controls
 
+          playsInline
 
+          webkit-playsinline
 
+          autoplay="autoplay"
 
+        >
 
+          <source
 
+            src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
 
+            type="application/x-mpegURL"
 
+          />
 
+        </video>
 
+      </main>
 
+      <div class="m-detail">
 
+        <div class="detail-left">
 
+            <img src="./images/shexiangtou.png" alt="" />
 
+        </div>
 
+        <div class="detail-right">
 
+          <div class="detail-item">
 
+            <div class="di-l">设备编号</div>
 
+            <div class="di-r">5</div>
 
+          </div>
 
+          <div class="detail-item">
 
+            <div class="di-l">设备型号</div>
 
+            <div class="di-r">iDS-2PT7T20BX-D</div>
 
+          </div>
 
+          <div class="detail-item">
 
+            <div class="di-l">设备状态</div>
 
+            <div class="di-r">正常</div>
 
+          </div>
 
+          <div class="detail-item">
 
+            <div class="di-l">运行时长</div>
 
+            <div class="di-r">56天18小时01分钟</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="settting">
 
+        <span>取消重点监控</span>
 
+      </div>
 
+    </section>
 
+
 
+    <div class="line"></div>
 
+
 
+    <section class="s2">
 
+        <div class="s-title">
 
+          <h2>重点监控</h2>
 
+          <span class="tag">迎宾大道中院士路路口</span>
 
+        </div>
 
+        <main class="video-ctrl">
 
+          <video
 
+            id="testPlayer"
 
+            poster=""
 
+            controls
 
+            playsInline
 
+            webkit-playsinline
 
+            autoplay="autoplay"
 
+          >
 
+            <source
 
+              src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
 
+              type="application/x-mpegURL"
 
+            />
 
+          </video>
 
+        </main>
 
+        <div class="m-detail">
 
+          <div class="detail-left">
 
+              <img src="./images/shexiangtou.png" alt="" />
 
+          </div>
 
+          <div class="detail-right">
 
+            <div class="detail-item">
 
+              <div class="di-l">设备编号</div>
 
+              <div class="di-r">5</div>
 
+            </div>
 
+            <div class="detail-item">
 
+              <div class="di-l">设备型号</div>
 
+              <div class="di-r">iDS-2PT7T20BX-D</div>
 
+            </div>
 
+            <div class="detail-item">
 
+              <div class="di-l">设备状态</div>
 
+              <div class="di-r">正常</div>
 
+            </div>
 
+            <div class="detail-item">
 
+              <div class="di-l">运行时长</div>
 
+              <div class="di-r">56天18小时01分钟</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="cancel">
 
+          <span>设置为重点监控</span>
 
+        </div>
 
+      </section>
 
+
 
+    <script src="js/jquery-3.2.1.min.js"></script>
 
+    <script src="js/ezuikit.js"></script>
 
+    <script src="js/page.js"></script>
 
+
 
+    <script>
 
+
 
+      let monitorData = [
 
+        {
 
+          
+        },
 
+      ]
 
+
 
+
 
+      $(".tcdPageCode").createPage({
 
+        pageCount: 20,
 
+        current: 1,
 
+        backFn: function(p) {
 
+        }
 
+      });
 
+      var player = new EZUIPlayer("testPlayer");
 
+      player.on("error", function() {
 
+        console.log("error");
 
+      });
 
+      player.on("play", function() {
 
+        console.log("play");
 
+      });
 
+      player.on("pause", function() {
 
+        console.log("pause");
 
+      });
 
+      Array.from(document.querySelectorAll(".s1 .video-ctrl")).forEach(
 
+        (dom, index) => {
 
+          dom.addEventListener("click", e => {
 
+            console.log("placeClickHandle", index);
 
+            window.placeClickHandle && window.placeClickHandle(index);
 
+          });
 
+        }
 
+      );
 
+
 
+      getMonitorUrl()
 
+      function getMonitorUrl() {
 
+        $.ajax({
 
+          url:"http://95787.com/api/getSessionID.php",
 
+          type:"post",
 
+          data:{
 
+            key:'c1685ef2012c099ec3daa238907577ed'
 
+          },
 
+          success:function(data){
 
+
 
+          }
 
+        })
 
+      }
 
+    </script>
 
+  </body>
 
+</html>

+ 71 - 0
place.html
Просмотреть файл 

@@ -0,0 +1,71 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/place.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <header class="title">
 
+      <i class="iconfont iconbangonglou"></i>
 
+      重点场所
 
+    </header>
 
+    <div class="line"></div>
 
+    <section class="s1">
 
+        <main class="video-ctrl">
 
+            <video
 
+              id="testPlayer"
 
+              poster=""
 
+              controls
 
+              playsInline
 
+              webkit-playsinline
 
+              autoplay="autoplay"
 
+            >
 
+              <source
 
+                src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
 
+                type="application/x-mpegURL"
 
+              />
 
+            </video>
 
+          </main>
 
+      <div class="line"></div>
 
+
 
+      <main class="video-ctrl">
 
+        <video src="./video/2.Ogg" loop="loop" autoplay="autoplay"></video>
 
+      </main>
 
+      <div class="line"></div>
 
+
 
+      <main class="video-ctrl">
 
+        <video src="./video/4.Ogg" loop="loop" autoplay="autoplay"></video>
 
+      </main>
 
+    </section>
 
+
 
+    <script src="js/ezuikit.js"></script>
 
+
 
+    <script>
 
+        var player = new EZUIPlayer("testPlayer");
 
+        player.on("error", function() {
 
+          console.log("error");
 
+        });
 
+        player.on("play", function() {
 
+          console.log("play");
 
+        });
 
+        player.on("pause", function() {
 
+          console.log("pause");
 
+        });
 
+        Array.from(document.querySelectorAll(".s1 .video-ctrl")).forEach(
 
+          (dom, index) => {
 
+            dom.addEventListener("click", e => {
 
+              console.log("placeClickHandle", index);
 
+              window.placeClickHandle && window.placeClickHandle(index);
 
+            });
 
+          }
 
+        );
 
+      </script>
 
+  </body>
 
+</html>

+ 446 - 0
security.html
Просмотреть файл 

@@ -0,0 +1,446 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/security.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <header class="title">
 
+      <i class="iconfont iconanquanbaozhang"></i>
 
+      安全保障
 
+    </header>
 
+    <div class="line"></div>
 
+    <section class="s1">
 
+      <div class="card" id="gongshang"></div>
 
+      <div class="card">
 
+        <div class="s-title"><h2>本日信息安全形势 *</h2></div>
 
+        <div class="f-item">
 
+          <span>公安治安</span>
 
+          <span class="emphasize">2(起)</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>交通事故</span>
 
+          <span class="emphasize">4(起)</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>火灾事故</span>
 
+          <span class="emphasize">0(起)</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>刑事案件</span>
 
+          <span class="emphasize">2(起)</span>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s2">
 
+      <div class="card jiaotong">
 
+        <div class="s-title"><h2>实时事件推送 *</h2></div>
 
+        <div class="jiaotong-table">
 
+          <div class="t-header">
 
+            <span>单位</span>
 
+            <span>情况</span>
 
+            <span>巡查日期</span>
 
+            <span>巡查部门</span>
 
+            <span>整改期限</span>
 
+          </div>
 
+          <div class="t-main">
 
+            <div class="t-body">
 
+              <span>江门市东湖影剧院</span>
 
+              <span>公共设施损坏</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江城管大队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>江门市体育场</span>
 
+              <span>群体斗殴事件</span>
 
+              <span>2019-03-24</span>
 
+              <span>市公安局</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>东湖公园</span>
 
+              <span>公共设施损坏</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江城管大队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>迎宾大道中</span>
 
+              <span>交通拥堵</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江交警支队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>东城街</span>
 
+              <span>交通事故</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江交警支队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>港口一号</span>
 
+              <span>交通事故</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江交警支队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>东湖广场</span>
 
+              <span>公共设施损坏</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江城管大队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>东城苑</span>
 
+              <span>群体斗殴事件</span>
 
+              <span>2019-03-24</span>
 
+              <span>市公安局</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>丰乐社区</span>
 
+              <span>公共设施损坏</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江城管大队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>五邑大学台山楼</span>
 
+              <span>公共设施损坏</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江城管大队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>蓬莱路</span>
 
+              <span>交通拥堵</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江交警支队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>江门市老干部大学</span>
 
+              <span>公共设施损坏</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江城管大队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>江门公汽中心站</span>
 
+              <span>群体斗殴事件</span>
 
+              <span>2019-03-24</span>
 
+              <span>市公安局</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>金山大厦</span>
 
+              <span>公共设施损坏</span>
 
+              <span>2019-03-24</span>
 
+              <span>蓬江城管大队</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+            <div class="t-body">
 
+              <span>欧胜利啤酒餐吧</span>
 
+              <span>餐饮卫生异常</span>
 
+              <span>2019-03-24</span>
 
+              <span>市市场监督局</span>
 
+              <span>2019-03-30</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="line"></div>
 
+      <div class="card" id="gdp"></div>
 
+      <div class="card" id="outIn">
 
+        <div class="s-title f-weight">隐患分类统计 *</div>
 
+        <div class="yinhuan">
 
+          <div class="yinhuan-l">火灾（80%）</div>
 
+          <div class="yinhuan-r">
 
+            <div class="yinhuan-1">
 
+              爆炸、中毒和窒息、水害、机械伤害等（10%）
 
+            </div>
 
+            <div class="yinhuan-2">交通事故（5%）</div>
 
+            <div class="yinhuan-3">其他（5%）</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="line"></div>
 
+      <div class="card" id="addVal"></div>
 
+      <div class="card" id="xiaofei"></div>
 
+    </section>
 
+
 
+    <script src="js/echarts.min.js"></script>
 
+    <script>
 
+      (function() {
 
+        let gdpOption = {
 
+          title: {
 
+            text: "监控设备数量分布",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffffff", "#ffe354", "#ff9a32","#95d94c", "#fd022f",],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            containLabel: true
 
+          },
 
+          series: [
 
+            {
 
+              name: "火灾发生数",
 
+              type: "pie",
 
+              radius: "50%",
 
+              center: ["50%", "60%"],
 
+              data: [
 
+                { value: 2, name: "井盖\n监控" },
 
+                { value: 4, name: "人流\n监控" },
 
+                { value: 8, name: "公交\nGPS" },
 
+                { value: 20, name: "车流\n监控" },
 
+                { value: 12, name: "烟感\n探测" }
 
+              ],
 
+              label: {
 
+                normal: {
 
+                  show: true,
 
+                  // position: 'center',
 
+                  fontSize: 12
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              }
 
+            }
 
+          ]
 
+        };
 
+
 
+        let addValOption = {
 
+          title: {
 
+            text: "消防事故数量统计 *",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffe354", "#ff9a32"],
 
+          tooltip: {
 
+            trigger: "axis"
 
+          },
 
+          legend: {
 
+            data: ["事故次数"],
 
+            x: "0%",
 
+            y: "85%",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          grid: {
 
+            left: "2%",
 
+            right: "4%",
 
+            bottom: "15%",
 
+            top: "20%",
 
+            containLabel: true
 
+          },
 
+          xAxis: [
 
+            {
 
+              type: "category",
 
+              data: ["2013", "2014", "2015", "2016", "2017"],
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          yAxis: [
 
+            {
 
+              type: "value",
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              }
 
+            }
 
+          ],
 
+          series: [
 
+            {
 
+              name: "事故次数",
 
+              type: "bar",
 
+              data: [100, 120, 160, 200, 130]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let xiaofeiOption = {
 
+          title: {
 
+            text: "火灾事故成因分类 *",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          color: ["#ffffff", "#ffe354", "#ff9a32", "#fd022f"],
 
+          tooltip: {
 
+            trigger: "axis",
 
+            axisPointer: {
 
+              // 坐标轴指示器，坐标轴触发有效
 
+              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+            }
 
+          },
 
+          grid: {
 
+            left: "3%",
 
+            right: "4%",
 
+            bottom: "3%",
 
+            containLabel: true
 
+          },
 
+          series: [
 
+            {
 
+              name: "火灾发生数",
 
+              type: "pie",
 
+              radius: "50%",
 
+              center: ["50%", "60%"],
 
+              data: [
 
+                { value: 2, name: "重大火灾\n发生数2\n（起）" },
 
+                { value: 4, name: "较大火灾\n发生数4\n（起）" },
 
+                { value: 1, name: "特大火灾\n发生数1\n（起）" },
 
+                { value: 12, name: "一般火灾\n发生数12\n（起）" }
 
+              ],
 
+              label: {
 
+                normal: {
 
+                  show: true,
 
+                  // position: 'center',
 
+                  fontSize: 12
 
+                }
 
+              },
 
+              labelLine: {
 
+                normal: {
 
+                  show: false
 
+                }
 
+              }
 
+            }
 
+          ]
 
+        };
 
+
 
+        let gongshangOption = {
 
+          title: {
 
+            text: "公共安全指数 *",
 
+            textStyle: {
 
+              color: "#fff"
 
+            }
 
+          },
 
+          series: [
 
+            {
 
+              type: "gauge",
 
+              radius: "100%",
 
+              center: ["50%", "68%"],
 
+
 
+              splitNumber: 0, //刻度数量
 
+              startAngle: 220,
 
+              endAngle: -40,
 
+              axisLine: {
 
+                show: true,
 
+                lineStyle: {
 
+                  width: 20,
 
+                  color: [[0.68, "#ffe354"], [1, "#ccc"]]
 
+                }
 
+              },
 
+              //分隔线样式。
 
+              splitLine: {
 
+                show: false
 
+              },
 
+              axisLabel: {
 
+                show: false
 
+              },
 
+              axisTick: {
 
+                show: false
 
+              },
 
+              pointer: {
 
+                show: false
 
+              },
 
+              title: {
 
+                show: true,
 
+                offsetCenter: [0, "20%"], // x, y，单位px
 
+                textStyle: {
 
+                  color: "#01d4ea",
 
+                  fontSize: 10
 
+                }
 
+              },
 
+              //仪表盘详情，用于显示数据。
 
+              detail: {
 
+                show: true,
 
+                offsetCenter: [0, "-20%"],
 
+                color: "#fff",
 
+                formatter: function(params) {
 
+                  return params;
 
+                },
 
+                textStyle: {
 
+                  fontSize: 18,
 
+                  fontWeight: "bold"
 
+                }
 
+              },
 
+              data: [
 
+                {
 
+                  name: "温馨提示：可以正常在\n户外运动，易敏感人群减\n少外出",
 
+                  value: 90.6,
 
+                  textStyle: {
 
+                    fontSize: 18
 
+                  }
 
+                }
 
+              ]
 
+            }
 
+          ]
 
+        };
 
+
 
+        let gdpChart = echarts.init(document.querySelector("#gdp"));
 
+        let addValChart = echarts.init(document.querySelector("#addVal"));
 
+        let xiaofeiChart = echarts.init(document.querySelector("#xiaofei"));
 
+        let gongshangChart = echarts.init(document.querySelector("#gongshang"));
 
+
 
+        gdpChart.setOption(gdpOption);
 
+        addValChart.setOption(addValOption);
 
+        xiaofeiChart.setOption(xiaofeiOption);
 
+        gongshangChart.setOption(gongshangOption);
 
+      })();
 
+      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
 
+        Array.from(document.querySelectorAll(".s2 .card"))
 
+      );
 
+      arr.forEach((dom, index) => {
 
+        dom.addEventListener("click", e => {
 
+          console.log("securityClickHandle", index);
 
+          window.securityClickHandle && window.securityClickHandle(index);
 
+        });
 
+      });
 
+
 
+      let $scroll = document.querySelector(".t-main");
 
+      let last;
 
+      setInterval(() => {
 
+        if ($scroll.scrollTop === last) {
 
+          $scroll.scrollTop = 0;
 
+        }
 
+        last = $scroll.scrollTop;
 
+        $scroll.scrollTop += 1;
 
+      }, 50);
 
+    </script>
 
+  </body>
 
+</html>

+ 49 - 0
style/economics.css
Просмотреть файл 

@@ -0,0 +1,49 @@
 
+body{
 
+  color: var(--text-color);
 
+  /* background: #000; */
 
+}
 
+.s1{
 
+  margin: 0px auto;
 
+}
 
+.s1,.s2{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.s1 .card{
 
+  width: 49%;
 
+  height: 120px;
 
+  margin-bottom: 10px;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: space-between;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.s1 .card p{
 
+  font-size: 14px;
 
+  color: var(--sub-text-color);
 
+}
 
+
 
+.s1 .card .f-item{
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+
 
+.s2 .card{
 
+  width: 49%;
 
+  height: 180px;
 
+  margin-bottom: 10px;
 
+}
 
+.s1 .card .f-item{
 
+  display: flex;
 
+}
 
+
 
+#gdp,#outIn,#addVal,#xiaofei,#guding,#gongshang{
 
+  /* background: #0091fe; */
 
+  padding: 10px;
 
+}

+ 97 - 0
style/environment.css
Просмотреть файл 

@@ -0,0 +1,97 @@
 
+body{
 
+  color: var(--text-color);
 
+  /* background: #000; */
 
+}
 
+
 
+.s1{
 
+  margin: 0px auto;
 
+}
 
+.s1,.s2{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.s1 .card{
 
+  width: 49%;
 
+  height: 220px;
 
+  margin-bottom: 10px;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: space-between;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.s1 .card p{
 
+  font-size: 14px;
 
+  color: var(--sub-text-color);
 
+}
 
+
 
+.s1 .card .f-item{
 
+  display: flex;
 
+}
 
+
 
+.s2 .card{
 
+  width: 49%;
 
+  height: 190px;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.s2 .jiaotong{
 
+  width: 100%;
 
+}
 
+.s1 .card .f-item{
 
+  display: flex;
 
+}
 
+.s1 .card .f-item>p{
 
+  width: 50%;
 
+}
 
+
 
+.s2 .yinhuan{
 
+  display: flex;
 
+  align-items: center;
 
+  height: 85%;
 
+  padding:0 5%;
 
+  margin-top: 3%;
 
+  box-sizing: border-box;
 
+}
 
+.s2 .yinhuan .yinhuan-l{
 
+  background: #ff9a36;
 
+  height: 100%;
 
+  flex: 1;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+.s2 .yinhuan .yinhuan-r{
 
+  flex: 1;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+  height: 100%;
 
+}
 
+
 
+.s2 .yinhuan .yinhuan-r .yinhuan-1,.s2 .yinhuan .yinhuan-r .yinhuan-2,.s2 .yinhuan .yinhuan-r .yinhuan-3{
 
+  background: #fddd4e;
 
+  width: 100%;
 
+  flex: 1;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.s2 .yinhuan .yinhuan-r .yinhuan-2{
 
+  background: #f9032d;
 
+  
+}
 
+.s2 .yinhuan .yinhuan-r .yinhuan-3{
 
+  background: #1b4b8d;
 
+
 
+}
 
+
 
+#gdp,#outIn,#addVal,#xiaofei,#guding{
 
+  padding: 10px;
 
+}

+ 184 - 0
style/equipment.css
Просмотреть файл 

@@ -0,0 +1,184 @@
 
+body{
 
+  color: var(--text-color);
 
+  background: #101010;
 
+  padding: 20px;
 
+}
 
+
 
+.s1{
 
+  padding-bottom: 10px;
 
+}
 
+
 
+.s1,.s2{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+  margin: 0px auto 10px;
 
+
 
+}
 
+.s-title{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  width: 100%;
 
+}
 
+
 
+.s-title .tag{
 
+  color: var(--sub-text-color);
 
+  font-size: 14px;
 
+  padding: 2px;
 
+  border: 1px solid var(--sub-text-color);
 
+}
 
+
 
+.s1 .s1-title{
 
+  margin-top: 15px;
 
+  font-size: 16px;
 
+}
 
+
 
+.s1 .s1-title span{
 
+  color: #fd8f0f;
 
+  font-weight: bold;
 
+}
 
+
 
+.s1 .e-con{
 
+  height: 120px;
 
+  width: 100%;
 
+  display: flex;
 
+  margin-top: 10px;
 
+}
 
+
 
+.s1 .e-con>div{
 
+  flex: 1;
 
+}
 
+.s1 .e-con>div>div:first-child{
 
+  width: 100%;
 
+  height: 90%;
 
+}
 
+
 
+.s1 .con-txt{
 
+  width: 100%;
 
+  text-align: center;
 
+}
 
+
 
+
 
+.s2 .s2-con{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  width: 100%;
 
+}
 
+
 
+.s2 .s2-con .sl-title{
 
+  font-size: 16px;
 
+  margin-top: 10px;
 
+}
 
+
 
+.s2 .s2-con .sl-sub{
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+  line-height: 2;
 
+  margin-bottom: 10px;
 
+  color: #fd8f0f;
 
+}
 
+
 
+.s2 .s2-con .s2-left{
 
+  flex: 2;
 
+}
 
+.s2 .s2-con .s2-right{
 
+  flex: 3;
 
+}
 
+
 
+
 
+.s3 .s3-select{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  padding-top: 10px;
 
+  font-size: 14px;
 
+}
 
+.s3 .s3-select select{
 
+  width: 100px;
 
+}
 
+.s3 .jiaotong{
 
+  width: 100%;
 
+  padding: 10px 0;
 
+  box-sizing: border-box;
 
+  height: 250px;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table{
 
+  height: 94%;
 
+  margin-top: 2%;
 
+  overflow: hidden;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table .t-main{
 
+  overflow-y: scroll;
 
+  height: 85%;
 
+  margin-top: 15px;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table span{
 
+  display: inline-block;
 
+  text-align: center;
 
+  flex: 2;
 
+}
 
+.s3 .jiaotong .jiaotong-table span:first-child{
 
+  flex: 3;
 
+}
 
+.s3 .jiaotong .jiaotong-table span:last-child{
 
+  flex: 1
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table .t-header{
 
+  color: var(--sub-text-color);
 
+  font-size: 14px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table .t-body{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  font-size: 14px;
 
+  padding: 10px 0;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table .active{
 
+  background: var(--sub-text-color);
 
+}
 
+
 
+.s4 .s4-con{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-top: 10px;
 
+}
 
+
 
+.s4 .s4-con .s4-left{
 
+  flex: 2;
 
+}
 
+.s4 .s4-con .s4-right{
 
+  flex: 3;
 
+  margin-left: 10px;
 
+}
 
+.s4 .s4-con .s4-right .s4-item{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  line-height: 2;
 
+  align-items: center;
 
+  margin-top: 5px;
 
+  font-size: 16px;
 
+}
 
+
 
+.s4 .s4-con .s4-right .s4-item .s4i-l{
 
+  color: var(--sub-text-color);
 
+  flex: 2;
 
+}
 
+.s4 .s4-con .s4-right .s4-item .s4i-r{
 
+  flex: 3;
 
+  text-align: right;
 
+}
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+

+ 54 - 0
style/livelihood.css
Просмотреть файл 

@@ -0,0 +1,54 @@
 
+body{
 
+  color: var(--text-color);
 
+  /* background: #000; */
 
+}
 
+.s1{
 
+  margin: 0px auto;
 
+}
 
+.s1,.s2{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.s1 .card{
 
+  width: 49%;
 
+  height: 150px;
 
+  margin-bottom: 10px;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: space-between;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+}
 
+
 
+
 
+
 
+.s1 .card .f-item{
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+
 
+.s1 .card .f-item span{
 
+  font-size: 14px;
 
+  color: var(--sub-text-color);
 
+}
 
+
 
+.s2 .card{
 
+  width: 49%;
 
+  height: 170px;
 
+  margin-bottom: 10px;
 
+}
 
+.s1 .card .f-item{
 
+  display: flex;
 
+}
 
+.s1 .card .f-item>p{
 
+  width: 50%;
 
+}
 
+
 
+#gdp,#outIn,#addVal,#xiaofei,#guding,#gongshang{
 
+  /* background: #0091fe; */
 
+  padding: 10px;
 
+}

+ 184 - 0
style/manhole.css
Просмотреть файл 

@@ -0,0 +1,184 @@
 
+body{
 
+  color: var(--text-color);
 
+  background: #101010;
 
+  padding: 20px;
 
+}
 
+
 
+.s1{
 
+  padding-bottom: 10px;
 
+}
 
+
 
+.s1,.s2{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+  margin: 0px auto 10px;
 
+
 
+}
 
+.s-title{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  width: 100%;
 
+}
 
+
 
+.s-title .tag{
 
+  color: var(--sub-text-color);
 
+  font-size: 14px;
 
+  padding: 2px;
 
+  border: 1px solid var(--sub-text-color);
 
+}
 
+
 
+.s1 .s1-title{
 
+  margin-top: 15px;
 
+  font-size: 16px;
 
+}
 
+
 
+.s1 .s1-title span{
 
+  color: #fd8f0f;
 
+  font-weight: bold;
 
+}
 
+
 
+.s1 .e-con{
 
+  height: 120px;
 
+  width: 100%;
 
+  display: flex;
 
+  margin-top: 10px;
 
+}
 
+
 
+.s1 .e-con>div{
 
+  flex: 1;
 
+}
 
+.s1 .e-con>div>div:first-child{
 
+  width: 100%;
 
+  height: 90%;
 
+}
 
+
 
+.s1 .con-txt{
 
+  width: 100%;
 
+  text-align: center;
 
+}
 
+
 
+
 
+.s2 .s2-con{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  width: 100%;
 
+}
 
+
 
+.s2 .s2-con .sl-title{
 
+  font-size: 16px;
 
+  margin-top: 10px;
 
+}
 
+
 
+.s2 .s2-con .sl-sub{
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+  line-height: 2;
 
+  margin-bottom: 10px;
 
+  color: #fd8f0f;
 
+}
 
+
 
+.s2 .s2-con .s2-left{
 
+  flex: 2;
 
+}
 
+.s2 .s2-con .s2-right{
 
+  flex: 3;
 
+}
 
+
 
+
 
+.s3 .s3-select{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  padding-top: 10px;
 
+  font-size: 14px;
 
+}
 
+.s3 .s3-select select{
 
+  width: 100px;
 
+}
 
+.s3 .jiaotong{
 
+  width: 100%;
 
+  padding: 10px 0;
 
+  box-sizing: border-box;
 
+  height: 250px;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table{
 
+  height: 94%;
 
+  margin-top: 2%;
 
+  overflow: hidden;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table .t-main{
 
+  overflow-y: scroll;
 
+  height: 85%;
 
+  margin-top: 15px;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table span{
 
+  display: inline-block;
 
+  text-align: center;
 
+  flex: 2;
 
+}
 
+.s3 .jiaotong .jiaotong-table span:first-child{
 
+  flex: 3;
 
+}
 
+.s3 .jiaotong .jiaotong-table span:last-child{
 
+  flex: 1
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table .t-header{
 
+  color: var(--sub-text-color);
 
+  font-size: 14px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table .t-body{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  font-size: 14px;
 
+  padding: 10px 0;
 
+}
 
+
 
+.s3 .jiaotong .jiaotong-table .active{
 
+  background: var(--sub-text-color);
 
+}
 
+
 
+.s4 .s4-con{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-top: 10px;
 
+}
 
+
 
+.s4 .s4-con .s4-left{
 
+  flex: 2;
 
+}
 
+.s4 .s4-con .s4-right{
 
+  flex: 3;
 
+  margin-left: 10px;
 
+}
 
+.s4 .s4-con .s4-right .s4-item{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  line-height: 2;
 
+  align-items: center;
 
+  margin-top: 5px;
 
+  font-size: 16px;
 
+}
 
+
 
+.s4 .s4-con .s4-right .s4-item .s4i-l{
 
+  color: var(--sub-text-color);
 
+  flex: 2;
 
+}
 
+.s4 .s4-con .s4-right .s4-item .s4i-r{
 
+  flex: 3;
 
+  text-align: right;
 
+}
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+

+ 135 - 0
style/monitor.css
Просмотреть файл 

@@ -0,0 +1,135 @@
 
+body {
 
+  color: var(--text-color);
 
+  background: #000;
 
+  padding: 20px;
 
+}
 
+
 
+.s-title {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  width: 100%;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.s-title .tag {
 
+  color: #aa00f5;
 
+  font-size: 14px;
 
+  padding: 2px;
 
+  border: 1px solid #aa00f5;
 
+}
 
+
 
+.video-ctrl {
 
+  width: 100%;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.video-ctrl video {
 
+  width: 100%;
 
+  height: 300px;
 
+}
 
+
 
+.m-detail{
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+
 
+.detail-left{
 
+  flex:2;
 
+}
 
+
 
+.detail-left img{
 
+  width: 90%;
 
+}
 
+
 
+.detail-right{
 
+  flex:3;
 
+  margin-left: 10px;
 
+}
 
+
 
+.detail-right .detail-item{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  line-height: 2;
 
+  align-items: center;
 
+  margin-bottom: 5px;
 
+  font-size: 16px;
 
+}
 
+
 
+.detail-right .detail-item .di-l{
 
+  color: var(--sub-text-color);
 
+  flex: 2;
 
+}
 
+
 
+.detail-right .detail-item .di-r{
 
+  flex: 3;
 
+  text-align: right;
 
+}
 
+
 
+.settting,.cancel{
 
+  text-align: right;
 
+  margin: 10px auto 20px;
 
+}
 
+.settting span{
 
+  color:#fff;
 
+  font-size: 14px;
 
+  padding: 4px 10px;
 
+  background: var(--sub-text-color);
 
+  cursor: pointer;
 
+}
 
+.cancel span{
 
+  color:var(--sub-text-color);
 
+  font-size: 14px;
 
+  padding: 4px 10px;
 
+  background: #fff;
 
+  cursor: pointer;
 
+}
 
+
 
+a {
 
+  text-decoration: none;
 
+}
 
+a:hover {
 
+  text-decoration: none;
 
+}
 
+.tcdPageCode {
 
+  padding: 0 0 15px 0;
 
+  color: #ccc;
 
+  text-align: right;
 
+}
 
+.tcdPageCode a {
 
+  display: inline-block;
 
+  color: #000;
 
+  display: inline-block;
 
+  height: 25px;
 
+  line-height: 25px;
 
+  padding: 0 8px;
 
+  border: 1px solid #ddd;
 
+  margin: 0 4px;
 
+  vertical-align: middle;
 
+  background: #fff;
 
+}
 
+.tcdPageCode a:hover {
 
+  text-decoration: none;
 
+  border: 1px solid #428bca;
 
+}
 
+.tcdPageCode span.current {
 
+  display: inline-block;
 
+  height: 25px;
 
+  line-height: 25px;
 
+  padding: 0 8px;
 
+  margin: 0 4px;
 
+  color: #fff;
 
+  background-color: #428bca;
 
+  border: 1px solid #428bca;
 
+  vertical-align: middle;
 
+}
 
+.tcdPageCode span.disabled {
 
+  display: inline-block;
 
+  height: 25px;
 
+  line-height: 25px;
 
+  padding: 0 8px;
 
+  margin: 0 4px;
 
+  color: #bfbfbf;
 
+  background: #f2f2f2;
 
+  border: 1px solid #bfbfbf;
 
+  vertical-align: middle;
 
+}

+ 17 - 0
style/place.css
Просмотреть файл 

@@ -0,0 +1,17 @@
 
+body{
 
+  color: var(--text-color);
 
+}
 
+.s1{
 
+  margin: 0px auto;
 
+  height: 850px;
 
+}
 
+
 
+.s1 .video-ctrl{
 
+  width: 100%;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.s1 .video-ctrl video{
 
+  width: 100%;
 
+  height: 300px;
 
+}

+ 42 - 0
style/public.css
Просмотреть файл 

@@ -0,0 +1,42 @@
 
+
 
+.title{
 
+  color: #11d3f6;
 
+  font-size: 36px;
 
+  letter-spacing: 5px;
 
+  font-weight: bold;
 
+  text-align: center;
 
+  /* background: #1e2a44; */
 
+  padding: 20px;
 
+  margin-bottom: 10px;
 
+}
 
+.title .iconfont{
 
+  font-size: 32px;
 
+  font-weight: normal;
 
+}
 
+
 
+.s-title{
 
+  font-size: 18px;
 
+}
 
+
 
+.describe{
 
+  color: var(--sub-text-color);
 
+  font-size: 14px;
 
+  text-indent: 32px;
 
+}
 
+.emphasize{
 
+  font-size: 18px!important;
 
+  color: #fff!important;
 
+}
 
+.w-color{
 
+  color: #fff;
 
+}
 
+.f-weight{
 
+  font-weight: bolder;
 
+}
 
+
 
+.line{
 
+  width: 100%;
 
+  height: 2px;
 
+  margin-bottom: 10px;
 
+  background: linear-gradient(to right, #0f86c2, rgba(255,255,255,1));
 
+}

+ 49 - 0
style/reset.css
Просмотреть файл 

@@ -0,0 +1,49 @@
 
+html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
 
+header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
 
+table{border-collapse:collapse;border-spacing:0;}
 
+caption,th{text-align:left;font-weight:normal;}
 
+html,body,fieldset,img,iframe,abbr{border:0;}
 
+i,cite,em,var,address,dfn{font-style:normal;}
 
+[hidefocus],summary{outline:0;}
 
+li{list-style:none;}
 
+h1,h2,h3,h4,h5,h6,small{font-size:100%;}
 
+sup,sub{font-size:83%;}
 
+pre,code,kbd,samp{font-family:inherit;}
 
+q:before,q:after{content:none;}
 
+textarea{overflow:auto;resize:none;}
 
+label,summary{cursor:default;}
 
+a,button{cursor:pointer;}
 
+h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
 
+del,ins,u,s,a,a:hover{text-decoration:none;}
 
+body,textarea,input,button,select,keygen,legend{font:12px/1.14 'Microsoft YaHei',\5b8b\4f53;outline:0;}
 
+*{box-sizing: border-box}
 
+body {
 
+  --primary-color: #151b2b;
 
+  --text-color: #fff;
 
+  --sub-text-color:#01d4ea;
 
+}
 
+
 
+
 
+::-webkit-scrollbar
 
+{
 
+    width: 6px;
 
+    height: 6px;
 
+    display: none;
 
+}
 
+::-webkit-scrollbar-track-piece
 
+{
 
+    background-color: #fff;
 
+    -webkit-border-radius: 6px;
 
+}
 
+::-webkit-scrollbar-thumb:vertical
 
+{
 
+    height: 5px;
 
+    background-color: #eac1a3;
 
+    -webkit-border-radius: 6px;
 
+}
 
+::-webkit-scrollbar-thumb:horizontal
 
+{
 
+    width: 5px;
 
+    background-color: #eac1a3;
 
+    -webkit-border-radius: 6px;
 
+}

+ 143 - 0
style/security.css
Просмотреть файл 

@@ -0,0 +1,143 @@
 
+body{
 
+  color: var(--text-color);
 
+  background: #000;
 
+}
 
+.s1{
 
+  margin: 0px auto;
 
+}
 
+.s1,.s2{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.s1 .card{
 
+  width: 49%;
 
+  /* background: #1d4988; */
 
+  height: 220px;
 
+  margin-bottom: 10px;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: space-between;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+}
 
+
 
+
 
+
 
+.s1 .card .f-item{
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+
 
+.s1 .card .f-item span{
 
+  font-size: 14px;
 
+  color: var(--sub-text-color);
 
+}
 
+
 
+.s2 .card{
 
+  width: 49%;
 
+  /* background: #212832; */
 
+  height: 210px;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.s2 .jiaotong{
 
+  width: 100%;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+}
 
+
 
+
 
+
 
+.s2 .jiaotong .jiaotong-table{
 
+  height: 85%;
 
+  margin-top: 2%;
 
+  overflow: hidden;
 
+}
 
+
 
+.s2 .jiaotong .jiaotong-table .t-main{
 
+  overflow-y: scroll;
 
+  height: 85%;
 
+  margin-top: 15px;
 
+}
 
+
 
+.s2 .jiaotong .jiaotong-table span{
 
+  display: inline-block;
 
+  text-align: center;
 
+  flex: 1;
 
+}
 
+
 
+.s2 .jiaotong .jiaotong-table .t-header{
 
+  color: var(--sub-text-color);
 
+  font-size: 14px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+
 
+.s2 .jiaotong .jiaotong-table .t-body{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  font-size: 14px;
 
+  margin-bottom: 15px;
 
+}
 
+
 
+.s1 .card .f-item{
 
+  display: flex;
 
+}
 
+.s1 .card .f-item>p{
 
+  width: 50%;
 
+}
 
+
 
+.s2 .yinhuan{
 
+  display: flex;
 
+  align-items: center;
 
+  height: 85%;
 
+  padding:0 5%;
 
+  margin-top: 3%;
 
+  box-sizing: border-box;
 
+}
 
+.s2 .yinhuan .yinhuan-l{
 
+  background: #ff9a36;
 
+  height: 100%;
 
+  flex: 1;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+.s2 .yinhuan .yinhuan-r{
 
+  flex: 1;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+  height: 100%;
 
+}
 
+
 
+.s2 .yinhuan .yinhuan-r .yinhuan-1,.s2 .yinhuan .yinhuan-r .yinhuan-2,.s2 .yinhuan .yinhuan-r .yinhuan-3{
 
+  background: #fddd4e;
 
+  width: 100%;
 
+  flex: 1;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 12px;
 
+}
 
+.yinhuan-1{
 
+  padding: 0 5px;
 
+}
 
+.s2 .yinhuan .yinhuan-r .yinhuan-2{
 
+  background: #f9032d;
 
+  
+}
 
+.s2 .yinhuan .yinhuan-r .yinhuan-3{
 
+  background: #1b4b8d;
 
+
 
+}
 
+
 
+#gdp,#outIn,#addVal,#xiaofei,#guding{
 
+  /* background: linear-gradient(to right, #0091fe, #00d0f4); */
 
+  padding: 10px;
 
+}

+ 76 - 0
style/survey.css
Просмотреть файл 

@@ -0,0 +1,76 @@
 
+body{
 
+  color: var(--text-color);
 
+}
 
+
 
+.s1{
 
+  margin: 20px auto;
 
+  line-height: 1.5;
 
+}
 
+
 
+.s2{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.s2 .card{
 
+  width: 49%;
 
+  height: 220px;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.s2 .xingzheng, .s2 .qihoulvyou{
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: space-between;
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.s2 .xingzheng p{
 
+  font-size: 14px;
 
+  color: var(--sub-text-color);
 
+}
 
+
 
+.s2 .xingzheng .f-item{
 
+  display: flex;
 
+}
 
+.s2 .xingzheng .f-item>p{
 
+  width: 50%;
 
+}
 
+.s2 .qihoulvyou .f-item{
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center
 
+}
 
+
 
+.s2 .qihoulvyou .f-item > span:first-child,.classifier{
 
+  font-size: 14px;
 
+  color: var(--sub-text-color);
 
+}
 
+
 
+.s2 .jiaotong-body{
 
+  padding: 10px;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.s2 .jiaotong-body .jiaotongcon{
 
+  display: flex;
 
+  height: 90%;
 
+  flex-direction: column;
 
+  justify-content: space-around;
 
+}
 
+
 
+.s2 .jiaotong-body .jiaotongcon .fix-item>span{
 
+  font-size: 14px;
 
+  color: var(--sub-text-color);
 
+}
 
+
 
+.s2 .jiaotong-body .jiaotongcon .fix-item>div{
 
+  font-size: 28px;
 
+  text-align: right;
 
+}
 
+
 
+#people,#people-tree{
 
+  padding: 10px;
 
+}

+ 405 - 0
survey.html
Просмотреть файл 

@@ -0,0 +1,405 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/public.css" />
 
+    <link rel="stylesheet" href="style/survey.css" />
 
+    <link rel="stylesheet" href="font/iconfont.css" />
 
+    <title>Document</title>
 
+  </head>
 
+
 
+  <body>
 
+    <header class="title">
 
+      <i class="iconfont iconwenzhangguanli"></i>
 
+      江门概况
 
+    </header>
 
+    <div class="line"></div>
 
+    <section class="s1">
 
+      <div class="s-title"><h2>地理环境</h2></div>
 
+      <p class="describe">
 
+        江门，别称“五邑”，是广东省地级市，喂鱼珠江三角洲西部，濒临南海，毗邻港澳，属粤港澳大湾区城市群，是珠江三角洲西部地区的中心城市之一，“中国舞蹈之城”，“中国侨都”。
 
+      </p>
 
+    </section>
 
+    <div class="line"></div>
 
+
 
+    <section class="s2">
 
+      <div class="card xingzheng">
 
+        <div class="s-title"><h2>行政区划</h2></div>
 
+        <p>下辖<span class="emphasize">3</span>个区</p>
 
+        <p>代管<span class="emphasize">4</span>个县级市</p>
 
+        <div class="f-item">
 
+          <p><span class="emphasize">61</span>个镇</p>
 
+          <p><span class="emphasize">12</span>个街道</p>
 
+        </div>
 
+        <div class="f-item">
 
+          <p><span class="emphasize">1050</span>个村</p>
 
+          <p><span class="emphasize">275</span>个社区</p>
 
+        </div>
 
+      </div>
 
+      <div class="card qihoulvyou">
 
+        <div class="s-title"><h2>气候概况</h2></div>
 
+        <div class="f-item">
 
+          <span>全年降雨量</span>
 
+          <span class="emphasize">1990.0mm</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>全年平均温度</span>
 
+          <span class="emphasize">23.1℃</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>历史最高气温</span>
 
+          <span class="emphasize">38℃</span>
 
+        </div>
 
+        <div class="f-item">
 
+          <span>历史最低气温</span>
 
+          <span class="emphasize">5℃</span>
 
+        </div>
 
+      </div>
 
+      <div class="line"></div>
 
+      <div class="card" id="people"></div>
 
+      <div class="card" id="people-tree"></div>
 
+      <div class="line"></div>
 
+      <div class="card jiaotong-body">
 
+        <div class="s-title"><h2>交通路况</h2></div>
 
+        <div class="jiaotongcon">
 
+          <div class="fix-item">
 
+            <span>交通指数</span>
 
+            <div id="zhishu">3.4</div>
 
+          </div>
 
+          <div class="fix-item">
 
+            <span>平均车速</span>
 
+            <div id="chesu">32.8km/h</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="card qihoulvyou">
 
+          <div class="s-title"><h2>旅游概况</h2></div>
 
+          <div class="f-item">
 
+            <span>旅游景点</span>
 
+            <span class="classifier"><span class="emphasize">70</span>个</span>
 
+          </div>
 
+          <div class="f-item">
 
+            <span>旅游机构</span>
 
+            <span class="classifier"><span class="emphasize">183</span>个</span>
 
+          </div>
 
+          <div class="f-item">
 
+            <span>旅游宾馆</span>
 
+            <span class="classifier"><span class="emphasize">899</span>家</span>
 
+          </div>
 
+          <div class="f-item">
 
+            <span>旅游收入合计</span>
 
+            <span class="classifier"><span class="emphasize">492.53</span>亿元</span>
 
+          </div>
 
+        </div>
 
+    </section>
 
+
 
+    <script src="js/echarts.min.js"></script>
 
+    <script>
 
+        (function() {
 
+          let option = {
 
+            title: {
 
+              text: "户籍总人口",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            color: ["#ffe354"],
 
+            tooltip: {
 
+              trigger: "axis",
 
+              axisPointer: {
 
+                // 坐标轴指示器，坐标轴触发有效
 
+                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+              }
 
+            },
 
+            grid: {
 
+              left: "3%",
 
+              right: "4%",
 
+              bottom: "3%",
 
+              containLabel: true,
 
+              borderColor: "#fff"
 
+            },
 
+            xAxis: [
 
+              {
 
+                type: "category",
 
+                data: ["2013", "2014", "2015", "2016", "2017"],
 
+                axisTick: {
 
+                  alignWithLabel: true
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            yAxis: [
 
+              {
 
+                name: "(万人)",
 
+                type: "value",
 
+                boundaryGap: true,
 
+                min: 390,
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            series: [
 
+              {
 
+                name: "人口",
 
+                type: "bar",
 
+                barWidth: "40%",
 
+                data: [393, 393.5, 391.5, 393.8, 396.3]
 
+              }
 
+            ]
 
+          };
 
+  
+          let treeOption = {
 
+            title: {
 
+              text: "户籍自然增长率",
 
+              textStyle: {
 
+                color: "#fff"
 
+              }
 
+            },
 
+            color: ["#ff9a32", "#ffe354"],
 
+            tooltip: {
 
+              trigger: "axis",
 
+              axisPointer: {
 
+                // 坐标轴指示器，坐标轴触发有效
 
+                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+              }
 
+            },
 
+            grid: {
 
+              left: "3%",
 
+              right: "4%",
 
+              bottom: "3%",
 
+              top: "20%",
 
+              containLabel: true,
 
+              borderColor: "#fff"
 
+            },
 
+            legend: {
 
+              itemWidth: 14,
 
+              itemHeight: 5,
 
+              itemGap: 1,
 
+              data: ["自然增长人数（人）", "自然增长率（%）"],
 
+              x: "55%",
 
+              textStyle: {
 
+                color: "#fff",
 
+                fontSize: 10
 
+              }
 
+            },
 
+            xAxis: {
 
+              data: ["2013", "2014", "2015", "2016", "2017"],
 
+              axisLine: {
 
+                lineStyle: {
 
+                  color: "#ffffff"
 
+                }
 
+              },
 
+              axisTick: {
 
+                show: false //隐藏X轴刻度
 
+              },
 
+              axisLabel: {
 
+                show: true,
 
+                textStyle: {
 
+                  color: "#fff" //X轴文字颜色
 
+                }
 
+              }
 
+            },
 
+            yAxis: [
 
+              {
 
+                type: "value",
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                },
 
+                axisLabel: {
 
+                  show: true,
 
+                  textStyle: {
 
+                    color: "#fff"
 
+                  }
 
+                }
 
+              },
 
+              {
 
+                type: "value",
 
+  
+                position: "right",
 
+                splitLine: {
 
+                  show: false
 
+                },
 
+                axisTick: {
 
+                  show: false
 
+                },
 
+                axisLine: {
 
+                  lineStyle: {
 
+                    color: "#ffffff"
 
+                  }
 
+                },
 
+                axisLabel: {
 
+                  show: true,
 
+                  formatter: "{value} %", //右侧Y轴文字显示
 
+                  textStyle: {
 
+                    color: "#fff"
 
+                  }
 
+                }
 
+              }
 
+            ],
 
+            series: [
 
+              {
 
+                name: "自然增长率（%）",
 
+                type: "line",
 
+                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
 
+                smooth: true, //平滑曲线显示
 
+                showAllSymbol: true, //显示所有图形。
 
+                symbol: "circle", //标记的图形为实心圆
 
+                symbolSize: 10, //标记的大小
 
+  
+                data: [0.39, 0.23, 0.57, 0.74, 0.67]
 
+              },
 
+              {
 
+                name: "自然增长人数（人）",
 
+                type: "bar",
 
+                data: [15232, 9092, 22431, 28824, 26452]
 
+              }
 
+            ]
 
+          };
 
+  
+          // let treeOption = {
 
+          //   title: {
 
+          //     text: "人口",
 
+          //     textStyle: {
 
+          //       color: "#fff"
 
+          //     }
 
+          //   },
 
+          //   color: ["#ffe354", "#ff9a32"],
 
+          //   tooltip: {
 
+          //     trigger: "axis",
 
+          //     axisPointer: {
 
+          //       // 坐标轴指示器，坐标轴触发有效
 
+          //       type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 
+          //     },
 
+          //     formatter: function(params) {
 
+          //       // 改鼠标悬浮提示值格式
 
+          //       var relVal = params[0].name + "<br/>";
 
+          //       relVal +=
 
+          //         params[0].seriesName + " : " + params[0].value + "<br/>";
 
+          //       relVal +=
 
+          //         params[1].seriesName + " : " + -params[1].value + "<br/>";
 
+          //       return relVal;
 
+          //     }
 
+          //   },
 
+          //   legend: {
 
+          //     data: ["男", "女"]
 
+          //   },
 
+          //   grid: {
 
+          //     left: "2%",
 
+          //     right: "4%",
 
+          //     bottom: "3%",
 
+          //     containLabel: true
 
+          //   },
 
+          //   xAxis: [
 
+          //     {
 
+          //       type: "value",
 
+          //       axisLabel: {
 
+          //         formatter: function(value) {
 
+          //           if (value < 0) {
 
+          //             return -value;
 
+          //           } else {
 
+          //             return value;
 
+          //           }
 
+          //         }
 
+          //       },
 
+          //       axisLine: {
 
+          //         lineStyle: {
 
+          //           color: "#ffffff"
 
+          //         }
 
+          //       }
 
+          //     }
 
+          //   ],
 
+          //   yAxis: [
 
+          //     {
 
+          //       name: "(万/人)",
 
+          //       position: "left",
 
+          //       type: "category",
 
+          //       axisTick: { show: false },
 
+          //       axisLine: {
 
+          //         show: true,
 
+          //         lineStyle: {
 
+          //           color: "#ffffff"
 
+          //         }
 
+          //       },
 
+          //       data: ["100", "200", "300", "400", "500", "600", "700"]
 
+          //     }
 
+          //   ],
 
+          //   series: [
 
+          //     {
 
+          //       name: "男",
 
+          //       type: "bar",
 
+          //       stack: "总量",
 
+          //       label: {
 
+          //         normal: {
 
+          //           show: true,
 
+          //           position: "right"
 
+          //         }
 
+          //       },
 
+          //       data: [320, 302, 241, 274, 290, 320, 302]
 
+          //     },
 
+          //     {
 
+          //       name: "女",
 
+          //       type: "bar",
 
+          //       stack: "总量",
 
+          //       label: {
 
+          //         normal: {
 
+          //           show: true,
 
+          //           position: "left",
 
+          //           formatter: function(value) {
 
+          //             if (value.data < 0) {
 
+          //               return -value.data;
 
+          //             }
 
+          //           }
 
+          //         }
 
+          //       },
 
+          //       data: [-120, -132, -101, -134, -190, -200, -210]
 
+          //     }
 
+          //   ]
 
+          // };
 
+          let peopleChart = echarts.init(document.querySelector("#people"));
 
+          let treeChart = echarts.init(document.querySelector("#people-tree"));
 
+  
+          peopleChart.setOption(option);
 
+          treeChart.setOption(treeOption);
 
+        })();
 
+        Array.from(document.querySelectorAll(".s2 .card")).forEach(
 
+          (dom, index) => {
 
+            dom.addEventListener("click", e => {
 
+              console.log("surveyClickHandle", index);
 
+              window.surveyClickHandle && window.surveyClickHandle(index)
 
+            });
 
+          }
 
+        );
 
+        let $zhishu = document.getElementById("zhishu");
 
+        let $chesu = document.getElementById("chesu");
 
+  
+        setInterval(() => {
 
+          $zhishu.innerHTML = ((Math.random() + 2) * 3).toFixed(1);
 
+          $chesu.innerHTML = ((Math.random() + 1) * 30).toFixed(1) + "km/h";
 
+        }, 2000);
 
+    </script>
 
+  </body>
 
+</html>

BIN
video/1.Ogg
Просмотреть файл


BIN
video/2.Ogg
Просмотреть файл


BIN
video/4.Ogg
Просмотреть файл