One , Effect display



Two , Resource download

1, Download Image Resources         click here <https://download.csdn.net/download/qq_21419015/10681135>

2,js+css File resource download   click here <https://download.csdn.net/download/qq_21419015/10681149>

Three ,Demo realization

1, The document structure is shown in the figure below :



2,Demo.html code
<!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> Visual large screen </title> <link
href="css/jquery-ui.css" rel="stylesheet" type="text/css" /> <link
href="css/main_design1.css" rel="stylesheet" type="text/css" /> <script
language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript"
src="js/echarts.js"></script> <script language="javascript"
type="text/javascript" src="js/china.js"></script> <script
language="javascript" type="text/javascript" src="js/geoCoord.js"></script>
<script language="javascript" type="text/javascript"
src="js/big_design1.js"></script> </head> <body> <div id="main"> <!-- Refresh -->
<div id="refresh"> <span id="refreshTime"> Current system time :</span> </div> <!-- Refresh end -->
<!-- Regional start --> <div id="currentYear">2000 year </div> <!-- Progress bar area start --> <div
id="y_gauge1"></div> <div id="y_gauge2"></div> <div id="y_gauge3"></div> <div
id="y_gauge4"></div> <!-- End of progress bar area --> <!-- Map begins --> <div id="map"></div> <!--
End of map --> <!-- End of year --> <!-- Month area start --> <div id="currentMonth">01 month </div> <!--
Progress bar area start --> <div id="m_gauge1"></div> <div id="m_gauge2"></div> <div
id="m_gauge3"></div> <div id="m_gauge4"></div> <!-- End of progress bar area --> <!-- Production quality demonstration begins -->
<div id="quality"></div> <!-- End of production quality display --> <!-- Production plan display begins --> <div
id="plan"></div> <!-- End of production plan display --> <!-- End of month area --> <!-- Start of day zone --> <div
id="currentDay">01 day </div> <!-- Progress bar area start --> <div id="d_gauge1"></div> <div
id="d_gauge2"></div> <div id="d_gauge3"></div> <div id="d_gauge4"></div> <!--
End of progress bar area --> <!-- Production situation display begins --> <div id="produce"> <table width="100%"
cellpadding="6" cellspacing="0"> <tr class="row1"> <td rowspan="2"><span
id="currentDate">2018/04/25</span></td> <td colspan="2">L Welding </td> <td
colspan="2">L Painting </td> <td colspan="2">L Final assembly </td> </tr> <tr class="row1">
<td> go online (HW1)</td> <td> Offline (HW3)</td> <td> go online (HT1)</td> <td> Offline (HA1)</td>
<td> go online (HA2)</td> <td> Offline (HA8)</td> </tr> <tr class="row2"> <td> All day plan </td>
<td>48</td> <td>48</td> <td>48</td> <td>48</td> <td>48</td> <td>48</td> </tr>
<tr class="row1"> <td> Plan for the day </td> <td>34</td> <td>34</td> <td>34</td> <td>34</td>
<td>34</td> <td>34</td> </tr> <tr class="row2"> <td> Current reality </td> <td>30</td>
<td>28</td> <td>28</td> <td>26</td> <td>25</td> <td>8</td> </tr> <tr
class="row1"> <td> difference </td> <td><span style="color:#FF0">-4</span></td> <td><span
style="color:#FF0">-4</span></td> <td><span style="color:#FF0">-6</span></td>
<td><span style="color:#FF0">-8</span></td> <td><span
style="color:#FF0">-9</span></td> <td><span style="color:#FF0">-26</span></td>
</tr> <tr class="row2"> <td>JPH</td> <td colspan="2">5.25</td> <td
colspan="2">5.45</td> <td colspan="2">5.45</td> </tr> <tr class="row1">
<td> Number of online units </td> <td colspan="2">22</td> <td colspan="2">65</td> <td
colspan="2">44</td> </tr> </table> </div> <!-- End of production display --> <!-- Dashboard area start --> <div
id="gauge1"></div> <div class="gaugeTitle" style="left:2200px;top:1250px;">
<sapn id="vg1">32</sapn> m<sup>3</sup>/d </div> <div id="gauge2"></div>
<div class="gaugeTitle" style="left:2550px;top:1250px;"> <sapn
id="vg2">32</sapn> KVA </div> <div id="gauge3"></div> <div
class="gaugeTitle" style="left:2910px;top:1250px;"> <sapn
id="vg3">32</sapn> Nm<sup>3</sup>/h </div> <div id="gauge4"></div> <div
class="gaugeTitle" style="left:2380px;top:1380px;"> <sapn
id="vg4">32</sapn> m<sup>3</sup>/m </div> <div id="gauge5"></div> <div
class="gaugeTitle" style="left:2730px;top:1380px;"> <sapn
id="vg5">32</sapn> t/h </div> <!-- End of dashboard area --> <!-- End of day zone --> <!-- Video start -->
<div id="video"> <!-- <object id="MediaPlayer"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="960" height="540"
standby="Loading Windows Media Player components…"
type="application/x-oleobject"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="FileName" value="video/rec008.avi"> <param name="AutoStart"
value="true"> <param name="ShowControls" value="false"> <param
name="BufferingTime" value="2"> <param name="ShowStatusBar" value="false">
<param name="AutoSize" value="true"> <param name="InvokeURLs" value="false">
<param name="AnimationatStart" value="1"> <param name="TransparentatStart"
value="1"> <param name="Loop" value="true"> <param name="MovieWindowHeight"
value="540"> <param name="MovieWindowWidth" value="960"> <embed
type="application/x-mplayer2" src="video/rec008.avi" name="MediaPlayer"
autostart="1" showstatusbar="0" showdisplay="1" showcontrols="0" loop="1"
videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
width="960" height="540"></embed> </object> --> <img src="images/index.gif"
width="960" height="540"> </div> <!-- End of video --> <!-- Surveillance video starts --> <div
id="Monitor"> <!-- <object id="MediaPlayer"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="960" height="540"
standby="Loading Windows Media Player components…"
type="application/x-oleobject"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="FileName" value="video/monitor.avi"> <param name="AutoStart"
value="true"> <param name="ShowControls" value="false"> <param
name="BufferingTime" value="2"> <param name="ShowStatusBar" value="false">
<param name="AutoSize" value="true"> <param name="InvokeURLs" value="false">
<param name="AnimationatStart" value="1"> <param name="TransparentatStart"
value="1"> <param name="Loop" value="true"> <embed
type="application/x-mplayer2" src="video/monitor.avi" name="MediaPlayer"
autostart="1" showstatusbar="0" showdisplay="1" showcontrols="0" loop="1"
videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
width="640" height="360"></embed> </object> --> <img src="images/index1.gif"
width="960" height="540"> </div> <!-- End of surveillance video --> </div> </body> </html>
Source code download address : Jab here <https://download.csdn.net/download/qq_21419015/10681178>