|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div class="app">
|
|
|
+ <div class="map">
|
|
|
+ <img src="@/assets/images/qkq_mapbg.png"/>
|
|
|
+ </div>
|
|
|
+ <!--头部开始-->
|
|
|
+ <div class="header">
|
|
|
+ <h1>城市运行一网统管指挥中心</h1>
|
|
|
+ </div>
|
|
|
+ <!--头部结束-->
|
|
|
+ <!--左侧开始-->
|
|
|
+ <div class="left_con">
|
|
|
+ <div class="top_txt">
|
|
|
+ <b>汽开区</b>
|
|
|
+ <span>小雨</span>
|
|
|
+ <span>9~16℃</span>
|
|
|
+ </div>
|
|
|
+ <!--土地资源-->
|
|
|
+ <div class="qkq_tdzy">
|
|
|
+ <div class="qkq_tit">土地资源</div>
|
|
|
+ <div class="qkq_tdzy_con">
|
|
|
+ <div class="dt_txt">
|
|
|
+ <h2>156.22</h2>
|
|
|
+ <h3>平方米</h3>
|
|
|
+ <h4>新增土地</h4>
|
|
|
+ <h5>20%</h5>
|
|
|
+ </div>
|
|
|
+ <div class="dt_con">
|
|
|
+ <div class="dt_con_c">
|
|
|
+ <h2>1056.22</h2>
|
|
|
+ <h3>平方米</h3>
|
|
|
+ <h4>土地总面积</h4>
|
|
|
+ </div>
|
|
|
+ <div class="dt_con_b">
|
|
|
+ <h4>40%</h4>
|
|
|
+ <p>环比</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dt_txt">
|
|
|
+ <h2>56.12</h2>
|
|
|
+ <h3>平方米</h3>
|
|
|
+ <h4>未归化土地</h4>
|
|
|
+ <h5>20%</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--营商环境-->
|
|
|
+ <div class="qkq_yshj">
|
|
|
+ <div class="qkq_tit">营商环境</div>
|
|
|
+ <div class="qkq_yshj_con">
|
|
|
+ <div id="yshj"></div>
|
|
|
+ <div class="qkq_yshj_list">
|
|
|
+ <p>规上入统<span>1000</span></p>
|
|
|
+ <p>大型企业<span>1000</span></p>
|
|
|
+ <p>中型企业<span>1000</span></p>
|
|
|
+ <p>小型企业<span>1000</span></p>
|
|
|
+ <p>微型企业<span>1000</span></p>
|
|
|
+ <p>汽配产业<span>1000</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--网格管理-->
|
|
|
+ <div class="qkq_wggl">
|
|
|
+ <div class="qkq_tit">网格管理</div>
|
|
|
+ <div id="wggl"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--左侧结束-->
|
|
|
+ <!--右侧开始-->
|
|
|
+ <div class="right_con">
|
|
|
+ <div class="top_txt">
|
|
|
+ <span>2024.04.20</span>
|
|
|
+ <span>星期六</span>
|
|
|
+ <b>11:16:58</b>
|
|
|
+ </div>
|
|
|
+ <!--党建引领-->
|
|
|
+ <div class="qkq_djyl">
|
|
|
+ <div class="qkq_tit">党建引领</div>
|
|
|
+ <div class="qkq_djyl_con">
|
|
|
+ <img src="@/assets/images/qkq_djyl.png"/>
|
|
|
+ <div class="qkq_list">
|
|
|
+ <p>
|
|
|
+ <span>党组织数量</span>
|
|
|
+ <i>12,136</i>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>党章党规数量</span>
|
|
|
+ <i class="blue">12,136</i>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>党组织活动</span>
|
|
|
+ <i class="green">12,136</i>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>心愿完成率</span>
|
|
|
+ <i class="org">98%</i>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--经济运行-->
|
|
|
+ <div class="qkq_jjyx">
|
|
|
+ <div class="qkq_tit">经济运行
|
|
|
+ <select id="mySelect">
|
|
|
+ <option value="option1">规上入统</option>
|
|
|
+ <option value="option2">大型企业</option>
|
|
|
+ <option value="option3">中型企业</option>
|
|
|
+ <option value="option4">小型企业</option>
|
|
|
+ <option value="option5">微型企业</option>
|
|
|
+ <option value="option6">汽配产业</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div id="jjyx"></div>
|
|
|
+ </div>
|
|
|
+ <!--事件信息-->
|
|
|
+ <div class="qkq_jjyx">
|
|
|
+ <div class="qkq_tit">事件信息</div>
|
|
|
+ <dl class="qkq_jjyx_list">
|
|
|
+ <dt>
|
|
|
+ <span>名称</span>
|
|
|
+ <span>时间</span>
|
|
|
+ <span>类型</span>
|
|
|
+ <span>状态</span>
|
|
|
+ </dt>
|
|
|
+ <div class="scro_list">
|
|
|
+ <dd>
|
|
|
+ <span>红旗小区垃圾桶溢满</span>
|
|
|
+ <span>2024-05-06</span>
|
|
|
+ <span>生活</span>
|
|
|
+ <span class="zt">待处理</span>
|
|
|
+ </dd>
|
|
|
+ <!-- 其他事件信息项 -->
|
|
|
+ </div>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--右侧结束-->
|
|
|
+ <!--中间地图 开始-->
|
|
|
+ <div class="qkq_mapcon">
|
|
|
+ <img src="@/assets/images/qkq_mapconbg.png"/>
|
|
|
+ <div class="qkq_map">
|
|
|
+ <a><i><img src="@/assets/images/qkq_icon1.png"/></i><span>视频融合</span></a>
|
|
|
+ <a><i><img src="@/assets/images/qkq_icon2.png"/></i><span>城市管理</span></a>
|
|
|
+ <a><i><img src="@/assets/images/qkq_icon3.png"/></i><span>交通治理</span></a>
|
|
|
+ <a><i><img src="@/assets/images/qkq_icon4.png"/></i><span>基层治理</span></a>
|
|
|
+ <a><i><img src="@/assets/images/qkq_icon5.png"/></i><span>营商环境</span></a>
|
|
|
+ <a><i><img src="@/assets/images/qkq_icon6.png"/></i><span>政务运行</span></a>
|
|
|
+ <a><i><img src="@/assets/images/qkq_icon7.png"/></i><span>安全应急</span></a>
|
|
|
+ <a><i><img src="@/assets/images/qkq_icon8.png"/></i><span>经济运行</span></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--中间地图 结束-->
|
|
|
+ <!--底部开始-->
|
|
|
+ <div class="footer">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!--底部开始-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import $ from 'jquery'
|
|
|
+import jQuery from 'jquery'
|
|
|
+import "@/assets/images/qkq_body.css";
|
|
|
+import "@/assets/images/qkq_index.css";
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'App',
|
|
|
+ mounted() {
|
|
|
+ // 页面加载后的操作
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 可以添加页面中需要的方法
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+/* 样式可以根据需要继续补充 */
|
|
|
+</style>
|
lchao